[Full-Stack] node.js, npm, express, babel 프로젝트에 적용하기 #01

node.js / express 등 백엔드 기능을 React 포트폴리오인 Devtube 프로젝트에 추가하여 풀스택 개발을 경험치를 쌓으려고 한다.

서버를 직접 개발해보고, GET과 POST를 실행해서 값을 받아오고 데이터를 업데이트하는 기능을 추가할 예정이다. 또한, 회원가입과 로그인, 소셜 로그인 그리고 기본적인 비디오 CRUD 기능, 프로필 업뎃도 추가 개발 예정이다.

 

Plan

Set Up
- Node.js
- NPM(uderstanding dependencies)
- Babel
- Nodemon

Express
- First Server
- GET Request / Response
- Middleware / External Middleware / Controller

Routers
- Make Router
- Architecture
- URL Parameters

Templates
- Pug
- MVP Styles

MongoDB & Mongoose
- Edit Video
- Connecting to Mongo DB
- CRUD
- First Query
- Create Video
- Edit Video
- Middleware
- Delete Video

User Authentication
- Create Account
- Login
- Sessions & Cookies
- Social Login
- LogOut

User Profile
- Edit Profile GET
- Middleware
- Edit Profile POST
- File Uploads
- Video Upload
- User Profile
- Video Owner
- User's Video

Webpack
- Webpack Configuration
- SCC Loader
- MiniCSSExtractPlugin

Styles

Video Player
- Player Setup
- Play Pause
- Mute UnMute
- Volume
- Duration & Current Time
- Time Formatting
- Timeline
- Fullscreen
- Controls Events

Views API
- Register View Controller

Video Recorder
- Recorder Setup
- Video Preview
- Recording Video
- Downloading the File

Webassembly Video Transcode
- Transcode Video
- Thumbnail
- Thumbnail Upload

Flash Messages
- sending messages

Comment Section
- Comment Models
- Comment Box
- API Route
- Commenting
- Rendering Comments
- Realtime Comments

Deployment
- Building the Backend
- Building the FrontEnd
- Deploy to Heroku(from Netlify)
- MongoDB Atlas
- Environment Variables
- Github and AWS S3
- Production Environment

 

장황한 나의 Devtube 프로젝트 업데이트 Plan.. 과연 다 할 수 있을까? ^^ 한 달 플랜으로 다 하고싶다!

마무리 한 번 해보쎠ㅋ

 

그 과정에서 필요한 node.js 설치, express 설치, npm 패키지와 dependency 그리고 express 패키지에 대한 이해 해보자.

 

1. 노드설치

nodejs.org 에서 node.js 다운 node -v로 설치 여부 및 버전 확인

 

2. Node.js 란?

- 자바스크립트 런타임

- NodeJS는 브라우저 밖에서 돌아가는 자바스크립트

- 기존에는 브라우저에서만 자바스크립트를 사용할 수 있었지만, 자바스크립트를 브라우저에서 분리한 것

- 웹사이트 인터렉트, 클래스 제거, 데이터 받아오기 그런게 됐지만, 자바스크립트로 이제는 벡엔드를 만들 수 있게 됐다

- 노드제이에스 덕분에 리액트 네이티브나 일렉트론을 이용해 모바일 앱과 데스크탑 앱을 만들 수 있다.

 

3. NPM이란?

- 노드제이에스의 친구와 같은 존재, npm은 node.js와 상호작용할 수 있게 해줌.

- 자바스크립트 언어를 위한 패키지 매니저

npm is a package manager for the JavaScript programming language

- npm을 콘솔에 쳐보면 인스톨 된 것을 확인 할 수 있다. => node.js는 npm과 같이 설치된다.

- node 명령어도 가끔 사용하지만, 대부분 npm 명령어를 사용함

- 다른 사람들이 개발해놓은 패키지를 가져다 쓸 수 있게 해준다. => npm 패키지로 공유할 수 있다.

- ex) express라는 패키지가 유명하다. 

 

 

4. Node.js 프로젝트 만들기

• 폴더를 만들고, 비쥬얼 스튜디오를 연다
• package.json을 만든다.
• package.json에 정보입력
• json은 프로그래머가 정보를 저장하기 위해 사용되는 것
• 파일에 정보를 입력하는 방법이라고 생각하자!
• node.js는 package.json 무조건 이 이름이어야 한다.
• npm init을 하면, npm 명령어지! package.json을 만드는 것을 도와준다.
• main => 프로젝트의 메인 파일을 뜻한다.

 

5. Express 설치 

• script는 단순히 실행시키고 싶은 것을 말함. 노드의 기능 중하나! 앞으로 자주 쓸 것임
• 웹사이트 빌드하고 디플로이하고, css압축하고 등 그런 명령어를 script로 만들 수 있다.
• script 사용법: node index.js라는 명령어를 써서 실행 시켰지만, npm에게 win이라고 쓰면 이 명령어를 실행해달라고 할 수 있다.
• 물론 폴더 안에서만 그 명령어를 사용할 수 있다. package.json이 없는 곳에서 실행하면 실행되지 않는다.
• 서버를 만들어보자.
• index.js에서 만들겠음
•  패키지 명은 npm 사이트에서 봤던 그대로 사용해야한다.
• 최초로 install할 시에 node_modules가 생긴다.
• npm으로 설치한 모든 패키지가 저장되는 곳이 node_module이다
• express를 사용할 때는 다른 패키지도 필요하다. 혼자 작동되지 않기 때문이다.
• express 폴더 내부에도 package.json이 있다 => scripts가 존재한다.
• package.json 내부에는 dependencies는 express가 작동되려면 필요한 패키지들을 말한다. 그래서 express를 npm i expree하면 관련된 dependencies도 모두 설치된다. 그리고 그 패키지에는 또 dependencies가 있고, 그게 또 설치된다. 그리고 그 패키지들은 또 dependencies가 있고, 그런식이다. devDependencies는 설치안된다.
•  npm이 위 처럼 체인처럼 연결된 dependencies들을 관리해주는 것이다. main 정보도 있다.
• package.json의 dependency에 적혀있는 체로, node_moduless 폴더 삭제하고, index.js 삭제하고 npm install 명령어 실핼하면 다시 생긴다! dependency에 적혀있는 스크립트를 실행해서 설치해주기 때문이다.
• npm은 똑똑해서 depencies를 보고 알아서 모듈듈을 설치한 것이다.
•  node_modules 폴더를 깃허브에 보낼 필요가 없다. 무겁잖아. 그냥 package.json에 있는 dependencies를 적어두고, npm install만 하면 설치가 되고 노드모듈들이 만들어지니깐! 아하~ 
• package-lock.json
  • => 패키지가 수정됐는지 해시값으로 체크해주고, 안전하게 잠겨있는 파일이다.
  • =>여기에 있는 버전으로만 설치된다.
• 노드모듈이 올라가지 않게 하는 법 
  • .gitnore파일 만들고 /node_modules 입력
    • package.json이 오픈되어있고, 수정했는데 저장안했으면 버전 충돌이 나게됨.
    • npm install 할때는 package.josn을 무조건 닫고 해라! 그래야 package.json파일을 npm이 자동으로 수정해줌

 

5. Express / Babel 사용법

 

index.js에 아래 코드 선언

const expres = require("express")
const app = express();

 

그 전에 바벨을 먼저 배워본다.

- 바벨은 자바스크립트 컴파일러다.

- nodeJS는 자바스크립트를 이해하지만, 아직 못하는 자바스크립트가 있다.

- 그래서 노드제이에스가 이해하는 자바스크립트만 쓰던지, 아니면 바벨을 쓰면된다.

- 바벨은 최신 자바스크립트를 노드제이에스가 이해할 수 있도록 컴파일 해준다.

nodeJS를 위한 바벨을 사용하는게 첫번째다

 

Setup BABEL!

 

사이트에서 도큐먼트 확인

Babel · The compiler for next generation JavaScript

1. setup 카테고리에서 node 선택. 자바스크립트를 노드가 이해할 수 있도록 해야하니깐.

 

2. 문서에 나와있는대로 설치 진행

npm install --save-dev @babel/core 

 

 

--save-dev는 뭘까?

우선 위 명령어 대로 설치를 해보자.

패키지.json을 보면 dependencies와 devDependencies가 있다.

 

dependencies 프로젝트가 필요한 것 => 운전을 하기위해 가솔린이 필요한 것
devDependencies 개발자가 필요한 것 => 운전을 더 잘하려면 음악이 있어야하는 것

이제 아래코드를 보면 차이를 알 수 있다.

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.22.0",
    "express": "^4.17.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  
    "devDependencies": {
    "@babel/core": "^7.15.8"
  }

 

babel은 그래서 devDependencies에 종속되어 있다.

 

기억해야할 것은 커맨드가 다르다는 것이다!

--save-dev가 있다는 것이다.

만약에 --save-dev가 없다면 dependencies로 갈테지만, 패키지.json에서 옮기면 devDependnencies로 옮기면 된다.

 

 

Create babel.config.json configuration file

 

이제 configuration 파일을 만들 것이다. 우클릭으로 파일 생성해서 만들어 주면 되지만, 아래 명령어로도 파일 생성가능

touch babel.config.json

터치 명령어는 리눅스와 맥에서만 작동함

 

babel.config.json파일에 preset 복붙!

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

 

커맨드라인을 쳐준다던지.

preset은 바벨을 위한 엄청나게 큰 플러그인이다.

 

npm install @babel/preset-env --save-dev

babel/preset-env 제일 유명한데, 최신 자바스크립트를 사용할 수 있게 해준다.

 

 

 

6. Nodemon 노드몬 설치

 

1. Node.js 개발 시, 생산성을 높여준다.

2. 어떻게?

 - node.js 서버 개발 시, 소스 코드에 수정이 있을 경우 자동으로 서버를 다시 시작해주는 툴

- 아래와 같이 스크립트에 설정해주면 server.js 파일이 변할 때마다 자동으로 서버를 재시작해준다.

 

package.json

  "scripts": {
    "win": "node index.js"
    "dev": "nodemon --exec babel-node index.js"
  },

 

그리고 npm dev run 하면 노드몬이 실행되고, nodemon이 알아서 서버를 재시작한다.

babel-node로 재시작하기 때문에 최신 문법도 쓸 수 있다.

 

run dev로 원래 index.js를 실행하는거지만,

babel-node로 최신문법 사용해도 컴파일 될 수 있게 하고,

소스코드 바뀔 때마다 npm run dev 하고 싶지 않으니깐 nodemon을 사용해서 이걸 보고 있다가 스크립트에 적은 dev 명령어를 실행해준다.

 

* 여기서 잠깐! 아래의 express를 index.js에 import해오니 에러가 떳다.

const express = require("express");
const app = express();

 

프로젝트에 위 내용까지 적용해 본 후 npm start를 해보았다.

아래와 같은 오류를 뱉어내면서 작동이 안되었다.

internal/modules/cjs/loader.js:316
      throw err;
      ^

Error: Cannot find module '/Users/dahaekim/Documents/GitHub/youtubeClonePJ/node_modules/has/src'. Please verify that the package.json has a valid "main" entry

node_modules를 모두 지우고 npm install로 디펜던시를 재설치 한 후에야 로컬서버를 다시 띄워보아도 똑같은 에러가 떴다. 스택오버 플로우에 찾아보니, 클라이언트와 서버를 구분안하고 작성해서 그렇다는 말도 있고, 여러가지 솔루션이 있어 시도해보았지만 안된다. 우선 해결해보고, 업뎃할 예정(10/14 22:20)

 

게다가 Netlify에 깃허브로 푸시한 버전대로 계속 자동배포가 되어 오류나는 코드가 production으로 배포 되어버렸다.

netlify에서 정상적으로 작동하는 deploy 버전으로 새로 띄우고 stop auto publishing으로 설정했다.