JavaScript
-
[JavaScript] 정규 표현식 (Regex)JavaScript 2026.01.08 20:00
정규 표현식 ( Regular Expression ): 특정 조합의 텍스트 (Text) 를 찾기 위한 패턴: 줄여서 RegExp 또는 Regex 로 표현 선언 방식1. 단순 선언const regex = /패턴/플래그 // 패턴구분자 (/) : 패턴과 플래그를 구분2. RegExp 생성자 사용const regex = new RegExp(패턴, 플래그) 사용 방법1. String 객체의 메서드- match(), matchAll(), replace(), replaceAll(), search(), split()const matchResult = value.match(regex)const replaceResult = value.replace(regex, "")const searchResult = value.sea..
-
[ETC] Glob PatternETC 2026.01.09 17:31
Glob Pattern: 특정 조합의 파일명을 찾기 위한 패턴 ( Globbing ): 정규 표현식 과 유사한 형태를 가진다.: \ 와 / 는 탐색 기준에 포함하지 않는다. ( \ , / : 파일 경로를 구성하는 기호 )구성 요소개수 탐색 요소기호동일한 Regex 패턴설명*.*0 개 이상?. ( WildCard )아무 문자 1 개 (공백 포함) 조건 탐색 요소기호동일한 Regex 패턴설명[abc] = [a-c]동일여러 개의 OR 을 하나로 통합대괄호 ( [ ] ) 안의 문자 중 하나를 가진다.[!abc] = [!a-c][^abc] = [^a-c]대괄호 ( [ ] ) 안의 문자를 모두 가지지 않는다.{ a , b }a | b여러 개의 OR 을 하나로 통합*.{docx, xlsx} 소괄호 ( ): 특정 패턴..
-
[JavaScript] 변수 & 데이터 타입JavaScript 2024.08.05 18:25
변수 (Variable)변수(Variable)의 주요 개념- 변수 선언(Declaration) : 자바스크립트 엔진에 변수 객체를 등록하는 것- 변수 초기화(Initiailization) : 변수에 메모리 공간을 할당하는 것- 변수 할당(Assignment) : 변수에 값을 저장하는 것 - 변수 참조(Reference) : 변수에 할당된 값을 읽어오는 것 변수의 선언과 할당let a; // 변수 선언a = "hello"; // 변수 할당let a = "hello"; // 변수 초기화(=선언&할당) 변수 선언 키워드 varletconst단순 선언가능가능불가능동일 이름 재선언가능불가능불가능변수 재할당(덮어쓰기)가능가능눌가능 // varvar myVar; // 단순 선언 가능myVar = "hi";c..
-
[JavaScript] 주요 내장 객체 (문자열, 객체, 배열) 메서드JavaScript 2024.08.09 13:15
문자열 (String)속성/메서드설명s.toLowerCase()문자열 s를 소문자로 변환s.toUpperCase()문자열 s를 대문자로 변환s.charAt(n)문자열 s의 index[n]의 문자s.charCodeAt(n)문자열 s의 index[n]의 문자의 UTF-16 코드String.fromCharCode(x)UTF-16 코드 x의 문자const s1 = "ABCDEF";const s2 = "abcdef";s1.toLowerCase(); // abcdefs2.toUpperCase(); // ABCDEFs1.charAt(2); // Cs2.charCodeAt(2); // 99String.fromCharCode(100); // d속성/메서드설명s.indexOf(x)문자열 s에서 x와 일치하는 가장..
-
[JavaScript] ES6 이후 주요 문법JavaScript 2024.08.12 14:30
템플릿 리터럴 (Template Literals)문자열의 새로운 표현 방식큰따옴표(")나 작은따옴표(')가 아닌 백틱(`)을 사용문자열 내부에서 줄바꿈이 가능`It is possible to use multi-line if you use Template literals`${}을 사용하여 문자열 내부에 표현식을 표기할 수 있음const ECMA = "ES";const num = 6;const name = "Template literals";`After ${ECMA+num}, you can put data inside with ${name}`;// After ES6, you can put data inside with Template literals단축 속성명 (Shorthand property names)..
-
[JavaScript] 비동기 (Asynchronous)JavaScript 2024.08.22 20:25
동기 vs 비동기동기(Synchronous)비동기(Asynchronous)요청과 응답이 순차적으로 발생요청과 응답이 비순차적으로 발생요청에 대한 응답이 올 때까지 대기한 후다음 요청 및 작업을 수행요청에 대한 응답을 기다리지 않고바로 다음 요청 및 작업을 수행 동기적 처리(Synchronous Processing)는 작업의 처리 순서는 보장되지만, 응답을 기다리는 동안 다른 작업을 수행할 수 없기 때문에 비효율적일 수 있음비동기 작업을 동기적으로 처리하는 방법콜백(Callback) 함수콜백(callback) 함수 : 다른 함수의 인자로 들어가는 함수 각 비동기 함수들을 콜백 함수 형태로 중첩적으로 작성const test = () => { setTimeout(() => { console.log("작..
React
-
[React] 컴포넌트 (Component)React 2025.12.19 22:50
우리가 보고 이용하는 페이지에는 다양한 요소들이 포함되어 있다. 아래 페이지를 예시로 들어보자. 이 페이지에 보이는 부분은 다음과 같다.위치요소좌측 상단Google 정보, 스토어 우측 상단Gmail, 이미지, 실험실, 메뉴, MyPage중앙로고, 검색창, 입력 도구, AI 모드, 검색버튼, I'm Feeling Lucky하단국가명, 광고, 비즈니스, 검색의 원리, 개인정보처리방침, 약관 설정 각 요소들은 모두 다른 역할을 수행한다. 하지만 각 위치에 속하는 요소들은 모두 비슷한 형태를 가지고 있다. 여기서 우리는 컴포넌트의 정의와 특성을 알 수 있다.컴포넌트 (Component): 특정 기능* 을 수행하는 독립적인 모듈 (* 특정 기능 : 비즈니스 로직 처리, UI 구성 등): 재사용이 가능함 버튼(Bu..
-
[React] StateReact 2025.12.26 20:20
Props 의 한계기존의 Props 를 사용하면, 하나의 컴포넌트 파일을 사용하여 내용만 다른 여러 개의 컴포넌트를 만들 수 있다. 하지만 props 자체로는 몇 가지 한계가 존재한다.내용을 설정하기 위해서는 반드시 상위 컴포넌트에서 값을 내려받아야 한다.상위 컴포넌트로부터 받은 값은 수정할 수 없다. 이를 보완하기 위한 방식이 바로 State 다.StateReact 컴포넌트 내부에서 동적으로 사용 및 관리되는 데이터(값) 특징관리하고자 하는 컴포넌트의 내부에서 선언된다.값은 얼마든지 수정 가능하며, 초기값 설정이 가능하다.값이 변경되면, 화면이 새로 렌더링(Rendering) 된다.State 의 선언 및 관리 방식 대표적인 방식으로 useState 와 useReducer 가 있다. useState: 일..
-
[React] DOM & 렌더링 (Rendering)React 2025.12.29 17:38
DOM ( Document Object Model ): 웹 페이지의 컴포넌트 구조 (= 태그) 를 트리(Tree) 형태로 표현한 모델DOM 주요 용어- 문서 (Document) : 웹 페이지 / 화면- 요소 (Element) : 페이지 / 화면을 구성하는 컴포넌트- 노드 (Node) : 트리의 각 요소 : 상위 Element 는 하위 Element 를 포함하고 있다.렌더링 ( Rendering )화면에 출력시킬 UI 컴포넌트를 구성하는 작업 종류초기 렌더링이후 렌더링 (= 리렌더링 ( Re-Rendering ))렌더링 절차1. 렌더링 트리거 ( Rendering Trigger ) - 렌더링 유발2. 컴포넌트 렌더링 ( Component Rendering ) - 렌더링 수행3. DOM 커밋 ( DOM Co..
Algorithm Solving
-
[ETC] JavaScript로 코딩 문제 풀기 (a.k.a. 콘솔 I/O 처리)ETC 2025.12.07 18:18
코딩 문제 중에는 입력부터 출력까지 모두 구현해야 하는 문제가 있다. ( 대표적으로 백준 이 있다.)백준 (Baekjoon): https://www.acmicpc.net/: 대표적인 알고리즘 문제은행 사이트주요 언어의 콘솔 입력/출력 처리 방식언어 계열입력출력C scanf cin printf coutJavaScanner(System.in)System.outPythoninputprintJavaScript?????? 일반적으로 JavaScript는 웹 브라우저에서 처리된다.그렇기 때문에 보통 입력은 태그나 prompt 메서드를 사용하고, 출력은 console.log 를 사용했다. 마찬가지로 콘솔에서의 출력은 console.log 를 사용한다. 이름부터가 console 이니 당연하다. 문제는 입력이다. co..
-
[문제풀이 후기] LeetCode #3898 - Find the Degree of Each VertexLeetcode 2026.04.17 17:40
https://leetcode.com/problems/find-the-degree-of-each-vertex/ Find the Degree of Each Vertex - LeetCodeCan you solve this real interview question? Find the Degree of Each Vertex - You are given a 2D integer array matrix of size n x n representing the adjacency matrix of an undirected graph with n vertices labeled from 0 to n - 1. * matrix[i][j] = 1 indicateleetcode.com 문제 포인트주요 키워드Vertex : 각 정점 ..
-
[문제풀이 후기] 프로그래머스 #140108 - 문자열 나누기Programmers 2026.04.17 17:10
https://school.programmers.co.kr/learn/courses/30/lessons/140108 기본 상위 코드const s = "aaabbaccccabba";let result = 0;let target = ""; 첫 번째 시도 (결과 : 성공) 접근 방식1. target 문자의 개수와 target 문자가 아닌 문자의 개수를 각각 count1, count2 로 설정2. 문자열의 각 문자를 순회 2-1. count1 이 0 이면, 현재 문자를 target 문자로 설정하고 count1 을 1 증가 2-2. count1 이 0 이 아니면, target 문자와 현재 문자를 비교하여 일치하는 count 를 1 증가3. count1 === count2 가 되면, 최종 result 를 1 증..
-
[문제풀이 후기] 프로그래머스 #42889 - 실패율Programmers 2026.04.17 16:41
https://school.programmers.co.kr/learn/courses/30/lessons/42889 기본 상위 코드const N = 5;const stages = [2, 1, 2, 6, 2, 4, 3, 3];const result = []; // 결과 배열 첫 번째 시도 (결과 : 성공) 접근 방식1. stage 도달 인원, stage 미완료 인원 수 각각 계산2. 실패율 계산 후, result 에 stage 번호와 함께 push3. 실패율 및 stage 번호를 기준으로 정렬for (let i = 1; i stage >= i); // stage 도달 인원 const currentStage = overStage.filter((stage) => stage === i); // stage 미완..
-
[문제풀이 후기] 프로그래머스 #12977 - 소수 만들기Programmers 2026.04.07 20:02
https://school.programmers.co.kr/learn/courses/30/lessons/12977 기본 상위 코드const nums = [1, 2, 7, 6, 4];let count = 0; // 결과값/** * @description 소수 배열 생성 함수 * @param {number} num 배열의 최대 index * @returns 결과 배열 (true: 소수) */const getPrimeArray = (num) => { const array = new Array(num + 1).fill(true); array[0] = false; array[1] = false; for (let i = 2; i * i 첫 번째 시도 (결과 : 실패) 접근 방식1. nums 의 최대값 3개..
-
[문제풀이 후기] 백준 #18691 - Pokemon BuddyBaekjoon 2026.04.07 19:23
https://www.acmicpc.net/problem/18691 문제 요약'포켓몬 고' 의 새로운 업데이트 'Buddy'1. Buddy 포켓몬과 함께 일정 거리를 다니면 Candy 를 준다.2. Candy 는 포켓몬의 진화에 사용된다.3. Buddy 포켓몬은 3개의 Group 으로 나뉜다.4. 각 Group 의 Candy 지급 기준은 다음과 같다.- Group 1 : 이동 거리 1 km 당 Candy 1 개- Group 2 : 이동 거리 3 km 당 Candy 1 개- Group 3 : 이동 거리 5 km 당 Candy 1 개입력값: G ( Group 번호 ) / C ( 현재 보유 Candy 개수 ) / E ( 포켓몬의 진화에 필요한 Candy 개수)출력값: 포켓몬의 진화를 위해 다녀야 하는 거리 (..