[포스코 코딩온 KDT 8기] 웹 풀스택 과정 23일(07.28)차 회고 | Node.js : express

http는 사실 거의 사용하지 않는다. > 가독성과 확장성이 떨어지기 때문이다.

express가 노드js의 거의 90%정도를 차지한다.

 

Express

설치를 위해서는 

npm init -y

npm install express

를 입력해 설치한 후에

 

.gitignore 파일을 만들어서 /node_modules를 하여 용량이 큰 모듈 파일이 깃으로 올라가지 못하게 막는다.

 

.gitignore?

• Git 버전 관리에서 제외할 파일 목록을 지정하는 파일

• Git 관리에서 특정 파일을 제외하기 위해서는 git에 올리기 전에 .gitignore에 파일 목록을 미리 추가해야 한다.

 

*.txt → 확장자가 txt로 끝나는 파일 모두 무시

!test.txt → test.txt는 무시되지 않음.

test/ → test 폴더 내부의 모든 파일을 무시 ( b.exe와 a.exe 모두 무시 )

/test → (현재 폴더) 내에 존재하는 폴더 내부의 모든 파일 무시 ( b.exe무시 )

 

보통 모듈 이름을 변수로 지정하는 것이 관례이다.

 

express를 불러오는 방법에는 두가지가 있다

1. const express = require("express");

2. import express from "express";

2번째 방법이 최신 버전이기 때문에 두 가지 방법을 다 사용하되 최신 버전을 더 많이 사용해보자

 

app.get("/",(req, res) => {

})

순서가 request와 responce를 결정한다. 즉 어떤 변수를 넣어도 처음이 req 다음이 res이다.

 

백엔드를 보통 포트 8000번대에서 다루기(?) 때문에 8000번대를 많이 사용한다.

 

const express = require("express");

const app = express();

const PORT = 8080

app.get("/",(req, res) => {

    res.send("Hello express");

})

app.listen(PORT,() => {

    console.log(`http://localhost:${PORT}`);

})

//import express from "express";는 최신 버전

console.log(express);

실행시키려면 터미널 창에서 node index.js를 입력하면 된다.

 

get

get 방식으로 열리는 도메인이며 get의 "/"에 쓴 이름이 포트 뒤에 이름으로 간다.

만약에 "/app"을 적으면 http://localhost:8080/app이 주소가 된다.

 

app.get("/",(req, res) => {

    // res.send("Hello express");

    res.send({result: true, code : 1000, mesage : "회원가입 성공!" });

})

get 안에 객체로도 만들 수 있다. 그리고 객체 안에 객체를 또 넣을 수 있다.

listen

서버를 열어주는 역할을 한다. 

console.log는 터미널 창에서 뜨고 윈도우에서 뜨지 않는다.

 

Node.js가 어려운 이유

모듈을 하나하나씩 늘려가면서 정말 많아지기 때문에 번거롭고 어렵다 느껴지는 것이다.

npm에서 검색해서 필요한 모듈을 찾고 사용할 수 있다.

 

MIT 라이선스가 무료로 사용 가능하다.

 

---

그리고 계속 add 할때 오류가 나서 찾아봤는데

https://cocoon1787.tistory.com/728

[Git] "LF will be replaced by CRLF in..." 에러 해결 방법

이유가 이 때문이었다. 이에 대한 해결 방법은 터미널에 git config --globa core.autocrlf true를 쓰면 해결된다.

 

---

템플릿 엔진

뷰를 보여주기 위한것 실무에서는 많이 사용하지 않는다. 노드 js 자체적으로 웹을 보여주기 위해 사용하는 것이기 때문에 회사 내부적으로 테스트용 웹페이지를 확인하기 위해 사용하는 정도라 많이 사용하지 않는다. 리액트를 들어가게 된다면 거의 사용하지 않을 것이다.

 

EJS 템플릿

• 템플릿 엔진 : 문법과 설정에 따라 파일을 html 형식으로 변환시키는 모듈

• ejs

• Embedded Javascript 의 약자로, 자바스크립트가 내장되어 있는 html 파일

• 확장자는 .ejs

 

<%

%> 

위와 같은 방식으로 쓰고 한줄에 하나씩 사용한다.

값만 표현할 때는  <% =I %> 이와같이 사용한다.

 

npm install ejs로 설치

 

app.set view 엔진을 불러올때 사용

app.use 미들웨어 서버가 처음부터 끝까지 코드가 있을때 중간에 실행 시키는 놈

 

res.render(이름,데이터)// 데이터도 보낼 수 있다.

 

그리고 이상태에서 컨트롤+c를 누르면 서버가 꺼지는 거라서 누르지 않고 실행을 해야 들어갈 수 있다.

 

미들웨어

• 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것

• 서버와 클라이언트를 이어주는 중간 작업

• use() 를 이용해 등록할 수 있다.

 

이론 수업이 끝난 후에 기존에 우리가 했던 실습을 Node.js를 이용해서 ejs로 바꾸는 실습을 진행했다. 그래서 7월7일에 만들었던 애벌레 실습을 옮기는데 이미지를 불러오는 과정에서 어려움을 겪었다..그래서 이를 정리해서 올린다.

app.use(express.static("public"));// 앞에 아무것도 없으면 바로 연결되는 것이기 때문에 바로 이미지로 들어갈 수 있다.

app.use("/static",express.static("public"));// 앞에서 사용하는 /static은 웹 페이지에서 사용할 가상 경로를 설정해주는것이다.

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

// __dirnamedms public을 문자열로 가지고 오고 path.join 을 통해 절대 경로로 가져오는 것이다.

따라서 /static은 웹에서 사용되는 가상 주소이고 이를 이미지 경로에 지정을 해줘야한다 위에서 순서대로 1,2,3이라고 하고 이미지를 웹에 띄울려면 아래와 같이 적어야한다.

1. <img src="pngwing.png" alt="">

2. <img src="static/pngwing.png" alt=""> 

3. <img src="static/pngwing.png" alt="">

/static을 적는 부분에 아무것도 적지 않는다면 그냥 이미지 파일 이름만 적어도 적용이 된다.