프론트엔드 학습 로드맵

프론트엔드는 배울 것이 많아 보이지만, 앞 단계가 다음 단계의 토대가 되도록 순서를 잡으면 수월하다. 라이브러리보다 웹 표준이 먼저이고, 프레임워크는 하나만 깊게 익힌 뒤 범주로 넓힌다.

학습 순서

flowchart LR
  n1["HTML"] --> n2["CSS"] --> n3["JavaScript"] --> n4["DOM·브라우저"]
  n4 --> n5["Git/GitHub"] --> n6["TypeScript"] --> n7["React"] --> n8["메타 프레임워크(Next.js)"]
  n8 --> n9["데이터 가져오기(HTTP·API)"] --> n10["테스트"] --> n11["빌드·배포"]

• HTML(구조)·CSS(모양)·JavaScript(동작)는 하나씩 끝내기보다 한 과목의 1·2·3교시처럼 함께 익힌다. CSS에서는 Flexbox와 Grid를 꼭 짚는다.
• JavaScript는 문법을 넘어 실행 컨텍스트·스코프와 클로저, 프로토타입, Promise, 콜 스택과 이벤트 루프까지 이해해야 다음 단계가 막히지 않는다.
• 순서표의 Git은 배우는 위치일 뿐이다. 첫 HTML 파일부터 저장소에 커밋하며 쓰면 명령이 손에 익고, 그 기록이 그대로 포트폴리오가 된다. GUI 클라이언트를 쓰더라도 기본 명령은 안다.
• 디자인 줄기는 별도로 병행한다. Figma 시안에서 간격·폰트·컴포넌트 속성을 읽어 CSS로 옮기는 일은 프론트엔드의 기본 업무다(디자인 도구와 개발자 핸드오프).
• CSS 프레임워크는 CSS를 익힌 뒤에 고른다. 유틸리티 클래스 방식의 Tailwind CSS가 주류다.
• 프레임워크는 React·Vue·Svelte·Angular 중 하나를 깊게 익힌다. 모두 "데이터로 컴포넌트를 렌더링한다"는 같은 범주라 하나를 알면 나머지는 빨리 배운다(기술 스택 고르기).
• 서버·DB는 "프론트엔드가 소비하는 데이터가 어디서 오는지"를 이해하는 수준에서 시작해도 충분하다.

필수와 선택

로드맵의 모든 칸을 다 배울 필요는 없다. 필수 줄기를 먼저 세우고, 나머지는 관심 분야나 지원하는 회사의 스택에 맞춰 고른다.

함께 쌓을 CS 기초

비전공자라도 코딩 테스트와 실무 대화를 위해 다음은 따로 시간을 낸다.

프론트엔드 다음 단계로 백엔드를 넓히고 싶다면 Supabase 같은 BaaS로 인증·DB·API의 개념을 먼저 잡고, Node.js(Express·NestJS)로 직접 서버를 만든다.

공부하는 방법

순서보다 중요한 것은 배운 것을 바로 코드로 옮기는 습관이다.

기본 자료

정리

• 라이브러리보다 웹 표준(HTML·CSS·JS·DOM) 이해가 먼저다. React도 결국 DOM을 효율적으로 바꾸는 도구다.
• TypeScript는 선택이 아니라 기본기다. 프레임워크는 하나를 깊게, 나머지는 범주로 이해한다.
• 필수 줄기(HTML·CSS·JS·TS·React·Next.js·서버 데이터·테스트)를 먼저 세우고, 상태 관리 도구·GraphQL·앱·데스크톱은 관심과 직무에 맞춰 고른다.
• 단계마다 작은 프로젝트를 만들고, 잘 만든 코드를 읽고, 막힌 것과 푼 것을 기록한다.
• 낯선 용어는 프론트엔드 웹 개발 용어집, 백엔드 개발자가 알아야 할 것, 프론트엔드 엔지니어의 세 가지 성장 트랙에서 자리를 잡는다.

관련 노트: 프론트엔드 개발자의 업무 범위와 역량, 기술 스택 고르기, 프론트엔드 웹 개발 용어집, 백엔드 개발자가 알아야 할 것, 프론트엔드 출시 전 체크리스트