연습장
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 태그의 속성하나만 추가해주면된다.
ex_login.html 에 접속하여
id pw 입력후 제출을 누르게 되면
login 주소로 이동하고
터미널에는 다음과 같이 console.log 결과가 표시된다.
기존의 http 모듈을 이용한 js 파일에서는 하나의 사이트씩 밖에 연결을 하지 못했지만
express 를 사용하면 하나의 js 파일에서 router 를 이용하여 여러 사이트를 연결해서 보여줄 수 있게된다.
대신 페이지가 많아지면 app.js 가 무거워지며 이를 방지하기 위해 router 폴더에 따로 router.js 파일을 만들어서 router 처리를 모두 옮겨서 한다.
'Node.js' 카테고리의 다른 글
08. mysql 에 저장 (0) | 2023.08.06 |
---|---|
07. node - mysql 세팅 (0) | 2023.07.30 |
05. 실습 2 - 페이지와 연결 (post) (0) | 2023.07.29 |
04. 실습 1 - 페이지와 연결 (get) (0) | 2023.07.29 |
03. nodemon (0) | 2023.07.29 |