웹 개발 시험 대비

HTML · CSS · JavaScript · React / Next.js — 개념 정리 & 객관식 연습문제 50제

Part 1. HTML

1.1 문서 구조 & 시맨틱
  • 문서 구조 순서: <!DOCTYPE html> → <html> → <head>(메타정보) / <body>(렌더링 콘텐츠)
  • 제목 태그 h1~h6: 숫자가 작을수록 상위 제목(위계 구조). 크기 조절 용도로 남용하지 말 것.
  • 시맨틱 태그: q(짧은 인라인 인용, 자동 따옴표) vs blockquote(블록 단위 인용)
  • hr(구분선), br(강제 줄바꿈, 종료 태그 없음), img(src/alt 필수), address(연락처 의미), a target="_blank"(새 탭)
1.2 블록 요소 vs 인라인 요소
  • 블록 요소(div, h1, ul, li, p): 줄바꿈 + 부모 너비 전체 차지 → 구조/그룹화 용도
  • 인라인 요소(span, a, strong): 내용 크기만큼만 차지, 블록 내부 흐름 안에서 배치
  • CSS display 속성으로 원래 성질을 바꿀 수 있음(inline/block/inline-block)
1.3 목록(List) & 표(Table)
  • ul(비순서)/ol(순서)+li. li>ul 중첩으로 서브메뉴 구조.
  • 표: table>tr>th/td, 의미 구획을 위해 thead/tbody/tfoot 사용
  • colspan(가로 병합) / rowspan(세로 병합) — 병합된 행은 해당 위치의 td를 생략해야 표가 안 어긋남
  • 데이터 표는 반드시 table 태그 사용 (div+display:table은 스크린리더가 표로 인식 못함)

Part 2. CSS

2.1 적용 방식 & 선택자 우선순위
  • 인라인 > 내부(<style>) > 외부(.css+<link>, 실무 권장) 순으로 우선순위
  • #id(유일) vs .class(재사용) — 더 구체적인 규칙이 이긴다
  • 자손 선택자(공백, 모든 하위) vs 자식 선택자(>, 한 단계 아래만)
  • 인접 형제(A+B, 바로 다음 1개) vs 일반 형제(A~B, 이후 전부)
2.2 폰트 & 배경 축약형
  • font 축약 순서: style/variant/weight → size/line-height → family (순서 어기면 미적용)
  • text-decoration, text-indent, text-align은 font 축약형에 포함 안 됨
  • background 축약 순서: 이미지 → 반복 → 위치/크기
  • ::after 가상요소는 content 속성이 반드시 있어야 렌더링됨
2.3 박스 모델 & Position
  • 구조: content → padding → border → margin
  • box-sizing:content-box(기본): width는 content만. border-box: padding+border까지 width에 포함 (실무 관행: * { box-sizing:border-box })
  • position:relative는 자식 absolute의 기준(containing block) 역할
  • z-index는 position이 static이 아닌 요소에만 의미 있음
2.4 Flexbox & inline-block
  • display:flex 선언 시 자식이 flex item化
  • flex-direction이 주축 결정 → 바뀌면 justify-content(주축)/align-items(교차축) 적용 축도 바뀜
  • display:inline-block: 옆으로 배치되면서 width/height/margin/padding 지정 가능

Part 3. JavaScript

3.1 변수: var / let / const
구분스코프재선언재할당호이스팅
var함수 스코프가능가능선언 전 참조 시 undefined
let블록 스코프불가가능선언 전 참조 시 ReferenceError
const블록 스코프불가불가선언 전 참조 시 ReferenceError
  • const는 재할당만 불가, 배열/객체 내부 값 변경은 가능 (arr.push(1) OK, arr=[]는 에러)
3.2 대화창 함수 & 형변환
  • prompt(): 취소 시 null 반환, 빈 입력 확인은 "" — 혼동 주의
  • input.value는 항상 문자열 → "10"+20="1020" vs Number("10")+20=30
3.3 함수 & 클로저 & 객체 생성
  • 화살표 함수: 자체 this 바인딩 없음 → 외부 스코프의 this 사용
  • 클로저: 부모 함수 스코프 변수를 자식 함수가 기억·참조해 상태 유지(정보 은닉)
  • 객체 생성 3방식: 리터럴 / 생성자 함수(new) / 프로토타입(모든 인스턴스가 메서드 하나를 공유, 메모리 효율적)
3.4 배열 메서드 & 복사
  • map=변환(길이유지) / filter=선별(길이감소 가능) / reduce=누적(값 하나) / forEach=반환값 없음
  • sort((a,b)=>a-b): 숫자 정렬엔 비교함수 필수 (기본은 사전식: [3,10,4].sort()→[10,3,4])
  • 얕은 복사(slice(), spread): 바깥 껍데기만 복사 — 내부 중첩 배열/객체는 여전히 주소 공유
3.5 DOM 탐색 & 조작
  • getElementsByClassName 등은 HTMLCollection(배열 아님, map/filter 불가) / querySelectorAll은 NodeList(forEach 가능)
  • textContent(순수 텍스트) vs innerHTML(마크업 해석, XSS 위험)
  • Node 계열(childNodes, 텍스트노드 포함) vs Element 계열(children, 태그만 — 실무 권장)
3.6 비동기 통신: XHR → Promise → fetch → async/await
  • XHR: readyState===4(DONE) & status===200 확인 필요, 응답은 문자열이라 JSON.parse() 필요
  • Promise: resolve()/reject(), .then()(성공)/.catch()(에러)
  • fetch: Promise 기반 최신 방식. async/await: Promise를 동기 코드처럼 작성
3.7 리액트 이전 필수 순수 JS 문법
  • 구조분해할당: 배열=순서 기준, 객체=이름 기준 (이름변경/기본값 동시 가능)
  • spread(...)=펼쳐서 복사 / rest=나머지 인자를 배열로 묶음
  • 옵셔널 체이닝(?.): null/undefined 접근 시 에러 대신 undefined / null 병합(??): null/undefined일 때만 대체(0, ''은 유지) — ||와의 핵심 차이

Part 4. React & Next.js (01강~13강)

💡 이 파트는 시험에서 비중이 가장 높은 영역입니다.
4.1 [01강] JSX & Props
  • 모든 컴포넌트는 하나의 부모 태그(또는 Fragment <>...</>)로 감싸야 함(단일 루트)
  • {} 안에는 표현식만 가능(if문 등 statement 불가)
  • class→className, for→htmlFor, 이벤트는 카멜케이스(onClick)
  • Props: 부모 → 자식 단방향 데이터 흐름
4.2 [02강] useState & 불변성
  • 리액트는 메모리 주소(참조) 변경으로 상태 변화를 감지 → 배열/객체 직접 수정 금지
  • 추가: setItems([...items, newItem]) / 삭제: filter / 수정: map
4.3 [03강] useEffect & useRef
  • 의존성 배열 []=마운트 시 1회만 / [state]=변경마다 실행
  • return () => {...}는 클린업 — 언마운트/의존성 변경 직전 실행
  • useRef: ① .current 변경해도 리렌더링 X, ② DOM 요소 직접 접근
4.4 [04강] 커스텀 훅
  • 반복 로직을 use로 시작하는 독립 함수로 분리해 재사용 (useInput, useFetch 등)
4.5 [05강] 성능 최적화 4총사
도구대상목적
React.memo컴포넌트Props 안 바뀌면 자식 리렌더링 건너뛰기
useMemo연산 결과값계산 결과 재사용
useCallback함수 객체함수 재생성 방지
React.lazy+Suspense모듈/코드코드 분할(Code Splitting)
4.6 [06강] Context API
  • Prop Drilling 문제 해결: createContext → Provider로 감싸기 → useContext로 구독
4.7 [07강] Next.js App Router
  • 폴더 기반 라우팅: layout.js(전역 레이아웃), page.js(화면), [symbol](동적 라우팅)
  • params는 await로 비동기 수신
4.8 [08강] Zustand
  • Context API보다 가볍고 빠름, Provider 불필요, 불필요한 리렌더링 방지
4.9 [09강] Next.js API Routes
  • route.js에 GET/POST/PUT/DELETE 함수를 export
4.10 [10강] Zustand persist
  • zustand/middleware의 persist로 localStorage 자동 저장, partialize로 선택 저장
4.11 [11강] 서버 vs 클라이언트 컴포넌트
  • 서버 컴포넌트(기본값): 빠른 로딩, SEO, DB/환경변수 직접 접근
  • 클라이언트 컴포넌트('use client'): useState/onClick/WebSocket 등 브라우저 기능 사용 가능
4.12 [12강] Tailwind v4 다크모드
  • ThemeWrapper는 document.documentElement를 직접 조작 → JSX로 감싼 위치와 무관하게 페이지 전체가 전환됨
  • dark: 클래스는 <html class="dark">일 때만 활성화되는 조건부 예약어
4.13 [13강] Recharts & WebSocket
  • WebSocket: 1:1 지속 연결로 서버가 즉시 push (fetch/polling과 대비되는 개념)
  • alive 취소표 패턴: 클린업에서 alive=false → 늦게 도착한 이전 요청 응답이 최신 화면을 덮어쓰는 경쟁 상태 방지
  • 슬라이딩 윈도우: prev.slice(-59)로 항상 최근 60개 유지
  • NEXT_PUBLIC_ 접두사: 브라우저(client)에서 읽으려면 필수
0 / 50 정답