Nodejs express로 에어비앤비 클론코딩 해보기 5.

도시별 숙소 보여주기

도시별 숙소 라우터

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
router.get('/city', async (req, res, next) => {
try {

let hosts;
let count;
let city;
let category
...
hosts = await Host.findAll({
where: {
hostaddress: {
[Op.like]: "%" + req.query.city + "%"
},
},
include: {
model: Image,
attributes: ['src'],
},
order: [['id', 'DESC']],
offset: offset,
limit: 12,

});
count = await Host.count({
where: {
city: {
[Op.like]: "%" + req.query.city + "%"
},
},
});
if(req.query.city) {
city = req.query.city;
} else {
city = "전체"
}
res.render('hosts', {hosts, count, city});
}

} catch (error) {
console.error(error);
next(error);
}
});

숙소의 주소 중 도시 컬럼의 값을 비교하여 해당 도시의 숙소를 가져오는 방식이다.

자세히 보기

Nodejs express로 에어비앤비 클론코딩 해보기 4.

local 계정 회원가입 구현

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 프론트 코드
document.getElementById('join__form').addEventListener('submit', (e) => {
e.preventDefault();
const joinData = {
email: e.target.email.value,
password: e.target.password.value,
name: e.target.name.value,
nickname: e.target.nickname.value,
phone: e.target.firstNum.value + e.target.middleNum.value + e.target.lastNum.value,
}
console.log(joinData);
if(joinData.email === "" ) {
return alert('이메일을 입력해주세요.');
}
if(joinData.password < 4) {
return alert('비밀번호는 4글자 이상입니다.');
}
if(joinData.name === "" || joinData.nickname === "" || joinData.phone === "" || joinData.phone.length > 11) {
return alert('잘못된 정보입니다.');
}

axios.post('/auth/join', joinData)
.then((response) => {
if(response.data.joinsuccess){
alert(response.data.message);
return window.location = "/login";
}
alert(response.data.message);
return location.reload();
})
.catch((error) => {
console.log(error);
});


e.target.email.value = '';
e.target.password.value = '';
e.target.name.value = '';
e.target.nickname.value = '';
e.target.firstNum.value = '';
e.target.middleNum.value = '';
e.target.lastNum.value = '';
});
// 서버 코드
router.post('/join', isNotLoggedIn, async (req, res, next) => {
try {
const {
email,
password,
name,
nickname,
phone,
} = req.body;
console.log(req.body);
//const phone = firstNum + middleNum + lastNum;
const user = await User.findOne({ where: {email} });
if(user) {
return res.json({ joinsuccess: false, message: "입력하신 이메일로 가입한 계정이 존재합니다..." });
}
const hash = await bcrypt.hash(password, 12);
const newUser = await User.create({
email,
password: hash,
name,
nickname,
phone,
});
return res.json({ joinsuccess: true, message: "회원가입 성공입니다."});

} catch (error) {
console.error(error);
return res.json({ joinsuccess: false, message: "데이터 베이스 오류 입니다 관리자에게 문의 하세요..."});
}
});

회원 가입 페이지에서 가입 정보를 받아온 후 User모델에 새로운 데이터를 생성하여 회원을 생성한다.

가입 전 회원을 구분할 수 있는 이메일로 기존의 데이터와 일치한 정보가 있는지 확인을 하고 없을 때 생성하는 방식으로 진행했다…

결과

회원 가입을 할 정보를 입력한다.

서버에서 처리 후 json형식으로 보낸 데이터에 따라 성공 실패 여부를 확인 한다.

입력한 데이터가 없는 회원이기 때문에 성공이라는 메시지를 띄웠고 성공했다는 것을 알수있다..✌✌

users 테이블을 확인하면 아까 입력한 데이터가 성공적으로 생성 된 것을 확인 할 수 있다. 👍

문제점

로컬 계정 회원 가입 처리 코드 작성은 간단하게 구현해서 어렵게 느껴지지는 않았지만… 페이지에서 데이터를 보낼 때 검사하는 방법이 너무 많고 어려운게 많아서 간단하게 검사 후 서버로

데이터를 보내는 방식으로 진행했다…

자바 스크립트를 이용해서 데이터를 검사해서 보내야 하는 방법에 치여서 조금 어려움을 느꼈다 자바스크립트의 공부가 필요하다는 것을 느끼는 과정 이였다.

보완점

혼자 하는 프로젝트라서 많은 것을 축소해서 진행 하려 하다 보니 회원 가입 과정이 너무 단순하다는 생각이 들었다. 많은 사이트들을 참고해서 비슷한 과정으로 만들고 싶었지만

본인 인증 부분을 제외 시킨 것이 조금 아쉽다.

본인 인증 구현도 공부해서 사용해봐야겠다.

Nodejs express로 에어비앤비 클론코딩 해보기 3.

숙소 업로드 구현

숙소 업로드 라우터

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
try {
fs.readdirSync('uploads');
} catch (error) {
console.error('uploads 폴더가 없어 uploads 폴더를 생성 합니다.');
fs.mkdirSync('uploads');
}

const upload = multer({
storage: multer.diskStorage({
destination(req, file, cb) {
cb(null, 'uploads/');
},
filename(req, file, cb) {
const ext = path.extname(file.originalname);
cb(null, path.basename(file.originalname, ext) + Date.now() + ext);
},
}),
});

// 게시글 업로드
router.post('/host', isLoggedIn, upload.array('img'), async (req, res, next) => {
const hostaddress = req.body.firstCity.concat(" ", req.body.middleCity," ", req.body.hostaddress);

try{
const newHost = await Host.create({
title: req.body.title,
hostaddress,
city: req.body.firstCity,
person: req.body.person,
roominfo_room: req.body.room,
roominfo_bed: req.body.bed,
roominfo_cook: req.body.cook,
roominfo_bathroom: req.body.bathroom,
hostinfo: req.body.hostinfo,
hosttype: req.body.hosttype,
UserId: req.user.id,
});
for(i=0; i<req.files.length; i++){
let newImage = await Image.create({
src: "img/" + req.files[i].filename,
HostId: newHost.id,
});

}
console.log("success");
res.redirect('/');
} catch (error) {
console.log(error);
next(error);
}
});

숙소 업로드 라우터는 숙소 정보를 담는 Host모델과 숙소의 사진을 담는 Image모델을 사용하여 업로드를 진행한다.

사진 파일들은 multer 모델을 사용하여 업로드했고 이미지의 파일 이름을 Image모델에 담아 주었다.

이미지 업로드는 이미지의 갯수 만큼 생성하도록 반복문을 사용하여 진행했는데 더 좋은 방법이 있을 수 도 있지만 간단하게 구현 했다.

자세히 보기

Nodejs express로 에어비앤비 클론코딩 해보기 2.

Sequelize Model 구축

Mysql 데이터베이스를 사용하며 Sequelize를 통해 데이터 관리를 했다. 시쿼라이즈를 통한 데이터베이스 사용을 위해 모델을 구축하는 과정을 기록합니다.

DB 관계

User 1 : N Host
User 1 : N Review
User 1 : N Reservation
User 1 : N Favorite

Host 1 : N Image
Host 1 : N Favorite
Host 1 : N Reservation
Host 1 : N Review

많은 모델을 설계하지는 않았지만 각각 필요한 모델이라고 생각하는 모델을 구축했다.
기본적으로 유저와 게시글을 기준하여 예약 기능에 필요한 모델 찜 모델, 리뷰 모델 정도로 구성했다.

자세한 코드는 깃헙에 올렸으니 기본적인 관계 설정과 모델 구조는 깃에서 확인하면 될 것 같다.
Model file : github

Nodejs express로 에어비앤비 클론코딩 해보기 1.

에어비앤비 클론코딩 해보기 1.

Nodejs를 학습하고 학습한 내용을 바탕으로 무언가를 만들어봐야 겠다는 마음 하나로 무턱대고 혼자 진행했던 프로젝트입니다.
실제 서비스까지의 구현을 목표로 하지 않고 node.js와 express를 이용한 앱을 만들어보고자 진행했던 프로젝트라 많이 힘들었고 좋은 결과물이 나오지는 못했지만 처음으로 스스로 처음부터 만들어본 것 이기 때문에 이후 다른 어떤 프로젝트에서도 기본적인 개념을 알고 진행하는데 있어 충분한 학습 효과가 있었던 프로젝트 입니다.

Github : https://github.com/hanjuren/Node

프로젝트의 전체적인 구조

  • Nodejs기반 express앱
  • mysql 데이터 베이스 사용 및 sequelize 사용
  • view를 위해 nunjucks 템플릿 엔진 사용
  • passport를 통한 사용자 인증 기능 구현

완성 결과

사용한 패키지

  • express
  • express-session
    • express-mysql-session
  • passport
    • passport-local
    • passport-kakao
    • passport-naver
    • passport-facebook
  • bcrypt
  • cookie-parser
  • dotenv
  • morgan
  • multer
  • nunjucks
  • mysql2
  • sequelize
    • sequelize-cli
  • nodemon

프로젝트를 진행하며 느낀점

node.js의 기본적인 학습만 진행하고 바로 작업을 진행하며 하나씩 붙여나가는 과정이 스스로 무언가를 만들어낸다는 것에 의미가 큰 과정이였습니다.
비록 작업을 계속 해나가며 프로젝트의 과정이 설계를 하지 않고 혼자 추가해보고 싶은 기능을 구현하다보니 두서 없는 과정으로 진행되었지만 기능 하나하나 스스로 만들며
막히는 부분을 해결해 나가는 과정이 의미있었습니다.
하지만 이 과정을 겪고서 작고 사소한 프로젝트라도 시작 전 설계의 중요성과 구조를 잡고 시작해야하는 중요성을 크게 느끼게 되었고 무턱대고 작업을 한다고 해서 그저 돌아가기만 하는 기능을 만드는 것이
무의미 하다는 것도 느끼게된 프로젝트 였습니다.
아쉬웠던 점은 클론코딩을 하다보니 스스로 생각해내는 기능은 적고 클론코딩의 대상이 된 웹의 기능을 어떤식으로 구현해볼지에 대해 고민을 하던 시간이 대부분이였던 것에 아쉬움을 느꼈습니다.
스스로 만들어나가는 과정은 뿌듯했지만 새로운 것을 만들어 낸다는 느낌보다는 기능을 가능한 수준에서 모방하기만 한다는 느낌이 컷던 만큼 이후 프로젝트에서는 하나의 기능을 만들더라도
많은 고민과 보다 좋은 기능을 만들 수 있는 측면까지 고민하며 작업해야겠다라고 생각하게 되었습니다.

또한 이 프로젝트의 결과물에 대해 다시 한번 글을 작성하며 이런 부분은 지금보니 이렇게 개선하면 되겠다는 부분을 생각을 많이 하게되었던 프로젝트 입니다.
이 프로젝트에서 했던 내용을 기록하며 다시 공부한다는 마음으로 진행 부분을 기록하려 합니다.