<aside> 🏁 실전 프로젝트 6주차에 가장 집중해주셔야 할 것은 “최종 발표회 준비”입니다. 최종 발표에는 6주간 진행했던 프로젝트 개발 과정을 엔지니어답게 설명할 수 있어야합니다. 아래 항목들을 바탕으로 기술적으로 더욱 매력적인 최종 발표를 준비해봅니다.
</aside>
우리 프로젝트에서 기술적으로 강점을 삼을 만할 항목을 정리해 주세요. (최종 발표 및 면접에서 프로젝트를 진행할 때 어떤 도전을 했는지 말할 수 있는 좋은 소스가 됩니다)
프로젝트에 적용했던 핵심 기술 목록을 작성해 주시고, 각 기술을 도입하게된 의사결정 과정을 정리해주세요.
| 구분 | 요구사항 | 선택지 | 핵심 기술을 선택한 이유 및 근거 |
|---|---|---|---|
| FE | 반응형 웹 | react-responsive, styled-components | 프로젝트의 css를 styled-components로 처리해주고 있는 상황에서, 이를 이용한 조건부 스타일링으로 반응형웹이 충분히 가능하다고 판단하여 추가적인 라이브러리를 설치하지 않기로 결정. |
| FE | 무한스크롤 | react-intersection-observer, react-query:infiniteQuery | 리액트쿼리에서 기본으로 제공하는 기능을 사용하여, react-intersection-observer를 사용하지 않고, 뷰포트의 높이를 계산하여 구현이 가능하다고 판단. 따라서 추가 라이브러리 설치 없이 무한스크롤 기능 구현 |
| FE | 그림판 | fabric.js, fixi.js, HTML Canvas Element | 라이브러리 사용시 그림판 구현의 속도가 빨라지고, 더 다양한 기능을 넣을 수 있지만, 해당 서비스 특성상 다양한 기능보다는 그 날의 감정에 따라 일기장에 낙서처럼 투박하게 그리는 그림이 컨셉에 더 적합하여 라이브러리를 사용하지 않고 HTML Canvas Element를 이용하여 구현하기로 결정. |
| FE | 패럴럭스 스크롤 | parallax.js, react-scroll-parallax, styled-component | styled-component를 통해 스크롤 위치에 따른 css 변화를 충분히 줄 수 있는 상황에서 추가적인 라이브러리의 설치가 불필요하다고 판단. |
| FE | 프로텍티드 라우트 | 페이지 별 useEffect 사용, react-router-dom의 router.tsx에서의 프로텍티드 라우트 처리 | 각 페이지별로 동일한 로직의 useEffect를 반복적으로 사용하는 것보다, 라우터 파일에서 사용자, 게스트에 따른 라우트 처리를 한번에 해 주는 것이 효율적이라고 판단. |
| BE | Refresh Token 적용 | Access Token만 이용 | 로그인 유지 시간을 오래 지속되게 하여 편의성을 개선하도록 도입 |
| 짧은 Access Token 만료 기간과 적당한 Refresh Token 만료 기간으로 보안 측면 고려 | |||
| BE | cloud front 적용 | AllowedOrigins 와일드카드 | 캐시 동작 및 요청 처리에 CORS 관련 헤더를 추가하는 정책을 설정하여 클라이언트와 서버 간의 다른 출처에 대한 요청을 안전하게 처리 및 CORS(교차 출처 리소스 공유) 대응 |
| BE | CI/CD 파이프라인 구축 | 수동배포 | 수동으로 빌드와 배포를 반복, 이를 해결하기 위해 도입 |
| 자주 빌드하고 테스트하므로 버그를 더 빨리 발견하고 수정할 수 있음 |
이번 주 한 일
유저 테스트를 진행했다면 해당 항목을 추가로 작성 해 주세요
유저테스트 설문지의 링크와 결과, 결과를 토대로 반영해야 할 점을 작성 해 주세요
유저 테스트를 기반으로, 무엇을 어떻게 개선하면 좋을지 우선순위 별로 기록 해 주세요
| 우선순위 | 개선 및 추가사항 | 마감일자 |
|---|---|---|
| 1 | ux적으로 부족한 부분 개선 | |
| 2 | protected route 개선(로그인시 진입불가능한 페이지 처리) | |
| 3 | ||
| 4 |