Node.js [3/50]일

POST 요청

HTML에서 input 값을 서버로 전송하려면 

<form> 태그에 속성을 추가해줘야된다. 

    <form action="/add" method="POST">
            <button type="submit">submit</button>
	</form>

액션과 메서드 를 폼태그 안에 넣어주고

button태그에 타입을 부여해줘야한다. 

 

버튼을 누르면 -> 폼태그 안에있는 액션과 메서드 에 따라 데이터들을 보낸다 (/add 경로로 POST 요청함)

 

 

서버는 어떤식으로 코드를 짜야 되냐면

 

//server.js

app.post("/add", (req, res) => {
  res.send("전송완료");
});

 

이런식으로 짜면됨

 

근데 내가 전송한 데이터들은 어디에 저장이 되는가?? 

이 정보들은 어디에 숨어져있냐면 

req라는 인자에 보관되어있다. 

그럼 보관되어있는 데이터를 가져다 쓰려면 라이브러리를 하나 써야되는데

바로 body-parser 라는 친구다. 

2021년 이후로 설치한 프로젝트들은 body-parser가 express에 기본 포함이라 따로 설치할 필요는 없다. 

다만 

server.js 에 

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

 

이렇게 코드를 한줄 넣어줘야함 !

 

이 body-parser라는 라이브러리는 Input 값에 들어간 내용들을 html이 해석할 수 있게 도와주는 고마운 녀석이다. 

 

 

그러면 이제 

Input 태그에 name속성을 넣어줘야함 

<form action="/add" method="POST">
      <div>
        <h3>Todo</h3>
        <input type="text" name="todo" />
      </div>
      <label>
        <h3>Due date</h3>
        <input type="date" name="dueDate"/>
      </label>
      <div>
        <button type="submit">submit</button>
      </div>
    </form>

이름을 적어줘야 서버에서 input 을 구분할 수 있음 

참고로 type이 "date" 인 경우에는 <label> 태그 안에 넣어줘야함 

 

그런다음

//server.js

app.post("/add", (req, res) => {
  res.send("전송완료");
  console.log(req.body);
});

이렇게 코드를 추가하고 

 

이렇게 값을 넣어준뒤 섭밋 버튼을 누르면

위와 같이 값이 들어온 것을 확인 할 수 있다. 

 

근데 이 값(데이터) 들은 휘발성이있음 새로고침하면 바로 날라감.

이걸 영구히 저장하기 위해서는 

DB에 저장해야한다. 

 

이 DB 에 저장하기 전에 선행학습으로 REST API 에 대해 알아둬야한다. 

 

REST API 는 무엇이냐

서버를 만들때 REST API 에 의거하여 만들어야 좋다고 한다. 

이게 뭐냐면

 

일단 API (Application Programing Interface)

 

웹개발에서 API 는 

서버와 클라이언트 간의 소통방법 이다. 

어떻게 통신을 할지 정한 규약 

 

server.js 에 써놓은 코드가 API다.

 

이거를 Restful 하게 짜면 REST API 임

 

그럼 어떻게 restful 하게 짜야하냐?

 

Roy Fielding 이란 개발자가 만든 잘 짜여진 원칙에 의해서 쓰면 좋을것 같다 라고 논문을 썻는데

이게 유명해져서 정론으로 받아들여짐

논문 내용중에 있는 

 

REST 원칙 6개 

1. Unuform interface

• 하나의 자료는 하나의 URL로
• URL 하나를 알면 둘을 알 수 있어야함
• 요청과 응답은 정보가 충분히 들어있어야함

2. Client-Server 역할 구분

• 브라우저는 요청만 한다. 
• 서버는 응답만 한다. 

3. Stateless

•  요청1과 요청2는 의존성이 없어야함

4. Cacheable

• 서버에서 보내주는 정보들은 캐싱이 가능해야함
• 캐싱을 위한 버전같은 것도 관리해야함(브라우저가 알아서 잘해줌)

5. Layered System

6. Code on Demand

 

 

가장 중요한건 1번임.

간결하고 일관적이고 누가봐도 대충 뭐하는 페이지 인지 파악이 가능해야함 

 

 

좋은 REST API 예시

 

 

이름짓기 원칙

• URL을 왠만하면 명사로 작성
• 하위문서를 나타낼 땐 "/"
• 파일확장자 사용금지
• 띄어쓰기는 대시(-) 이용
• 자료하나당 하나의 URL

 

내일은 DB를 세팅해보자!

다시 타입스크립트 연습하러 고고