express JS 설치, 기능 특징 -코딩 챌린지 48일차

 

 

 

---

express JS란?  

 

그럼 Node JS에서 기생하는 express js! 

Node JS를 쉽고 간편하게 실행하기 위한 타사 패키지입니다. 웹 개발에서 아주 널리 사용합니다.

노드제이에서 고급 웹개발에서는 에서는 타사 패키지를 사용하는것이 일반적임

 

---

설치시작

이 익스프레스 라이브러리를 설치하기위해서는 npm (라이브러리설치도구) 명령을 시작해야함

 

터미널을 다시 새로 열고

npm init  엔트리 입력 (프로젝트 파일에 실행) -> 그다음 모두 엔터하기 

 

 

1) Sorry, name can no longer contain special characters ("~'!()*") 

 ㄴ 위와 같은 메시지가 뜨면  폴더 이름은 대문자없이, 띄어쓰기 없는지 다시한번 체크 필요합니다.

2) 엔트리 포인트만 내가 원하는 이름으로 해보기 (그냥 엔터해도 됨)

keywords 프로젝트에 태그 하고싶으면 (초반에는 중효하지 않음)

3) author에 내이름 넣기

4) 라이센스는 코드를 배포할 계획이 있는경우 중요함 일단은 안중요함

 

node js, pakage.json 파일 생성

그럼 package.jason 파일이 생성된걸 볼수있음 (자바스크립트 처럼 생겼는데,  해당 프로젝트에 포함된 키에 대한 다양한 값이 저장됨) -> 브라우저와 서버간의 데이터를 제출하기위한 방식 

 

그다음 핵심 !

 

pakage.json에서 터미널을 다시 열고

 

npm install express 엔트리 입력!

(npm저장소에서 이 패키지를 다운로드해서 나의 로컬프로젝트에 설치하는거임)

 

 

npmjs.com

(여기서 모든 패키지를 찾을수가 있음 / 튜토리얼 강의도 볼수있고 블로그,기사 등에 써보라는 제안되는 패키지도 확인할수 있음) 

 

 

그럼 설치가 되고 node_modules(모든 패키지가 포함된, 익스프레스 뿐만 아니라 왜냐면 익스프레스도 다른 패키지에 의존하는 패키지이기 때문에)파일과 package-lock.json(이건 걍 무시해도됨)파일이 추가되는것을 볼수가 있음

 

 

pakage.json에 가면 dependencies가 추가된걸 볼수있는데 npm install로 다른 패키지를 추가하게 되면 더 추가된다. (여기서 설치된 패키지의 버전을 볼수가 있음)

   -> 특정 버전을 지정해놓고 싶은 경우 버전이 바뀌지 않도록 버전을 지정할수도 있음 

 

 

프로젝트 코드를 다른 개발자와 공유해야 하는경우는 node-modules를 삭제하고 공유할수가 있는데 이렇게 되면 종속성을 빼고 공유하게 된다. (언제든 npm install로 깔수가 있음 / 서로 공유할때 다운로드 크기가 작아짐 (린프로젝트를 공유하게 되는것임))

 

 

 

---

get

그럼 이제 express 패키지를 사용하여 기존 node JS 코드를 Expree JS로 마이그레이션 하고자 함

* 마이그레이션은 데이터나 소프트웨어등을 하나의 시스템에서 또 다른 시스템으로 이동하는 것을 말합니다.

 

 

const express = require("express"); // express패키지가 필요해

// 내장된 http 패키지의 경우처럼 객체가 아니라 함수임! 패키지는 노출할 대상을 간단히 결정할수가 있음!

const app = express(); // express를 호출하면 app이라는 객체를 얻음

app.get("/currenttime", function (req, res) {

res.send("<h1>" + new Date().toISOString() + "</h1>");

}); // 브라우저에 보내는 기본 요청 // localhost:3000/curreunttime ('필터링하려는경로', 들어오는 요청애 대해 실행되어야하는 함수 )

app.get("/", function (req, res) {

res.send("<h1> hello world </h1>");

}); // 브라우저에 보내는 기본 요청

// 여기서는 statusCode를 설정하지 않으면 기본으로 200으로 설정되기 떄문에 설정할필요 없음!

app.listen(3000); //listen을 통해 포트번호를 전달함

 

여기까지 하고 저장한다음

 

node app.js 엔트리 입력후 웹에서 확인가능!

 

 

---

양식제출 (parsing user data)

 

const express = require("express");

// express패키지가 필요해

// // 내장된 http 패키지의 경우처럼 객체가 아니라 함수임! 패키지는 노출할 대상을 간단히 결정할수가 있음!

const app = express();

// express를 호출하면 app이라는 객체를 얻음

app.use(express.urlencoded({ extended: false })); // 요청종류에 상관없이 모든 요청에 적용됨 (미들웨어함수)

app.get("/currenttime", function (req, res) {

res.send("<h1>" + new Date().toISOString() + "</h1>");

}); 

// 브라우저에 보내는 기본 요청 // localhost:3000/curreunttime ('필터링하려는경로', 들어오는 요청애 대해 실행되어야하는 함수 )

app.get("/", function (req, res) {

res.send(

'<form action="/store-user" method="POST"><label>Your Name</label><input type="text" name="username"><button>Submit</button></form>'

);

}); // localhost:3000/

app.post("/store-user", function (req, res) { 

const userName = req.body.username; // input name을 추출하게됨

console.log(userName);

res.send("<h1>Username stored!</h1>");

});

// 여기서는 statusCode를 설정하지 않으면 기본으로 200으로 설정되기 떄문에 설정할필요 없음!

app.listen(3000);

//listen을 통해 포트번호를 전달함

---

제목3 (결론 이나 마무리글 적기)

 

새로운 파일을 추가

user.json이라는 파일을 생성시킴

 

사용자 이름 목록을 작성할수 있음 

 

[]를 작성함 (빈배열) - > 저장하고 닫기 

 

다시 app.js와서

 

const fs = require("fs");

const path = require("path");

const express = require("express");

const app = express();

app.use(express.urlencoded({ extended: false }));

app.get("/currenttime", function (req, res) {

res.send("<h1>" + new Date().toISOString() + "</h1>");

}); // localhost:3000/currenttime

app.get("/", function (req, res) {

res.send(

'<form action="/store-user" method="POST"><label>Your Name</label><input type="text" name="username"><button>Submit</button></form>'

);

}); // localhost:3000/

app.post("/store-user", function (req, res) {

const userName = req.body.username;

const filePath = path.join(__dirname, "data", "users.json");

const fileData = fs.readFileSync(filePath);

const existingUsers = JSON.parse(fileData);

existingUsers.push(userName);

fs.writeFileSync(filePath, JSON.stringify(existingUsers));

res.send("<h1>Username stored!</h1>");

});

app.listen(3000);

---