사용

• 기본
  • HTML/CSS
  • Javacript
  • React.js
• 컴파일 툴 : swc(vite랑 궁합이 좋다)
• build : Vite
  • 가벼우니까
• CSS : styled-components
  • CSS in JS 라서 간편할것 같다.
  • 성능 문제가 우려되지않아 경험해보고싶다.
  • 페이지 렌더링 시 필요한 CSS만 가져오는것으로 알고있어 소모값이 적지않나. Sass 의 경우 변환을 못해서 CSS로 다시 변환해야하는데, 그러면 리소스 낭비라고 생각했기 때문에.
• 데이터 : firebase
  • 데이터는 써야됨. 아니면 다 JSON 으로 해야됨.
  • 타잉에 들어가는 영화제목, 이미지, alt 등.
  • 대신 firebase는 이미지는 따로 storage?로 줘야함.(용량 제한 1GB)
  • 한명이 만들고 나머지 인원 초대가능(키값 공유 및 접근 가능)
• 전역상태관리 : RECOIL
  • 원래 REDUX였는데 현실을 파악하고 빠르게 바꿈…
  • useState와 비슷해서 익숙하다. 보일러 플레이트가 적다.
• 비동기통신 : axios
  • fetch 쓰는것과 똑같다. fetch 아니면 axios 많이 쓰는듯.
• 무한스크롤,검색 : react-query

  • 리액트 쿼리로 보통 구현을 한다.

    react-query 개념 및 정리

    • 캐싱이 되고, 무한스크롤 기능을 제공을 한다.
• **라우터 : 리액트** **라우터**
• CI/CD(배포) : 깃헙 액션
• 패키지매니저 : npm
  • pnpm 고려해봤으나 단점 이슈가 커서 철회
• CDD : storybook
  • propTypes 사용해야함.
• 코드 컨벤션
  • prettier
  • esLint

그레이존

• TDD : Jest (JS 테스트 프레임워크)
  • 제공하는 라이브러리(Jest)의 문법이 있어서, 거기에 맞춰서 내가 짠 코드를 넣으면 터미널 창에 결과가 뜸.
  • 이메일 유효성 검사 같은 굵직한것에만 TDD 방법론 사용

챌린지

• TypeScript
  • 세은: 플젝 안에 TS써보는게 좋을것 같으니, 공부 자체는 처음부터 해보면 어떨까.
  • 철진: TS 세팅해놓고 JS 써도 되니까.