FE 기술스택을 선정한다

[bigsaigon333]

Language

• ~JavaScript~
• TypeScript

why? : 타입 안정성.. 블라블라..

UI Library(or Framework)

• React
• ~Vue~
• ~VanillaJS~

why?: 당연당연

State Management

• ~None(Only React)~
• Redux Toolkit(+saga)
• ~MobX~
• ~Recoil~
• ~swr~
• react-query

고민의 여지

• caching 이 필요한가?

https://ridicorp.com/story/how-to-use-redux-in-ridi/

Package Manager

• ~npm~
• yarn1
• ~yarn2~

why? 배포속도를 높이기 위해서는 추후에 yarn2 도입 고려. 현 단계에서는 npm, yarn1 의 불편함을 느끼지 못해 yarn1으로 결정

style

• ~scss~
• ~scss + css modules~
• styled component
• ~emotion/css~

why? CSS in JS 가 편하다. css props 도 섞어서 사용할 예정이다

test

• react-hooks-testing-library
• storybook
• RTL

why?: 비즈니스 로직 검증에 집중하자. UI 테스트는 하면 좋지만, 일단 우선순위 낮게 가져간다.

file structure

• feature first
• file type first
• ...

https://reactjs.org/docs/faq-structure.html https://www.robinwieruch.de/react-folder-structure https://twitter.com/dan_abramov/status/1027237981269180417?lang=en

[bigsaigon333]

@2SOOY FE 기술스택 선정할 내용들이 무엇이 있는지 생각나는대로 열거해보았어요~ 나중에 같이 정해보아요 :+1:

[2SOOY]

Redux vs MobX https://techblog.woowahan.com/2599

리덕스 잘 쓰고 계시나요? https://ridicorp.com/story/how-to-use-redux-in-ridi/

[bigsaigon333]

현재 결정된 기술스택

1. TS
2. React
3. Yarn1
4. styled-components
5. react-hooks-testing-library, storybook, RTL

추가 논의가 필요한 기술스택

1. 상태관리툴: RTK + saga 또는 react-query

[bigsaigon333]

React Query 의 원리를 알 수 있는 좋은 영상 공유합니다.

React Query 창시자 Tanner Linsley의 영상입니다.

https://youtu.be/9SrIirrnwk0

[bigsaigon333]

상태관리툴 결정

react-query 사용하고 세밀한 비동기 처리가 필요할 땐 RTK + saga 적용 검토