(MernStack) Blog 만들기 1. 실습환경 준비 (BackEnd)

m - mongoDB 

e - express : Node.js를 위한 웹프레임 워크(서버)

r - react : Front 프레임워크

n - node js : Back end .(서버)

 

백엔드부터 프런트까지 JavaScript로 짤 수 있어서 편하다는 장점이 있다.

이 포스팅은 싸플님의 MernStack 강의를 공부하며 작성하였습니다

-----------------------------------------------------------------------------

내 OS : Ubuntu 18.04

사용 툴 : VS Code

----------------------------------------------------------------------------

1. node.js  다운로드

nodejs.org/ko/

Node.js

저는 12.21 버전을 사용중입니다. 현재 시점 14.16.0LTS 버전이 있습니다.

(release Version Download 가능)

설치 후 node -v 를 쳐서 버전이 뜨면 잘 설치가 된 것입니다.

2.  내가 작업할 폴더 생성 후 첫번째 작업

(나는 Documents 에서 MyBlog라는 폴더를 생성하여 작업함)

npm init -y 를 쳐서 node 프로그램을 시작한다. 

pacage.json 파일이 생성되고 이 파일안에 node 프로그램의 대한 정보가 담기게 된다.

npm init 명령어는 node 프로그램을 시작(initialize)하는 명령어로 package.json 파일을 생성을 돕습니다. package.json 파일은  현 node 프로그램에 대한 정보와 향후 내가 작업을하며 설치한 라이브러리등 데이터가 담기게 됩니다.

 

3. Git 설치 (Version 관리) -이건 선택사항이지만 필수

git 관련 포스팅을 해놓았기에 참고바람..

2020/12/04 - [Git 과 GitHub] - 협업을 하고 싶다면? - 깃헙 사용 초기 설정

협업을 하고 싶다면? - 깃헙 사용 초기 설정

 

4. 필요한 프레임워크 , 라이브러리, 모듈 다운로드

$ > npm i express cors dotenv hpp helmet

i는  install 이다 줄여쓰는듯 함

1. express 서버 프레임워크

2. cors - Cross-Origin Resource Sharing의 줄임말, 직역하면 교차 출처 자원 공유... 나는 그냥 직역 하지말고 영어 그대로 받아들이는게 이해가 잘된다. 쉽게 풀어 설명하자면...  다른 서버에서 내 서버로 자원을 가져오거나 보내는것 (Api 통신) 은 형식이 맞지 않아  제약이 걸리지만 cors가 자유스럽게 허용해준다.

3. dotenv  숨기고 싶은 데이터.. 하드코딩된 DB 정보나 아이디 비밀번호 등  dotenv에 작성을 하면 깃 또는 다른 버전 관리 툴에 업로드 시 dotenv는 업로드 되지 않음 (보안 라이브러리)

4. hpp, helmet  서버상에 보안을 담당 -최소한의 보안을 해결해줌.

설치 후 

node_modules 폴더가 생성됨 ( 이 폴더에 우리가 설치한 모듈 및 라이브러리가 설치됨)

dependencies에 방금 설치한 모듈과 라이브러리의 버전 정보가 추가된걸 볼 수 있다.

5. 3번 git 작업 하는 사람들만 해당 .gitignore

 4번에서 설치한 모듈에 관한 것만 천개가 넘어간다. 이러한 모듈까지는 굳이 커밋할 필요는 없기때문에  
커밋에 예외처리를 하기 위한 폴더를 생성

.gitignore 파일을 생성 후  node_modules를 적어준다.

.env 도 적어준다. 

 

6. mongoose , moment 설치

$ > npm i mongoose moment

mongoose : JavaScript만으로 MongoDB를 운용할 수 있게 도와줌 
moment : 우리나라 시간 기준으로 변경해주는것.   UTC 세계협정시 기준으로 설정된 값을 우리나라 시간 기준으로 변경해준다

 

7. babel 다운로드 

$> npm i @babel/cli @babel/core @babel/node @babel/preset-env babel-loader @babel/polyfill -D

babel이란  JavaScript 언어가 굉장히 빠른 속도로 발전되고 있어 웹 브라우저가 따라 오지를 못하고 있다.
그래서 최신 버전 JS가 웹브라우저에 반영이 안된다.
 babel은 이러한 문제점을 해결해주는 모듈이다.

babel/cli : 바벨 커맨드 라인 도구
babel/core : 바벨 핵심
babel/node : 이건 우리가 사용하는게 node니 .. 설치
babel/preset-env:  필요한 플러그인을 준비하여 미리 환경을 설정해놓는것
babel/loader : 최종적으로 컴파일을 해주는 라이브러리
babel/polyfill : 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미(최신 JS반영)

//현재 바벨을 다운로드하면 deprecated 충돌이 난다... 

-D 를 적는 이유 : 개발 단계에서만 사용하겠다 (develop) , 배포시는 빠지게 된다.

설치 후 package.json 을 보면 dependencies와 devDependencies가 나뉘어져 있다.
 그냥 dependencies는 같이 배포되어 설치 되지만 devDependencies는 빠지게 된다.

 

8. morgan , nodemon 설치

$> npm i morgan nodemon -D

morgan : 서버에 로그를 남겨주고 보여줌
nodemon : 파일을 저장했을때 서버에 즉각 반응 시키기위해 서버를 재시작해야하는데  nodemond은 자동으로 시작해줌

이것 또 한 개발 단계에서만 필요하기에 -D를 적어줬다.
devDependencies에서 잘 설치 되었는지 확인하자.

 

여기까지 설치가 잘 되었다면 기본적인  BackEnd 설치 환경은 끝이 났다.
다음 포스팅은  Express 서버를 구동 시키는 법을 알아보겠다.

---

여기 대박쓰