[ZoomCloneCode] 초기환경세팅하기 with node.JS

Zoom이라는 화상회의플랫폼이 유료화가 된 이후 다양한 팀원들과 온라인으로 소통하려면 구글 meet, 슬랙 등 여러 플랫폼을 떠돌아야 하는 것에 불편함을 느껴서 화상회의 프로젝트를 직접 만들어 볼까 하는 고민이 생겼습니다.

42의 멘토님께 화상회의 멘토링을 받은 뒤 멀티미디어 서비스에 관심이 생겨 프로젝트를 진행해보기로 마음을 굳혔고, 프로젝트를 진행하기 전, 좋은 레퍼런스를 찾아 가볍게 구조를 익히고 가기 위해 줌 클론 코딩 학습을 시작하게 되었습니다.

환경 구성

백엔드서버환경구성

1. Nodejs설치
   https://nodejs.org/ko/download/
   LTS버전을 추천합니다.
   
   
2. 프로젝트를 위한 폴더 생성 후, npm init -y npm패키지 매니저 초기화

$ cd zoom/
$ npm init -y

npm init은 package.json을 생성하여 node패키지에 관한 정보와 의존성을 관리하기 위한 명령어입니다.

3. nodemon설치

$ npm I nodemon -D 

기존 node.js 서버를 이용하면서 코드를 변경하게 될 경우, 변경한 코드를 웹 상에서 확인하려면 서버를 껐다가 다시 켜야 변화를 감지할 수 있는데, nodemon은 서버를 내리고 올리지 않아도 소스를 변경할 때 바로 감지해서 자동으로 서버를 재시작 해주는 TOOL입니다.

개발에서만 사용할 것이기 때문에, 옵션 -D를 통해 dev에만 설치할 것입니다.

4. 바벨설치

babel은 자바스크립트의 컴파일러입니다. Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 도구 체인입니다.

 $ npm i @babel/core @babel/cli @babel/node  @babel/preset-env

• @babel/core : 바벨의 핵심 파일, 바벨의 다른 모듈들이 종속성을 가집니다.
• @babel/node : 바벨의 CLI 도구 중 하나이다. 이전 버전의 babel-cli 로부터 분리되었습니다.
• @babel/preset-env : 바벨의 preset 중 하나로 es6+ 이상의 자바스크립트를 각 브라우저/ 노드 환경에 맞는 코드로 변환시켜줍니다.
• @babel/cli : Babel에는 명령줄에서 파일을 컴파일하는 데 사용할 수 있는 CLI가 내장되어 있습니다.

5. babel.config.json파일을 생성

    {
    	"presets": ["@babel/preset-env"]
    }

6. babel.config.json파일을 생성

	{
  		“exec”: "babel-node src/server.js"
	}

7. src/server.js 생성

touch src/server.js

8. express 설치

$ npm i express

Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임 워크입니다.

9. server.js수정

	import express from "express";

    const app = express();
	app.get("/", (req, res) => res.render("home")); //아래 프론트 환경 설정 시, 만들 home.pug
	console.log("hello");
	app.listen(3000);

10. package.json script수정

  "scripts": {
    "dev": "nodemon"
  },

nodemon구동을 추가합니다.

---

프론트엔드 환경구성

1. pug설치

$ npm i pug


pug는 HTML로 컴파일되고 구문이 간소화되어 생산성을 높이고 코드를 더 쉽게 읽을 수 있도록하는 템플릿 엔진입니다. 템플릿 엔진(Templete Engine)은 PHP나 JSP처럼 동적인 결과를 정적인 파일(HTML)에 담기 위해 사용합니다 즉, 서버 코드인 Javascript로 연산된 결과를 변수에 넣고 변수를 뷰(view) 파일에서도 사용할 수 있도록 도와줍니다. 따라서 서버파일(app.js) 내에 HTML 코드를 쓰지 않아도 되므로 뷰와 서버 코드를 따로따로 관리할 수 있도록 해줍니다. 

2. src내부에 public/js/app.js파일 생성

$ touch public/js/app.js

3. src내부에 views/home.pug 파일 생성 후 셋팅

$ vim views/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 Zoom
        link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")
    body 
        header 
            h1 zoom
        main 
        	script(src="/public/js/app.js") 

4. server.js에 템플릿 엔진 추가구성

 app.set("view engine", "pug");
 app.set("views", __dirname + "/src/views");

server.js에 사용할 템플릿엔진을 위치와 함께 정의해줍니다.

5. server.js에 미들웨어 추가구성

  app.use("/public", express.static(__dirname + "/public"));

express에서는 기본적으로 미들웨어를 제공하는데, 이미지, CSS 파일 및 JavaScript 파일과 같은 정적 파일을 제공하려면 Express의 기본 제공 미들웨어 함수인 express.static을 사용하면됩니다.

아래와 같이 유저가 해당 파일로 직접 접근하여 참조할 수 있게됩니다.

6. nodemon을 프론트와 백엔드를 분리

{
	"ignore": ["src/public/"],
    "exec": "babel-node src/server.js"
}

7. mvp css 추가
   mvp css를 적용시키면 기본css를 아주 간단한 방식으로 조금 더 이쁘게 사용이 가능해집니다

link(rel="stylesheet" href="https://unpkg.com/mvp.css@1.12/mvp.css")

8. 실행

$ npm run dev

---

깃헙주소: https://github.com/jungmyeong96/zoom_clone_code
ref: https://nomadcoders.co/noom