1. 프로젝트 명 : Mildo(밀도)

• 모바일 웹 환경에서 서울시 실시간 인구 밀도 정보를 제공

2. 지난 주 진행 내용

• 아이디어 선정 및 구체화
  • 팀원 모두가 애정을 가지고 지속적으로 개발하고 싶은 아이디어는?
  • 부스트캠프에서 배운 기술을 복습하고 발전시킬 수 있는 아이디어는?
  • 여러 후보 중 어떤 것이 우리 팀원들에게 도움이 될지 의논하기 위해 많은 시간 투자
• 프로젝트 UI 구성
  • figma로 프로젝트 UI를 작성하며 실제 기능을 어떻게 구현할지 고민
  • 구현 단계에서 시간을 절약하기 위해 UI 작성 시 스타일을 최대한 구체적으로 결정
• 그래서 아쉽게도 기술 스택 결정 및 배포 환경 구성 등은 2주차에 하기로 결정!

3. 이번 주 목표

• 기술 스택 결정
• 개발 환경 설정
• 이슈 작성 및 기능 구현 시작
• 배포 및 CI/CD 구현

3. 이번 주 진행 내용

3.1. 기술 스택

• 기술 스택 회의를 통해 구현에 필요한 기술 선택
  • React, jotai, styled-component, mongoDB, express 등
• 해당 기술을 ‘왜’ 사용하는지 많은 고민과 토론을 통해 결정
  • ex) koa → express
    • 초기 웹프레임워크 : koa
    • koa를 선택한 이유
      1. express와 비슷한 구조이기 때문에 러닝커브가 낮을 것으로 예상
      2. express보다 가벼움
    • koa의 실체
      1. 가볍기 때문에 필요한 모듈을 더 많이 설치하여 사용해야 함 → 보일러 플레이트를 참고해야 했음
      2. koa의 보일러 플레이트들이 스프링 또는 nestjs와 비슷한 구조를 가지고 있어 생각보다 러닝커브가 높아보였음
  • 최종 결정 : express
    • 새로운 문법을 배우기보다는 기존에 사용했던 express를 더 깊게 공부하는 것을 선택

3.2. 개발 환경 세팅

• 팀원 전원 같이 개발 환경 구축

1. 디렉토리 구조 결정
2. 라이브러리(모듈) 설치
   • 의존성 관리 도구로 yarn 선택
   • VS code Live Share를 활용하여 함께 라이브러리 설치 진행
3. eslint, prettier, tsconfig 설정
   • eslint-config-naver 사용

3.3. 페어 결정 & 기능 구현

• 조를 2개로 나누어 페어프로그래밍 진행
• 각 페어마다 기능을 분류하고, 해당하는 이슈를 생성하여 개발 시작
  • 한빈/상준 → 네이버 지도 API를 활용한 지도 컴포넌트 생성
  • 현정/윤우 → 서울시 실시간 도시 데이터 API 활용을 위한 백엔드 작업
• 이번 주에는 시간 문제로 기능 구현은 Day8 오후에만 진행

3.4. 배포

• 배포 목표
  • 개발 기간이 6주로 짧아 계획한 기능을 모두 완성하지 못할 수 있음
  • 완성도 있는 서비스 개발을 위해 필수적인 기능을 우선 구현하고 매주 배포
    • 기능 구현 중이더라도 중단하고 배포를 우선으로 수행
• 이번 주 배포 내용
  • nCloud 인스턴스 서버를 생성하고 client와 server 배포
  • client는 nginx로 배포, server는 pm2로 배포
• CD/CD 구현
  • 팀원 모두 CD/CD와 배포에 익숙하지 않아 github action, nginx 등 학습
  • 이번 주 CD/CD를 위한 학습과 틀 잡기를 완료했고, 다음 주 완성 예정
• 구현 결과물 사진

  • build된 client 파일을 80번 포트에서 구동 중인 모습

    

  • 서울시 실시간 도시 데이터 api를 가져온 모습

    

4. 앞으로 할 일

4.1. 개발 일정(월~수)

• 지도 API 노출
• 서울 실시간 도시 데이터 API에서 가져온 인구 밀도 정보를 지도에 핀으로 표시
• 핀을 클릭하면 상세 모달창 노출
• 검색, 로그인 버튼, 필터링 UI 출력 후 기능 구현 예정

4.2. 개발 일정(목)

• CI/CD 학습 및 구현
• Docker 학습 및 구현