백엔드는 어떻게 동작할까?
오늘은 백엔드의 구조를 이해하고 Node.js를 활용 방법을 알아보겠다.
백엔드의 기본 구조
요청과 응답 흐름
웹에서 클라이언트가 서버에 요청을 보내고, 서버가 응답하는 과정이다.
1. 클라이언트 : 사용자가 웹 사이트에 접속하면 요청을 보낸다.
2. 웹 서버 (Web Server) : 정적 페이지(HTML, CSS, 이미지 등)를 제공하며, 동적 요청은 웹 어플리케이션 서버로 전달한다.
3. 웹 어플리케이션 서버 (Web Application Server) : 동적 요청을 처리하고, 필요한 데이터를 데이터베이스에서 가져온다.
4. 데이터베이스 (Database) : 데이터를 저장하고 관리하는 곳이다.
웹 서버의 역할
웹 서버는 정적 페이지를 제공하며, 동적 페이지 처리는 웹 어플리케이션 서버로 전달한다.
- 정적 페이지 : 내용이 변하지 않는 페이지 (예: HTML, CSS, 이미지)
- 동적 페이지 : 데이터 연산을 통해 내용이 변하는 페이지 (예: 로그인 페이지, 사용자 맞춤 콘텐츠 등)
웹 어플리케이션 서버와 데이터베이스
웹 어플리케이션 서버는 동적 페이지를 처리하며, 데이터베이스와 연결되어 데이터 조회, 수정, 삭제 등의 작업을 수행한다.
- 데이터베이스 (Database) : 데이터를 효율적으로 저장하고 관리하는 시스템
Node.js ?
Node.js란
Node.js는 자바스크립트를 서버 개발에 활용할 수 있도록 해주는 플랫폼이다.
이를 통해JavaScript로 백엔드를 구현할 수 있다!
Server 파헤치기
-
포트번호 (Port Number)
: 서버와 클라이언트가 통신하려면 같은 포트를 사용해야 한다.
ex) 무전기 -
HTTP 프로토콜 탬플릿
- Head : 통신 상태 및 응답 형식을 알려준다.
200: 정상 응답404: 요청한 페이지 없음500: 서버 내부 오류
- Body : 웹 페이지의 내용처럼 들어가는 부분이다.
- Head : 통신 상태 및 응답 형식을 알려준다.
Node.js 설치 방법
Node.js의 설치 방법은 아래 링크에 첨부하겠다.
간단한 웹서버 만드는 법
server.js
위는 실습 하면서 작성한 server.js 코드이다.
let http = require('http');
let url = require('url');이 코드는 더 쉽게 서버를 구축하기 위해 Node.js의 모듈을 불러오는 코드이다.
그 다음 start(route, hande) 의 함수를 만들고
exports.start=start 로 export해서 다른 파일에서도 이 start 함수를 사용할 수 있게 한다.
onRequest 의 함수 안의 request 와 response 는 Node.js에서 자동으로 잡아주기 때문에 괜찮다.
http.createServer(onRequest).listen(8888);start 함수 안에 있는 이 코드는
createServer, 말 그대로 서버를 만들겠다는 것이고
listen은 8888 번 포트에서 이 서버를 보겠다는 것이다.
그 다음 onRequest 함수 안에 있는 route 함수를 보자.
router.js
라우터는 어디로 갈지 경로를 정하는 친구이다.
Server와 Router의 역할
- Server : Request를 받는다.
- Router : Request의 URL의 따라 루트(route)를 정한다 -> 어디로 갈지 길만 정해준다!
다시 코드로 돌아와서 어떤 변수를 받는지 보자.
function route(pathname, handle, response){
...
}server.js에서 넘어온 현재 URL 경로인 pathname,
그래서 어떤 경로로 갈건지 정하는 handle,
server.js에서 받아온 Node.js의 response
이렇게 3개의 변수를 받고 사용하고 있다.
지정해둔 경로가 아니면
TypeError: handle[pathname] is not a function
이라는 오류가 발생하기 때문에
해당 오류를 방지하기 위해
if문을 활용해서 Error Page가 띄우게끔 했다.
그게 아니라면 정상적으로 handle 를 불러온다.
requestHandler.js
requestHandler.js에서는
넘어온 pathname에 따라 각자 다른 함수를 실행이 된다.
실습을 진행하면서 사용한 함수는 총 2개이다.
바로 메인 페이지인 '/' ,
로그인 페이지인 'login'.
하지만 내 경우에는 '/favicon.ico' 도 같이 경로가 잡혀서
favicon 함수도 하나 작성해두어 오류가 발생되지 않게 해두었다.
start 함수는 내 이름이 출력되게끔 만들어두었다.
경로를 잘 보면
localhost:8888
로 위에서 설정한 8888번 포트로 잘 불러와지고 있고
뒤에 / 가 숨겨진 상태이다.
눈에 보이지 않을 뿐
이 사진의 URL을 잘 보면
뒤에 /start 만 붙었는데
보이는 화면이 달라지는 것을 볼 수 있다.
TIL
오늘 처음으로 백엔드에 대해 배워봤는데
학교에서 배운 내용들보다 훨씬 가볍고 내용이 쉬워서
이해하고 실습하기 쉬웠다.
하지만 숙달시키고 손에 익히기에는 아직 터무니 없어서
더 오류를 맞닥들이고 구글링과 복습하면서 실력을 더 키워나가야겠다는 생각을 했다.
