FrontEnd 기본 지식

주요 JS 라이브러리 비교

• Angular는 framework이지만 자주 사용되기 때문에 넣었습니다.

특징	React	Angular	Vue.js	Svelte
아키텍처	라이브러리, 컴포넌트 기반	완전한 프레임워크, 컴포넌트 기반	라이브러리, 컴포넌트 기반	컴파일러 기반, 컴포넌트 기반
러닝 커브	중간	높음	낮음	중간
성능	가상 DOM 사용, 빠름	가상 DOM 미사용, 성능 최적화 필요	반응성 시스템, 적당함	컴파일러 기반, 매우 빠름
유연성	높음	중간	높음	높음
타입 지원	TypeScript 지원 가능	기본적으로 TypeScript 사용	선택적 TypeScript 사용	선택적 TypeScript 사용
생태계	매우 풍부	매우 풍부	풍부	제한적
커뮤니티	매우 크고 활발	매우 크고 활발	크고 활발	작고 성장 중

React의 주요 특징

특징	설명
컴포넌트 기반 아키텍쳐	유지 보수성을 높이고, 복잡한 UI 관리
가상 DOM	실제 DOM 변경 최소화, 성능 최적화
단방향 데이터 흐름	디버깅 강점
JSX	HTML과 JS 결합 사용

Flexbox vs Grid

특징	Flexbox	Grid
차원	1차원 레이아웃	2차원 레이아웃
사용 목적	단일 축 아이템 정렬	복잡한 행과 열 레이아웃 설계
유연성	작은 컴포넌트 레이아웃	전체 페이지 및 복잡한 구조

RESTful vs GraphQL

특징	RESTful	GraphQL
데이터 요청	고정된 엔드포인트, 여러 요청	단일 엔드포인트, 한 번의 요청
데이터 형식	JSON 주로 사용	JSON 형식, 스키마 사용
유연성	필요한 데이터만 받을 수 없음	필요한 데이터만 요청 가능

상태관리 라이브러리

특징	Redux Toolkit	Zustand
작성 방식	보일러플레이트 코드 많음	간결한 코드
유연성	미들웨어 지원, 복잡한 상태 관리	심플한 상태 관리

Next.js 웹 성능 최적화 기법

기법	설명
Next.js Image	이미지 최적화
코드 스플리팅	불필요한 코드 제거
레이지 로딩	필요한 순간에만 로드
트리 쉐이킹	미사용 코드 제거(기본 활성화)
최소화	코드 최소화(기본 활성화)
압축	파일 압축(기본 활성화)

이벤트 버블링과 캡처링

개념	설명
이벤트 버블링	하위 요소에서 상위 요소로 이벤트 전파
이벤트 캡처링	상위 요소에서 하위 요소로 이벤트 전파

Static Generation vs SSR

개념	설명
Static Generation	빌드 시 HTML 생성, 빠른 로드
Server-Side Rendering	요청 시 HTML 생성, 최신 데이터

CSR vs SSR

특징	CSR (Client-Side Rendering)	SSR (Server-Side Rendering)
렌더링 위치	클라이언트	서버
초기 로드 속도	느림	빠름
SEO	낮음	높음
유연성	높음	중간

렌더링 과정

단계	설명
1. 브라우저 요청	URL 입력, 브라우저가 서버에 요청
2. 서버 응답	HTML, CSS, JS 파일 전달
3. 브라우저 파싱	HTML 파싱 후 DOM 트리 생성, CSSOM 트리 생성
4. 렌더 트리 생성	DOM + CSSOM 합쳐서 렌더 트리 생성
5. 레이아웃	렌더 트리를 기반으로 요소 위치 계산
6. 페인트	화면에 픽셀로 렌더링

Webpack vs Vite

특징	Webpack	Vite
번들링 방식	전통적 번들러	개발 시 미니멀 번들링, 프로덕션 시 번들링
속도	느림	빠름
설정	복잡함	간단함
HMR (Hot Module Replacement)	있음	더 빠름

Hot Module Replacement (HMR)

개념	설명
HMR	모듈이 변경될 때 전체 페이지를 새로 고침하지 않고도 런타임 중에 모듈을 교체할 수 있는 기능

Virtual DOM이란?

개념	설명
Virtual DOM	가상 메모리에서 실제 DOM의 사본을 만들어 변경 사항을 반영 후, 최소한의 변경만 실제 DOM에 적용

React의 상태 관리 방법

방법	설명
useState	컴포넌트 내부 상태 관리
useReducer	복잡한 상태 로직 관리
Context API	전역 상태 관리

CSS-in-JS의 장점과 단점

측면	장점	단점
장점	동적 스타일링 가능, 스코프 문제 해결	런타임 오버헤드, 스타일링 로직이 JS에 포함

프로미스(Promise)와 async/await 비교

측면	Promise	async/await
가독성	낮음	높음
에러 처리	then, catch	try, catch

• 단, 다수의 비동기 처리를 할때는 Promise.all()을 사용하는게 좋습니다.

CORS란?

개념	설명
CORS	다른 도메인에서 자원에 접근할 때 발생하는 보안 정책

웹 접근성이란?

개념	설명
웹 접근성	장애를 가진 사람들이 웹 콘텐츠에 접근할 수 있도록 설계하는 방법

Throttling과 Debouncing

측면	Throttling	Debouncing
동작 원리	정해진 시간 간격마다 함수 실행	지정된 시간 동안 호출이 없으면 함수 실행
사용 예	스크롤 이벤트	검색 입력