2024-06-12 프론트 엔드 학습 가이드(로드맵)

들어가며

본 내용은 내일배움캠프 프론트 엔드 학습 가이드 특강을 듣고 정리한 내용이다.

나중에 내가 길을 잃고 방황할 때 들여다 보고자 복기 메모를 한다.

 

지금 절반 정도 달려온 것 같은데, 짧은 기간 배워야 하는 양이 많다 보니 배운 것들도 휘발되어 버리고 그러다 보면 답답함이 느껴지기도 한다. 이는 나 뿐만의 고충이 아니라 함께 하는 모든 수강생의 고민인 것 같다.

 

그렇게 모두가 고민을 하고 있는 중 웹 프론트 엔드 학습에 대한 로드맵을 제시해주는 특강이 열러 어느 정도 답답함이 해소된 것 같다.

 

우리가 뭘 하고 있는 것인가?

이는 내가 어떤 일을 할 때 가장 중요하게 생각하는 관점이다. 아내에게도 매일 가르치듯 이야기하는 것이 지금 본인이 무슨 일을 하고 있는 건지 설명할 수 있냐라는 말이다.

 

내가 무슨 일을 하고 있는지 명확하게 설명할 수 없으면 더이상 앞으로 나아갈 수가 없다. 뭘 하는 지도 제대로 설명하지 못하면 왜 하는 지는 당연히 설명하기 어렵기 때문이다.

 

"웹 사이트의 눈에 보이는 영역을 만드는 것입니다."라는 답변은 맞는 말이지만 일차원적인 답변이다.

 

특강에서는 웹 프론트 엔드의 기술적인 해설을 해주고 있지만 그런 내용은 모두 알고 있고, 내가 정의하는 웹 개발의 정의는 "세상에 정보를 공유하는 일"을 하는 일이라고 생각한다. 애초에 내가 웹 개발자가 되기로 결심한 수많은 계기 중 결정적인 계기도, 매년 수천만원 들여가며 농촌 마을에 대한 전수조사를 하고 있음에도 이를 주민들에게 정보를 가공해서 환원해 줄 수단이 없다는 것에 답답함을 느끼고 여러가지 시도를 해보던 중 가장 접근성이 좋은 것이 웹이었고 결국 여기까지 오게 된 것이다.

 

웹 개발 로드맵

아래는 웹 개발에 대한 로드맵이다. 내가 어디까지 왔는지 점검해볼 때 좋은 지표가 될 것 같다.

 

• 1단계: 기본기 다지기
  • HTML & CSS
    • HTML의 문서 구조 이해
    • CSS를 이용한 레이아웃 및 스타일링
    • 반응형 웹 디자인 (Responsive Design)
  • JavaScript
    • 기본 문법 (변수, 함수, 조건문, 반복문 등)
    • DOM 조작
    • 이벤트 핸들링
• 2단계: 필수 프레임워크 및 라이브러리
  • 버전 관리 시스템
    • Git 기본 사용법 (clone, commit, push, pull)
    • GitHub를 통한 협업 (Pull Request, branch)
  • 프론트엔드 프레임워크
    • React
      • 컴포넌트 기반 아키텍처
      • 상태관리 (State Management)
      • React Hooks
• 3단계: 고급 기술
  • 상태 관리
    • Redux, MobX (React), Zustand, Zotai
  • API 통신
    • RESTful API
    • GraphQL
    • Axios, Fetch API <----- 현재 나의 위치
  • 서버 사이드 렌더링 (SSR)
    • Next.js (React)
  • 테스트
    • 단위 테스트: Jest, Mocha
    • 통합 테스트: Cypress, Selenium
• 4단계: 배포 및 운영
  • CI / CD
  • 호스팅
• 5단계: 심화 학습
  • 프로그레시브 웹 앱 (PWA)
  • 성능 최적화
    • 웹 성능 측정 (Lighthouse, WebPageTest)
    • 코드 스플리팅, lazy loading

현실적인 최소 학습 기준

 

만약 위 기준이 너무 버겁거나 오래 걸린다고 생각되는 경우, 여기서 말하는 현실적인 최소 학습 기준은 이것 제외하고 나머지는 생략해도 실무는 할 수 있다~ 라는 개념이 아니라 오히려 이것이 필수이니 우선순위를 분배하는 데 있어서 우선순위를 두라는 의미이다.

 

• HTML/CSS
• JavaScript
  • 배열 메서드 : map, filter
  • ES6 문법 : template literals, destructuring
• Git, GitHub : clone, commit, push, pull, merge, PR
  • remote 설정
  • 협업 flow : add -> commit -> push -> PR(merge)
• React :hooks(useState, useEffect), react-router-dom(page routing, useNavigate)
  • 정말 필수 : useState, useEffect
  • 필수지만 사용 목적에 따라 위보다는 2순위 : useContext, useReducer, useRef, useMemom, useCallback
  • react-router-dom : useNavigate(★), useLocation, Link
• 상태관리 도구 : RTK, zustand
  • Redux, RTK가 정 어렵다면 zustand 부터 해도 되지만 결국 알아야 함.
  • 클라이언트 상태 / 서버 상태를 구분할 줄 알아야 함.
• 비동기 통신 : RESTful API, axios, HTTP, Supabase(Firebase)
  • axios.get(), axios.post(), axios,patch(), axios.delete()
  • 이론적인 내용보다는 실제 사용 방법에 익숙해지도록.
• 스타일 도구 : styled-components, Tailwind CSS
  • 실무에서는 두 개가 지분을 양분하고 있음.
• 서버상태 관리 도구 : TanStack Query
  • useQuery, useMutation, invalidateQueries
  • 데이터를 가져오고, 변경하고, 갱신하는 핵심 기능은 숙지
• TypeScript
• Next.js