실전프로젝트 1주차 : 기능개발

프로젝트 진행상황

1. 기획

노션보드 정리

• 프로젝트 아이템, 테마 선정
• 서비스 방향 설정 및 기능 협의
• 기능기반 WF: 화면설계(FE)
• API 설계 (FE-BE)
• ERD (BE)

와이어프레임 작성

• 기능기반 와이어프레임 작성 및 페이지별 기능정의
• 디자인 시 변경되어도 되는 범위와 필수로 포함되어야 하는 항목 구두 전달

API 설계

• SWAGGER 도입
• URI 및 리퀘스트, 리스폰스 값 정의
• 커스텀 오류코드/변수명 정의

2. 디자인

UX 기획 (DE)

• 기존 확정된 기능 범위, 1차 플로우 외 UX에 따른 변동 범위는 디자이너님께 전적으로 맡기기로 협의
• 디자인 WF 설계 시 필수 범위와 변동 가능한 범위 협의
• 서비스 완성도를 위한 광범위한 타겟범위 내에서 페르소나 선정
• 페르소나의 여정지도, 페인포인트가 서비스를 통해 개선가능한지 검토
• 추가 페이지 기획

최종 WF 설계

• 기존 기능 기반 WF를 활용하여 디자인 레이아웃 WF 설계

3. 퍼블리싱 / 프론트엔드 개발

퍼블리싱 착수대기 (디자인 작업 완료 시 착수)

프론트엔드 개발

• 소셜로그인 (효진님)
• 게시글 상세조회/삭제 (효진님) : get/delete
• 댓글 CRD (효진님) : get/post/delete
• 게시글, 댓글 좋아요 (효진님) : post/delete
• 리스트 조회 (Joyfive) : get / selectbox 파라미터 연결
• 검색 리스트 (Joyfive) : get / query params
• 게시글 작성 (Joyfive) : post, 다중이미지 등록
• 게시글 수정 (Joyfive) : put, 이미지 추가 등록
• 마이페이지 (Joyfive) : get

4. 백엔드 개발 / 서버 세팅

백엔드 개발

• 소셜로그인(카카오)
• 게시글 CRUD, 댓글 CRUD
• 좋아요 CRUD
• 검색(쿼리파람)
• 리스트 조회(쿼리파람)
• 서울시 공공데이터 API 활용방안 스터디
• SWAGGER 도입

서버세팅

• EC2 & S3 이미지 서버 구축
• 깃허브 액션 자동배포

사용한 툴/라이브러리

JIRA

• 노션 외에 프로젝트 진행상황을 확인하는 툴로 지라를 도입했다.
• 전체적인 진행도와, 중간중간 소통이 필요한 건을 지라 TASK와 SUB TASK로 소통하는 방식을 차용해보기로 했다. 아직 티켓별로 브랜치를 따는건 익숙하지 않지만, 진행도 체크는 원활하게 되고 있는 중.

Tailwind

• 짧은 기간내에 퀄리티 높은 결과물을 뽑아내야하는만큼, CSS 라이브러리를 사용해서 진행해보려고 한다. 부트스트랩도 고민해봤지만, 부트스트랩은 디테일하게 수정하는데 한계가 있어 최근 떠오르고 있는 테일윈드를 사용해보기로 했다.
• 부트스트랩처럼 기본적인 세팅값이 있고, 부트스트랩보다 더 세밀하게 조정이 가능하다고 들어서 추후 유지보수가 계획되지 않은 실전프로젝트에는 적합한 라이브러리라고 판단했다. 우리의 작업 속도를 높여줄 친구로 낙점!

다음주 목표

기능개발

• 백엔드단의 서울시 공공 데이터 정리 작업
• 프론트에서는 그래프 표현 기법을 고민해볼 것
• 프론트 카카오 지도 API 도입 및 지도 API에서 검색이 가능한지 가능여부 확인
• 좋아요, 북마크, 마이페이지 기능 마무리

퍼블리싱

• 디자이너님의 본격적인 작업 이후 테일윈드 라이브러리 기본 세팅
• 완성되는 페이지부터 퍼블리싱 들어갑시다!

실전 프로젝트 전체 목표

• 프로젝트 완수 (이슈없는 배포)
• 1차 기능구현 완료 후 성능개선
• 타입스크립트 혹은 Next.JS 로 리팩토링(MVP 이후 범위)
• 공공 API, 소셜로그인 API 통신
• CSS라이브러리 (Tailwind) 도입

감상

생각보다 이번주에 진행한 일이 많은 것 같다. 작업을 하면 할수록 속도도 점점 빨라지고, 로직도 효율적으로 설계할 수 있게 되는 것 같아 감회가 새롭다. 아직 갈길이 멀긴 하지만, 이번주도 고생많으셨습니다. 우리 드림팀 4조!! 앞으로도 화이팅 해봅시다👊