node.js 서버에 html 띄우기

-- nodejs --
서버는 사용자의 요청을 처리하는 기계임. 이 요청을 처리하기 위해서 서버 코드와 pc가 필요함.
> 서버는 요청을 처리하는 pc

api:
애플리케이션 프로그래밍 인터페이스

애플리케이션은 기능을 가진 모든 소프트웨어를, 인터페이스는 두 애플리케이션 간의 서비스 계약을 의미하고, 이 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의한다.


서버에 보내는 요청의 종류
1. get: 읽기
2. post: 쓰기, 뭔가를 생성
3. put: 수정
4. delete: 삭제

서버 제작(api)
1. nodejs 최신버전 설치
2. vscode 설치
3. 폴더 열기
4. new termimal로 터미널기
5. npm init입력: 라이브러리 설치를 위한 툴 설치
> 설치한 라이브러리는 package.json에 기록됨
6. npm install express입력: express란 서버 라이브러리 설치
7. 엔터 누르며 중간에 js서버 파일 설정
8. express 기본 세팅 입력
const express = require('express');
const app = express();

app.listen(8080,function(){
    "서버 접속 시 동작 추가"
});

서버 코드 작성 후 터미널에
node server.js 로 서버를 실행함

> pc의 8080포트를 사영하겠단 의미

브라우저에서 localhost:8080 url로 
접근할 수 있음.

9. get에 대한 응답 설정
터미널에
app.get('/pet', function(요청, 응답){
    응답.send(" hello world ");
}):

url부분에 ' / '로 경로 분기를 나눌 수 있음

10. 서버 자동 재실행 
터미널에 npm install nodemon입력

에러가 뜰 경우
powershell을 관리자 권한으로 실행
터미널에 executionpolicy 입력

set-executionpolicy unrestricted입력
y 입력

이제 코드를 변경하는 순간 서버 재실행

다시 vscode로 돌아가서 nodemon을 설치한다.

11. 응답으로 html 전달하기

server.js에 

app.get(' / ', function(요청,응답){
    응답.sendFile(__dirname + 
"/index.html")
});

프로젝트 폴더에 index.html을 만들고 양식에 맞게 작성

12. bootstrap 사용

bootstrap은 프론트엔드 컴포넌트를 쉽게 만드는 라이브러리
사이트에 올라온 예제 코드를 복붙하여 편하게 사용한다.

1) bootstrap 사이트를 방문
2) 4.x 버전을 변경
3) starter templete 검색
4) 해당 코드를 복사하여 index.html에 붙여넣기
> bootstrap에 필요한 js파일과 css파일을 url로 가져오는 코드임.
5) bootstrap사이트에서 원하는 컴포넌트를 골라서 코드를 복붙하여 사용가능