정보처리기사 시험도 끝났겠다..
코드잇 교육 과정도 끝났겠다..(마지막 프로젝트 빼고)
Part3 멘토님이 입이 닳으시도록 강조하셨던 개인 프로젝트를 진행해보기로 했다.
내가 진짜 재미있어하는 주제로 진행해보고 싶어서 정한 주제는 바로바로...
무도 짤을 찾을 수 있는 사이트를 제작 해보고자 한다!
무도 짤,, 특히 박명수 짤을 섞어가며 채팅하는 것에 맛들려있는데,
지금 내가 짤을 이용하는 방식은
고독한 박명수 채팅창에서 짤 수집 -> 갤러리에 저장 -> 쓰고 싶을 때 적절한 짤 찾기.
그치만 적절한 짤을 찾는데 좀 시간이 걸렸다.
그래서 상황에 맞는 짤을 바로 팢아내서 쓸 수 있다면 좋을 것 같은데?! 하는 생각에 주제를 잡고 기획을 시작했다.
백엔드 없이 혼자 하는 프로젝트이기 때문에
이전에 멘토님께서 보여주신 예시들에서 아이디어들을 얻었다(giphy와 유사한 프로젝트).
또 해당 프로젝트는 먼저 써보고 싶은 기술들을 정한 다음 세부 요구 사항들을 기획했다.
기술 스택
코드잇에서 학습했던 기술스택들을 다양하게 활용해보고 싶었다.
거기에 요즘 많이 쓰이고 있어서 익혀보면 좋을만한 기술들을 넣어보았다.
기본
- Next.js
- TypeScript
코드 스타일링
- prettier
- ESLint
디자인
- Tailwind CSS
- storybook
api & 데이터 상태관리
- Axios
- firebase
- 카카오톡 공유 API
- react-query
- zustand
배포 & 관리
- Vercel
- Git
모든 기술들에 대한 실력을 엄청나게 향상 시키는 것을 목표로 하기 보다는,
조금이라도! 써보면서 기술에 대한 필요성(탄생배경)과 근본적인 원리를 이해해보는게 목표이다.
프로젝트 목표
이번 프로젝트에서는 light house를 통해 성능 측정을 해보고자 한다.
이 블로그를 참고하여 다양한 방식으로 성능을 측정하면서 리팩토링을 진행해볼 예정이다.
UI & 요구사항
UI의 경우 디자인에 많은 신경을 쏟기 보다는 비슷한 이미지 제공 서비스 Pixabay의 UI를 참고하기로 했다.
이를 바탕으로 figma에 UI 디자인과 요구사항을 정리해보았다.
메인 화면
검색 결과 화면
사진 상세 화면
메인 기능은 다음과 같다.
- 사진 기본 조회 기능
- 키워드 별 사진 조회 기능(상황별, 멤버별)
- 카카오톡 공유 기능
- 웹앱 형식의 서비스(반응형 디자인 적용)
- 댓글 기능
추가 예정 : 사진 업로드 기능, 사진에 리액션 달기 기능, 추천순 조회 기능
Git 브랜치 전략
이전 프로젝트에서 썼었던
- main
- develop
- feat
- feat/기능/ui (UI 개발)
- feat/기능/func (기능 개발)
과 같은 방법으로 브랜치를 관리할 예정이다.
데이터
기획을 하다보니 어쩔 수 없이 백엔드의 api가 필요한 상황이 생겼다.
프론트엔드 개발자가 혼자 프로젝트를 진행할 때 백엔드를 어떻게 구현하나 찾아본 결과
firebase로 쉽게 백엔드를 구현할 수 있다는 정보들을 보았고, UI 개발이 끝난 이후 firebase로 백엔드를 구축해볼 예정이다.
그 때 만들 필요한 데이터들을 미리 명세해보았다.
사진 데이터
{
id: number,
tags: {
parent_tag: string[],
parent_tag: string[],..
},
url: string,
userId: number,
likes: number,
dislikes: number
}
댓글 데이터
{
id: number,
userId: number,
createdAt: date,
contents: string,
}
유저 데이터
typicode(여러 유저중 선택해서 로그인) or 카카오 로그인 api
{
id: number,
nickname: string,
createdAt: date,
uploaded_photos: photo_id[],
profileImage: string, // 여러개 중 선택?
}유저 데이터의 경우 아직은 어떤 식으로 구현할지 감이 안잡혀 틀만 구상해보았다.
일정
요구사항 및 UI 정의 → Git flow 전략 → 기능별 개발 → 배포 → 성능 최적화 및 리팩토링
자세한 개발일정은 아래와 같다.
UI 컴포넌트 개발 (storybook) → 페이지 UI 개발 → 데이터 넣기 → 데이터 연동 → 리팩토링
잘 마무리가 되면 좋으련만..ㅎㅎ
기타
나혼자 하는 프젝이어도 코드 스타일링이나 컨벤션을 맞추는 연습을 해보면 좋을 것 같아
개인적으로도 컨벤션을 정해두었다!
이렇게 첫 개인 프로젝트의 기획을 나름대로 해보았다.
아주 간단한 서비스인데도 생각할게 참 많다.
지금 코드잇 마지막 프로젝트를 진행중인데 그것도 기획이 너무 어려워서 애쓰는중이다.
그래두 완성하면 뿌듯할듯!! 많은 걸 배워가는 경험이 될 수 있길~~!
