[TIL] 오늘의 개발일지

 

아직도 수요일이라니!!!!!

오늘은 1차 발표영상을 만드느라 오전 내내 시간을 보냈다.

발표 영상을 만들면서 다른 사람에게 우리 프로젝트의 핵심 내용을 전달하기 위해서 다시 한번 집중 또 집중을 해서

발표 대본을 작성했던 것 같다. 

아래는 내가 작성했던 발표자료 겸 프로젝트 정리 내용

 

• • 이슈 : 로그인 페이지 랜더링 방식(SPA)으로 인해 해당 페이지 이동하는 로직이 실제로 컴포넌트만 변경되는데 이러한 방식으로 사용자가 헤더의 “로그인버튼”을 클릭했을 때, 회원가입 컴포넌트, 로그인 컴포넌트가 모두 한 페이지에 있어 이동이 되지 않는듯한 체험을 하게됨
  • • 유저가 임의로 영화 제목을 작성하는 것이 아닌 정해져있는 애니메이션 제목을 작성하도록 유도하여 UI 통일감을 주기 위해, 애니메이션 제목을 선택할 수 있는 자동완성 로직 구현 위하여 TMDB API를 사용
    • 레시피, 커뮤니티 사이트 특성상 검색엔진에 노출이 되어야하기 때문에 SEO에 취약한 리액트 대신 next.js를 선택
    • 기존 <img> 태그를 사용하지 않고 자동으로 레이아웃 쉬프트를 방지하고 각 디바이스에 올바른 크기의 이미지가 제공되며 로컬 이미지가 로드되는 동안 작은 사이즈의 blur이미지로 미리 로딩하여 보여주어 유저의 사용감을 향상시킬 수 있는 이미지 최적화가 가능한 넥스트에서 제공하는 Image 컴포넌트를 사용
    • 레시피 글쓰기 페이지에서 “애니메이션 제목” 검색시 항상 최신의 영화 제목 데이터를 가져올 수 있도록 리액트쿼리 선택
    • css 작성시 UI 작업을 최소화하기 위하여 반응형 웹을 만들기에도 작업이 쉽고, 팔레트 제작이 편리한 테일윈드 선택
    • 레시피 글 특성상 사진, 문단 정렬 등 다양한 스타일 적용이 필요한데 기존 input태그로 작성시 한계가 있다고 판단하여 유저가 직관적으로 원하는 스타일의 글을 작성할 수 있도록 리액트에 사용하기 적합하고 편집기 스타일링을 위한 사전 설정으로 사용자 정의 콘텐츠 및 서식을 적용할 수 있고 Destkop/Mobile을 모두 지원하는 react-quill 텍스트 에디터 적용
    • 소스 맵과 연동해서 릴리스 환경에서도 어느 위치에서 에러가 발생했는지 상세하게 파악할 수 있도록 sentry 사용해결 : 기존 Header의 router.push로 이동시켰던 코드를 location.href로 수정하여 로그인 페이지를 다시 한번 랜더시키는 방식으로 수정

 

 

오늘 7시까지 브로셔 제출용으로 프로젝트 링크도 같이 제출을 했어야 됐는데, 반응형 작업을 목요일까지 잡았던 걸

급하게 작업해서 우선적으로 제출을 해야해서 다른 팀원분과 함께 헤더의 반응형 작업을 했다 (줄어들면 햄버거 버튼 보이도록 수정했음)

개발일지를 쓰고 있는 아직까지도 밥을 못먹었당 ㅠ

밥 먹고 힘내서 오늘은 포트폴리오 기초 작업은 무조건 하고 깃헙에 올리고 자야겠당

 

오늘은 어제보다 더 보람찼던 하루!!!

오늘의 개발일지 끄읕-