• react로 구성된 프로젝트를 서비스를 준비하며 검색엔진 최적화를 위해 next.js로 마이그레이션을 진행
• kakao map api로 구현된 지도 및 마커를 naver map api로 마이그레이션
  • 앱 서비스를 준비하며 통일된 라이브러리를 사용하기 위해 마이그레이션
• react-query를 적용하여 server state cache
• bottom-sheet 슬라이드 인터렉션을 framer-motion을 사용하여 부드럽게 개선
• 라이브러리 버젼 관리

문제 및 해결방법

Next CSS-in-JS

• react에서 next.js로 마이그레이션을 진행하면서 기존에 작성되어 있던 styled-components가 적용되지 않는 이슈가 발생했습니다.
• 기본적으로 SSR로 동작하며 pre-rendering을 합니다. 페이지가 미리 렌더링 되기 떄문에 스크립트로 작성된 스타일이 바로 적용되지 않고 렌더링 되는 이슈가 발생합니다.
• next.js에서 styled-components 문제를 해결하기 위한 방법을 제공하고 있어 문제를 해결했습니다. link

깨달은 점

다른사람의 코드를 한 줄 이라도 더보자

• 프론트엔드로 프로젝트를 혼자서만 진행을하면서 내가 작성하던 코드에 대해서 많은 고민을 하지 않았습니다.
• 이번 프로젝트에서 협업을 하며 같인 공동작업을 하면서 맞춰야하는 것이 많았습니다.
• 또 같이 작업하는 팀원에 코드를 보고 저런방법으로 접근할 수 있구나를 알게되었고, 기본적인 부분임에도 놓치는 부분이 너무나도 많다는것을 알게 되었습니다.
• 협업은 혼자 작업하는것이 아니기에 다른 사람들의 코드를 많이 접하고 고민하고 발전해야하는거 같습니다.

배포는 시작과 동시에 (CI/CD)

• 프로젝트를 시작하면서 배포를 후순위로 생각하고 진행을 했습니다. 마감기한이 다가와서야 배포를 진행하게 되었는데, 셋팅부터 설정까지 생각보다 쉽지가 않았습니다.
• QA를 진행하는데 미리 배포가 되었더라면 미리 확인하면서 수정할 수 있었지만 그 부분이 아쉬웠고, CI/CD가 구축되지 않아 손수 배포를 해야하는 수고로움까지 있었습니다.
• 협업을 하면서 업무의 효율성을 위해 배포는 선택이 아닌 필수인거 같습니다.

• 공통된 스타일 스택인 styled-components를 사용
• 버스 정류장의 위치와 방명록에 따른 이미지를 kakao map api를 사용하여 버스의 정류장을 마커로 구현
• bottom-sheet 슬라이드 인터렉션 구현
• vercel을 이용하여 배포

• 디자인 레퍼런스를 가지고 figma를 사용하여 디자인 레이아웃 제공
• 검색된 숙소를 시각적으로 제공하기 위해 kakao map api를 사용하여 위치와 정보를 지도의 마커로 구현
• 숙소 주변 편의시설 정보를 제공하기 위해 kakao local api를 사용하여 정보를 제공
• JWT를 이용하여 로그인을 구현하였으며 Recoil과 LocalStorage, SessionStorage로 상태를 관리
• typescript를 사용하여 협업을 하며 필요한 안정성과 명확한 코드를 작성

문제 및 해결방법

OAuth 로그인 방법

• OAuth 로그인으로 kakao 로그인을 추가하였는데 서버에서 구현한 OAuth API에서 Token을 클라이언트로 전해주는 방법에 대해서 고민하게 되었습니다.
• 예전에도 비슷한 문제가 있어 리다이렉트 URL을 통해 queryString으로 token을 보내주는 방법으로 해결했습니다.
• 하지만 보안적으로나 서버와 클라이언트가 서로 URL을 정의하고 공유받아야하것이 좋은 방법이 아닌거 같아 찾아보게 되었습니다.
• 클라이언트에서 OAuth Login을 구현 => token으로 서버 API 호출 => 서버에서 전달 받은 token으로 다시 OAuth 인증 => 인증완료시 서버에서 JWT토큰을 발급
• 전체적인 프로젝트의 일정이 있어 리다이렉트로 결정하고 구현하게 되었습니다.

• 슬라이드 UI를 제공하기 위해 styled-components를 사용하여 슬라이드 인터렉션을 구현
• 운동 상태를 관리하고 저장하기 위해 전역상태 라이브러리로 recoil을 사용
• API 연결하며 cors 문제를 해결하기 위해 nginx로 클라우드 배포

문제 및 해결방법

CORS

• API를 연결하면서 cors문제가 발생하여 서버에서 arrow 설정을 했지만 문제가 해결되지 않았습니다.
• 클라이언트에서 프록시 우회를 통해 API를 연결하기 위해 nginx로 클라우드 배포를 진행하였고, proxy를 설정하여 API를 연결할 수 있었습니다.

깨달은 점

• 프론트엔드로 다른직군과의 첫 협업경험으로 기획부터 디자인 개발까지 함께 참여하여 시행착오와 다른 직군의 업무를 이해할 수 있었습니다.
• vercel과 같은 호스팅이 아닌 클라우드서버에 직접 배포를 진행하였고 서버 세팅 및 배포, 도메인 작업을 경험할 수 있었습니다.

• client와 server를 구현하기 위해 next.js를 사용하였습니다.
• next.js에서 유저의 세션을 쉽게 관리하기 위해 next-auth를 사용하여 세션을 관리하였습니다.
• 디자인이 정해지지 않은 프로젝트에서 통일된 디자인을 제공하기 위해 tailwind를 사용하였습니다.
• 푸쉬 알림을 구현하기 위해 web notification api을 적용하였고 firebase에서 제공하는 FCM을 사용하여 구독서비스를 구현했습니다.
  • 푸쉬 알림을 모바일에서 동작하게 하기 위해 PWA를 적용하였습니다.
• firebase 서비스로 통일하기 위해 DB로 firestore-database를 사용하였고, 추가 구현없이 쉽게 DB를 이용할 수 있었습니다.

문제 및 해결방법

tailwind의 동적 스타일

• 동적 스타일을 작성하기 위해 tailwind로 동적으로 클래스를 적용하였는데 스타일이 적용되지 않는 문제가 발생했습니다.
• 찾아보니 tailwind는 컴파일시 사용하지 않는 css를 제거한다고 되어 있었고, 공식 문서에서도 tailwind는 동적으로 생성된 클래스는 인식하지 않는다 되어 있었습니다.
• 이를 해결하기 위해 객체를 사용한 방법이 있었지만 적용해보지는 못하였고, 기본 style 속성을 사용하여 동적 스타일 문제를 해결했습니다.

PWA Notification permission

• 로그인시 notification 권한을 요청해 token을 발급하도록 되어있습니다. 하지만 PWA에서 kakao 로그인시 정상적으로 토큰이 발급되지 않는 문제가 발생했습니다.
• ios를 사용하기에 safari로 동작하게 되는데 ios safari 개인정보 보안정책에 위반되기 때문에 동작하지 않았습니다.
• Apple은 개인정보에 관련되어 매우 엄격한 보안정책을 가지고 있어 사용자에 정보 요청을 사용자의 상호작용 없이는 실행할 수 없었습니다.
• kakao 로그인 같은 경우는 리다이렉션으로 동작하며 상호작용이 아닌 새 페이지로 넘어가게되어 permission 요청이 거부되었습니다.
• 해결방법으로 정책과 같이 알림을 설정할 수 있는 버튼을 추가하여 동작하도록 기능을 추가하였습니다.

• express로 서버를 구성하고 템플릿 엔진으로 ejs를 사용했습니다.
  • module별 controller를 생성하여 view, api routing을 관리하였습니다.
• scss를 사용하여 component와 view로 나누어 style을 관리하였습니다.
• last.fm API에서 제공받은 앨범, 아티스트 데이터를 mongoDB에 추가하여 관리하였습니다.
• Youtube API로 영상을 검색하여 음원을 재생하였습니다.