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

아이디어 제안 및 선정

내가 낸 아이디어로 프로젝트 주제가 선정되어 조금 더 책임감을 가지고 임했다.
아래는 주제 선정당시 아이데이션 노트.

• 동네 사건 및 민원을 공유하고 개선해주는 웹사이트
  • 동네 민원을 공유하고 개선
  • 동네 민원이란 시설, 구조 문제
    • (ex) 놀이터에 발생한 크랙, 보도 깨짐, 장마 전 하수구 막힘 등)에 국한
  • 메인 페이지는 동네 지도, 사진 및 게시글 바탕을로 보여짐
  • 랭킹 시스템 > 작은 범위의 동네인원만 투표할 수 있게 지정(like 당근마켓)
  • 선정 이유
    • 공인인증서로 접근하기도 힘들고 웹사이트 내 다른 카테고리가 많아 번잡한 국민신고의 불편함을 해소
    • 민원사항을 텍스트 보단 지도와 이미지 형식으로 한눈에 볼 수 있어 접근성과 사용성을 높임
    • 시의성: 초등생 놀이터 사고, 장마철 하수구 막힘으로 인한 수해피해 등 안전 사고로 경각심이 높아짐

 

코드 컨벤션 설정

Front

• 객체, 함수, 인스턴스, 폴더 이름에는 camelCase
• 사용 생성자, 클래스, 컴포넌트 이름에는 PascalCase 사용
• 문자열은 작은 따옴표('') 사용
• 복수형 주석은 /** ... */ 을 사용, 단일행 주석은 // 을 사용
• 변수는 const, let 사용 (var X)
• 문자열 연결은 템플릿 리터럴 사용
• 모듈 내보내기 방식은 export const로 통일
• 코드 컨벤션에 따라 prettier, ESlint 옵션 설정

 

깃 플로우 전략 설정

1. main
2. develop
3. feature(ex. FE: feature/page-name, BE: feature-기능별)

 

Pull Request 컨벤션 설정

• 이슈
• PR 제목
  • #88 / edit: readme
• PR 본문
  • ### work description
  • add responsive design feature

PR를 날릴때는 모두에게 알린다

 

기술 스택 선정 및 기술적 의사결정

Front

• Recoil
  • 전역상태관리할 복잡한 데이터가 많지 않아 리덕스보다 상대적으로 가벼운 recoil 선택
  • 보일러 플레이트 코드를 줄일수 있음
  • 사용법이 직관적이고 쉬워 협업에 유리
  • 최신 라이브러리를 도입해 봄으로써 최신 기술 도입에 익숙해지기 위함

 

• TS
  • 버그를 사전에 발견하고 코드의 안전성을 높임
    • 런타임 에러를 줄임
  • TypeScript의 정적 타이핑이 코드 작성 시점에 오류를 캐치

 

• ReactQuery v4
  • 서버쪽의 데이터를 좀더 쉽게 관리쉬워 데이터 패칭, 캐싱, 동기적 서버의 상태의 업데이트에 용이
  • 별도의 옵션을 지원하여 복잡한 코드를 reactQuery 로직을 통해 짧은 코드로 대체
  • 프로젝트 구조가 기존보다 단순해져 유지보수하기 쉽고 새로운 기능을 쉽게 구축
  • 최신 라이브러리를 도입해 봄으로써 최신 기술 도입에 익숙해지기 위함

 

• CRA
  • 복잡한 환경설정을 건너뛰고 바로 애플리케이션 개발에 집중할 수 있음
    • (웹팩, 바벨 등의 복잡한 설정을 씨알에이가 미리 해줌)
  • CRA는 TS를 기본적으로 지원하기 때문에 복잡한 설정 없이 즉시 TS와 React의 조합으로 개발을 시작할 수 있음

 

• styled-component
  • 컴포넌트 기반 개발이 가능
  • JS와 CSS 사이의 상수와 함수를 쉽게 공유

 

• Cloudinary
  • 원본 미디어를 안전하게 보관하고 필요에 따라 여러 버전의 변환된 미디어를 생성하여 저장 공간을 절약할 수 있음
  • 자동으로 이미지와 비디오를 최적화하여 사용자에게 더 빠르게 제공하며 대역폭 비용을 절감함

 

이번 주 한 일

• 주제 정하기
• MVP, 후에 추가될 기능 정리
• API 명세
• 기능별 페이지 나누기
• 메뉴 구조도
• 메인, 로그인 회원가입 와이어 프레임(진행중)
• 기술적 의사결정 정리
• 폴더 구조
• 역할 분담
• 게시글 작성 페이지 작업
• 프로젝트를 위한 개인 공부(TS, Recoil, Kakao Map Api)

 

다음 주 할 일

• 기술적 의사결정 완료하기
• UX 개선에 대해 생각해보기, 더 필요하다고 생각되는 페이지나 기능 추가하기
• 메뉴 구조도 완성
• 개발 시작하기