공감병동 프로젝트

1. 배포 링크
2. Github Repo - Client
3. Github Repo - Server

회고

1. 만족스러운 점

1) 높은 SEO

Next.js를 활용한 서버사이드 렌더링으로 웹사이트를 개발하였기 때문에 높은 SEO 점수를 받을 수 있었다.

2) 3단계 반응형

이번 공감병동 프로젝트에서 가장 마음에 드는 부분은 바로 반응형이다. 바로 이전 프로젝트에서는 2단계로만 반응형을 구현했어서 아쉬움이 컸는데, 이번에는 3단계로 나누어 구현하여 더 완성도 높은 웹사이트가 된 것 같다.

또한 tailwind를 활용해 media 쿼리를 더욱 간단하게 구현할 수 있었다.

2. 아쉬운 점

1) 느린 TTFB

로컬에선 20ms ~ 50ms으로 비교적 괜찮은 성능을 보였는데,
배포 환경에서는 1.4s ~ 2.0s로 체감이 확 될정도로 느렸다.

로컬

배포

다양한 자료를 살펴보았지만 이렇다할 원인을 알아낼 수 없었다. 결국 팀원과 논의 끝에 배포환경을 바꿔보자는 결론을 내렸고, 결국 Vercel 배포를 내리고 백엔드 서버를 배포한 EC2에서 클라이언트도 함께 배포하게 되었다.

해당 이슈에 대해 팀원과 다양한 테스트를 해보았다!
(참고 : 팀원의 블로그)

2) 로딩 화면

서버사이드 렌더링을 처음 구현해보다보니 미쳐 신경쓰지 못한 부분이 로딩 화면이다. 다행히 데이터가 없을 경우, 이를 알려주는 NoData 컴포넌트를 활용해 처리해주었지만, 로딩 화면을 빠뜨려버렸다.

리팩토링 계획

프로젝트를 진행하면서 아쉬웠던 2부분을 중점으로 리팩토링할 계획이다.

1. 무한스크롤 또는 페이지네이션 : 글 둘러보기, 진료과별 이야기, 상급종합병원목록, 나의 기록 등 많은 페이지에서 적용이 필요하다.
2. 로딩 화면 : 데이터가 다 불러와지지 않았을 경우, 로딩 화면을 띄워 더욱 완성도 높은 결과물이 되도록 해보겠다.