본문 바로가기
Frontend/엘리스 SW 엔지니어 트랙

[ 엘리스 SW 엔지니어 트랙 ] 69일차 TL;DR

by YWTechIT 2022. 1. 28.
728x90
  1. 백엔드 인증 로직: GitHub login -> GitHub 정보 획득 -> JWT 토큰 생성 -> 쿠키로 client 전달 -> 로그인 필요한 서비스에서 JWT 검증(검증은 req.user있는지 확인)
  2. React CRA 설정을 override 하고 싶으면 React-app-rewired
  3. redux처럼 API를 중앙에서 관리하고 싶다면 react-query 사용
  4. rebase의 장. 단점: merge commit 이 없어져 history 가 깔끔해짐, 반대로 history 가 없어져 commit 이력이 남지 않아 confilct 가 나기 쉽다. Git의 숙련도에 따라 rebase 도입 여부를 고민하기
  5. browser에서 mobile device 확인하는 방법: device-width, user-agent
  6. 모바일에 사용성을 맞췄기 때문에 반응형 웹 디자인에서 모바일, 태블릿까지만 대응하기
  7. redux는 state를 중앙에서 관리할 수 있다는 장점이 있으나, boilerplate의 작성이 오래걸린다. 프로젝트의 기간이 길지 않기 때문에 페이지별로 상태를 관리하는 방법을 사용하자.
  8. 전통적인 flow는 back에서 api를 내려주는 방법을 사용했으나, 최근에는 back으로 한정짓지 않고 front에서도 api를 호출하여 사용한다.
  9. branchfeature-TODO만들고, issue에도 TODO 남기기 (cross-check)
  10. React-query를 도입하여 API를 중앙에서 관리하는 식으로 구현하면 데스크탑 버전에서도 문제가 없을 것으로 보입니다. API.js에 API를 모아두고, 호출하는 부분에서 React-query를 이용하면 원활할 것입니다.
  11. 검색 기능을 구현할 때, 서버에 보낼건지 프론트에서 처리할건지에 따라 나뉩니다. 랭크 정보는 백엔드에서 처리하면 되고, mongoDB 쿼리를 날리는 순간에 순위를 sorting 하면 됩니다.
  12. Router -> mobile에서 PC화면으로 갈 때 고민해보셔야 할 것 같습니다. (ex: rank 페이지에서 화면을 확장하여 PC버전이 되었을 때는 /rank의 의미가 없어지기 때문)
  13. 차트 -> 물론 직접 공부하면서 구현하면 좋겠지만, 시간적 비용을 줄이기 위해 우선은 라이브러리를 이용하여 작성하고 추후에 시간적 여유가 있을 때 직접 구현해보면 좋을 것 같습니다.
반응형

댓글