[노드 2] 9장. 익스프레스로 SNS 서비스 만들기

 

🌟9장 키워드🌟

컨트롤러

라우터와 미들웨어

Passport

카카오 로그인

multer

 

 

 

 

📍 MySQL과 Passport를 이용해 로그인, 이미지 업로드, 게시글 작성, 해시태그 검색, 팔로잉 기능이 있는 SNS 서비스를 제작

 

9.1 프로젝트 구조 갖추기

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

package.json 생성 후  시퀄라이즈를 설치

 

📌 컨트롤러

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,
  });
};

 

• 라우터의 미들웨어를 불러오는 역할
• 실무에서 코드를 편하게 사용하기 위해 역할을 분리한 것
• 페이지를 화면에 렌더링하는 역할

📌 컨트롤러와 서비스

서비스는 해당 컨트롤러의 핵심 비즈니스 로직을 담당,
컨트롤러는 요청(req)과 응답(res)을 처리하는 담당

 

 

9.2 데이터베이스 세팅하기

📍 MySQL과 시퀄라이즈로 데이터베이스 설정

 

foreach를 사용해 각각의 모델들을 시퀄라이즈 객체에 연결하는 코드

const Sequelize = require('sequelize');
const fs = require('fs');
const path = require('path');
const env = process.env.NODE_ENV || 'development';
const config = require('../config/config')[env];

const db = {};
const sequelize = new Sequelize(
  config.database, config.username, config.password, config,
);

db.sequelize = sequelize;

const basename = path.basename(__filename);
fs
  .readdirSync(__dirname) // 현재 폴더의 모든 파일을 조회
  .filter(file => { // 숨김 파일, index.js, js 확장자가 아닌 파일 필터링
    return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js');
  })
  .forEach(file => { // 해당 파일의 모델 불러와서 init
    const model = require(path.join(__dirname, file));
    console.log(file, model.name);
    db[model.name] = model;
    model.initiate(sequelize);
  });

Object.keys(db).forEach(modelName => { // associate 호출
  if (db[modelName].associate) {
    db[modelName].associate(db);
  }
});

module.exports = db;

 

📌 같은 테이블 간 N:M 관계와 as

• 같은 테이블 간 N:M 관계에서는 모델 이름과 컬럼 이름을 따로 설정
• foreignKey가 followerId이면 as는 Followings
• foreignKey가 followingId이면 as는 Followers

 

📌 콘솔 : 데이터 베이스 생성

$ npx sequelize db:create

 

📌 app.js : 모델 서버와 연결

dotenv.config();
const pageRouter = require('./routes/page');
**const { sequelize } = require('./models');**

const app = express();
app.set('port', process.env.PORT || 8001);
app.set('view engine', 'html');
nunjucks.configure('views', {
  express: app,
  watch: true,
});
**sequelize.sync({ force: false })
  .then(() => {
    console.log('데이터베이스 연결 성공');
  })
  .catch((err) => {
    console.error(err);
  });**

app.use(morgan('dev'));

 

 

9.3 Passport 모듈로 로그인 구현하기

📍 passportConfig 관련 내용 작성하기

▶ passport/index.js

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();
};

• serializeUser에서 세션에 저장했던 아이디를 받아 데이터베이스에서 사용자 정보를 조회
• 조회한 정보를 req.user에 저장, 가져오기

📌 serializeUser : 사용자 정보 객체에서 아이디를 추려 세션에 저장

📌 deserializeUser : 세션에 저장한 아이디를 통해 사용자 정보 객체 불러오기

⇒ 세션에 너무 많은 데이터를 담지 않기 위함

💡 최종과정 : 첫 로그인, 세션 생성

1. /auth/login 라우터를 통해 로그인 요청이 들어옴
2. 라우터에서 passport.authenticate 메서드 호출
3. 로그인 로직 수행
4. 로그인 성공 시 사용자 정보 객체와 함께 req.login 호출
5. req.login 메서드가 passport/serializeUser 호출
6. req.session에 사용자 아이디만 저장해서 세션 생성
7. express-session에 설정한 대로 브라우저에 connect.sid 세션 쿠키 전송
8. 로그인 완료

💡 로그인 이후

1. 어떠한 요청이 들어옴
2. 라우터에 요청이 도달하기 전에 passport.session 미들웨어가 passport.deserializeUser 메서드 호출
3. connect.sid 시션 쿠키를 읽고 세션 객체를 찾아서 req.session으로 만듦
4. req.session에 저장된 아이디로 데이터베이스에서 사용자 조회
5. 조회된 사용자 정보를 req.user에 저장(deserializeUser)
6. 라우터에서 req.user 객체 사용 가능

 

 

9.3.1 로컬 로그인 구현하기

📌 로그인한 사용자 : 회원 가입, 로그인 라우터 접근 X
📌 로그인하지 않은 사용자 : 로그아웃 라우터 접근 X

⇒ Passport의 req.isAuthenticated 사용해 로그인 여부를 검사하는 미들웨어 작성

▶ middlewares/index.js

exports.isLoggedIn = (req, res, next) => {
  if (req.isAuthenticated()) {
    next();
  } else {
    res.status(403).send('로그인 필요');
  }
};

exports.isNotLoggedIn = (req, res, next) => {
  if (!req.isAuthenticated()) {
    next();
  } else {
    const message = encodeURIComponent('로그인한 상태입니다.');
    res.redirect(`/?error=${message}`);
  }
};

• req.isAuthenticated()로 로그인 여부 파악 : 로그인 중이면 true, 그렇지 않으면 false
• isLoggedIn과 iNotLoggedIn 미들웨어로 활용

 

📌 라우터 작성

▶ routes/page.js, routes/auth.js

routes/page.js

const express = require('express');
const { isLoggedIn, isNotLoggedIn } = require('../middlewares');
const { renderProfile, renderJoin, renderMain } = require('../controllers/page');

const router = express.Router();

router.use((req, res, next) => {
  res.locals.user = req.user;
  res.locals.followerCount = 0;
  res.locals.followingCount = 0;
  res.locals.followingIdList = [];
  next();
});

router.get('/profile', isLoggedIn, renderProfile);

router.get('/join', isNotLoggedIn, renderJoin);

router.get('/', renderMain);

module.exports = router;

🔑 res.locals.user 속성에 req.user를 넣어 넌적스에서 user 객체를 통해 사용자 정보에 접근

• isLoggedIn : renderProfile
• isNotLoggedIn : renderJoin

routes/auth.js

const express = require('express');
const passport = require('passport');

const { isLoggedIn, isNotLoggedIn } = require('../middlewares');
const { join, login, logout } = require('../controllers/auth');

const router = express.Router();

// POST /auth/join
router.post('/join', isNotLoggedIn, join); 

// POST /auth/login
router.post('/login', isNotLoggedIn, login);

// GET /auth/logout
router.get('/logout', isLoggedIn, logout);

module.exports = router;

 

📌 컨트롤러 작성

▶ controllers/auth.js

const bcrypt = require('bcrypt');
const passport = require('passport');
const User = require('../models/user');

exports.join = async (req, res, next) => {
  const { email, nick, password } = req.body;
  try {
    const exUser = await User.findOne({ where: { email } });
    if (exUser) {
      return res.redirect('/join?error=exist');
    }
    const hash = await bcrypt.hash(password, 12);
    await User.create({
      email,
      nick,
      password: hash,
    });
    return res.redirect('/');
  } catch (error) {
    console.error(error);
    return next(error);
  }
}

exports.login = (req, res, next) => {
  passport.authenticate('local', (authError, user, info) => {
    if (authError) {
      console.error(authError);
      return next(authError);
    }
    if (!user) {
      return res.redirect(`/?error=${info.message}`);
    }
    return req.login(user, (loginError) => {
      if (loginError) {
        console.error(loginError);
        return next(loginError);
      }
      return res.redirect('/');
    });
  })(req, res, next); // 미들웨어 내의 미들웨어에는 (req, res, next)를 붙입니다.
};

exports.logout = (req, res) => {
  req.logout(() => {
    res.redirect('/');
  });
};

🔑 exports.login

• 로그인 요청이 들어오면 passport.authenticate('local') 미들웨어가 로컬 로그인 전략을 수행
• 라우터 미들웨어 안에 들어 있는 미들웨어는 내부 미들웨어에 (req, res, next)를 인수로 제공
• 미들웨어에 사용자 정의 기능을 추가
• user에 사용자 정보가 있다면 req.login 메서드를 호출, req.login은 passport.serializeUser를 호출

 

📌 로그인 전략 작성

▶ passport/localStrategy.js

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const bcrypt = require('bcrypt');

const User = require('../models/user');

module.exports = () => {
  passport.use(new LocalStrategy({
    usernameField: 'email',
    passwordField: 'password',
    passReqToCallback: false,
  }, async (email, password, done) => {
    try {
      const exUser = await User.findOne({ where: { email } });
      if (exUser) {
        const result = await bcrypt.compare(password, exUser.password);
        if (result) {
          done(null, exUser);
        } else {
          done(null, false, { message: '비밀번호가 일치하지 않습니다.' });
        }
      } else {
        done(null, false, { message: '가입되지 않은 회원입니다.' });
      }
    } catch (error) {
      console.error(error);
      done(error);
    }
  }));
};

1. 사용자 데이터베이스에서 일치하는 이미일이 있는지 검색

2. 있다면 bcrypt의 compare 함수로 비밀번호 비교

3. 비밀번호가 일치한다면 done 함수의 두 번째 인수로 사용자 정보를 넣어 보내기

4. done이 호출된 후에는 다시 passport.authenticate의 콜백 함수에서 나머지 로직이 실행

5. 로그인에 성공했다면 메인 페이지로 리다이렉트되면서 로그인 폼 대신 회원 정보를 보여줌

 

 

9.3.2 카카오 로그인 구현하기

📌 카카오톡 로그인 전략 작성

▶ passport/kakaoStrategy.js

const passport = require('passport');
const KakaoStrategy = require('passport-kakao').Strategy;

const User = require('../models/user');

module.exports = () => {
  passport.use(new KakaoStrategy({
    clientID: process.env.KAKAO_ID,
    callbackURL: '/auth/kakao/callback',
  }, async (accessToken, refreshToken, profile, done) => {
    console.log('kakao profile', profile);
    try {
      const exUser = await User.findOne({
        where: { snsId: profile.id, provider: 'kakao' },
      });
      if (exUser) {
        done(null, exUser);
      } else {
        const newUser = await User.create({
          email: profile._json?.kakao_account?.email,
          nick: profile.displayName,
          snsId: profile.id,
          provider: 'kakao',
        });
        done(null, newUser);
      }
    } catch (error) {
      console.error(error);
      done(error);
    }
  }));
};

🔑 카카오 로그인 설정

• clientID : 카카오에서 발급해주는 아이디, process.env.KAKAO_ID로 설정하여 노출 막음
• callbackURL : 카카오로부터 인증 결과를 받을 라우터 주소

🔑 회원 가입

1. 카카오에서 인증 후 callbackURL에 적힌 주소로 accessToken, refreshToken, profile 전송

2. profile 객체에서 원하는 정보를 꺼내와 회원 가입

3. 사용자를 생성 후 done 함수 호출

 

📌 카카오톡 라우터 작성

▶ routes/auth.js

...
router.get('/logout', isLoggedIn, logout);

// GET /auth/kakao
router.get('/kakao', passport.authenticate('kakao'));

// GET /auth/kakao/callback
router.get('/kakao/callback', passport.authenticate('kakao', {
  failureRedirect: '/?error=카카오로그인 실패',
}), (req, res) => {
  res.redirect('/'); // 성공 시에는 /로 이동
});

module.exports = router;

• GET /auth/kakao에서 로그인 전략(kakaoStrategy)을 수행, 카카오 로그인 창으로 리다이렉트
• 카카오 로그인 창에서 로그인 후 성공 여부 결과를 GET /auth/kakao/callback으로 받기
• passport.authenticate 메서드에 콜백 함수를 제공하지 않음, 로그인 성공 시 내부적으로 req.login을 호출하므로

카카오 clientID 발급은 p456 참고

 

9.4 multer 패키지로 이미지 업로드 구현하기

• 사진이 업로드 된 게시글을 저장할 때는 데이터베이스에 이미지 경로가 저장됨
• 이미지는 서버 디스크(uploads 폴더)에 저장됨

📌 콘솔 : 패키지 설치

$ npm i multer

 

📌 라우터 작성

▶ routes/post.js

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const { afterUploadImage, uploadPost } = require('../controllers/post');
const { isLoggedIn } = require('../middlewares');

const router = express.Router();

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);
    },
  }),
  limits: { fileSize: 5 * 1024 * 1024 },
});

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

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

module.exports = router;

• POST /post/img 라우터 : 이미지 하나를 업로드받은 뒤 이미지의 저장 경로를 클라이언트로 응답
• POST /post : 게시글 업로드 처리, 이미지 주소가 req.body.url로 전송

 

📌 컨트롤러 작성

▶ controllers/post.js

const { Post, Hashtag } = require('../models');

exports.afterUploadImage = (req, res) => {
  console.log(req.file);
  res.json({ url: `/img/${req.file.filename}` });
};

exports.uploadPost = async (req, res, next) => {
  try {
    const post = await Post.create({
      content: req.body.content,
      img: req.body.url,
      UserId: req.user.id,
    });
    const hashtags = req.body.content.match(/#[^\s#]*/g);
    if (hashtags) {
      const result = await Promise.all(
        hashtags.map(tag => {
          return Hashtag.findOrCreate({
            where: { title: tag.slice(1).toLowerCase() },
          })
        }),
      );
      await post.addHashtags(result.map(r => r[0]));
    }
    res.redirect('/');
  } catch (error) {
    console.error(error);
    next(error);
  }
};

• 게시글 내용에서 해시태그를 정규표현식(/#[^\s#]+/g)으로 추출
• findOrCreate 메서드를 사용해 해시태그가 존재하면 가져오고, 아니라면 생성 후 가져옴
• 결괏값으로 [모델, 생성 여부] 반환
• 모델을 추출해서 post.addHashtags 메서드로 게시글과 연결

 

📌 메인 페이지 로딩 시 게시글 보여주도록 컨트롤러 수정

▶ controllers/page.js

const { User, Post } = require('../models');

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

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

exports.renderMain = async (req, res, next) => {
  try {
    const posts = await Post.findAll({
      include: {
        model: User,
        attributes: ['id', 'nick'],
      },
      order: [['createdAt', 'DESC']],
    });
    res.render('main', {
      title: 'NodeBird',
      twits: posts,
    });
  } catch (err) {
    console.error(err);
    next(err);
  }
}

• 데이터베이스에서 게시글 조회 후 결과를 twits에 넣어 렌더링
• 조회할 때 게시글 작성자의 아이디와 닉네임을 JOIN해서 제공
• 최신순으로 게시글 정렬

 

 

9.5 프로젝트 마무리하기

📍 팔로잉 기능 추가

 

📌 컨트롤러와 라우터 작성

▶ controllers/user.js , routes/user.js

controllers/user.js

const User = require('../models/user');

exports.follow = async (req, res, next) => {
  try {
    const user = await User.findOne({ where: { id: req.user.id } });
    if (user) { // req.user.id가 followerId, req.params.id가 followingId
      await user.addFollowing(parseInt(req.params.id, 10));
      res.send('success');
    } else {
      res.status(404).send('no user');
    }
  } catch (error) {
    console.error(error);
    next(error);
  }
};

 

routes/user.js

const express = require('express');

const { isLoggedIn } = require('../middlewares');
const { follow } = require('../controllers/user');

const router = express.Router();

// POST /user/:id/follow
router.post('/:id/follow', isLoggedIn, follow);

module.exports = router;

🔑 POST /user/:id/folllow : 팔로우할 사용자를 데이터베이스에서 조회한 후, 시퀄라이즈에서 추가한 addFollowing 메서드로 현재 로그인한 사용자와의 관계 지정

 

⭐ 팔로잉 관계가 생겼으므로 req.user에도 팔로워와 팔로잉 목록을 저장

▶ passport/index.js

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

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

  passport.deserializeUser((id, done) => {
    console.log('deserialize');
    User.findOne({
      where: { id },
      include: [{
        model: User,
        attributes: ['id', 'nick'],
        as: 'Followers',
      }, {
        model: User,
        attributes: ['id', 'nick'],
        as: 'Followings',
      }],
    })
      .then(user => {
        console.log('user', user);
        done(null, user);
       })
      .catch(err => done(err));
  });

  local();
  kakao();
};

 

 

📍 해시태그 검색 기능 추가

 

📌 컨트롤러와 라우터 작성

▶ controllers/page.js , routes/page.js

controllers/page.js

const {
  renderProfile, renderJoin, renderMain, renderHashtag,
} = require('../controllers/page');
...
router.get('/hashtag', renderHashtag);

 

routes/page.js

...
exports.renderHashtag = async (req, res, next) => {
  const query = req.query.hashtag;
  if (!query) {
    return res.redirect('/');
  }
  try {
    const hashtag = await Hashtag.findOne({ where: { title: query } });
    let posts = [];
    if (hashtag) {
      posts = await hashtag.getPosts({ include: [{ model: User }] });
    }

    return res.render('main', {
      title: `${query} | NodeBird`,
      twits: posts,
    });
  } catch (error) {
    console.error(error);
    return next(error);
  }
};

• GET /hashtag : 해시태그로 조회, 없는 경우 메인 페이지로 리다이렉트, 있는 경우 getPosts 메서드로 모든 게시글을 가져옴
• 조회 후 메인 페이지를 렌더링하면서 조회된 게시글만 twits에 넣어 렌더링

 

 

[출처] 조현영, 『Node.js 교과서』, 길벗(2020), p417-472

---

빈칸 채우기 문제 (빈칸을 드래그해서 정답을 맞혀 보세요!)

1. 인증을 편리하게 구성할 수 있는 모듈로, 위 프로젝트에서는 로그인을 구현하는 데 사용된 모듈은? (passport)
2. 라우터의 미들웨어를 불러오며, 페이지를 화면에 렌더링하는 역할을 맡은 것은? (controller)
3. (서비스)는 해당 컨트롤러의 핵심 비즈니스 로직을, (컨트롤러)는 요청(req)과 응답(res)을 처리하는 담당이다.
4.  같은 테이블 간 N:M 관계에서 foreignKey가 followerId이면 as는 (Followings)이다.
5. 다음은 passport/index.js의 코드 일부이다.

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));
  });

📌 (serializeUser) : 사용자 정보 객체에서 아이디를 추려 (세션)에 저장

📌 (deserializeUser) : 세션에 저장한 아이디를 통해 사용자 정보 객체 불러오기

⇒ (세션)에 너무 많은 데이터를 담지 않기 위함

6. 사진이 업로드 된 게시글을 저장할 때는 데이터베이스에 이미지 (경로)가 저장되고, 이미지는 (서버 디스크(uploads 폴더))에 저장됨

 

코드 문제

 

1. 

다음은 routes/page.js의 코드 일부입니다.

const express = require('express');
const { isLoggedIn, isNotLoggedIn } = require('../middlewares');
const {
  renderProfile, renderJoin, renderMain, renderHashtag,
} = require('../controllers/page');

const router = express.Router();

router.use((빈칸1) => {
  빈칸2
  res.locals.followerCount = req.user?.Followers?.length || 0;
  res.locals.followingCount = req.user?.Followings?.length || 0;
  res.locals.followingIdList = req.user?.Followings?.map(f => f.id) || [];
  next();
});

router.get('/profile', isLoggedIn, renderProfile);

router.get('/join', isNotLoggedIn, renderJoin);

router.get('/', renderMain);

router.get('/hashtag', renderHashtag);

module.exports = router;

tabase, username, password

정답

빈칸1 : req, res, next

빈칸 2 : res.locals.user = req.user; 

 

2.

다음은 routes/auth.js의 코드 일부입니다.

const express = require('express');
const passport = require('passport');

const { isLoggedIn, isNotLoggedIn } = require('../middlewares');
const { join, login, logout } = require('../controllers/auth');

const router = express.Router();

// POST /auth/join
router.post('/join', 빈칸1, join); 

// POST /auth/login
router.post('/login', 빈칸2, login);

// GET /auth/logout
router.get('/logout', 빈칸3, logout);

// GET /auth/kakao
router.get('/kakao', passport.authenticate('kakao'));

// GET /auth/kakao/callback
router.get('/kakao/callback', passport.authenticate('kakao', {
  failureRedirect: '/?error=카카오로그인 실패',
}), (req, res) => {
  res.redirect('/'); // 성공 시에는 /로 이동
});

module.exports = router;

 

정답 :

빈칸 1 : isNotLoggedIn

빈칸 2 : isNotLoggedIn

빈칸 3 : isLoggedIn

---

Node.js #2 

Editor : 파오리