3주차 피어세션 준비

개발 중 겪은 어려움 및 해결 방법

• wrapper 요소의 고정 width를 주었는데 브라우저 크기에 따라 줄어드는 현상
  • 내부 요소의 크기를 inherit 혹은 고정 크기를 부여하여 해결
• OS 간 font의 위치가 달라지는 문제
  • 해결중
• 배포 서버에서 github oauth redirect 중 unauthorized 문제
  • env 파일을 제대로 읽지 못하여 발생. env 수정
• 배포 서버에서 github oauth redirect 중 404 error 문제
  • 랜딩 페이지에서 isLogin 검사 후 로비 페이지로 이동시키게 수정

기술적인 내용

• storybook

  • 컴포넌트 단위 중심으로 개발을 진행(CDD)하는데에 도움이 되는 storybook을 활용하여 UI 개발을 진행해보았습니다.

  • 다음과 같이 컴포넌트를 index 파일, style 파일, story 파일로 나누어 저장하였습니다.

    

  • 컴포넌트들을 대시보드 형태로 빠르게 간편하게 확인할 수 잇고, 더 재사용성을 신경쓰면서 컴포넌트를 만들게 된다는 장점이 있는 것 같습니다.

• emotion
  • emotion의 react, css, styled 세 가지 버전 중 @emotion/react를 사용하였습니다.
  • styled-componets에 비해 선택지도 많고, naming을 고려할 필요가 좀 적어져서 좋다는 느낌을 받았습니다.