💊 필링 프로젝트 회고
👉 필링 Demo 유튜브 이동
프론트엔드 GitHub Repository
백엔드 GitHub Repository
1. 프로젝트 소개
1.1 필링 API 서비스 🔖
- 영양제 구독 서비스인 필리를 클론한 프로젝트입니다.
- 디지털 헬스케어 분야에서 영양제 구독 이라는 독특한 서비스를 제공하는 필리 사이트를 모티브로 하였습니다.
- 설문조사를 통해 추천성분을 제공하는 서비스의 차별화를 매력적인 포인트로 생각하여 서비스를 만들었습니다.
- 설문조사와 제품 설명에 기획 요소를 추가하여 개발자를 위한 영양제 추천 서비스를 제공하고 있습니다.
1.2 팀원 소개 🙋♂️
- Front-End : 김영호, 김태수, 정행운
- Back-End : 고영수, 최현수
1.3 작업 기간 📅
2021.09.13(월) ~ 2021.10.01(금)
2. 적용 기술
2.1 Front-End ⏩
- JSX
- React.js
- React-Router
- React Hooks
- Styled Component
2.2 백엔드 ⏪
- Python 3.8, Django 3.2.7
- MySQL 8.0.23
- Unittest
2.3 협업 툴 🛠
- Git, Github
- Trello
- Postman
2.4 개발 방법론 🕶
- Agile 방법론
3. 주요 구현 사항
직접 구현한 기능은 ✅, 팀원이 구현한 기능은 ✔️로 표시했습니다.
3.1 회원가입, 로그인
✔️ 토큰을 이용한 회원가입, 로그인, 로그아웃 기능
✔️ 카카오소셜 로그인 기능
✔️ 유효성 검사 로직에 따른 레이아웃 구현
✔️ 모두 동의하기 기능 구현
3.2 내비게이션 바
✔️ 메뉴 클릭시 동적 라우팅 적용
✔️ 로그인, 로그아웃 시 내비게이션 바 레이아웃 변경
3.3 메인 페이지
✅ React-slick 라이브러리 이용 및 CSS 커스터마이즈 슬라이더 구현
✅ React-Spring 라이브러리를 이용한 숫자 애니메이션 추가
✅ 각 컴포넌트 data.js를 통한 map 활용한 레이아웃 구현
3.4 설문조사
✔️ 로그인한 유저의 설문조사 결과 상세페이지 렌더
✅ query string을 활용한 동적 라우팅 구현 (도움)
✔️ state로 상태 관리 후 URL 변경 없이 설문 페이지 이동, 답변 선택 시 fetch API 활용하여 서버에 전송 기능
✔️ 유효성 검증 로직 추가하여 FE/BE 양측에서 유효성 확인하도록 구현
3.5 장바구니
✅ useState를 통한 백엔드와의 통신으로 체크박스의 상태관리 기능 구현
✅ 제품 수량 변경 및 수량 변경에 따른 총 결제금액 기능 구현
✅ 삼항 연산자를 사용하여 체크박스에 따른 opacity 추가 및 수량 변경 이벤트 제거
✅ 체크박스, 수량 조절마다 fetch를 통한 PUT 메소드 보내기 구현
3.6 Footer
✅ map을 통한 레이아웃 구현
3.7 고객 리뷰
✅ Mock data를 활용한 레이아웃 구현
3.8 제품 리스트
✔️ 컴포넌트를 활용한 제품 카드 구현
✔️ fetch API를 활용한 데이터 렌더링
3.9 상세 페이지
✔️ 장바구니 제품 추가 기능 구현
✔️ 장바구니 제품 추가 여부 팝업창 구현
3.10 프로필
✔️ 프로필 내 설문조사 결과 메뉴에서 로그인한 회원의 설문 결과 렌더
✔️ enum 패턴을 활용한 코드 간결화
4. 기억하고 싶은 코드
4.1 장바구니 수량 PUT 메소드로 보내기 🧑💻
const handleFetchPlus = product => {
fetch(CART_API, {
method: 'PUT',
body: JSON.stringify({
user_id: localStorage.getItem('user_id'),
product_id: product.product_id,
quantity: product.quantity + 1,
}),
headers: {
Authorization: localStorage.getItem('user_token'),
},
})
.then(res => res.json())
};
<PlusBtn
onClick={() => {
product.checked && handleAdd(product.product_id);
handleFetchPlus(product);
}}
>4.2 체크박스 상태관리 구현 🧑💻
const [products, setProducts] = useState([]);
const handleChecked = productId => {
const changeChecked = products.map(product => {
if (productId === product.product_id) {
return { ...product, checked: !product.checked };
} else return product;
});
setProducts(changeChecked);
};4.3 상수데이터를 이용한 장바구니 금액 구현 🧑💻
const SHIPPING_FEE = 2500;
const ContentPrice = ({ products }) => {
const PriceForPills = products.map(product => {
if (product.checked) {
return Object.values(product)[4] * product.quantity;
} else return null;
});
};
const TotalForPills = PriceForPills.reduce((a, b) => a + b, 0);
const TotalPriceTag = TotalForPills + SHIPPING_FEE;
const PricePerDay = TotalPriceTag / 30;4.4 color.js 및 jsconfig.json 활용 🧑💻
// color.js
export const color = {
WHITE: '#FFF',
BLACK: '#333',
DARKGRAY: '#58595B',
LIGHTGRAY: '#DDD',
GRAY: '#B2B2B2',
ORANGE: '#F79200',
};
// jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}5. 프로젝트 후기
영양제 구독 서비스인 '필리'를 모티브로 한 '필링'이라는 프로젝트가 드디어 끝이 났습니다. 사실은 프로젝트가 끝난 시점은 약 2주 전이지만, 기업 협업 등으로 인해서 정신이 없어서 이제서야 업로드를 하게 되었습니다.
제가 제안한 '필리'사이트가 채택되어 PM으로서 진행한 프로젝트라 더욱 기억에 많이 남는 프로젝트인 것 같습니다. 부족한 저를 PM이라고 존중해주고, 소통을 해주신 현수님, 행운님, 영수님, 영호님이 계셨기에 2차 프로젝트가 무사히 끝이 날 수 있었다고 생각합니다. 이 자리를 빌어서 다시 한번 감사의 말씀을 드립니다 🙇♂️
2차는 1차와 달리 백엔드분들이 유닛테스트 등의 이슈로 작업이 다소 느려지는 상황이 발생했고, 프론트가 먼저 작업을 끝내면서 프로젝트를 시작하게 되었습니다. 이를 통해서, 프론트가 프로젝트를 리드를 했어야했고, 이 부분에서 백엔드와 많은 소통을 진행했어야 했습니다. 그런 부분에서 굉장히 부족한 점을 많이 느꼈고, 그랬음에도 불구하고 특히, 장바구니를 무사히 끝낼 수 있도록 도와준 영수님에게 큰 감사를 전합니다 🙏
그리고 회의록의 엄청난 정리 능력과 근성을 보여준 행운님, 전반적인 백엔드의 중심을 잡아준 현수님, 1차에 이은 저의 계속된 질문과 불만에도 언제나 긍정적으로 답해주신 영호님에게 고마움을 전하며, 모두가 있어서 재미있고 만족스러운 2차 프로젝트였습니다.
5.1 잘한 점 👏
🤗 추석을 포함한 프로젝트 주간이었지만, 일주일을 위코드에 출근하지 않으면서 프로젝트를 진행했습니다. 원활한 프로젝트 진행을 위해서 추석 연휴 기간에도 친한 동기분들과 모각코를 하며, 미리 장바구니 기능을 구현해놓아서 조금 더 리팩토링에도 시간을 투자할 수 있었습니다.
🤗 멘토님께서 클래스 컴포넌트로 착각하여 다른 솔루션을 주셨지만, 멘토님들에게만 매달리지 않고 계속적인 구글링을 통해 자기주도 학습 능력과 그래도 해결하지 못했을 때엔 동기들에게 적극적으로 찾아가 질문을 하였습니다. 그래도 해결이 안되어 끈질기게 또 다른 멘토를 찾아가거나 스택오버플로우를 활용하는 등 각종 문제 해결력을 기를 수 있는 좋은 기회였습니다.
🤗 PM으로서 추석 포함한 3주간의 프로젝트 동안 밝은 팀 분위기와 원활한 소통을 유지하기 위해 팀원들과 매일 회의나 점심 식사를 통해 서로 친해지기 위해 끊임없이 하려고 노력하였습니다. 추석 마지막 날, 백엔드와의 통신을 위해 만나 같이 코딩을 하고, 마지막에 회식을 하며 맥주를 마시던 일은 아직도 기분 좋은 기억으로 남아있습니다🍺
5.2 아쉬운 점 🤦♂️
🤔 협업 툴인 슬랙을 잘 활용하지 못하면서, 저의 문제로 금과 같은 시간이 허비되었던 적이 있습니다. 슬랙에 API 주소를 남겨주셨지만, 이를 잘 확인하지 못하면서 약 반나절의 시간이 낭비되었습니다. 협업 툴과 소통에 대한 중요성을 다시 한 번 깨닫게 된 계기였습니다.
🤔 멘토님들의 리뷰도 바로 반영하며, 리팩토링에 시간을 계속해서 쏟았지만 아쉽게도 모든 기능을 제 것을 만들기에는 부족했다고 생각합니다. 이제부터라도 하나의 기능이라도 제대로 원리를 파악하며, 학습을 하고 완전히 저의 것으로 만들며 코딩을 진행해야겠다고 생각하게 된 좋은 기회였습니다.
