Development

Firebase는 인증·데이터베이스·호스팅 같은 앱의 필수 백엔드 기능을 서버 없이 바로 쓰게 해주는 Google의 올인원 개발 플랫폼

React Router DOM은 SPA 환경에서 History API를 기반으로 URL과 컴포넌트를 연결해, 새로고침 없이 페이지 전환·중첩 레이아웃·동적 라우팅까지 일관되게 관리할 수 있게 해주는 React 공식 라우팅 솔루션

리액트에서는 상태(state)가 UI를 결정하고, 이벤트는 상태만 변경하며, UI 변화는 조건부 렌더링을 통해 자동으로 따라온다

React에서 렌더링 문제는 대부분 데이터가 아니라 참조를 잘못 다룬 문제다

클릭 이벤트는 props로 아래로 전달되고, key로 리스트를 구분하며, stepNumber로 현재 위치를 바꿔 history를 잘라 새 상태를 만들어 React 시간여행을 구현한다

React 16.8의 Hooks(useState, useEffect 등)는 클래스형 컴포넌트의 복잡한 생명주기와 상태 관리를 함수형으로 통합하여, 코드의 가독성과 로직의 재사용성을 극대화하고 더 직관적인 설계를 가능하게 한다

서버가 React로 HTML을 먼저 만들고, 브라우저는 그 HTML을 받아서 hydrate로 React 앱으로 되살린다

서버가 React로 HTML을 먼저 만들고, 브라우저는 그 HTML을 받아서 hydrate로 React 앱으로 되살린다

서버가 React로 HTML을 먼저 만들고, 브라우저는 그 HTML을 받아서 hydrate로 React 앱으로 되살린다

리액트 훅은 “API 사용법”이 아니라, 클로저·참조 비교·함수 재실행이라는 자바스크립트 원리 위에서 렌더링과 부수효과를 의도적으로 제어하기 위한 설계 도구

타입스크립트는 자바스크립트의 유연함은 유지하면서, 타입을 통해 런타임 에러를 작성 단계에서 미리 차단해 대규모·실무 개발을 안전하게 만들어주는 언어

리액트는 JSX를 객체화하고 파이버(Fiber) 아키텍처 기반의 가상 DOM 재조정을 통해, UI 업데이트를 효율적으로 스케줄링하고 렌더링 성능을 최적화하는 라이브러리

리액트는 자바스크립트의 동등 비교(Object.is 기반 얕은 비교)로 값이 아닌 참조의 변경 여부를 감지해 렌더링을 결정하기 때문에, 객체·함수의 참조 안정성이 곧 렌더링 성능을 좌우함

모듈이란 애플리케이션을 구성하는 개별적 요소로서, 기능을 기준으로 파일 단위로 분리되어 독자적인 스코프를 갖는 재사용 가능한 코드 조각

자바스크립트의 에러 처리는 에러를 없애는 것이 아니라, try...catch, throw, 그리고 전파 규칙을 이해해 동기·비동기 상황에서도 프로그램의 실행 흐름을 통제하는 것

제너레이터와 async/await는 실행을 중단·재개하며 비동기 흐름과 이터레이션을 제어하기 위한 자바스크립트의 제어 추상화 개념

Promise를 통한 비동기 흐름의 구조화, async/await에 의한 가독성 개선, 그리고 fetch를 통한 HTTP 통신과 에러 판단의 명확한 책임 분리

REST API는 HTTP 프로토콜의 장점을 최대한 활용하여 자원(URI), 행위(Method), 표현(JSON)을 통해 데이터를 주고받는 웹 설계 아키텍처

Ajax는 서버와 비동기 통신을 통해 웹 페이지를 새로고침하지 않고 필요한 데이터만 갱신하는 기술

비동기란 동시에 실행하는 기술이 아니라 기다리지 않도록 설계된 실행 구조

타이머 기반 제어는 조건문이 아니라 시간과 상태의 누적 결과로 동작한다.

이벤트는 사용자나 시스템의 변화가 발생했음을 브라우저가 감지하고, 미리 등록된 핸들러를 호출해 프로그램의 흐름을 결정하는 메커니즘

DOM은 HTML 문서를 객체 트리로 표현한 구조로, 자바스크립트가 웹 페이지를 동적으로 조작

브라우저는 리소스 수신, 렌더 트리 생성, 화면 출력 과정을 거쳐 렌더링 수행

다양한 데이터 구조를 공통된 반복 방식으로 순회할 수 있도록 해주는 프로토콜

다양한 데이터 구조를 공통된 반복 방식으로 순회할 수 있도록 해주는 프로토콜

다양한 데이터 구조를 공통된 반복 방식으로 순회할 수 있도록 해주는 프로토콜

다양한 데이터 구조를 공통된 반복 방식으로 순회할 수 있도록 해주는 프로토콜

고유하고 충돌이 없는 식별자

해시맵을 사용해 ID와 닉네임을 저장하고, 기록을 두 번 순회하는 방식으로 최적화된 출력을 생성

표준 빌트인 객체 String

효율적인 패턴 매칭과 문자열 처리, 정규표현식

숫자형이지만 수학적으로 유효한 숫자가 아닌 값, NaN

해시 테이블을 활용한 데이터 카운팅

배열에 대해서 알아보자

해시 테이블을 활용한 데이터 카운팅

ES6의 추가기능

문자열의 해시값을 이용해 효율적으로 문자열 포함 여부를 확인하는 방법을 학습

객체를 생성하고 상속을 관리하기 위한 간결한 문법적 표현이자 프로토타입 기반 상속을 추상화하여 객체 지향 프로그래밍(OOP), 클래스

함수와 그 함수가 선언한 렉시컬 환경의 조합, 클로저

효율적인 해시 기반 접근을 통해 두 숫자의 합이 특정 값(target)이 되는지를 빠르게 판단

큐를 활용한 규칙과 순서를 정확히 이해하고, 이를 효율적으로 구현

함수의 호출 방식에 따라 this가 참조하는 값이 결정되는 this 바인딩

함수의 호출 방식에 따라 this가 참조하는 값이 결정되는 this 바인딩

객체가 상속을 통해 다른 객체의 속성과 메서드를 공유할 수 있도록 연결하는 메커니즘, 프로토타입

자바스크립트 함수의 일급객체로서의 의미는 무엇일까

큐를 활용한 작업 완료 시점에 따라 작업들을 배포 묶음으로 나누는 로직을 설계

객체리터럴 외의 생성자 함수에 의한 객체 생성방식를 이해해보자

객체리터럴 외의 생성자 함수에 의한 객체 생성방식를 이해해보자

객체리터럴 외의 생성자 함수에 의한 객체 생성방식를 이해해보자

객체리터럴 외의 생성자 함수에 의한 객체 생성방식를 이해해보자

객체리터럴 외의 생성자 함수에 의한 객체 생성방식를 이해해보자

객체리터럴 외의 생성자 함수에 의한 객체 생성방식를 이해해보자

링크드 리스트와 스택을 활용해 대량 데이터의 삭제, 복원, 이동 작업을 효율적으로 처리하는 설계 이해

링크드 리스트와 스택을 활용해 대량 데이터의 삭제, 복원, 이동 작업을 효율적으로 처리하는 설계 이해

내부 슬롯과 내부 메서드를 통해 프로퍼티 어트리뷰트를 이해해보자

변수 선언에 const, let을 사용해야 하는 이유

스택의 LIFO 구조의 이해를 바탕으로 데이터의 상태 변화와 효율적인 처리 방법

전역변수의 문제점과 대응 방안 탐구

효율적인 시간복잡도를 고려한 문제해결방법(feat. 스택)

스택 자료구조를 사용한 효율적인 패턴 처리와 최종 상태를 확인

스택의 LIFO(후입선출)를 이해해보자

스택을 활용하여 괄호의 짝을 맞추는 방법

스코프, 유효범위에 대해서 탐구해보자

스택을 이해하고 스택을 이용하여 괄호짝 맞추기

방문한 고유한 경로의 수를 계산

원시값과 객체 비교, 원시 타입과 객체 타입은 구체적으로 어떻게 다를까?

도달한 사용자 수와 실패율을 정확하게 계산하고, 이를 효율적으로 정렬하여 올바른 순서로 스테이지를 반환

원시값과 객체 비교, 원시 타입과 객체 타입은 구체적으로 어떻게 다를까?

객체 리터럴, 객체란 무엇인지 찬찬히 음미해보고자 한다.

행렬의 곱셈을 통해 행렬의 구조를 이해

타입 변환과 단축평가, 자바스크립트의 타입변환과 단축평가에 대해서 알아보자

패턴과 일치 불일치 확인

숫자배열에서 서로 다른 두 수를 더해서 오름차순 정렬하기

연산자, 다양한 연산자에 대해 살펴보자

배열 중복값을 제거하고 내림차순 정렬해보자

데이터 타입, 자바스크립트가 제공하는 데이터 타입의 특징을 살펴보자

배열 정렬하기, 제약조건의 중요성과 sort 메서드 이해하기

표현식, 값이라는 용어를 명확하게 이해해보자.

변수, 변수란 무엇이며, 왜 존재하는지, 엔진은 변수를 어떻게 선언하는지를 통해 변수를 이해해보자.