juyeong-byeon / foam-form-web

거품처럼 몽골몽골한 폼 생성 서비스

foam-form-web's Issues

apply eslint and prettier

일관적인 코드 스타일을 위해 eslint, prettier 설정하기

카카오 문서
https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/
한번 읽어보되 설정은 공식 문서보고하기

https://prettier.io/
https://eslint.org/

react-hot-loader 적용

hot module replacement를 적용하기 위해
https://webpack.js.org/guides/hot-module-replacement/

https://openbase.com/categories/js/best-react-hot-reload-libraries

참고해서 적용하기

Theme provider 이용해서 스타일 일관적으로 관리하기

https://blog.jeongtae.com/rem-고찰

Theme provider 이용해서 색상과 margin gap fontsize 자주쓰는 스타일을 통일한다.

css loader 적용

css loader 적용 및 reset css 셋업

ErrorBoundaryView 적용해서 WSD 막기

https://medium.com/wix-engineering/white-screen-of-death-how-to-handle-errors-in-react-native-4d57ac82b6d8
error boundary로 에러 처리를 해주지 않으면 컴포넌트의 에러가 격리되지 않고 react dom 전체가 unmount 되어 app을 사용할 수 없게 된다.
이런 상황을 잘 핸들링 하기 위해서 errorBoundaryView를 정의하고 이 view를 쉽게 감싸서 사용할 수 있도록 HOC를 정의한다.

google 소셜 로그인 구현

google 소셜 로그인 구현을 통해 구글 로그인 기능을 만들자

https://developers.google.com/identity/sign-in/web/sign-in

로그인 토큰 생성 후 be 전달까지 하기

todays work

todays work

1. 라우팅 정리
2. 폴더 정리
3. 공용 단위 정의 spacing, color
4. main view 스타일 정리
5. 초기 main view 구현
6. 레이아웃 정의

프로젝트에 redux 적용

https://redux.js.org/tutorials/quick-start

RTK 적용해서 사용하기

바벨 로더 적용

최적화하기 좋고, HMR 적용할 수 있는 바벨 로더 적용 ts loader 제거 후 진행