📕 서버에서 HTML 파일 전송

nodemon 설치

서버에 코드 하나 수정할 때마다 node server.js 하면서 수작업으로 업데이트 해줘야함
번거로우니 자동화 시키는 라이브러리를 설치한다.
npm install -g nodemon 실행어다.
-g는 내 컴퓨터 모든 폴더에서 이용한다는 의미다. (global)
하지만 powershell 보안오류가 뜨기도 함

보안오류 발생시

검색 - powershell - 우클릭해서 관리자권한 실행 - executionpolicy
그러면 Restricted로 설정되어있는걸 확인할 수 있다.
(허가받지 않은 스크립트 모두 막아버린다는 의미)
이걸 해제하기 위해 set-executionpolicy unrestricted 입력하고 Y 확인해준다.
그리고 다시 터미널에서 명령어 시도하면 잘 설치됨

설치 완료됐다면

nodemon serve

터미널에 입력하면 자동으로 server.js 실행

get요청시 html 파일 전송

우선, 누군가 방문시 띄울 HTML 파일을 만든다.
index.html 파일을 만들고 기존 규격대로 doctype html 필수코드 쭉 작성하면 된다.
그리고 server.js 파일로 돌아가서

(server.js)

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

코드를 추가해주면 된다.
sendFile() 함수를 쓰면 파일을 보낼 수 있다.
__dirname은 현재 파일의 경로를 뜻한다.
위 코드를 통해 누군가 / 경로(메인페이지)로 접속시 server.js와 같은 경로에 있는 index.html 파일을 전송해준다.
dirname의 언더바 2개인거 주의하면서 사용하자.

📗 Bootstrap을 이용한 UI 개발

트위터 사내 개발자들이 만든 웹 컴포넌트 라이브러리다.
개발 시간을 줄여주기 때문에 간단한 UI는 Bootstrap 이용해서 개발하자.
방식은 간단하다.

1. Bootstrap CSS와 JS 파일을 다운받아서 내 HTML 파일에 첨부해서 설치를 끝내고
2. 원하는 UI를 Bootstrap 홈페이지에서 검색하고 예제코드를 내 HTML로 복사한다.

그렇지만 여기선 직접 설치 말고 CDN 방식으로 진행할 예정임
사이트 우측 상단의 버전을 골라 사용할 수 있는데 강의에서는 Bootstrap 4.x 버전을 사용했다.

Get started

Getstarted 메뉴로 가서 starter template 부분의 예제 코드를 index.html로 복붙한다.
Bootstrap 사용하기 위한 기본 틀이 완성됐다.

원하는 UI 검색

사이트에서 원하는 UI를 검색하고 예제 코드를 복사한다.
index.html에 붙여넣고 마음대로 가공하면 된다.
여기서는 사용자가 입력한 값을 넘겨받기 위한 form 태그를 만들어보자.

📘 form 데이터를 서버로 POST 요청하기

html을 꾸몄다면 form 태그에 입력한 데이터를 서버로 POST 요청해보자.
Bootstrap을 이용해서 만든 html내부의 form 태그에 사용자가 입력한 정보를 submit 할 경우
그걸 서버에서 전달받고 다뤄볼거임.
총 3단계를 거친다.

form 태그 셋팅

HTML의 form 내부의 input 태그들은 입력받은 데이터를 서버로 전송할 수 있다.
전송하고 싶다면 form 태그에 전송 방법들만 명시해주면 된다.

<form action="/add" method="POST">
  <div class="form-group">
    <label>오늘의 할일</label>
    <input type="text" class="form-control" name="title">
  </div>
  <div class="form-group">
    <label>날짜</label>
    <input type="text" class="form-control" name="date">
  </div>
  <button type="submit" class="btn btn-outline-secondary">Submit</button>
</form> 

폼 전송버튼을 누를 시 /add 라는 경로로 POST 요청을 하는 코드가 완성됐다.
form 태그의 methods 속성은 GET/POST 중 어떤 요청을 할건지 방식을 정해주는 부분이다.
action은 어떤 경로로 요청할건지 정해주는 부분이다.
이제 전송버튼을 누르면 서버 input에 담긴 데이터들을 전송하게 되는데 추가적으로 input의 name 속성도 기입해주자.
input마다 name 속성을 정해주면 서버에서 데이터를 받아왔을 때 각각의 name으로 라벨링 할 수 있다.
어떤 input에 적혔는지 알기위해 작성해주자.

body-parser 설치

body-parser라는 라이브러리를 설치하면 데이터 처리가 쉽게 가능하다.
원래는 따로 설치해줘야 했는데 2021년 이후로 설치한 프로젝트들은 body-parser 라이브러리가 express 기본으로 포함되어 있어서 할 필요 없다.

app.use(express.urlencoded({extended: true})) 

이 코드만 server.js 상단 어딘가 express 불러왔던 쪽에 대충 추가해주면 된다.
이제 body-parser 사용할 수 있음

POST 요청하기

코드는 app.get 하던 것과 똑같이 생겼다.

app.post('/add', function(요청, 응답){
  console.log(요청.body);
  응답.send('전송완료')
});

누군가 /add 경로로 POST 요청을 할 때 터미널 콘솔창에 요청.body를 출력해준다.
요청.body는 input에 입력했던 모든 데이터들이 담겨있다.
(응답.send()는 성공했다는 메세지를 브라우저에 전달함)
폼에서 서버로 데이터보내기 끝이다! WoW

📙 REST API가 뭘까

API

API는 Application Programming Interface라는 어려운 용어의 약자이다.
서로 다른 프로그램간에 소통할 수 있게 도와주는 통신 규약을 뜻한다.
이걸 웹에서 사용한다면 '서버에게 요청해서 데이터 가져오는 방법'이 된다.

지금까지 짰던 "누군가 /write로 접속하면 write.html을 보내주세요"라는 코드가 사실 서버의 API 였다.
write.html을 보고싶다면 /write로 접속하라는 API를 정의했던 것.
그렇다면 REST가 붙으면 뭐가 다를까?

REST API

Representational State Transfer라는 뜻인데 엄청 길지만 그냥 API 디자인 방법이다.
웹 API 짤 때 REST 원칙을 지켜서 짜면 좋다고 만들어진 것.
이제 6가지 원칙을 알아보자.

6가지 원칙

1. Uniform Interface (👍)

URL 인터페이스는 일관성 있어야 한다.
6가지 원칙중 가장 중요한 개념이다.

• 하나의 URL로는 하나의 데이터를 가져와야 함 (하나를 가져오기 위한 두개의 URL 금지)
• 간결하고 예측 가능하게 작명
• URL 이름짓기 관습(하단 보충설명 있음)을 잘 따르기

2. Client-server 역할 구분하기

브라우저는 요청만 하고, 서버는 응답만 해야한다.
고객에게 서버 역할을 맡기거나 DB에 있는 자료를 직접 꺼내라고 하는 식의 코드는 안된다.

3. Stateless

요청들은 각각 독립적으로 처리되어야 한다.
요청1이 성공해야 요청2를 보내주는 식의 의존성이 있는 코드를 짜면 안된다.
즉, 요청 하나만으로 자료를 가져오기 충분하게 필요한 모든 정보를 실어 보내는게 좋다.

4. Cacheable

요청을 통해 보내는 자료들은 캐싱이 가능해야한다.
물론, 캐싱 가능하다고 표시하거나 캐싱 기간을 설정해줘야 한다.
*캐싱 : 자주 사용하는 이미지 파일, CSS파일 등을 브라우저가 자동으로 이용자 하드에 저장하는 것

5. Layered System

요청처리하는 곳, DB에 저장하는 곳... 이런 식으로 여러가지 단계를 거쳐서 요청을 처리해도 된다.
여러개의 레이어를 거쳐서 요청을 처리하게 만든다는 의미다.

6. Code on Demand

서버는 고객에게 실제 실행가능한 코드를 전송해줄 수도 있다.

URL 이름짓기 관습

좋은 예시로 페이스북 API를 보자.

instagram.com/explore/tags/kpop
instagram.com/explore/tags/food
facebook.com/natgeo/photos
facebook.com/bbc/photos

딱봐도 어떤 내용일지 유추 가능하면 좋은 API다.
위 예시를 토대로 좋은 API의 특징을 정리하면,

• 단어들은 동사보다는 명사 위주로 구성
• 응용해서 다른 정보들을 쉽게 가져올 수 있을 정도로 일관성 있음
• 한눈에 봐도 어떤 정보가 들어올지 예측 가능함

앞으로 이 점을 유의해서 따라해보자.
이외에도 잘 지을 수 있는 방법들...

• 띄어쓰기는 언더바_ 대신 대시-기호-사용
• 파일 확장자 쓰지 말기 (.html 이런거)
• 하위 문서들을 뜻할 땐 슬래시/ 기호 사용함 (하위폴더 처럼)

잘 지켜주면 예쁜 서버 API가 완성된다.