기술스택 선정이유

빌드 설정

• CRA
  • 장점: CRA가 오래돼서 비교적 대중화되어있음.
  • 단점: vite에 비해 느림. 공식적인 지원은 중단되었음(중요)
• vite
  • 장점: 경험이 있다. 속도에 이점이 있음.
  • 단점: CRA에 비해 대중화되어있지 않음.

결론

• vite를 사용하기로 결정.

패키지 설정

• npm
  • 장점: 경험이 있다. 대중화되어 커뮤니티가 활성화(중요)
  • 단점: pnpm에 비해 느림.
• pnpm
  • 장점: npm에 비해 빠름.
  • 단점: npm에 비해 대중화되어있지 않음.

결론

• npm을 사용하기로 결정.

스타일링

• scss
  • 장점
    • 강의가 있다.
    • 재사용면에서 유리.
    • 별도의 파일로 관리가 가능.
    • 한번 의견을 통합하면 그 이후 수월할 수 있음.
  • 단점
    • 파일 분리에 대한 분기점 의견 통합이 별도로 필요.
    • 커뮤니티 활성화가 비교적 떨어짐.
• styled-component
  • 장점
    • CSS 파일을 따로 관리할 필요가 없음
    • 다른 스타일링은 경험이 있기 떄문에 학습을 위해 하는 것이 좋을수 있음.
  • 단점: 컴포넌트 분리에 용이하지 않다. 인라인 가독성이 낮아짐.
• tailwind
  • 장점: 컴포넌트 분리에 용이.
  • 단점: 중복 문제가 발생. 최신 기술이기 때문에 정보가 비교적 적음

결론

• css의 본질 자체가 바뀌는 것이 아니기 때문에 다수결에 따라 styled-component를 사용하기로 결정.

상태 관리

• redux toolkit
  • 장점
    • 기존의 Redux에 비해 보일러플레이트가 많이 줄어들었음
    • 짜여진 틀이 있다는 것이 오류를 발견할 수 있는 이점.
    • 큰 커뮤니티
  • 단점: Context API와 recoil 비교했을 땐 여전히 보일러 플레이트가 많고 무겁다.
• recoil
  • 장점: 사용이 간편하고 가볍다.
  • 단점
    • Redux에 비해 작은 커뮤니티
    • 유연한 만큼 세심한 관리가 필요
• Context API
  • 장점: 별도의 라이브러리를 설치할 필요가 없음
  • 단점: 가벼운 만큼 Redux만큼 많은 기능을 지원하는 것은 아님

결론

• 학습의 목적을 겸해서 대중적인 redux toolkit을 사용하기로 결정.

API 통신

• axios
  • 장점: 기능이 많음
  • 단점: 별도의 라이브러리 설치필요
• fetch
  • 장점: 별도의 라이브러리를 설치할 필요가 없다
  • 단점: 기능이 적고 작성해야하는 코드가 좀 더 길이진다(중요)

결론

• axios를 사용하기로 결정.

배포

vercel, netlify, aws 중에서 aws는 우리 프로젝트가 프론트에 집중된 프로젝트인 만큼 aws의 많은 기능이 필요하지 않았기 때문에 후보에서 제외되었고 비교적 간단하게 사용할 수 있는 vercel과 netlify 중에 아시아에도 서버가 있어서 배포시 좀 더 속도가 빠른 vercel을 선택하게 되었음

결론

• Vecel을 사용하기로 결정.

깃 관리

• Git Flow
  • 장점: 충돌에 대한 방안을 마련할 수 있음.
  • 단점: 너무 복잡한 규칙때문에 처음 깃관리를 하는 사람들에게는 어려울 수 있음.
• Github Flow
  • 장점: 간단한 규칙이기 때문에 처음 깃관리를 하는 사람들에게도 쉬움.
  • 단점: 충돌에 대한 방안을 마련할 수 없음.

결론

• 5인이라는 제법 많은 인원이 투입된 프로젝트이기 때문에 충돌의 가능성을 고려하여 Git Flow를 사용하기로 결정.