이전 글 Npm이 무엇이며 활용법에 대해서
node에서 npm을 빼고는 말을 할 수 없을 정도로 중요한 부분을 차지합니다
그 이유는 많은 사람들이 개발한 오픈 소스를 관리해 주기 때문이지요
npm을 잘 활용한다고 하면 패키지를 어떻게 잘 관리할지에 대해서
조금은 생각을 하고 있는 사람이 아닐까 합니다
더 자세한 사항을 알고 싶으시다면 아래의 링크를 클릭하시길 바랍니다
2022.09.10 - [IT_Web/Nodejs] - Node에서 중요한 NPM은 무엇이며, 그 활용법을 알아보자
Node에서 중요한 NPM은 무엇이며, 그 활용법을 알아보자
이전 포스팅 puppeteer 활용해서 웹크롤링에 대해서 웹크롤링은 업무적으로도 필요한 경우가 있습니다 그리고 배우는 것만으로도 충분히 재미를 느낄 수 있다고 생각합니다 그리고 웹크롤링은 비
tantangerine.tistory.com
Nodejs 활용해서 express 서버 구축하기
우선 처음 프로젝트를 만들 때 무엇을 해야 할지 모를 경우가 많습니다
일단 처음 node를 설치하였다면 프로젝트를 진행할 폴더에서
npm init을 하여 간단한 물음에 답을 합니다
그렇게 하면 package.json 생성되고
필요한 패키지를 설치하여 프로젝트를 진행합니다
그럼 파일이 생성되어 아래와 같은 구조를 가지게 될 것입니다
(index.html은 제가 미리 만든 파일입니다)
그럼 express를 간단히 구현해 보도록 하겠습니다
먼저 개발에 유용한 패키지 nodemon을 설치하여 진행하겠습니다
npm i -D nodemon
nodemon은 파일을 저장할 때마다 다시 npm start를 하지 않고
소스코드를 반영할 수 있게 하는 패키지입니다
아래와 같이 scripts를 설정하시고 진행하시길 바랍니다
express 패키지 사용하기
커맨드 창에서 아래와 같이 패키지를 설치합니다
npm i express
아래와 같이 express패키지를 불러옵니다
require()는 node에서 모듈을 불러올 경우 사용할 수 있습니다
프로젝트 내에서 모듈을 불러올 수도 있으며,
npm이 관리하는 패키지일 경우에는
패키지명을 인자 값으로 할당해서 패키지를 불러올 수 있습니다
아래와 같이 서버를 만들고
app.set()를 만들어서 port번호를 설정하게 됩니다
*env는 추후에 다시 설명해드리겠습니다
const express = require('express');
const path = require('path');
const app = express();
app.set('port', process.env.PORT || 3000);
app.get('/', (req, res) => {
console.log('req: ', req)
console.log('res: ', res)
res.send(`Wellcome, Express Server`);
});
app.listen(app.get('port'), () => {
console.log(app.get('port'), '번 포트에서 대기 중');
});
express로 html 서빙하기
그럼 인터넷 브라우저를 열어 주소창에 "http://localhost:3000/" 입력합니다
아래와 같이 화면이 노출될 것입니다
왜 이렇게 노출될까요?
아래의 app.get()는 라우터라는 명칭으로 서버에서 선언하여 사용합니다
이때 api 호출 방식은 get방식, post방식이 있습니다
*get방식 post방식의 차이는 추 후에 다시 설명해 드리겠습니다
그 라우터는 첫 번째 인자 값에 api 호출받을 주소를 지정하여
get방식을 호출하는 api 주소가 동일할 경우 두 번째 인자 값인 콜백 함수가 실행됩니다
그 콜백 함수에서 (req, res) 두 개의 매개변수가 보일 것입니다
이 두 개의 매개변수의 정보들을 보면 화면이 왜 그렇게 노출되는지에 대한
궁금증을 풀 수 있을 것 같습니다
아래의 코드에 제가 console.log를 호출해 놓았습니다
그럼 콘솔 창에 어떤 정보가 있는지 확인해 봅시다
아래는 req에 대한 정보가 json Object형으로 담겨있습니다
req정보는 클라이언트에서 요청할 때 보낸 정보들이 담겨있는 것을 알 수 있습니다
아래에 statusCode, url, params, query, route 등등 유용한 정보들이 있습니다
그럼 실제 클라이언트에서는 어떻게 보내고 있는지 한번 확인해볼까요?
F12키를 눌러서 개발자 모드에서 api요청 보낸 정보들이 헤더에 담겨있는 것을 확인할 수 있습니다
그리고 두 번째 매개변수 res의 정보를 보겠습니다
res는 express에서 자체적으로 사용하는 패키지와 모듈이 있습니다
당연 req에서 받은 정보들도 res에서도 사용할 수 있도록 저장되어있으며
html을 기본 코드들이 내장되어있어
res.send()에서 매개변수 인자 값으로 문자열을 할당할 경우
그 인자 값의 정보들이 내장된 html 코드와 같이 페이지를 노출하게 됩니다
결과 값은 아래와 같습니다
이 것을 이용해서 html 파일을 미리 만들어서 사용할 수 있습니다
위에 제가 미리 만들어 놓은 html은 확인하셨을 것입니다
index.html을 아래와 같이 코드 작업을 합니다
<html>
<head>
<meta charset="UTF-8" />
<title>Express Server</title>
</head>
<body>
<h1>Express Server</h1>
<p>환영합니다.</p>
</body>
</html>
그리고 아래처럼 res.sendFile()를 활용해서 경로를 적용해서 매서드를 호출합니다
path는 node의 패키지로 프로젝트의 경로를 찾아 할당하기 유용한 패키지입니다
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html')); // 변경코드
});
코드를 변경했다면 아래와 같이 변경된 화면을 확인할 수 있습니다
express 서버 구현하는 것을 알아보았습니다
아직 미들웨어, DB 연동, 세분화된 라우터, 세션, 쿠키 활용 등
아직 갈길이 멀기만 합니다
블로그에 포스팅을 업로드할 때마다
콘텐츠를 걱정하는 블로거들이 많다고 합니다
하지만 저는 그런 걱정은 별로 안 하는 것 같습니다
그저 제가 공부한 것들이나 알고 있는 것들을 풀기만 하면 되니깐요
그래서 요즘은 블로그에 글을 쓰려고 공부하는지 공부하려고 글을 쓰는지
알 수 없을 정도가 되었습니다
하지만 그것 또한 저 한태는 좋은 영향을 주는 것 같습니다
동기부여와 더 진취적으로 변해가는 저의 모습을 보니깐요
1일 1 포스팅이 왜 어려운지 요즘 많이 생각하게 됩니다
앞으로도 꾸준할 수 있도록 노력하겠습니다
그러니 다 같이 파이팅 하시길 바랍니다
우리의 IT 대모험은 아직 끝나지 않았으니까요!
그럼 다음 글에서 뵙겠습니다
'IT_Web > Nodejs' 카테고리의 다른 글
| Node express 서버의 미들웨어, 라우터 개념 제대로 알기 및 next함수 활용하기 (0) | 2022.09.16 |
|---|---|
| Node에서 express 서버 미들웨어 적용하기 그리고 middleware를 쓰는 이유가 뭘까?? (0) | 2022.09.15 |
| Node에서 중요한 NPM은 무엇이며, 그 활용법을 알아보자 (2) | 2022.09.10 |
| 웹 크롤링 puppeteer 파일 업로드 및 로그인 유지 설정하기 (0) | 2022.09.06 |
| 웹 크롤링 puppeteer로 mysql 및 sequelize 활용하여 DB연동하기 (0) | 2022.09.03 |