사이드 프로젝트：1차 회고

애자일 프로세스로 작업하다.

이전에는 기능 구현 후 커밋하는 프로세스로 작업하였다. 실무 멘토링을 진행 후 작은 단위의 목표를 정하여 빠르게 작업 후 배포하는 프로세스로 진행 하였다.

---

Keep

프로젝트에서 잘한 점

• 애자일 프로세스를 이해하여 작업 진행
• 실무와 유사하게 깃허브 협업 프로세스로 선정하여 진행

---

Problem

개요

일상생활에서 단어가 궁금하면 검색 및 단어 저장하는 서비스

---

상황

• 테일윈드 CSS 숙련도가 낮았다.
• CORS 오류가 발생하였다.
• Vercel 배포 후 많은 난관이 발생하였다.

---

문제 해결

• 빠르게 반응형 웹을 구현하기 위한 테일윈드 CSS를 선정하였지만, 초기에는 숙련도가 낮았다. 공식 문서에서 CSS 속성명을 검색하여 사용하면서 숙련도를 높였고, 지속적으로 사용한 결과 익숙해졌다.
• HTTP GET 통신 과정에서 CORS 오류가 발생 후 해결 방법을 찾기 위한 검색을 시작하였고 자료를 참고하여 클라이언트 및 서버 측에서 해결하는 방법을 모색하였다. 보통 서버 측에서 해결하는 자료가 많았지만, 서버를 관리하지 않아 클라이언트 측에서 해결해야만 하였다. 난생 처음 오류였기에 해결하는 데 시간이 다소 소요되었다. 해결 방법은 http-proxy-middleware와 proxy를 사용하는 방법이 있었다. 둘다 시도하였지만, proxy 서버로 해결하였다.
• 시간 관계로 기획, 디자인 없이 개발을 진행하였으며, 우선 기능 구현한 후 추후에 UI를 고려하기로 하였다. 로컬 서버에서 개발 후 Vercel에 배포하였으나, 404 및 504 오류가 발생하였다. 로컬 서버에서 잘 작동하였으나, 배포한 URL에서 제대로 작동하지 않았다. 배포 과정에서 문제가 발생하여 Vercel 자료를 찾는 과정에서 많은 난관에 부딪혔다. 그 결과 Vercel 환경 변수, 프록시 설정, 배포된 URL 문제를 여러 차례 수정하여 해결하였다.

---

아쉬운 점

• 초기 UI 구현, 깃허브 커밋 메시지 등 다소 아쉬웠다.
• HTTP 통신 및 네트워크 등 공부할 필요성을 느끼고, 서버 언어를 공부하지 않아서 클라이언트에서 해결한 점을 통해 더 공부 후 서버로 해결해 보고 싶었다.
• 오류 해결 후 일정이 촉박하여 반응형 웹 구현을 시도하지 않았다. 명확한 목표를 설정하여 달성한다.

---

해결 후 문제 점

• 검색 시 504 오류 문제
  • 404 오류를 해결하였으나, 배포 후 검색 시 정상적으로 작동하다가 간헐적으로 504 오류가 발생하였다.

---

배운 점

• 테일윈드 CSS
  • 디바이스 크기 및 디자인 요소에 따라 빠르게 개발을 진행할  수 있게 되었습니다.
• HTTP 통신 및 네트워크
  • 클라이언트에서 서버로 통신할 때 발생하는 문제를 해결하면서 HTTP, 네트워크 등 알아야 한다는 것을 깨달았습니다.

---

Try

계획

• 반응형 웹 구현
  • 디자인 레퍼런스 참고하여 빠르게 구현
  • 디자인 요소 필요 시 피그마 이용하여 작업
• 504 오류 해결
  • 해결 시도 후 오류 발생하면 친구, 지인 및 커뮤니티 활용하여 도움 요청
  • 만일 해결이 되지 않을 시 코드 변경
• 성능 최적화
  • 코드 리뷰 및 성능 향상하기 위한 리팩토링 진행
• 폴더 구조
  • 우선 반응형 웹 구현 시 영역별로 컴포넌트 생성
  • 반응형 웹 구현 후 규모 확장 가능한 폴더 구조 설계
• 1차 스크럼 애자일 프로세스 검토