📝 오늘 한 것

1. 댓글 삭제하기 - 프론트엔드와 DB에서 모두 삭제하기

2. 서버 & 클라이언트 코드 빌드 / 서버 시작

3. Heroku에 앱 배포하기 - Heroku Git / mongoDB Atlas / Heroku에 환경 변수 추가

4. 에러 해결 - PORT 연결 / github 로그인

📚 배운 것

1. comment section

1) 댓글 삭제하기

코드 챌린지

💡 프론트엔드 - fetch - apiRouter - 백엔드(컨트롤러) - 프론트엔드

(1) pug와 js 파일에서 삭제 버튼 추가

삭제 버튼은 댓글 작성자만 볼 수 있어야 한다.

//- watch.pug
div.video-comments
  ul
    each comment in video.comments.reverse()
      li.video-comment
        i.fas.fa-comment
        span  #{comment.text}
        if String(comment.owner._id) === loggedInUser._id
          span  ❌

// commentSection.js
const addComment = (text) => {
  const videoComments = document.querySelector(".video-comments ul");
  const newComment = document.createElement("li");
  newComment.className = "video-comment";
  const icon = document.createElement("i");
  icon.className = "fas fa-comment";
  const textSpan = document.createElement("span");
  textSpan.textContent = ` ${text}`;
  const delSpan = document.createElement("span");
  delSpan.textContent = " ❌";
  newComment.appendChild(icon);
  newComment.appendChild(textSpan);
  newComment.appendChild(delSpan);
  videoComments.prepend(newComment);
};

(2) apiRouter / fetch

fetch를 이용해 요청을 보낼 route를 만든다.
delete 요청을 보낼 것이기 때문에 router에서도 delete를 사용할 수 있다.

// apiRouter.js
import { deleteComment } from "../controllers/videoController";

apiRouter.delete("/comments/:id([0-9a-f]{24})", deleteComment);

이벤트 위임을 이용해 삭제 버튼 클릭 시 댓글이 삭제되도록 했다.
삭제 버튼과 댓글을 묶기 위해 data 속성을 이용했다.

watch.pug 파일에서 삭제 버튼과 댓글에 같은 data-comment-id를 추가했다.

//- watch.pug
div.video-comments
  ul
    each comment in video.comments.reverse()
      li.video-comment(data-comment-id=comment._id)
        i.fas.fa-comment
        span  #{comment.text}
        if String(comment.owner._id) === loggedInUser._id
          button.delBtn(data-comment-id=comment._id)  ❌

이때 data 속성의 이름은 HTML에서는 -(하이픈)을 사용하지만 JS에서는 카멜 표기법으로 바꿔 작성해야 한다.
ex) data-comment-id → data-commentId

// commentSection.js
const commentsContainer = document.querySelector(".video-comments");

const handleCommentsContainerClick = async (event) => {
  const commentId = event.target.dataset.commentId;
  if (commentId && event.target.className === "delBtn") {
    const response = await fetch(`/api/comments/${commentId}`, {
      method: "DELETE",
    });
    if (response.status === 200) {
      // 백엔드에서 처리를 마치고(DB에서 댓글 삭제) 200 응답을 받으면 프론트엔드에서도 댓글을 삭제한다...
    }
  }
};

commentsContainer.addEventListener("click", handleCommentsContainerClick);

(3) response.json()

DB에서 댓글을 삭제하는 코드를 구현하기 전에 고려해야 할 것 중 하나는 실시간으로 추가한 댓글도 새로고침 없이 바로 삭제할 수 있도록 해야 한다는 것이다.

JS로 실시간으로 보이도록 만든 댓글은 data-id를 가지지 않기 때문에 삭제 버튼을 클릭해도 event.target.dataset.commentId가 undefined 값이 되어 댓글이 삭제되지 않는다.

따라서, js로 실시간으로 보이도록 만든 댓글도 comment._id 값을 가지도록 해야 한다.
즉, 백엔드에서 comment._id의 값을 프론트엔드로 보내야 한다.

[ 백엔드에서 데이터 보내기 ]

createComment 함수에서 댓글을 만든 후 상태 코드 201을 보내면서 요청을 끝낼 때, comment._id의 값을 json() 형태로 함께 보내도록 수정한다.

// videoController.js
const createComent = asyn (req, res) => {
  const {
    session: { user },
    params: { id },
    body: { text },
  } = req;
  const video = await Video.findById(id);
  if (!video) {
    return res.sendStatus(404);
  }
  const comment = await Comment.create({
    text,
    owner: user._id,
    video: id,
  });
  video.comments.push(comment._id);
  await video.save();
  return res.status(201).json({ newCommentId: comment._id }); // 수정 ❗
};

[ 프론트엔드에서 데이터 가져오기 ]

백엔드에서 보내는 데이터는, fetch 함수가 반환하는 response를 통해 response.json().key의 형태로 프론트엔드로 가져올 수 있다.

// commentSection.js
const addComment = (text, id) => {
  // 중략
  const newComment = document.createElement("li");
  newComment.dataset.commentId = id;
  // 중략
};

const handleSubmit = () => {
  event.preventDefault();
  const text = textarea.value;
  if (!text) {
    return;
  }
  const response = fetch(`/api/videos/${videoId}/comment`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ text });
  });
  if (response.status === 201) {
    textarea.value = "";
    const { newCommentId } = response.json(); // 추가 ❗
    addComment(text, newCommentId); // 수정 ❗
  }
};

🔥 데이터 가져오기

• 백엔드에서 pug(HTML)에서 프론트엔드로 → data 속성
• 백엔드에서 프론트엔드로 → json()

(4) 삭제 버튼 클릭 시 DB에서 댓글 삭제

fetch 함수가 Delete Request를 보내면 deleteComment 컨트롤러는 comments DB와 videos DB에서 댓글을 삭제한다.

video에서 해당 댓글을 삭제하고, video를 업데이트 하고(빼먹으면 안됨), 마지막으로 comments DB에서 해당 댓글을 삭제해야 한다.

// videoController.js
const deleteComment = async (req, res) => {
  const {
    session: { user },
    params: { id },
  } = req;
  const comment = await Comment.findById(id).populate("video"); // 해당 댓글 가져오기
  const videoComments = comment.video.comments; // 해당 댓글이 달려 있는 video의 모든 댓글(배열) 가져오기
  if (!comment) {
    return res.sendStatus(404);
  }
  if (String(comment.owner._id) !== user._id) {
    return res.sendStatus(403);
  }
  videoComments.splice(videoComments.indexOf(id), 1); // 댓글이 달려 있던 video에서 해당 댓글 삭제 ❗
  await comment.video.save(); // video 업데이트 ❗❗
  await Comment.findByIdAndDelete(id); // 마지막으로 comments DB에서 해당 댓글 삭제 ❗
  return res.sendStatus(200);
};

(5) 프론트엔드에서 댓글 삭제

data 속성을 '선택자'로 사용할 때는 JS에서 사용하더라도 -(하이픈) 형태 그대로 써야 한다.

// commentSection.js
const commentsContainer = document.querySelector(".video-comments");

const handleCommentsContainerClick = async (event) => {
  const commentId = event.target.dataset.commentId;
  if (commentId && event.target.className === "delBtn") {
    const response = await fetch(`/api/comments/${commentId}`, {
      method: "DELETE",
    });
    if (response.status === 200) {
      // 프론트엔드에서 delBtn과 같은 'data-comment-id'를 가지는 댓글(li.video-comment) 삭제 ❗
      const toBeDeleted = commentsContainer.querySelector(
        `.video-comment[data-comment-id="${commentId}"]`
      );
      toBeDeleted.remove();
    }
  }
};

commentsContainer.addEventListener("click", handleCommentsContainerClick);

2. 배포

1) 서버 빌드

babel-node는 개발 단계에서 유용한 모듈일 뿐, 서비스 단계에서 사용하기엔 속도가 느리다는 단점이 있다.
따라서, 실제로 앱을 배포하기 위해서는 다시 옛날 자바스크립트 코드로 바꿔야 한다.
babel cli를 이용해 최신 자바스크립트 코드를 옛날 자바스크립트 코드로 바꿔 백엔드를 빌드하고 이를 저장할 수 있다.

$ npm install --save-dev @babel/core @babel/cli

package.json 파일에 script를 작성한다.

scripts: {
  "build:server": "babel src -d build",
}

위 script를 실행하면, babel cli는 src 폴더를 빌드해서 이를 build 폴더에 저장한다.

$ npm run build:server

해당 폴더가 github에 올라가지 않도록 .gitignore에 추가한다.

2) 서버 시작

이제 build 폴더의 init 파일을 실행해야 한다.
역시나 package.json에 script를 작성한다.
(build 폴더의 init 파일은 옛날 자바스크립트 코드이므로 babel-node를 사용하지 않아도 node가 이해할 수 있다.)

scripts: {
  "start": "node build/init.js",
}

위 script를 실행한다.

$ npm run start

그러나 콘솔 창에 에러가 발생한다.
regeneratorRuntime이 정의되어 있지 않기 때문이다.

문제를 해결하기 위해 src 폴더의 init.js 파일에 regeneratorRuntime을 import 한다.
다시 서버를 빌드하고 서버를 열면 이제는 에러가 뜨지 않는다.

이제는 node.js가 모든 코드를 이해하기 때문에 babel-node가 실행되지 않아도 node.js만으로 서버가 돌아간다.

💡 여기서 잠깐 !

• babel cli는 src 폴더만 빌드하고 views 폴더(pug 파일들)는 빌드하지 않았음에도 서버가 문제 없이 돌아간다. 그 이유는 다음과 같다.

server.js 파일에서 views를 설정할 때 다음과 같이 작성했다.

// server.js
app.set("views", process.cwd() + "/src/views");

이때 process.cwd()란 현재 working directory로써 node를 실행한 폴더를 말한다.
즉, package.json 파일이 있는 폴더를 말하며 이는 root 폴더이다.
root 폴더는 build 폴더와 src 폴더를 모두 포함하는 폴더이므로 /src/views 폴더에 접근하는 데 아무 문제가 없기 때문에 서버는 문제없이 돌아가게 된다.

• 한편, 빌드 서버는 환경 변수에도 문제 없이 접근할 수 있다.

_mongoose["default"].connect(process.env.DB_URL);

3) 클라이언트 코드 빌드

서버뿐 아니라 assets 또한 빌드해야 한다.
webpack은 개발할 때는 development 모드였지만 배포할 때는 production 모드로 바꿔 코드를 압축해야 한다.

webpack.config.json 파일에서 mode와 watch 부분을 지우고, webpack을 실제로 실행할 때 상황에 맞게 실행될 수 있도록 package.json 파일에서 옵션으로 넣어줬다.
추가로 서버와 assets을 빌드하는 명령어를 한번에 모아 build script를 작성했다.

// package.json
scripts: {
  "start": "node build/init.js",
  "build": "npm run build:server && npm run build:assets",
  "build:server": "babel src -d build",
  "build:assets": "webpack --mode=production",
  "dev:server": "nodemon -L",
  "dev:assets": "webpack --mode=development -w",
}

이제 npm run build만 하면, 서버와 assets가 모두 빌드된다.
다만 아직은 npm run start(npm start)를 하면 DB가 없는 서버로 이동하기 때문에 에러가 생긴다.
이는 뒤에서 해결해볼 것이다.

4) Heroku에 배포

Heroku를 이용하면 서버를 매우 빠르게 배포할 수 있다.

일단 Heroku에 앱을 만들어야 한다.
계정 생성 후 여기서 create new app 클릭한다.
앱 이름을 작성하고 지역을 미국으로 설정한 후 create app 버튼 클릭하면, Heroku에 앱이 만들어진다.

Heroku에 백엔드 서버를 업로드 하는 데는 2가지 방법이 있다.
먼저 Heroku Git을 이용하는 방법을 살펴볼 것이다.

(1) Heroku Git 이용

💡 앱 배포

Heroku - Deployment method 참고

Heroku cli를 설치한다. (WSL에 Heroku cli 설치하기)
설치가 끝나면 터미널에 heroku login을 입력해 로그인한다.

$ curl https://cli-assets.heroku.com/install.sh | sh

프로젝트 폴더로 이동한다.
git repository를 만든다.
git heroku 원격 저장소를 만든다.

$ cd my-project/
$ git init
$ heroku git:remote -a syongtube

• 프로젝트 폴더에 Heroku 원격 저장소를 만들면, Heroku는 업로드된 코드 중에 package.json 파일을 보고 이것이 node.js 프로젝트라는 것을 알게 된다.

• Heroku는 package.json 파일에서 dependencies와 devDependencies를 참고해 프로젝트에 필요한 모듈들을 설치한 후, npm build와 npm start를 자동으로 실행한다.
  (이를 위해 script 이름을 일부러 start와 build로 지었다.)

이제 git add와 git commit은 git에 하고, git push는 heroku에 할 수 있다.
다음 명령어를 입력하여 앱을 배포하고 수정할 수 있다.

$ git push heroku main

배포 전에 주의할 점 ❗❗

Heroku는 오직 git history만을 볼 수 있다.
Heroku는 git으로 작동하기 때문에 오직 git이 볼 수 있는 코드만 Heroku는 업로드를 하는 것이다.
만약 코드를 바꾸고 commit을 하지 않는다면, Heroku는 변경사항을 알 수 없다.
따라서, 코드를 바꾼다면 반드시 잊지 말고 commit을 해야 한다 ❗❗
당연히 맨 처음 앱을 배포하기 전에도 서버와 클라이언트 코드를 빌드한 후 commit을 해야만 배포를 정상적으로 진행할 수 있다.

앱을 배포하기 전에 서버나 Heroku의 로그를 볼 수 있도록 다음 명령어를 실행한다.
이는 터미널에 실시간으로 로그를 보여준다.

$ heroku logs --tail

---

💡 mongoDB Atlas

그러나, 위 절차를 따르더라도 mongoDB와 관련하여 다음과 같은 에러가 발생한다.

You must provide either mongoUrl|clientPromise|client in options
Error: Cannot init client. Please provide correct options

[ 에러 원인 ]

Heroku는 github가 보는 것만 볼 수 있다.
그런데 앞서 mongoDB를 연결할 때 그 url을 .env 파일에 작성한 후 이를 .gitignore 파일에 적어 github에 올리지 않았다.
따라서, Heroku는 commit 되지 않은 해당 파일의 내용을 볼 수 없기 때문에 mongoDB에 연결할 수 없어 에러가 발생한 것이다.

[ 에러 해결 ]

mongoDB Atlas 계정을 생성하고 mongoDB에 연결한다.
( free / ip anywhere / username & password / native / DB url )

앞서 .env 파일에 작성한 mongoDB url은 그저 localhost를 위한 것이었다.
mongoDB Atlas를 이용해 mongoDB에 연결하면 실제 데이터베이스의 url을 얻을 수 있다.

이를 Heroku의 Settings에서 변수의 값으로 추가해야 한다.
db.js 파일에 적어준 DB_URL 변수를 추가한 후, 다시 터미널에서 로그를 확인하면 mongoDB에 연결된 것을 확인할 수 있다.

➕ 이외에도 server.js 파일에 session과 관련하여 적어준 COOKIE_SECRET 변수를 추가해야 한다. (임의의 값 설정)

---

💡 Heroku가 주는 랜덤 PORT로 연결

그러나, 이렇게 해도 배포한 웹 사이트에 들어가려고 하면 이번에는 다음과 같은 에러가 뜬다.

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

[ 에러 원인 ]

Heroku가 주는 랜덤 PORT로 연결을 해야 하는데 현재 init.js 파일에서는 무조건 4000포트로 연결하도록 되어 있기 때문에 timeout 에러가 발생했다.

[ 에러 해결 ]

Heroku가 주는 랜덤 Port로 연결하기 위해 init.js 파일에서 PORT의 값을 수정한다.
이때 Heroku에서 실행되지 않을 때(ex. 내 컴퓨터)는 4000 PORT에 연결되도록 둘 다 적어줘야 한다

const PORT = process.env.PORT || 4000;

파일을 수정했으므로 반드시 commit을 해야 한다 ❗❗
git commit 후 git push heroku main을 입력하면 다시 빌드를 시작한다.

다시 배포한 웹 사이트에 들어가보면 제대로 뜨는 것을 확인할 수 있다!!!!! YEAH!!!!!
비록 DB에 데이터는 하나도 없지만 웹 사이트가 정상적으로 뜬다.

---

💡 github 로그인 안 되는 에러 해결

① 다만, github에 로그인하려고 하면 404 에러가 뜬다.
userController.js에 github 로그인과 관련하여 적어준 GH_CLIENT, GH_SECRET 변수가 undefined 값이다.
Heroku가 .env 파일에 적어준 값을 알 수 없기 때문이다.

에러를 해결하기 위해 Heroku의 Settings에서 GH_CLIENT, GH_SECRET 변수도 추가했다.
현재까지 추가한 변수는 총 4개인데 모두 정말 중요하기 때문에 Hide 버튼을 눌러 숨겨줬다.

② 하지만, 여전히 github로 로그인 할 수 없다.
localhost:4000~ 으로 되돌아가도록 코드를 작성했기 때문이다.

에러를 해결하기 위해 github Settings - Developer settings - Ouath Apps에서 callball URL을 변경해야 한다.
https:// localhost:4000/을 웹 사이트의 home 주소로 바꾼다.

③ 이제 github 로그인은 문제없이 할 수 있다.
그러나, github 로그인과 관련하여 테스트 하려고 할 때마다 이를 다시 바꿔줘야 하는 게 번거롭다.

좀 더 편하게 하기 위해서는 실제 배포용과 테스트용 앱 2개를 만들어 사용할 수 있다.
실제 배포용 앱에서의 callback URL은 localhost:4000으로 두고, Client ID와 Client secrets를 Heroku 웹 사이트에 둘 수 있다.
테스트용 앱에서의 callback URL은 실제 웹 사이트 url로 두고, Client ID와 Client secrets를 .env 파일에 둘 수 있다.

✨ 내일 할 것

1. github를 이용해 Heroku에 앱 배포하기