[TIL] 개발일지 2일차

ChoiYW·2023년 5월 26일
0

개발일지

목록 보기
2/8

NodeJS

Docker를 진행하기 전에 NodeJS의 테스트와 구조부터 만들었다.
npm init

package.json 구성

이게 바로 NodeJS이며 package.json을 보면 떠오르는 것은 maven, gradle 말그대로 패키지 버전 등을 관리해준다는 측면에서 사실상 비슷해보인다. 물론 NodeJS의 경우 V8엔진을 내장하고 있어 Javascript런타임환경을 브라우저 외부에서 제공해준다는 점의 차이가 있다.
즉, NodeJS란 런타임환경을 제공해주며 패키지에 대한 관리를 해주는 것으로 생각하면 될듯하다.
node app.js로 실행가능.

CR/LF/CRLF

git addpackage.json이 LF에서 CRLF로 git에 올라가는 복사본을 대체한다는 경고문을 확인.
해당 관련된 용어는 Carrige Return / Line Feed / CR + LF 로 개행의 형태를 말한다.
즉, 줄바꿈의 타입으로 생각하면 될 듯 하며 LF는 Linux, CRLF의 경우 Windows의 기본값이라고 한다.
둘의 바이트 코드가 다르기 때문에 다른 코드로 인식 할 수 있으므로 LF로 통일하여 사용하는 것을 권장한다고 한다.

Express

설치하기에 앞서 Express란 무엇일까?
NodeJS Web Application Framworks 라고 소개되어있는데 NodeJS 기반의 HTTP Handler, View의 randering, Middleware 처리 등을 지원해주는 것으로 생각된다.

Express Install

이제 express를 설치 해보자 npm i express
node_modulespackage-lock.json이 생성 node_modules에는 npm으로 설치한 모든 패키지가 저장된다. (물론 express가 사용하는-혹은 의존하는-패키지들 또한 같이 설치된다.)

dependencies

package.json을 보면 dependencies에 express가 버전과 함께 기입된 것을 볼 수 있는데 만약 node_modulespackage-lock.json이 없는 상태라면 npm i 만으로도 재설치가 가능하다.
이러한 것을 보면 dependencies가 어떠한 역할을 하는지 알수있을것이다.(git으로 이러한 modules의 패키지들을 모두 올리지 않아도 된다는 말이기도함)
주의해야 할 점package.json 파일이 저장되지 않은 상태에서 npm i를 사용할 경우 충돌이 일어날 수 있다. npm idependencies를 변경하려고 하기 때문에 기존의 변경된 부분이 저장되지 않은 상황에서 충돌이 일어나는것.

dependencies

Dependencies는 프로젝트에 필요한 것이라면 devDependencies는 개발자를 위한 Dependencies이다.

package-lock.json

package-lock.json의 경우 node_modules의 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일인데, 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있다고 한다.

babel

babel은 최신 자바스크립트 코드를 하위 버전으로 컴파일하여 호환되게 만들어준다.(nodeJS 버전에 따라 실행 가능한 Javascript 버전이 다르다.)
Babel Install
npm install --save-dev @babel/core

babel.config.json생성 
{
  "presets": ["@babel/preset-env"]
}

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

위의 presets 은 babel을 위한 엄청 거대한 플러그인이며 preset-env는 javascript 최신버전.

아래와 같이 babel을 실행할수있다.

require("@babel/core").transform("code", {
  presets: ["@babel/preset-env"],
});

번거러우니 script로 처리하기 위해 babel-node를 설치.
npm install @babel/node --save-dev
babel-node app.js 로 실행가능해졌다.

Nodemon

nodemon은 수정 시 자동으로 재시작해주는 기능이 있어
npm i nodemon 으로 설치
script 변경 nodemon --exec babel-node app.js

gitignore

마지막으로 위에서 언급한 것처럼 node-modulesnpm i 로 생성가능하므로 제외해줬다.

Start Server

import express from "express"

const app = express();
const PORT = 4000;

const loggerHandler = () => {
    console.log(`Start Server http://localhost:${PORT}`);
}

app.listen(PORT,loggerHandler);

이로서 서버까지 실행하는데 성공했다.
미들웨어로 Page Controll 까지 확인 후 Docker세팅을 시작해야겠다.

HTTP

Hypertext Transfer Protocol 는 말그대로 Protocol로 비유한다면 HTML은 보고서와 같은 일종의 양식(Form)이며 HTTP은 그것을 주고 받는 방식인 것이다.

그렇다면 그러한 HTTP를 사용하는 주체는 무엇일까?

일반적으로 웹사이트의 서버와 클라이언트 즉, 브라우저일 것이다.

Middleware

사용자가 웹사이트에 들어간다고 가정해보자.
google.com으로 접속할 때 브라우저는 사용자의 요청(request)을 받고 그것을 서버에 HTTP request 해준다.
서버는 브라우저에게 요청받고 응답(response)해주며 그 결과물을 브라우저가 출력한다.
그리고 서버와 브라우저의 요청과 응답 사이에 있는 존재가 Middleware이다.
조금 더 정확히는 마지막으로 반환하는 Controller를 제외한 존재라고 생각하면 될듯하다.
따라서 모든 Middleware는 Controller이지만 모든 Controller는 Middleware가 아닐 수 있다.
아래는 예시 코드이다.

const homeController = (req, res) => {
    return res.send(`${req.method}${req.url}`);
};

const middleware = (req, res, next) => {
    const url = req.url;
    if(url === "/protected"){
        return res.send("<h1>Not Allowed</h1>");
    }
    console.log("Allowed, you may continue.");
    next();
};

const protect = (req, res) => {
    return res.send("Welcome to the private lounge.");
}

app.use(middleware);
app.get("/",homeController);
app.get("/protected",protect); // /protected를 차단하고 있으므로 실행되지 않음

Reference
LF/CRLF - https://velog.io/@dev_yong/CRLF%EC%99%80-LF%EC%B0%A8%EC%9D%B4%EC%9D%98-%EC%9D%B4%ED%95%B4
Package-lock.json - https://hyunjun19.github.io/2018/03/23/package-lock-why-need/
NomardCoder - https://nomadcoders.co/wetube

0개의 댓글