수업 36~40일차
이번주는 부터 이주간 수업을 안듣고 팀원들과 쇼핑몰 페이지를 만드는 프로젝트를 시작했다. 텀프로 젝트를 해보니 매일 매일 시간이 부족하고 나의 실력이 얼마나 처참한지 알게되었다. 나는 이번에 백엔드 파트를 담당하게 되었다!
내용
월요일 팀원들과 처음 만나 프로젝트의 방향성을 정하는 시간이 되었다.
나는 모두 다하는 옷 쇼핑몰이 비교대상이 뻔할꺼 같아서 독특하게
여행사 페이지를 구현하자고 제안하였다. 팀원들이 승락을 하여 우리팀은 여행사 컨셉으로 시작하게 되었다.
첫날 저녁에 바로 백엔드 코치님과 오피스 아워를 진행하면서 첫날이라 인사하고 어떤 컨샙으로 갈지밖에 정하지 못했기 때문에 백엔드의 진행방향은 어떻게 하면 좋을지 프론트분들과는 어떻게 나눠서 진행해야하는지에 중점을 두고 질문을 하였다.
코치님이 스키마부터 짜고 시작하는게 좋다고 하셔서 나랑 같이 백엔드 담당인 분과 스키마를 저런형식으로 만들자고 먼저 정하고 시작하였다.
프론트 한분이 실리콘 벨리에 인턴 붙으신분이 있어서 한번에 압도 당하고 시작했다...
실력은 안되지만 팀원에게 피해 되지 않기를 바라며 열심히 했다.
화요일 수요일은 거의 있는 코드를 파악하며 MCV는 어떤 형식으로 짜여져 있는지 API는 어떤 방식으로 나뉘어서 구성되고 어떤 기능을 하는지에 중점을 두고 파악을 하였다.
백엔드는 눈에 보이는게 없기 때문에 처음에 애를 먹었다. 코치님도 console.log를 계속 찍어가면서 데이터의 흐름을 봐야한다고 하셨고 mongodb에 어떻게 저장되는지 확인하는것은 postman을 활용하여 저장하였다.
처음에 API를 만들때 데이터의 흐름이 왜 이렇게 되는거지? 하면서 어려웠었다....
예를 들어 상품 추가에 대해서 알아보자
mongodb에서는 현재 3가지의 상품이 저장되어있다.
postman으로 데이터를 보내서 상품 데이터를 db에 추가 할수 있다.
db에서도 확인을 해보니 3개였던 상품에서 추가되어 4개가 된것을 볼수있다. 스키마 형식에 맞춰 데이터 값이 잘 들어간것을 볼수가 있다.
//package-router.js
packageRouter.post('/package', async (req, res, next) => {
try {
// Content-Type: application/json 설정을 안 한 경우, 에러를 만들도록 함.
// application/json 설정을 프론트에서 안 하면, body가 비어 있게 됨.
if (is.emptyObject(req.body)) {
throw new Error(
'headers의 Content-Type을 application/json으로 설정해주세요'
);
}
// req (request)의 body 에서 데이터 가져오기
const packageName = req.body.packageName;
const category = req.body.category;
const country = req.body.country;
const price = req.body.price;
const days = req.body.days;
const departureAt = req.body.departureAt;
const arrivalAt = req.body.arrivalAt;
const totalNumber = req.body.totalNumber;
const imgUrl = req.body.imgUrl;
const substance = req.body.substance;
// 위 데이터를 유저 db에 추가하기
const newPackage = await packageService.addPackage({
packageName,
category,
country,
price,
days,
departureAt,
arrivalAt,
totalNumber,
imgUrl,
substance
});
// 추가된 유저의 db 데이터를 프론트에 다시 보내줌
// 물론 프론트에서 안 쓸 수도 있지만, 편의상 일단 보내 줌
res.status(201).json(newPackage);
} catch (error) {
next(error);
}
});//package-service.js
async addPackage(packageInfo) {
// 객체 destructuring
const { packageName, category, country, price, days, departureAt, arrivalAt, totalNumber, imgUrl, substance} = packageInfo;
const newPackageInfo = { packageName, category, country, price, days, departureAt, arrivalAt, totalNumber, imgUrl, substance };
// db에 저장
const createdNewPackage = await this.packageModel.create(newPackageInfo);
return createdNewPackage;
}코드의 내용을 보면 req에서 입력할 값을 가져와서 db에 저장하는 형식을 되어있다. 별거 없는 코드지만 엘리스에서 문제풀이형식으로만 풀어왔지 코드를 전체 다 만들어서 구동시키는 것은 처음이라 하나 성공하는데 많은 시간이 걸렸다.
현재는 이렇게 API문서를 만들어서 어떤기능을 하는지 어떤 메소드로 요청을 해야하지는 URL은 어딘지 작성하여 프론트 분들에게 드렸다. 현재는 유저와 상품에 대해서 만 구성했는데 앞으로는 주문쪽도 만들 예정이다. 프로젝트가 한주 남았는데 카테고리와 상품을 연결하고 추가 기능까지 만들수 있을지 의문이다 ㅜㅜ
다음주에는 완성해서 프론트와 연결해서 사용하는것으로 돌아오자!!
ps. git때문에 2일이나 날려버린건 비밀...
