HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생/
🐸
나영팀/
[기획] 기술스택

[기획] 기술스택

Created
Feb 3, 2023 03:58 AM
Tags

기술스택

언어
  1. 리액트
  1. 타입스크립트
상태 관리
  1. react-query
      • 서버 상태 관리는 리액트 쿼리 적용
  1. recoil
      • 클라이언트 관련된 상태관리는 리코일로 적용
스타일
  1. styled-components
  1. mui ( + emotion)
      2. Installation - Material UI
      Install Material UI, the world's most popular React UI framework. Run one of the following commands to add Material UI to your project: npm install @mui/material @emotion/react @emotion/styled yarn add @mui/material @emotion/react @emotion/styled Material UI uses Emotion as its default styling engine.
      Installation - Material UI
      https://mui.com/material-ui/getting-started/installation/
      Installation - Material UI
  1. CSS Modules
  1. 토스트
      2. react-hot-toast - The Best React Notifications in Town - react-hot-toast
      Add beautiful notifications to your React app with react-hot-toast. Lightweight. Smoking hot by default.
      react-hot-toast - The Best React Notifications in Town - react-hot-toast
      https://react-hot-toast.com/
      react-hot-toast - The Best React Notifications in Town - react-hot-toast
  1. 모달
      2. SweetAlert
      NPM combined with a tool like Browserify or Webpack is the recommended method of installing SweetAlert. Then, simply import it into your application: You can also find SweetAlert on unpkg and jsDelivr and use the global swal variable. After importing the files into your application, you can call the swal function (make sure it's called after the DOM has loaded!)
      https://sweetalert.js.org/guides/
Test
  1. cypress (e2e) → 사용자 관점에서 처음부터 끝까지 얼마나 잘 흐르는지 QA 없이 프론트 환경에서 테스트 가능
      2. JavaScript Web Testing and Component Testing Framework | cypress.io
      Fast, easy and reliable web testing for any applications or components that run in a browser. Install the open-source Cypress app and take the pain out of front-end testing.
      JavaScript Web Testing and Component Testing Framework | cypress.io
      https://www.cypress.io/
      JavaScript Web Testing and Component Testing Framework | cypress.io
배포
  1. vercel
인프라
  1. Vite
  1. Next.js
  1. prettier, eslint
깃 전략
  1. 이슈, PR 템플릿?
  1. PR 규칙
    1. ex) file Changed 10개 미만….
    2. 머지된다는 건 무조건 동작의 오류가 없다는 걸 의미
  1. 브랜치 전략
  1. 커밋 메세지 prefix
  1. 프로젝트, 위키 사용?
자동화
  1. husky, lint-staged