[Node.js] 1. Node.js와 서버 만들기

337 ch·2024년 1월 15일

Node.js

목록 보기
1/4
post-thumbnail

🖥️ 편집기 : Visual Studio Code

🖍️ Node.js란?

정말 간단하게 말하면 '서버 만들기' 이다
그것도 우리에게 익숙하다면 익숙한 '자바스크립트' 를 이용해서!

프론트엔드만 하던 사람들에게는 따로 새로운 언어를 배우지 않고도 백엔드를 구현할 수 있다는 아주 큰 장점이 있다

서버는 크게 보면 요청을 하는 클라이언트와 그 요청에 응답하는 서버가 있다
쉽게 예를 들면 요청은 홈페이지에 컵을 검색했으면 그게 바로 요청이다!
이 컵에 맞는 검색결과(페이지)를 띄워주는 것이 바로 응답인 것이다


🖍️ http모듈 VS express모듈

node.js를 공부하다보면 거의 모든 사람들이 express 모듈을 사용하는 걸 볼 수 있는데, 이 이유를 오늘 공부하면서 처음 알게 되었다

node.js에는 원래 기본 모듈인 'http'가 내장되어있지만, 여러 이유들로 사용하지 않는다!

node.js의 장점 중 하나가 '다른사람이 만들어둔 멋진 모듈'들을 가져다 사용할 수 있다는 점이지 않은가? 그럼 더 편리한 서버 모듈을 가져다 사용하면 되겠다! 그게 바로 express

그럼 http와 express의 차이점이 무엇인지 아주 조금만 알아보자

http모듈은 server객체, request객체, respone객체를 사용한다
express와 비교하여 아주 기본적인 기능들도 직접 만들어주어야하는 부분이 많다고 한다

반면에 express모듈이 사용하는걸 보면 미들웨어와 라우터를 사용하여 보다 편리하게 웹 서버를 구성할 수 있다 자세히 비교한 문서

이제 node.js를 사용하는 이유를 알았으니 서버를 만들러 가보자



🖍️ 여러가지 방법으로 http 서버만들기

엇! 앞에서 express 사용하는게 좋다고 했으면서 왜 http로 서버를 만드나요?
업그레이드 된 도구를 쓰기에 앞서 기본적인 틀이나 흐름을 아는것이 중요하기 때문이다

나는 먼저 http를 사용해서 서버를 만들어보겠다
생각보다 정말 간단한 것을 볼 수 있다




A서버와 B서버의 차이점 : 함수의 작성 방식이 다르다. A방식이 빠르게 작성하기에 편한게 보이시죠

[node_study24 > main.js]

L2 : require로 http를 불러와, http 변수에 할당
L5 : createServer를 이용해, 서버 생성 및 요청객체와 응답객체 받기
L6 ~ L7 : write로 클라이언트 요청에 대한 응답메세지 쓰기
L9 : listen으로 3000번 포트에서 사용자 요청이 들어오는지 기다리도록 하기




이후 나오는 모든 코드들은 require 부분이 생략되어있습니다.


C서버 : 헤더 정보 - html
D서버 : 헤더 정보 - html > plain으로 변경, 변수명 변경, write대신 end에 메세지 출력

writeHead
response 객체의 메서드에서 헤더 정보를 응답으로서 작성하여 내보내는 것
writeHead(http 응답 상태코드, {헤더 정보 배열로 지정})

Ex. {'Content-Type' : 'text/plain'} <- Content-Type이라는 헤더 정보에 text/plain 값을 설정하겠다라는 뜻


C서버 구동 결과D서버 구동 결과



E서버

  • 서버 구동시 콘솔메세지 띄우기




🖍️ 클라이언트 요청 처리하기

url획득하기

클라이언트 요청이 들어오면 url을 획득하는것이 중요하다

https://velog.io/**write?id=81f4f811-4cee-4c0b-9a87-eb244f33fd19**
http://localhost:3000/**?name=ch1on&age=999** 이부분이 핵심

req의 내장객체로 url을 획득해준다
요청이 들어오면 해당 정보가 출력되지만 특별한 요청이 없이 localhost:3000으로 들어갈 경우 '/' 만 출력된다

favicon.ico란?

  1. 파비콘이란 주소창 옆에 조그맣게 뜨는 아이콘을 말한다
  2. 브라우저를 열때 기본적으로 파비콘 요청이 같이 들어온다
  3. 처리는 어떻게? 따로 파비콘이 없으면 404처리 혹은 무시처리

HTTP 응답 상태 코드

res.writeHead를 적을 때 응답 상태 코드를 적어주어야한다!
여러의미의 응답상태 코드가 있지만 주요 코드들을 알아보도록 하자

200 : 서버가 브라우저에게 건네주면 전송 성공이라는 의미
302 : 리다이렉트
400 : 페이지 또는 파일을 찾을 수 없는 경우 not found
500 : 내부적 에러



🖍️ Template 출력하기

연산자 '+'를 사용한 템플릿

가장 클래식한 방법이지만 너무나도 번거롭다

Template Literals(string)백틱을 사용한 템플릿

백틱을 사용하면 보다 간편하게 템플릿을 생성할 수 있다.

함수를 사용한 템플릿





개별 파일을 사용한 템플릿

이번에는 외부의 파일을 fs모듈을 사용해 동기식과 비동기식으로 가져와 화면에 출력하고, 에러메세지도 처리하여보자!

비동기식1

에러를 따로 처리한 경우

비동기식2

에러를 if~else 식으로 처리한 경우


동기식

try~catch로 에러를 처리한 경우 + 에러메세지 화면에 출력




오늘의 에러

Q. 실행했을 때 L에서 아래와 같은 에러가 났다
A. 위에서 처음 url을 할당할시 const로 할당했기 때문이다
const는 재할당을 할 수 없는데 다른걸로 바꾸려고(재할당) 하니 오류가 난 것

해결방법 : let url = req.url;로 수정해주었다




오늘의 궁금증

서버를 만드는 언어들의 장단점
Java | node.js | Python

수업에서 Java로 서버를 만들었던 경험이 신선했던 기억도 있고, 각 언어들을 이용하여 만든 서버들에는 어떤 장단점이 있는지 궁금해졌다

<추후 조사후 추가예정>

profile
노에러

0개의 댓글