[클론코딩/Zoom] 01 서버 초기 설정

Sujin Lee·2022년 12월 16일

목록 보기

1/4

☃️요약 : babel, nodemon, express를 활용해서 nodejs 프로젝트를 설정

01 서버 설치

nodemon 설치
npm i nodemon -D
그럼 자동으로 package-lock.json파일 생성됨
src 폴더 만들기
폴더 안에 server.js 만들기 (서버가 될 파일)
바벨 사용하기 위해 babel.config.json 파일 만들기
- babel-node는 babel.config.json을 살펴보고 preset을 실행시킴
nodemon을 사용하기 위해 nodemon.json 파일 만들기
- nodemon 호출 -> nodemon은 nodemon.json 살펴보고 거기있는 코드를 실행
- nodemone은 exec 하나만 수행한다.
- exec는 server.js를 실행시키는 것
- server.js에 대해 babel-node 명령문을 실행시키는 것

사용하는 이유?
기존에는 서버를 실행시키고 변경이 일어나면 자동으로 화면에 반영이 되지 않아 서버를 껐다가 다시 재실행시키는 번거로움이 있었다. 이러한 문제를 nodemon이라는 모듈로 해결
그래서 nodemon이란?
node monitor의 약자로, 노드가 실행하는 파일이 속한 디렉터리를 감시하고 있다가 파일이 수정되면 자동으로 노드 애플리케이션을 재시작하는 확장 모듈. nodemon을 설치하면 재시작 없이 코드를 자동 반영할 수 있다.

사용하는 이유?
자바스크립트 언어의 문법은 빠르게 진화하고 있지만 정작 자바스크립트 코드를 실행해주는 환경은 이를 받쳐주지 못하는 경우가 많다.

예를 들어, 브라우저의 경우 종류가 워낙 다양해서 어떤 브라우저가 어떤 문법을 지원하는지 일일이 파악하기가 힘들고, 노드의 경우에도 버전별로 지원하는 언어 문법이 다르다.

이러한 상황에서 자바스크립트로 코딩을 할때 ES6 이상의 최신 문법을 쓰자니 작성한 코드가 일부 실행 환경에서 작동하지 않는 이슈가 생길 것이고, 그렇다고 모든 환경에서 돌아가도록 보수적으로 코딩을 하지니 원하든 원치 않든 예전의 ES5 이하 방식으로 코드를 작성해야 하기 때문임
그래서 babel이란? = 자바스크립트 컴파일러 = 자바스크립트 트랜스파일러
이러한 딜레마를 해결하기 위해 등장. ES6 버전 이상의 자바스크립트나 jsx, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시켜 다른 브라우저에서 동작할 수 있도록 하는 것

사용하는 이유?
Node.js로 웹 서버에 필요한 기능을 짠다면 라우팅, 세션 관리 등 번거로움 이를 관리해주는 웹 프레임워크 express
웹 애플리케이션을 만들기 위한 각종 라이브러리와 미들웨어 등이 내장돼 있어 개발하기 편하고, 수많은 개발자들에게 개발 규칙을 강제하여 코드 및 구조의 통일성을 향상시킬 수 있다.
그래서 express란?
웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크
https://developer.mozilla.org/ko/docs/Learn/Server-side/Express_Nodejs/Introduction
ReactJS + NodeJS express 연동해보기

사용하는 이유?
코드 간소화, 컴파일한 후에 htm문서를 렌더링하는 형식이라 생산성이 높아짐
그래서 pug란?
SSR에서 html을 조금 더 세련되게 쓸 수 있도록 돕는 express 뷰 엔진
템플릿 엔진은 javascript를 사용하여 HTML을 렌더링해주 는 것

https://nomadcoders.co/noom

공부한 내용을 기록하는 공간입니다. 📝