[노드 2팀] #10. 익스프레스로 SNS 서비스 만들기

 

 

 

 🌟키워드:  npm 패키지, 컨트롤러, 관계, Passport 모듈, multer 패키지

 

 

---

 

1. 프로젝트 구조 갖추기

npm init
npm i sequelize mysql2 sequelize-cli
npx sepuelize init

• npm init을 호출하면 package.json을 생성함
• npm i를 호출하면 node_modules 폴더와 package-lock.json이 생성됨
• npm sequelize init를 호출하면 config, migrations, models, seeders 폴더가 생성됨
• 추가로 필요한 npm 패키지들을 설치하고 app.js를 작성

 

 

2.  컨트롤러

exports.renderProfile = (req, res) => {
  res.render('profile', { title: '내 정보 - NodeBird' });
};

exports.renderJoin = (req, res) => {
  res.render('join', { title: '회원가입 - NodeBird' });
};

exports.renderMain = (req, res, next) => {
  const twits = [];
  res.render('main', {
    title: 'NodeBird',
    twits,
  });
};

• 라우터 마지막에 위치해 클라이언트에 응답을 보내는 미들웨어      ex) renderProfile, renderJoin, renderMain

• res.send, res.join, res.redirect, res.render 등이 존재하는 미들웨어
• 컨트롤러를 분리하면 실무에서 코드를 편하게 관리할 수 있음

 

 

3. 1:N관계와 N:M 관계

① 1:N 관계

User 모델과 Post 모델은 1(User):N(Post) 관계에 있으므로 hasMany로 연결되어 있음

static associate(db) {
	db.User.hasMany(db.Post);
    db.User.belongsToMany(db.User, {
    	foreignKey: 'followingId',
        as: 'Followers',
        through: 'Follow',
    });
    db.User.belongsToMany(db.User, {
    	foreignKey: 'followerId',
        as: 'Follwings',
        through: 'Follow',
    });
}

 

② N:M 관계

• 같은 모델끼리도 N:M 관계를 가질 수 있음
• 팔로잉 기능이 N:M 관계 → 사용자 한 명이 팔로워를 여러 명 가질 수도 있고, 한 사람이 여러 명을 팔로잉 할 수 있음
• 같은 테이블 간 N:M 관계에서는 모델 이름과 컬럼 이름을 따로 정해야 하고, as 옵션도 넣어야 함

 

 

4. Passport 모듈

• 회원 가입과 로그인 구현 시 세션과 쿠키 처리 등 복잡한 작업이 많으므로 Passport 모듈을 사용한다.
• Passport를 사용하면 아이디 & 비밀번호를 사용하지 않고 SNS계정으로 로그인하는 방법 구현 가능

const passport = require('passport');
const local = require('./localStrategy');
const kakao = require('./kakaoStrategy');
const User = require('../models/user');

module.exports = () => {
  passport.serializeUser((user, done) => {
    done(null, user.id);
  });

  passport.deserializeUser((id, done) => {
    User.findOne({ where: { id } })
      .then(user => done(null, user))
      .catch(err => done(err));
  });

  local();
  kakao();
};

 

 

 

 

5. multer 패키지로 이미지 업로드 구현

• multer 패키지는 이미지를 서버 디스크에 저장
• 디스크에 저장하면 간단하지만, 이미지 손실 위험이 있어 클라우드 스토리지같은 정적 파일 제공 서비스 사용 필요

​

예제 코드

// POST /post/img
router.post('/img', isLoggedIn, upload.single('img'), afterUploadImage);

• POST /post/img 라우터에서는 이미지 하나를 업로드받은 뒤 이미지의 저장 경로를 클라이언트로 응답
• static 미들웨어가 /img 경로의 정적 파일을 제공하므로 클라이언트에서 업로드한 이미지에 접근할 수 있다.

 

// POST /post
const upload2 = multer();
router.post('/', isLoggedIn, upload2.none(), uploadPost);

module.exports = router;

• POST /post 라우터는 게시글 업로드를 처리하는 업로드
• 이전 라우터에서 이미지를 업로드했다면 이미지 주소도 req.body.url로 전송됨

 

 

 

6. 핵심 정리

• 서버는 요청에 응답하는 것이 핵심 임무이므로 요청을 수락하든 거절하든 상관없이 반드시 응답해야 함. 이때 한 번만 응답해야 에러가 발생하지 않음

​

• dotenv 패키지와 .env 파일로 유출되면 안 되는 비밀 키를 관리해야 함

 

• 라우터는 routes 폴더에, 데이터베이스는 models 폴더에, html 파일은 views 폴더에 각각 구분해서 저장하면 프로젝트 규모가 커져도 관리하기 쉬움

​

• 데이터베이스를 구성하기 전에 데이터 간 1:1, 1:N, N:M 관계를 잘 파악해야 함

​

• 프론트엔드 form 태그의 인코딩 방식이 multipart일 때는 multer 같은 multipart 처리용 패키지를 사용하는 것이 좋음

​

---

 

quiz

 

1. 라우터 마지막에 위치해 클라이언트에 응답을 보내는 미들웨어를 (      ) 라고 한다.

​

2. User 모델과 Post 모델은 (      ) 관계에 있고, 팔로잉 기능은 (      ) 관계에 있다.

​

3. 회원 가입과 로그인을 구현할 때 사용하는 모듈은 (      ) 모듈이다.

​

4. (      ) 패키지는 이미지를 서버 디스크에 저장한다.

​

5. 서버는 요청에 반드시 응답해야하며, 여러 번 응답할 수 있다. [ O/X ]

​

6. (      ) 패키지와 (      ) 파일로 유출되면 안 되는 비밀 키를 관리해야 한다.

​

7. 규모가 큰 프로젝트를 관리하기 위해 라우터는 (      ) 폴더에, 데이터베이스는 (      ) 폴더에, html 파일은 (      ) 폴더에 구분해서 저장한다.

​

​

programming quiz

​

8. Node.js와 Express를 사용하여 POST /post/img 라우터를 구현하는 코드를 작성하시오. (이 라우터는 사용자가 업로드한 단일 이미지를 서버에서 처리하고, 로그인한 사용자만 기능을 기용할 수 있다.)

 

9. GET /profile 요청이 들어오면 'profile' 템플릿을 렌더링하고, title로 '내 정보 - NodeBird'를 전달하는 컨트롤러 함수를 작성하시오.

 

---

 

Answer

1. 컨트롤러
2.  1:N / N:M
3. Passport 
4. multer
5. X, 여러 번 응답하면 에러 발생
6. dotenv / .env 
7. routes / modules / views

 

8.

router.post('/img', isLoggedIn, upload.single('img'), afterUploadImage);

 

9.

exports.renderProfile = (req, res) => {
  res.render('profile', { title: '내 정보 - NodeBird' });
};

 

 

---

 

출처) 조현정, 「Node.js 교과서 개정 3판」, 길벗(2022), 9장

 

Corner node.js 2팀

Editor : Pujimbao