보일러플레이트 없는 프론트엔드

노션 링크

패키지매니저, 번들러에 대한 이해도를 높이는 스터디입니다

📌 서론

FF 스터디, NFF 스터디

위 스터디의 미니 스터디 입니다.

앵귤러, 뷰, 스벨트, 솔리드 프레임워크로 동일한 투두앱을 제작하고,
프레임워크 별 특징을 분석하는 과정에 있습니다.

해당 미니 스터디는, 위에서 언급한 투두앱을 리액트로 제작하는 것을 목표로 합니다.

단, 대부분의 구성원이 리액트에 충분히 익숙하여,
의미있는 스터디가 되기위해 CRA를 사용하지 않고 리액트 투두 앱을 구현할 것 입니다.

그래서 패키지 매니저, 번들러 등의 CRA가 제공하는 일부 세팅을 구현하는 과정에 초점을 맞춘 스터디가 될 것입니다.

📌 진행 내용

결과물이 있는 스터디를 지향합니다

📚 진행 방식

• 각자가 이해한 내용을 바탕으로 기록을 남기고,
  그 기록에 대해 스터디원과 공유를 합니다.
  
• 각자 공부한 내용에 대해 잘 못된 부분이 없는지 서로 이야기를 나눕니다.
  

📚 스터디 내용

CRA의 역할

• CRA가 대신 해주는 내용에 대해 분석합니다.

패키지매니저

• npm, yarn classic, pnpm, yarn berry 에 대해 알아봅니다.
• 각각의 패키지매니저가 가지는 특징을 분석하고, 장단점을 비교합니다.
• 패키지매니저에서 기본적으로 제공하는 workspace(모노레포) 개념에 대해 알아보고 실습해봅니다.

번들러

• Webpack, Vite, Turbo 에 대해 알아봅니다.
• 각각의 번들러별 특성을 정리하고, 장단점을 비교합니다.
• 각 번들러별로 성능 측정(빌드 속도, 번들 사이즈 비교 등)을 해봅니다.

CRA 없는 리액트 투두앱 구현

• 타 프레임워크와 동일하게 리액트 투두앱을 제작합니다.
  단, 패키지매니저와 번들러를 직접 세팅합니다.

📌 정리 내용

내용 및 링크
📚 패키지매니저
📚 모노레포 실습
📚 번들러
📚 번들러 실습
📚 CRA없는 리액트 투두

📌 참여자