[2주차 - DAY4] 웹 실습(1)

 

 

프론트엔드

메인 페이지

main.html

소스코드 공개하지 말라길래,,,,,,

 

주문 내역 페이지

 

CSS

 

 

백엔드

백엔드의 구조

 

Node.js

자바스크립트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼이다.

웹 서버와 웹 어플리케이션 서버의 역할을 할 수 있기 때문에 js로 백엔드 구현이 가능하다.

 

Node.js로 서버 만들기

1. index.js 파일에서 server.js에 있는 서버를 시작하는 함수인 start 함수를 호출한다.

2. start 함수 내부에서는 요청을 처리할 함수를 정의하고, 서버를 시작한다.

3. router.js 파일의 route 함수에서 요청의 url이 유효한지 확인한다.

4-1. 유효하지 않은 url일 경우 3.의 조건문에서 걸러져서 404 에러 메시지를 발송한다.

4-2. 유요한 url일 경우 requestHandler.js 파일에 작성해 놓은 객체의 value로 존재하는 함수에서 해당하는 루트에 대한 응답을 발송한다.

 

index.js

 

 

server.js

createServer(함수명)	서버를 생성한다. 요청이 들어오면 어떻게 행동할 것인가에 대한 함수를 파라미터로 받는다.
listen(포트 번호)	설정한 포트 번호로 사용자의 요청을 받는다.

 

router.js

 

requestHandler.js

writeHead(상태 코드, 응답의 형태)	HTTP의 헤더를 작성한다. 첫 번째 인자는 웹 서버의 통신 상태 (statusCode) (200 - 정상, 404-사용자의 요청을 찾을 수 없음, 500 - 서버가 비정상 등) 두 번째 인자는 응답의 형태 (Content-Type, Content-Length 등)
write(데이터)	HTTP의 payload(body)를 작성한다. 작성한 데이터는 사용자의 화면에 표시된다.
end()	응답을 전송한다.

 

 

결과

https://localhost:8888	https://localhost:8888/login	https://localhost:8888/abc