7주간 엘리스 SW 엔지니어 과정 교육이 끝났다.
길었다면 길었고 짧았다면 짧은 기간 동안 참 많이 배운 것 같다.
이제는 배운 걸 활용해 볼 시간!!
첫 프로젝트는 웹 쇼핑몰 제작이다.
여담이지만 나는 원래 쇼핑몰 사이트를 개발해 주는 사람이 되고 싶었다.
건당 1.5 받고 30명 한테만 구축해 줘도 흐흐
아무튼 좋은 기회에 관심 있는 프로젝트 주제여서 잘해 보고 싶다!!
팀원 결성!🎉
팀원 5명이 결성되었다..!
서비스의 목적 (Goal)과 목표 (Objective) 설정! 🎯
목적:
저희는 반려견을 막 키우기 시작한 분들이나 어떤 상품이 자신의 반려견에게 괜찮을지 맞춤 서비스를 제공해 상품을 고르는데 고민을 최소화하고 빠르게 구매를 유도할 수 있는 서비스를 제공합니다.
목표:
1. 키우는 반려견의 정보를 사용자에게 받아 알맞은 상품을 추천해 줍니다.
2. 상품마다 특징을 표시해 줍니다. (예를 들어 식품은: 친환경, 장난감은: 무독성)
3. 초보 반려인들을 위한 편리한 서비스를 제공합니다.
페르소나 정의 🫥
페르소나란?
페르소나는 서비스의 대상 사용자를 대표하는 가상의 인물 프로필로, 그들의 특성, 필요, 동기 등을 구체화하여 제품이나 서비스의 디자인과 전략을 결정하는 데 도움을 줍니다.
이름 : 체셔켓
나이: 30
직업: 직장인
반려견: 대형견 키움
구매 동기:
" 저희 집 강아지에게 딱 맞는 장난감을 구매하려고요,
근데 어떤 상품이 좋은지 잘 모르겠네요.. "
디자인 기획 단계 💅
디자인을 기획하면서 새로운 사실을 알게 되었다.
사람은 3 원색을 기반으로 바라보지만
반려견과 반려묘들은 2 원색을 기반으로 바라본다는 사실!
이런 사실을 기반으로 반려견들의 바라보는 시선을 간접적으로 체험 해고자
사이트의 대표 컬러는 파란색과 노란색으로 결정되었습니다.
이제 실전이다!
살아온 인생이 제각각 다른 우리, 코드 스타일도 제각각 일 테니 제일 가장 먼저 정의한 것은
컨벤션 정의
였습니다.
커밋 컨벤션 정의 ✨
1. Commit 메시지 구조
[이모지] [타입] [내용]
[본문]
* 각각의 구분자는 스페이스로 합니다.
* 한 줄을 띄워 본문과 구분합니다.
2. Commit 타입
- ✨ Feat : 새로운 기능을 추가하는 경우
- 🐛 Fix : 버그를 고 친경우
- 💄 Style : UI style 변경
- 🔄 Rename : 파일명(or 폴더명)을 수정한 경우
- 🔥 Remove : 코드(파일)의 삭제가 있을 때. "Clean", "Eliminate"를 사용하기도 함
- 🔨 Refactor : 코드 리펙토링
- 💡 Comment : 필요한 주석 추가 및 변경
- 🚚 Move : 코드의 이동이 있는 경우
- ⚙️ Setting : package.json 포함 및 모든 설정 파일 수정
예시) git commit -m '✨ Feat 로그인 기능 추가'
git commit -m '💄 메인 페이지 UI 추가'
코드 컨벤션 정의 💻
Prettier 적용!
prettier는 코드 포맷터로, 코드를 일관된 스타일로 자동으로 정리해 주는 도구입니다.
{
// 쌍따옴표 대신 홑따옴표 사용
"singleQuote": true,
// 모든 구문 끝에 세미콜론 출력
"semi": true,
// 탭 대신 공백으로 들여쓰기
"useTabs": false,
// 들여쓰기 공백 수
"tabWidth": 2,
// 가능하면 후행 쉼표 사용
"trailingComma": "all",
// 줄 바꿈할 길이
"printWidth": 80,
// 객체 괄호에 공백 삽입
"bracketSpacing": true,
// 항상 화살표 함수의 매개 변수를 괄호로 감쌈
"arrowParens": "always",
// OS에 따른 코드라인 끝 처리 방식 사용
"endOfLine": "lf"
}상세기능 명세 🚧
구현해야 할 기능들을 리스트업 하고 필요한 작업이 무엇이 있는지 스케치하듯 메모했다.
상태를 변경해 전체 기능 구현 진척도를 한눈에 알 수 있을 것이다.
파일 구조 만들기 📁
파일 구조를 명확히 하고 그 목적에 맞게 사용되어야 합니다.
예를 들어 비즈니스 로직이 라우팅 폴더에 들어가 있으면 안 됩니다.
파일 구조는
```
📦
├─ .gitignore
├─ client
│ ├─ README.md
│ ├─ index.html
│ ├─ package-lock.json
│ ├─ package.json
│ ├─ postcss.config.js
│ ├─ public
│ ├─ src
│ │ ├─ App.css
│ │ ├─ App.jsx
│ │ ├─ assets
│ │ ├─ index.css
│ │ └─ main.jsx
│ ├─ tailwind.config.js
│ └─ vite.config.js
├─ package-lock.json
├─ package.json
└─ server
├─ routes
├─ controlloers
├─ middlewares
├─ services
├─ models
│ └─ schemas
├─ .prettierrc
├─ app.js
├─ config.js
├─ package-lock.json
├─ package.json
```
©generated by [Project Tree Generator](https://woochanleee.github.io/project-tree-generator)
아직 정의해야 할 것은 수 없이 많다. API 명세서 라던가 API 명세서 라던가.. API 명세서..
이번에 팀장으로 팀을 이끌게 되면서 협업과 문서 작성 방법에 대해서 많이 배우는 것 같다.
작성하기 조금 번거롭지만 이런 것들이 앞으로 개발할 때 순조롭게 프로젝트를 완성시켜 줄 것이라고 확신한다.
