React 프론트엔드 개발자를 위한 CS 지식 심화 정리
1. HTML/CSS 기본 및 렌더링 메커니즘
HTML은 웹 페이지의 구조를 정의하는 마크업 언어다. <div>, <header>, <section> 같은 태그를 사용해 콘텐츠를 의미 단위로 나눌 수 있다.
시맨틱 태그는 검색 엔진이 페이지 구조를 이해하는 데 도움을 주며, 스크린 리더 같은 접근성 도구에도 유리하다.
CSS는 시각적인 스타일을 지정하기 위한 언어로, 선택자를 통해 특정 요소를 선택하고 색상, 여백, 레이아웃 등을 설정한다.
스타일 우선순위와 박스 모델을 정확히 이해하지 못하면, 원하지 않는 스타일 충돌이나 레이아웃 깨짐이 발생할 수 있다.
렌더링 메커니즘은 HTML을 파싱해 DOM 트리를 만들고, CSS를 파싱해 CSSOM을 만든 뒤 이 둘을 결합해 Render Tree를 생성한다. 이후 Layout → Paint → Composite 단계를 통해 브라우저 화면에 그려진다
렌더링 메커니즘:
HTML → DOM
CSS → CSSOM
이 과정을 이해하면 reflow, repaint 발생 시점과 성능 최적화 포인트를 파악할 수 있다.
2. Closure / Scope / Hoisting
스코프(Scope): 변수나 함수가 유효한 범위
var: 함수 스코프
let, const: 블록 스코프
전역과 지역 스코프를 명확히 구분해야 변수 충돌이나 예기치 않은 동작을 방지할 수 있다.
클로저(Closure): 함수가 외부 렉시컬 환경을 기억하는 구조
React의 useCallback, useEffect에서 종종 stale closure 문제가 발생
호이스팅(Hoisting): 변수와 함수 선언이 실행 전에 끌어올려지는 JS 특성
var: undefined로 초기화
let, const: TDZ(Temporal Dead Zone)로 인해 선언 전 참조 시 오류 발생
3. Event Loop & Call Stack
JavaScript는 싱글 스레드 기반 언어지만, 비동기 처리를 위해 Event Loop 구조를 사용한다.
Call Stack: 함수 실행 순서 관리
Task Queue: setTimeout 등의 비동기 작업 대기
Microtask Queue: Promise.then 등 더 높은 우선순위
Event Loop는 Call Stack이 비면 Microtask → Macro Task 순으로 작업을 실행한다.
4. this 바인딩
일반 함수: 전역 객체 (window), strict 모드에서는 undefined
객체 메서드: 해당 객체
생성자 함수: 생성된 인스턴스
화살표 함수: 선언 당시의 this 계승
React 클래스형 컴포넌트에서 this.method = this.method.bind(this) 형태로 바인딩 필요.
함수형 컴포넌트에서는 화살표 함수로 this 이슈 회피.
5. Promise / async-await / Microtask Queue
Promise: 비동기 상태 관리 객체
async/await: 가독성 높고 예외 처리 간편
후속 처리 .then, .catch는 Microtask Queue에 등록 → setTimeout보다 먼저 실행됨
6. DOM 구조 및 조작 원리
DOM은 HTML 문서를 트리 구조로 표현한 객체 모델이다.
querySelector, appendChild 등으로 조작 가능
React는 직접 조작 대신 Virtual DOM을 통해 최소한의 변경만 수행 → 성능 최적화
7. HTTP/HTTPS 및 RESTful API
HTTP: 텍스트 기반의 요청/응답 프로토콜
HTTPS: 암호화(SSL/TLS)된 HTTP
RESTful API: 자원 중심 설계, GET, POST, PUT, DELETE 등 HTTP 메서드 사용
8. 브라우저 렌더링 과정
- HTML 파싱 → DOM
- CSS 파싱 → CSSOM
- Render Tree 생성
- Layout → Paint → Composite → 화면 출력
<script> 위치, async, defer 등은 성능에 영향.
9. Webpack / Babel
Webpack: 모듈 번들러, Tree-shaking, Code splitting 지원
Babel: 최신 JS 문법(ES6, JSX)을 구형 브라우저 호환 코드로 변환
10. 상태 관리 원리 (Redux, Context API)
Redux: 전역 상태 관리, store / action / reducer 구조
Context API: 간단한 전역 상태 전달에 적합. useContext, Provider 사용
11. CSR vs SSR vs SSG
CSR: 클라이언트에서 렌더링, 상호작용 빠름
SSR: 서버에서 HTML 생성, 초기 렌더링 빠름, SEO 유리
SSG: 정적 HTML 생성, 속도 매우 빠름
→ Next.js는 3가지 렌더링 방식 모두 지원
12. 이벤트 버블링 & 캡처링
기본: 버블링 (하위 → 상위)
캡처링: addEventListener의 3번째 인자를 true로 설정
React: SyntheticEvent로 버블링 기반 처리 → e.stopPropagation()으로 전파 제어 가능
13. CORS 정책
브라우저는 보안을 위해 다른 Origin으로의 요청을 차단.
서버에 Access-Control-Allow-Origin 헤더가 있어야 통신 가능.
개발 중에는 Proxy 설정 등으로 해결.
14. 자바스크립트 실행 문맥
실행 컨텍스트: 변수, 함수, 스코프 정보를 담은 객체
전역 컨텍스트, 함수 컨텍스트가 Execution Stack으로 관리됨
내부 구성: Variable Environment, Lexical Environment, this 등
15. 자바스크립트 병렬 처리
JS는 싱글 스레드지만, Web API & Event Loop 활용
대표 비동기 처리: setTimeout, fetch, Promise, Web Worker
Web Worker: 별도 스레드에서 무거운 작업 처리 가능
16. React 상태 불변성
React는 상태 변경을 얕은 비교로 판단
→ 기존 객체를 직접 수정하면 리렌더링 안 됨
// ❌ 잘못된 방식
state.todos.push(newTodo);
// ✅ 올바른 방식
setTodos([...state.todos, newTodo]);
이 원칙을 지키면 React의 성능 최적화와 컴포넌트 재사용성이 올라가며, 버그 발생 가능성도 줄어든다.
이 문서를 PDF로 다운로드하려면 아래 링크를 클릭하세요.