06. Express js

이번에는 node에 웹 프레임워크인 express 를 사용해보겠습니다. 

 

새로운 폴더 express 를 만들고

 

터미널에서 cd express  명령어를 통해 이동 express 폴더로 이동

 

app.js 라는 파일을 생성 해주고

 

 

npm init 

 

입력 후

 

package name : 어떤 프레임워크를 이용할 건지 : express
version : 버전 : 1.0.0
description : 설명 :  express 실습
entry point : 미들웨어에서 내용을 받았을때 어떤 파일이 주소값을 나누는 기준이 될것인지 : app.js
test command : 테스트 ~ :    enter 로 넘깁니다.

git repository : git 연결 : enter로 넘깁니다.

keywords : 키워드 : enter로 넘깁니다.

aythor:  누가 사용할건지 : 사용자 작성
license : 라이센스  : enter 로 넘깁니다.

 

최종 : yes 입력 

 

하게 되면 

 

 

작업공간중 express 폴더에 다음과같은 package.json 파일이 생성됩니다. 

이 파일은 프로젝트에 대한 정보를 설명 해줍니다. 

 

터미널에

 

npm install express --save 

 

를 입력하여 express 를 설치해줍니다. 

 

node_modules 와 package-lock.json 가 생성되는데 

node_modules  : 배포할때 어떤 라이브러리들이 포함이 되어있는지 

(package-lock.json : 검색해봐도 잘모르겠습니다. 필요한거라는데 )

 

 

 

그리고 폴더 몇개를 더 만들어 줍니다.

config : 환경변수 정보 저장 (DB 연결정보, API 키 값등)
public : 정적파일관리(JS, CSS , image, Audio, Video 등 )
router : 라우팅을 위한 폴더 ( 라우팅 별 모듈 생성/ 로직구현 ) 
views : 요청에 대한 로직 처리 후 응답을 보낼 html (ejs 템플릿사용) 
app.js : 서버를 실행하기 위한 Main 파일 (express 미들웨어 설정)

 

이 글에서는 사용하지 않을 수 있습니다.

일반적인 세팅이 이렇게 된다 라는 의미에서 

 

 

14 줄 : '/'   는 localhost 주소를 나타낸다. 

 

 

로컬호스트로 접속하게되면 다음과 같이 응답을 기다리는 이미지가 나오며

 

터미널에선 입력해둔 console.log 값이 나오게 된다. 

 

 

public 폴더안에 html 파일을 2개 만든다

ex_join.html

ex_login.html

 

action에 각각 주소를 넣어주고 

 

 

다음과 같이 router 를 추가하여 연결해주면

 

 

 

 

각각의 html 에 대해서 다음과 같이 결과를 받을 수 있다. 

 

 

get 방식이기 때문에 주소에 이렇게 표시가 된다.

 

---

 

회원 가입 및 로그인 같은경우 개인정보가 중요하기 떄문에

post 방식으로 바꿔보도록 하겠다. 

 

 

js 파일의 코드는 다음과 같다. 

 

9-10 줄:  가장중요한  router 선언 전에 body 영역 사용을 등록한다.

25줄 : router.get -> router.post 로 바꾼다.

27줄 : query -> body 로 바꾼다. 

 

html 은 form 태그의 속성하나만 추가해주면된다.

    <form action="http://localhost:3000/login" method="post">

 

 

ex_login.html 에 접속하여 

id pw 입력후 제출을 누르게 되면 

login 주소로 이동하고 

터미널에는 다음과 같이 console.log 결과가 표시된다.

 

---

 

기존의 http 모듈을 이용한  js 파일에서는 하나의 사이트씩 밖에 연결을 하지 못했지만

 

express 를 사용하면 하나의 js 파일에서  router 를 이용하여 여러 사이트를 연결해서 보여줄 수 있게된다.

 

대신 페이지가 많아지면 app.js 가 무거워지며 이를 방지하기 위해 router 폴더에 따로 router.js 파일을 만들어서 router 처리를 모두 옮겨서 한다.