최종프로젝트 3주차 회고록

suwoncityboyyy·2023년 2월 24일
0

1. 기술적 의사결정 & 트러블슈팅 기록

Recoil , react-query를 사용한 이유

  • Redux의 보일러플레이트 문제

기존 리덕스에서 상태관리를 하려면 기본적인 client단 상태관리 로직인데도 아래처럼 초기세팅을 해줘야 할게 많습니다. 전역state가 추가 될 때 마다 store에 reducer도 넣어줘야 되고

또 서버와의 통신을 하기위해서는 reateAsyncThunk를 써야하는데 로직이 createAsyncThunk, extraReducers 등을 통해 일일히 초기 세팅을 해줘야 해서 불편한 감이 있었습니다.

이런 불편함을 해소하기 위해서 Recoil 과 React-query를 도입하였습니다. 초기설정도 간단하고 보기에도 코드가 직관적이라서 더 좋은것 같습니다.

Recoil

React-query

CRA(Create-React-App) 명령어 없이 Webpack을 초기 설정 후 프로젝트 진행
기본적으로 CRA는 webpack과 babel등이 다 세팅 된 상태인데 하나하나 세팅한 이유는 번들러 동작원리에 대해서도 궁금했고, 리액트 프로젝트가 어떻게 만들어지는지 궁금해서 CRA 없이 프로젝트를 진행 했습니다.
webpack.config.js 파일을 생성 후 초기세팅 해준 코드입니다.
초기설정을 할때 파일을 읽어오는 시작점을 entry 속성으로 설정할 수 있고, .js파일로 진입점을 사용하면 됩니다. 반대로 번들 된 결과물도 설정 할 수 있으며 반환된 파일들은 dist 폴더로 이동하게 됩니다.
그외에 패키지들을 추가할 때에는 require명령어로 추가해준 후 변수를 사용합니다.

그리고 경로별칭을 지정해 줄수있습니다. 저희는 src로 바로 접근하기 위해서 골뱅이로 접근할수 있게 설정을 하였습니다.
그외에 babel로더를 사용하기 위해 module에 규칙을 추가 하였고, ts loader, css-loader 등 사용하고 싶은 파일을 정규식으로 지정 후 설정해 주었습니다.

그리고 환경변수 세팅을 해주기 위해서는 cra와 다르게 dotenv를 설치해 줘야하고 전역에 변수선언 한 dotenv 변수를 new webpack.DefinePlugin({ 에 할당해 줘야 합니다.

3. 중간발표 피드백 기록

  • UI/UX 부족
  • 일정페이지에서 지도 레벨 경로 어떻게 설정할지
  • 전체적으로 로그인해야 가능함(접근권한이 많이 요구됨)

4. 중간 발표 후 회고 (예시)

1) 미구현 된 MVP 기능

  • 도시상세페이지
  • 지도에 표시된 경로 캡쳐 기능 (메인 페이지 - 베스트 일정의 대표 이미지로 보여줄 예정이였음)

2) 추가/개선 할 기능과 그 이유

  • 전체 UI/UIX

    • 아직 디자인 시안이 미완성인 상태여서, 빠르게 완성 후 적용해야 됩니다.
  • 헤더

    • 검색 기능 : 검색어 입력시 검색어 자동완성
      • 사용자가 검색어를 입력할 때 가이드 역할을 할 수 있는 자동완성 기능을 추가하여 사용에 편의성을 더하고자 합니다.
  • 일정 만들기

    • 드래그앤드랍으로 스케쥴 및 일정 수정 구현 - 사용자 편의성을 위해
    • 지도 확대/축소 할때마다 지도 더블링 현상 개선
  • 관광지 상세 페이지

    • 후기 작성 시 장소에 대한 평가를 태그로도 선택할 수 있는 기능 추가
      • 장소에 대한 평가를 직관적으로 볼 수 있도록 하기 위함입니다.
profile
주니어 개발자 기술노트

0개의 댓글