여기서 알아볼 개념
- 각 URL별 접속 요청 처리
- 클라이언트의 GET / POST 요청(데이터, 파일 전송) 및 서버 응답
- static 폴더를 지정해 편의성 향상
0. 사전 설치
Node.js
https://velog.io/@gwak2837/Node.js-설치
Yarn 설치 (선택)
설치하지 않고 Node.js 설치시 기본적으로 설치되는 NPM을 사용해도 된다.
https://yarnpkg.com/lang/en/
Visual Studio Code 설치 (선택)
https://code.visualstudio.com/
1. 프로젝트 폴더 생성
터미널을(명령 프롬프트, PowerShell 등) 실행해 새 프로젝트 폴더 만들고 해당 폴더로 이동한다.
> mrkdir project-folder-name
> cd project-folder-name2. package.json 생성
> yarn init위 명령어를 입력하면 package.json 파일이 생성되고, 그 파일에 프로젝트에 대한 정보를 입력하라고 뜬다. 자신의 프로젝트 정보를 입력하거나 아무것도 입력하지 않고 Enter를 누르면 된다.
3. Node 패키지 설치
> yarn add express
> yarn add nodemon (선택)express : 웹 앱, API 개발 프레임워크다.
nodemon : node와 다르게 node로 실행한 js 파일이 변경되면 자동으로 실행 중인 node를 재실행하는 패키지다.
패키지 설치 옵션
--save : 패키지를 다운로드 받고, package.json의 dependancy 항목에 해당 패키지를 추가한다.
-g : 패키지를 글로벌 폴더에 설치해서 어떤 폴더에서도 해당 패키지를 사용할 수 있다. -g가 없으면 node_modules이 설치된 폴더 안에서만 사용할 수 있다.
4. Javascript 파일 생성
// App.js
let express = require('express'); // express 패키지 사용
let app = express(); // express 객체 생성
app.listen(3000, () => { // 3000번 포트 이벤트 listen
console.log('Server is running'); // 이벤트 발생 시
});5. Javascript 파일 실행
> yarn nodemon App.js해당 폴더 위치에서 명령을 실행하면 App.js파일이 자신의 컴퓨터에서 실행되어 터미널에 Server is running이라고 로그가 찍힌다. 파일을 실행하면 App.js의 Javascript를 처음부터 끝까지 순차적으로 실행한 후 비동기 처리 함수(콜백 함수 등)가 있으면 그 함수를 실행한다.
Nodemon
nodemon으로 Javascript 파일을 실행했을 때 그 파일을 수정하고 저장하면, nodemon이 자동으로 현재 실행 중인 node를 종료하고 변경된 파일로 다시 실행한다.
nodemon을 이용하면 Javascript 파일을 변경할 때마다 직접 node를 종료하고 다시 실행해야 하는 번거로움을 줄일 수 있다.
6. Express GET
// App.js
...
app.get('/', (req, res) => { // 루트 주소에 접속하면
res.send('hello world!'); // 해당 응답을 보낸다.
});브라우저 주소창에 루트 주소(localhost:3000/)로 접속하면 hello world 글자를 볼 수 있다. localhost는 127.0.0.1과 동일한 의미이며 자신의 컴퓨터로 접속한다는 의미이다.
req : 클라이언트에서 서버로 보낸 정보
res : 서버에서 클라이언트로 보낼 정보
7. Express GET html
public폴더에 index.html파일을 생성한다. index.html내용엔 HTML 기본 형식을 넣고, App.js에서 express로 이 파일을 다운받을 것이다.
// App.js
...
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});마찬가지로 브라우저에서 루트 주소(localhost:3000/)로 접속하면 서버로부터(localhost:3000) index.html을 다운받아 그 내용을 화면에 보여준다.
__dirname은 해당 파일(App.js)이 위치한 절대 경로이다. 절대 경로는 루트부터 현재 디렉토리까지의 경로값이다. 예를 들면 윈도우는 C드라이브부터 현재 프로젝트 폴더까지의 경로가 저장되어 있을 것이다. 따라서 __dirname과 특정 파일의 상대 경로를 결합하면 그 파일의 절대 경로를 얻을 수 있다.
index.html 파일은 디렉토리의 대표 문서로서, 브라우저에서 어떤 디렉토리에 접속 했을 때 자동으로 보여주는 파일이다.
8. Express use
// App.js
...
app.use(express.static('public'));
app.get('/', (req, res) => {
// res.sendFile(__dirname + '/public/index.html'); 기존 방식
res.sendFile('index.html');
});
원래 URL 접속할 때 파일 이름만 입력하면 파일 요청이 안 되고, __dirname을 이용해 파일의 서버상 절대 경로를 입력해야 파일 요청이 가능하다. 하지만 static 폴더를 지정하면 그 폴더에 있는 파일은 상대 경로로 접근할 수 있게 된다.
9. Express POST
...
<body>
<form action="/post_result" method="POST">
<input type="text" placeholder="input id" name="id" />
<input type="submit" />
</form>
</body>
...index.html 파일의 body 태그 안에 form 태그를 넣는다. 이후 사용자가 글씨를 입력하고 submit 버튼을 누르면 POST 방식을 사용해 입력된 값을 localhost:3000/post_result로 보낸다.
// App.js
...
app.post('/post_result', (req, res) => {
res.send(req.body);
});그럼 App.js에서 localhost:3000/post_result으로 온 입력값을 처리한다.
GET과 POST의 차이
GET
GET은 서버로부터 정보를 조회하기 위해 설계된 메소드다. GET은 요청을 전송할 때 필요한 데이터를 Body에 담지 않고, URL의 끝에 ?를 붙이고 Key-Value 쌍을 이루는 파라미터(쿼리스트링) 형태로 보낸다. 만약 쿼리스트링이 여러 개이면 & 문자로 연결한다.
예를 들어 https://newsstand.naver.com/?list=ct1&pcode=011 은
https://newsstand.naver.com : 도메인
/ : 도메인의 root directory
? : GET 파라미터 시작
list=ct1 : key1=value1
& : 쿼리스트링 연결
pcode=011 : key2=value2
POST
POST는 리소스를 생성/변경하기 위해 설계되었기 때문에 GET과 달리 전송할 데이터를 HTTP 메세지 Body에 담아서 전송한다. HTTP 메세지 Body는 길이 제한없이 데이터를 전송할 수 있다. 그래서 POST 요청은 GET과 달리 대용량 데이터를 전송할 수 있다.
크롬 개발자 도구로 들어가 네트워크 탭에서 아무 파일의 헤더를 보면 이 파일이 GET으로 보내졌는지 POST로 보내졌는지 알 수 있고, 해당 파일 내용도 볼 수 있다.
GET의 경우 어떤 페이지의 주소를 다른 사람한테 전달하고 싶을 때 주소창의 URL을 복사하면 다른 사람도 동일한 페이지를 볼 수 있다. 하지만 POST는 값이 내부적으로 전달되기 때문에 URL만 전달해선 동일한 페이지를 볼 수 없다.
언제 사용할까
GET은 서버에 동일한 요청을 전송하면 매번 동일한 응답이 돌아와야 한다. 즉, GET은 서버의 데이터나 상태를 변경시키지 않기 때문에 주로 데이터를 조회할 때 사용한다. 예를 들어, 브라우저에서 웹페이지를 열어보거나 게시글을 읽는 등 서버 데이터를 조회할 땐 주로 GET으로 요청한다.
반대로 POST는 서버에게 동일한 요청을 여러 번 전송해도 응답이 다를 수 있다. 그래서 POST는 서버의 상태나 데이터를 변경할 때 사용된다. 예를 들어 게시글을 쓰면 서버에 게시글이 저장이 되고, 게시글을 삭제하면 해당 데이터가 없어지는 등 서버의 데이터를 변경하려고 할 때 POST로 요청한다.
이처럼 GET은 조회, POST는 생성, 수정, 삭제에 사용될 수 있지만, 생성에는 POST, 수정은 PUT / PATCH, 삭제는 DELETE 등 용도에 더 적합한 메소드도 존재한다.
GET : 조회
POST : 생성
PUT : 수정
PATCH : 수정
DELETE : 삭제