[WIL] 행동대장 프로젝트 3주차 회고

중간 점검

 

서비스 아키텍쳐

CloudCraft를 통해 만듦(커스터마이징 하기 상당히 불편, UX가 좋지 않다고 느낌)

기술적 의사결정

 

 

 

Github Actions	Github를 사용하기 때문에 효율적으로 관리할 수 있다. 초기 비용이 없다.
CodeDeploy	codedeploy는 AWS의 다양한 서비스와 연동되어 신속한 자동배포가 가능하다. 개발과 배포 속도가 높아져 안정적인 개발 환경을 유지할 수 있게한다.
MySQL	사용하기 쉽고 오래되어서 버그가 적다. 안전하고 안정적인 트랜잭션 처리와 데이터 저장이 보장된다.
S3	데이터 양에 따라 자동으로 확장되고 용량이 무제한이다. 데이터를 객체 형태로 저장하고 관리하기 때문에 서버의 부하를 줄이고 내구성이 좋다.
recoil	전역상태관리할 복잡한 데이터가 많지 않아 리덕스보다 상대적으로 가벼운 recoil 선택 보일러 플레이트 코드를 줄일수 있음 사용법이 직관적이고 쉬워 협업에 유리 최신 라이브러리를 도입해 봄으로써 최신 기술 도입에 익숙해지기 위함
TypeScript	버그를 사전에 발견하고 코드의 안전성을 높임 런타임 에러를 줄임 TypeScript의 정적 타이핑이 코드 작성 시점에 오류를 캐치
ReactQuery v4	서버쪽의 데이터를 좀더 쉽게 관리하기 쉬워 데이터 패칭, 캐싱, 동기적 서버의 상태의 업데이트에 용이 별도의 옵션을 지원하여 복잡한 코드를 reactQuery 로직을 통해 짧은 코드로 대체 프로젝트 구조가 기존보다 단순해져 유지보수하기 쉽고 새로운 기능을 쉽게 구축 최신 라이브러리를 도입해 봄으로써 최신 기술 도입에 익숙해지기 위함
CRA	복잡한 환경설정을 건너뛰고 바로 애플리케이션 개발에 집중할 수 있음 (웹팩, 바벨 등의 복잡한 설정을 씨알에이가 미리 해줌) CRA는 TS를 기본적으로 지원하기 때문에 복잡한 설정 없이 즉시 TS와 React의 조합으로 개발을 시작할 수 있음
styled-component	컴포넌트 기반 개발이 가능 JS와 CSS 사이의 상수와 함수를 쉽게 공유
Cloudinary	원본 미디어를 안전하게 보관하고 필요에 따라 여러 버전의 변환된 미디어를 생성하여 저장 공간을 절약할 수 있음 자동으로 이미지와 비디오를 최적화하여 사용자에게 더 빠르게 제공하며 대역폭 비용을 절감함

 

트러블 슈팅

여러장의 이미지 POST 요청(FormData)

Trouble

• 이미지를 서버에 전송하는 것에 대한 고민
  • 형식(url, 파일)에 대한 고민
  • 여러장의 이미지를 전달하는 방법에 대한 고민
  • 이미지와 다른 post data를 함께 보내는 방법에 대한 고민

Solution

• 이미지 요청:
  • url이 아닌 파일 자체를 배열로 FormData에 append 후 서버에 전송
  • 하나의 FormData 키값 ‘images’에 반복문(forEach)를 활용하여 배열의 요소를 하나씩 할당
  • content-type은 ‘multipart/form-data' ↔︎ 함께 보내는 string, number 데이터는 'application/json’
• (string, number)데이터 요청:
  • JSON.stringyfy로 전송할 데이터들을 json문자열로 변환한 후 객체화
  • 이미지와 함께 전송하고, 구별짓기 쉽도록 blob형태로 json데이터를 감싸 전송

 

추가 개발 및 다음주 할 일

SSE 알림 기능 구현

코드 리팩토링

유저 피드백 받기 위한 세팅 (에러 핸들링, 구글 폼 작성, 데이터 세팅, 경품 선정)