멤버십 과정에 들어가기 전에 너무 노는 것이 아닌가 싶어서 어떤 강의를 하나 들어볼까 생각하다가 노마드코더의 Zoom 클론코딩 수업을 듣게 되었습니다.
하필 왜 이 강의를 수강하게 되었냐면, 부스트캠프 챌린지 기간중에 프로젝트 기획파트에서 하루에 걸쳐서 기획했던 내용이 바로 Zoom과 비슷한 교육용 채팅 및 화상 채팅 애플리케이션이었습니다. 이걸 플러터와 다트를 이용해서 만들도록 기획을 했었는데, 지금 생각하니 참 어려운 일을 기획한 것 같습니다 😂
그런데 제가 속해있던 팀에서 기획했던 이 내용을 JS로 실제로 강의해주신다니, 클릭하지 않을 수 없었죠. 바로 수강신청을 하게 되었습니다 :)
그렇다면 바로 강의 정리로 들어가시죠!
(강의 정리의 내용은 본 강의에 비해 과정이 생략되거나 축약될 수 있음을 미리 알려드립니다!)
※ 아래는 노마드코더 홈페이지에서 줌 클론코딩 강의를 무료로 수강할 수 있는 링크입니다!
줌 클론코딩 – 노마드 코더 Nomad Coders
WebSockets, SocketIO, WebRTC
nomadcoders.co
※ 본 내용은 줌 클론코딩의 0.0~0.4 까지의 수업 내용을 담고 있습니다!
0. 기본 설정
가장 기본적인 내용인 Vanilla JS는 JSClock을 만드는 부분을 참고하시면 쉽게 익히실 수 있습니다.
추가로 유튜브 클론코딩을 수강하고 듣는 것을 권장한다고 했지만, 저는 바로 시도해보려고 합니다!
- 바닐라 JS로 크롬 앱 만들기 (무료 강의!)
바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders
Javascript for Beginners
nomadcoders.co
- 유튜브 클론코딩 (유료 강의!)
[풀스택] 유튜브 클론코딩 – 노마드 코더 Nomad Coders
유튜브 백엔드 + 프런트엔드 + 배포
nomadcoders.co
추가로 ExpressJS, app.get(), Pug, (req, res) => 에 대한 지식을 갖추고 있어야 합니다.
ExpressJS는 개발환경을 구축하기 위한 프레임워크이고, app.get()을 통해 페이지를 불러오게 됩니다.
Pug는 HTML 태그를 편리하게 사용할 수 있도록 해 주는 도구이고,
(req, res) => 는 클라이언트로부터 요청을 받아서 응답을 해 주는 것을 뜻합니다.
1. 서버 작업
먼저 package.json을 작성합니다.
npm init -y를 이용해서 파일을 생성해줍니다.
그리고 description, license, scripts를 작성해줍니다.
우리는 nodemon을 사용할 것이기 때문에 scripts에 nodemon을 넣어줍니다.
그 외 다른 부분은 설치하면서 자동으로 들어가게 될 것이기 때문에 따로 넣어주지 않으셔도 됩니다!
- package.json
{
"name": "zoomcc",
"version": "1.0.0",
"description": "Zoom Clone using NodeJS, WebRTC and Websockets",
"keywords": [],
"author": "",
"license": "MIT",
"scripts": {
"dev": "nodemon"
},
"devDependencies": {
"@babel/cli": "^7.14.8",
"@babel/core": "^7.15.0",
"@babel/node": "^7.14.9",
"@babel/preset-env": "^7.15.0",
"nodemon": "^2.0.12"
},
"dependencies": {
"express": "^4.17.1",
"pug": "^3.0.2",
"ws": "^8.2.0"
}
}
nodemon을 사용한다고 했으니 설치도 해 줘야 겠죠?
npm i nodemon -D 명령어를 이용해서 nodemon을 설치합니다.
그럼 자동으로 package-lock.json 파일도 생성이 됩니다.
그리고 babel을 사용하기 위해서 babel.config.json 파일을 만들어줍니다.
여기서 설정하는 preset은 npm i @babel/preset-env -D를 이용해서 설치한 후에 사용할 수 있습니다.
- babel.config.json
{
"presets": ["@babel/preset-env"] // 우리가 사용할 유일한 preset
}
설치한 nodemon을 사용하기 위해 nodemon.json 파일도 만들어줍니다.
nodemon이 호출되면 nodemon이 nodemon.json을 살펴보고, 거기 있는 코드를 실행하게 됩니다.
nodemon 안의 exec는 server.js를 실행하기 위한 코드이고, ignore는 public 내에 있는 파일이 바뀔 때마다 서버가 다시 작동되지 않도록 해 주는 요소입니다. (백엔드 부분을 수정할 때만 서버가 재시작할 수 있도록 하는 것이죠!)
- nodemon.json
{
"ignore": ["src/public/*"],
"exec": "babel-node src/server.js"
}
그리고 필요에 따라 README.md 파일도 만들어줍니다.
- README.md
# Noom
Zoom Clone using NodeJS, WebRTC and Websockets.
이제 src라는 폴더를 만들고, 그 안에 server.js 파일을 만들어줍니다.
우리는 이 server.js 파일 내에서 백엔드와 관련된 내용들을 작성해 줄 것입니다!
그 다음엔 Babel을 설치해야하는데, 그 전에 git init .을 해줍니다.
이제 순서대로 npm i @babel/core @babel/cli @babel/node -D 를 입력해서 설치해줍니다.
그 다음엔 .gitignore 파일을 생성해줍니다. 우리가 설치한 node_modules는 굳이 git에 올릴 필요가 없기 때문이죠.
- .gitignore
/node_modules
마지막으로 server.js 내부에서 express를 사용해봅시다.
현재 내용은 해당 섹션이 모두 끝난 상태에서 작동하는 코드인데, 프론트가 없는 현재 상태에서 코드가 돌아가게 하기 위해서는 app 관련 내용(set, use, get)을 모두 지우시면 돌아갑니다.
app 관련 내용은 아래 프론트엔드 작업에서 추가로 설명합니다!
- server.js
// server.js
import express from "express"; // npm i express 설치
const app = express(); // app이라는 변수에 가져와서 사용
app.set("view engine", "pug"); // 뷰 엔진을 pug로 하겠다
app.set("views", __dirname + "/views"); // 디렉토리 설정
app.use("/public", express.static(__dirname + "/public")); // public 폴더를 유저에게 공개 (유저가 볼 수 있는 폴더 지정)
app.get("/", (req, res) => res.render("home")); // 홈페이지로 이동할 때 사용될 템플릿을 렌더
app.get("/*", (req, res) => res.redirect("/")) // 홈페이지 내 어느 페이지에 접근해도 홈으로 연결되도록 리다이렉트 (다른 url 사용 안할거라)
const handleListen = () => console.log(`Listening on http://localhost:3000`)
app.listen(3000, handleListen); // 3000번 포트와 연결
2. 프론트엔드 작업
이제 static files, 유저들에게 가게 될 파일을 만들어 보겠습니다.
자바스크립트를 유저에게 보내고, 그것을 브라우저가 이해할 수 있도록 만들어 볼 것입니다.
src 폴더 안에 public 폴더 안에 js 폴더, 그 안에 app.js 파일을 만들어 줍니다.
안에는 확인을 위한 alert 명령어만 적어주도록 하겠습니다.
- app.js
alert("hi");
그리고 src 폴더 안에 views라는 폴더를 만들고, 그 아래에 home.pug 파일을 만들어줍니다.
일반적인 HTML 형식과는 좀 다르지만, 좀 더 작성하기 편하죠?!
- home.pug
//- home.pug
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Noom
//- 덜 못생기게 만들어주는 요소
link(rel="stylesheet", href="https://unpkg.com/mvp.css")
body
header
h1 Noom
main
h2 Welcome to Noom
script(src="/public/js/app.js")
button Call
이제 위에서 설명을 생략했던, server.js의 app의 메서드들에 대해서 설명하겠습니다!
home.pug 안에서 사용자들에게 보여질 내용들을 HTML 형식(pug 방식)으로 작성할 것이고, pug 페이지 형태로 만들 것이기 때문에 서버(server.js)에서 pug 설정을 해 줍니다.
첫 번째 app.set이 바로 그 설정이죠.
두 번째 app.set은 디렉토리를 설정하는 부분인데, views를 설정해서 이 부분의 디렉토리를 참조하겠다는 말이죠.
세 번째 use는 /public으로 접근하면 public 폴더를 유저들에게 공개한다는 이야기입니다.
네 번째 get은 홈페이지로 이동할 때 사용될 템플릿을 렌더링 하는 과정이고,
다섯 번째 get은 redirect를 이용해서 홈페이지 내 어느 페이지에 접근하더라도 홈으로 연결되도록 리다이렉트를 했습니다.
자세한 내용은 server.js 내부에 주석으로 자세하게 남겨놓았습니다!
추가로 home.pug에서 mvp.css를 사용했는데, 이 css를 사용하게 되면 기본적인 버튼과 같은 것들을 조금 더 보기 좋게 꾸밀 수 있습니다. 마치 부트스트랩과 같은 기능이죠!
이걸 사용하기 위해서는 header에서 mvp.css를 가져오기만 하면 됩니다. (link 부분 보이시죠!)
여기까지 작성하고 npm run dev를 이용해서 실행한 후 localhost:3000으로 접속하면 정상적으로 작동하는 것을 확인할 수 있습니다!
이번 포스팅에서는 빠르게 서버와 프론트엔드에 대한 기초작업을 해 보았습니다!
다음 포스팅에서는 본격적으로 웹소켓을 이용한 채팅 프로그램을 만들 수 있겠네요!!
굉장히 기대됩니다 ㅎㅎ
최근댓글