• 웹 접근성에 대한 이해
• BEM 등 CSS 방법론 학습 및 이해

• 자바스크립트 학습 및 이해
• 자바스크립트의 내부 동작원리 학습 및 이해
• 동시성 컨트롤 학습 및 이해
• 함수와 클로저 학습 및 이해

• 브라우저 환경 학습 및 이해
• 화면 렌더링 과정 학습 및 이해
• 브라우저 이벤트루프 학습 및 이해

• 네트워크, HTTP 관련 학습 및 이해
• HTTP 스펙 및 적절한 사용 방법 학습 및 이해
• 서버 통신 과정에 대한 학습 및 이해

모던 프레임워크들에 공통적으로 들어가는 SPA 기능을 직접 만들어보며 내부 동작원리를 이해합니다. 이 단계에서는 React의 내부 동작원리를 깊게 이해하기 위해 SPA를 직접 개발해보는 단계를 거칩니다. 프로젝트를 진행 할 때에도 이론 학습은 계속 병행합니다.

• 블로그 기능을 SPA로 만들어보며 라우터를 직접 구현해보고, 구현한 내용을 TypeScript로 교체
• Github를 활용하여 진행하며, 브랜치와 커밋을 나누는 기준을 익히며, 작성한 코드에 대해 코드 리뷰 경험
• 라우터를 구현하며 관심사를 나누는 기준을 학습
• 불필요하게 DOM 이벤트를 발생시키지 않도록 학습
• 코딩 컨벤션에 대해 고민해보며, 컨벤션이 필요한 이유에 대해 깊이 학습
• 상태관리가 잘 이루어지고 있는지 점검 및 경험

TypeScript와 React를 활용하여 높은 퀄리티의 프로젝트를 진행하는 방법에 대해 학습합니다.깊은 고민 후 작성한 코드와 이로 구성된 프로젝트란 어떤 것인지 인지하고 경험합니다. 차별성을 위해 프로젝트 주제는 멘티가 정합니다. 멘토는 멘티가 해당 주제에 대해 깊이있게 고민할 수 있도록 가이드합니다. 기능을 1개만 만들더라도 더 많은 트래픽을 받을 수 있는 구조와 더 높은 유지 보수성을 가질 수 있도록 만드는 것을 지향합니다.

• TypeScript와 React, Next.js를 활용하여 프로젝트 진행
• 코드리뷰를 통해 이론을 코드에 적용하는 법과 더 좋은 코드를 작성하는 법 학습
• 비동기 상황을 컨트롤 하는 방법, Memoization과 같은 캐싱 전략에 대한 고민
• 모듈 번들링에 대한 깊이있는 학습
• 테스트 코드 작성으로 동작을 보장하는 방법 학습
• Storybook을 활용한 컴포넌트 문서화

프론트엔드 개발자는 주어진 환경 내에서 최대한의 성능을 이끌어내어 유저에게 더 빠른 반응속도를 제공할 수 있는 능력을 갖추고 있어야합니다. 이 역량을 갖추기 위해 LightHouse를 활용하여 내가 개발한 어플리케이션이 얼마나 성능 최적화가 되어있는지 여러 성능 지표를 확인하고, 이를 기반으로 성능을 튜닝해나갑니다.

• LightHouse가 제공하는 성능 지표들에 대한 학습
• LightHouse로 성능 지표 확인 및 튜닝
• 실제 성능 최적화 과정에서 이론들이 어떻게 활용되고 있는지 확인 및 경험

5단계까지 진행하셨다면 깊이있게 개발하는 방법을 익혀 스스로 성장할 수 있는 상태가 되셨을겁니다. 하지만 더 수준 높은 개발자로 성장하고 싶다면 연장 심화코스(월 99만원)를 진행 할 수 있습니다. 더 배우고 싶은 주제를 멘토님과 이야기하여 해당 주제에 대해 학습하고 프로젝트에 적용합니다.

• 디자인 시스템
• 모노레포
• CI/CD
• 인프라 (Docker 등)
• BFF
• APM 활용한 서비스 모니터링