Campermoa 프로젝트 일기(3)

이전 진행 상황

이전 게시글 보기

리뷰 및 평점 기능, 오류 및 데이터 처리 기능, 부트스트랩을 적용한 기초적인 디자인, 라우트 경로 변경, 플래시 메시지, 세션 기능을 구현했다.

 

현재 진행상황

1. passport를 활용한 기본적인 로그인 관련 기능 탑재

보통 암호를 만들때 암호 자체를 저장하기 보다는 해시값을 저장한다. (전송할때도 암호를 해시값으로 저장한다.)

다만 평문을 같은 알고리즘으로 암호화하면 해시값이 동일해 다른 사이트의 암호나 같은 평문을 쓰는 다른 암호가 해킹되기 마련인데, 이를 방지하기 위해 'salt'를 추가한다.

passport는 이 과정을 쉽게 할 수 있도록 만든 기능인데, 네이버나 카카오, 구글같은 소셜로그인 기능도 도입 가능하다.

 

npm install passport passport-local passport-local-mongoose

소셜로그인 기능이 아닌 passport-local(자체 로그인 기능)만 도입하려고 하기 때문에 터미널에 이 3가지 라이브러리를 설치하도록 명령어를 입력해야 한다.

 

fakeuser를 만들어 보았다.

fakeuser: app.get("/fakeuser", async (req, res) => {
  const user = new User({ email: "ahiruuuu@gmail.com", username: "ahiruuuu" });
  const newUser = await User.register(user, "kawaii");
  res.send(newUser);
});

이를 실행해 보니

{
* 		email: "ahiruuuu@gmail.com",
* 		_id: "62fb617aa863afb8750da097",
* 		username: "ahiruuuu",
* 		salt: "50c464e86a2799a7efea456677a6ea2844c7763f63a6a8d5d598f5a06081dff0",
* 		hash: "5a429ed90fb8ddd1f81ad65a2447a943f2b5042374c5fa697ff9e0b6d8ca3bae2cfd40af9503e6e02883a79ecae4a0f6024cc8f239f1d1147ab8489225945376d40e9c65ef231dc76ec06ca8d8094fa6a8c7ac145d7e44ffce69da60c1f006d222cd6e841e21afc913ef43ada034d9934a7c3730f556b2b567423740ec3e7d785a5df7c3b14077a4df5c6ebf7154a50db64b34fde04c759afd7ef4a9c1cd536dd7867f7c2a7f808c35bee344ea55b16fad125e589bdb343fd00bdbdc08bdf266098b66a8c0db4ef0e30c1f15cb3117531a7747b8c1c1486499181625c1e282e4fd92705173480544cd135b324a5212566f599249ee8f22c828ec0951b0a649a09bc5299b7df77c1704e90d769472cf3956f2e9ed6d8f1ba7cab8cc782f2ae0ee6502b617e82c2db25b449097f272ffca56aec583e274af3854fbbb3d762c9c3304fd0123c0374e7461cd754088404387ee4f2e7a052d7c7fd6e0b3155496116b88ab843a5c0d7fc595cbcdb9863afd332d3c10e88052262b272d085871e899f9ac60353dc63f8311f3c9ba5cda7f7b03de7ede75e84c8175640addcbf2fcb88f052d60b69219082a90ab2d18f0eddef9910595219bba3d86655ea5f5e7ee23840f6418b8e4a0c8814257a5931bcf5034f5721b325e6e8230c8c69dc5d54a310c3bcf358047a8584b9e9ac909360de51936f45c1a19ffbbbd19e6b09b4fc95729",
* 		__v: 0
}

이렇게 솔트와 해시가 동시에 나온다. 제대로 작동된다.

 

2. 게시글 및 댓글에 회원 ID 설정, 회원 전용 댓글 및 리뷰글 게재, 본인 게시글만 수정 삭제 권한 부여

우선 스키마에 회원 ID를 만든다.

기존 데이터에 회원 ID가 없으니 필시 오류가 생기기에 샘플 ID를 긁어와서 샘플 데이터를 시딩한다.

로그인한 본인 이외에는 수정 및 삭제 버튼이 뜨지 않도록 뷰에서도 구현했으나, 악의적 접근을 위해 라우팅 부분에서도 로그인한 사용자+ 작성자 본인만 접근 가능한 미들웨어를 만들고 적용한다.

 

ThunderClient나 Postman 등으로 잘 구현됐는지 확인 가능하다.

 

3. 권한 관련 미들웨어 정리

라우팅 부분이 매우 지저분하여 권한 관련 내용을 최상위 폴더의 middleware.js로 분리했다. 하기 라우트 부분 리팩터링과 같은 맥락.

 

4. 라우트 관련 부분 리팩터링

라우트 관련 비동기함수 부분을 컨트롤러로 별도로 분리했다.

 

비동기함수 부분만 빼내면(전) 살짝 중구난방 느낌이 들지만, 라우트별로 분리 이후 각 메소드별로 정리해 놓으면 보다 편하게 볼 수 있다.

//전

router.get("/", catchAsync(campgrounds.index));

router.get("/new", isLoggedIn, campgrounds.renderNewForm);

router.post(
  "/",
  isLoggedIn,
  validateCampground,
  catchAsync(campgrounds.createCampground)
);

router.get("/:id", catchAsync(campgrounds.showCampground));

router.get(
  "/:id/edit",
  isLoggedIn,
  isAuthor,
  catchAsync(campgrounds.renderEditForm)
);

router.put(
  "/:id",
  isLoggedIn,
  isAuthor,
  validateCampground,
  catchAsync(campgrounds.updateCampground)
);

router.delete(
  "/:id",
  isLoggedIn,
  isAuthor,
  catchAsync(campgrounds.deleteCampground)
);

//후
router
  .route("/")
  .get(catchAsync(campgrounds.index))
  .post(
    isLoggedIn,
    validateCampground,
    catchAsync(campgrounds.createCampground)
  );

router.get("/new", isLoggedIn, campgrounds.renderNewForm);

router
  .route("/:id")
  .get(catchAsync(campgrounds.showCampground))
  .put(
    isLoggedIn,
    isAuthor,
    validateCampground,
    catchAsync(campgrounds.updateCampground)
  )
  .delete(isLoggedIn, isAuthor, catchAsync(campgrounds.deleteCampground));

router.get(
  "/:id/edit",
  isLoggedIn,
  isAuthor,
  catchAsync(campgrounds.renderEditForm)
);

 

5. 별점 기능 구현

starability를 이용해 구현했다. CSS 파일을 분리한 다음에 ejs 파일에서 평점 매기기, 부여된 평점을 별점으로 표출하는 형식.

 

주요 오류

1. req#logout requires a callback function 오류

passport 0.6.0 버전에서 발생하는 오류다. 

  req.logout(function (err) {
    if (err) {
      return next(err);
    }
    req.flash("success", "로그아웃 되었습니다.");
    res.redirect("/campgrounds");
  });

로그아웃 부분을 이렇게 콜백함수로 구현해주면 해결된다.

 

2. form Cannot read properties of undefined (reading 'username’) 오류

댓글 기능을 구현하면서 이전 댓글에는 작성자 정보가 없었기 때문에 발생한 오류다. Robo 3T를 이용해 작성자 ID를 'undefined'로 바꾸니 같은 오류가 발생했다.

Robo3T를 이용해 이전 댓글을 삭제해서 복구했다.

 

깃허브 링크