서버구축
자바스크립트언어 기반 node.js 를 사용하여 서버를 만들어볼려고한다.
먼저 node.js 장점은 비동기처리를 한다는것, A,B,C 라는 작업이 들어왔다면 순서대로 끝날때까지 하는게 아니라 일단 A,B,C 작업을 받아서 빠르게 처리하는것부터 완료하는것이다. 예를들어 SNS, 채팅 서비스 같은경우 요청이 매우 많고 여러 요청을 바로바로 처리해야한다.
무거운 요청까지도 일단 받아들이기때문에 멈춤이 없다는 장점이 있는것이다.
기본서버환경 만들기
express
express 라이브러리를 사용하면 쉽게 서버를 만들수 있다고한다.
creact-react-app을 통해 만드는게 아니기 때문에 package.json 과 같이 패키지 라이브러리 버전관리 파일이 필요하다. 따라서 npm init 을 통해서 새 프로젝트에 package.json을 만들어준다.
이렇게 init 을하고 entry point(시작 파일) 이외에 엔터를 쳐서 default 값으로 설정해준다. (이때 server.js 라고 만들었는데 기존에 내가 db.js 라고 만들어 논게 있어서 이걸로 entry point로 썼어도 됐었다.)
이렇게 init을 완료하면 package.json 이 생기고 yarn add express 로 express를 설치하여 dependencies에 키값이 생긴건 볼수있다. 또한 entry point 로 썼던 server.js 도 있는걸 확인할수있다. node_modules 와 yarn.lock 경우는 라이브러리를 설치하면서 생기게된다. 이때 yarn.lock 은 yarn 을 사용하여 설치했기때문에 생긴것이고 npm 으로 설치할경우 package-lock.json 이 생성된다.
이제 express라이브러리를 이용하여 서버를 만들기위해 import 하고 listen 메서드 사용하여 원하는 임의의 port로 서버를 열어준다.
만약 서버가 잘 열렸다면 두번째 인자인 function(){} 이 실행되어 콘솔로그를 찍어준다.
node 명령어를 써서 server.js를 실행해보면 해당 콘솔로그가 잘뜨는걸 볼수있다.
브라우저에 localhost:8080 을 쳐보면 get 에러는 있지만 8080 포트에 잘 연결된걸 알수있다.
이제 경로를 정해 해당 url경로로 GET요청을 하도록 해준다. 이때 express의 get메서드를 사용하고 첫번째 인자는 경로 두번째는 그 get 요청과 응답부분으로 해당 포트8080으로 client에서 GET요청이오면 응답을 보내주는데 이때 send메서드를 사용하여 '펫용품 쇼핑할 수 있는 페이지입니다.'라는 문자열을 보내주기로 하였다.
function 부분도 한글말고 언어를 통일하기위해 영어로 써주면 좋을거같아서 request 와 response로 바꿔줬다.
이렇게 server.js 를 실행하여 서버를 열어주고 8080/pet 경로로 이동하니 get요청으로 해당 response.send로 해당 문자열이 잘 뜨는걸 볼수있다.
이렇게 또다른 url경로의 GET요청을 추가해주면 그 경로로 접속시 해당 response를 보내줄수있다.
node server.js 을 매번 껐다 켰다 하기 귀찮기 때문에 이렇게 하지않아도 자동으로 업데이트(automatically restart your server)해주는 nodemon 라이브러리를 설치
사용할때 nodemon 을쓰고 실행할 js파일을 쓰면된다. 이렇게 했을때 코드가 바뀌면 자동으로 업데이트해주기때문에 서버를 끄지 않고 브라우저에서 새로고침만하면 변경된 코드가 적용된다.
client가 '/' 경로로 GET요청시 index.html 파일을 응답으로 보내주기로했다.
- __dirname은 현재 파일의 경로를 뜻한다.
index.html 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h4>안녕하세요 홈페이지입니다.</h4>
</body>
</html>
이렇게해서 express 라이브러리를 이용하여 간단하게 서버 구축과 GET요청을 구현해보았다.
'TIL' 카테고리의 다른 글
| [TIL] Typescript 타입스크립트 (0) | 2022.02.20 |
|---|---|
| [TIL] 모의면접 (0) | 2022.02.19 |
| [TIL] SQL, NoSQL (0) | 2022.02.18 |
| [TIL] XML, JSX, Babel(바벨) (0) | 2022.02.15 |
| [TIL] Optional chaining ES11문법 (0) | 2022.02.13 |