[O'REILLY] Node & Express - 8장 : 폼 처리

7장이 왜 없냐면 템플릿에 관한 이야기이기 때문이다. 풀스택을 지향하는 2023을 살아가는 여러분들에게 Pug나 핸들바는 사치다

React Vue Angular같은 CSR-SPA 프레임워크나 NEXT,NUXT등의 SSR 프레임워크, 아니면 그냥 퓨어한 html css js 랑 연결해서 날것의 코딩을 하는 것이 100만배는 도움이 될 것이다.  그래서 8장의 폼처리로 바로 간다.

 

1. 클라이언트 데이터를 서버에 전송하기

- 데이터를 서버에 보내는 방법은 쿼리스트링을 사용하는 방법과 요청 바디에 담아서 보내는 두 가지 방법이 있다.

- 일반적으로 GET요청 시에 조건이 필요할 경우에는 쿼리스트링을 이용하고, 다른 요청에는 바디를 사용한다.

- GET요청은 말 그대로 맞는 데이터를 가져오는 건데, 다른 메소드를 사용하여 요청바디에 조건을 넣어 응답을 받을 수도 있지만, 그런 방법은 SEMANTIC 하지 않다. GET이라는 단어 자체가 가져올 때 사용하고, 다른 것들도 메소드 이름 자체가 하는 일에 따라서 정해져 있기 때문에 RESTFUL 하지 않다. (REST API 방법론)

- 서버개발자는 기본적으로 변태들이기 때문에, 방법론에 맞냐 안맞냐에 민감하다. 그냥 하라는 대로 잘 배워서 하는 것이 좋다.

- HTTPS를 사용하면 GET, POST 둘 다 안전하고, 사용하지 않으면 둘 다 안전하지 않다. 다른 AJAX 메소드들도 마찬가지다.

 

2. HTML 폼

- 서버쟁이들도 기본적으로 HTML 폼은 알아야한다.

- 진짜 HTML 뿐만 아니라 그래도 웹개발자인데 최소한 HTML CSS JS 기본은 하고 오자 제발.

- 디자인이나 퍼블리셔 없는 프론트팀, 백팀 둘로 나눠진 솔루션 산출물들 보고 있으면 지옥에서 갓 지어 나온 디자인과 마크업 들에 한땀한땀 박혀있는 개허접한 인라인 css 들 때문에 암 걸려 뒤질 것 같다. 

- 왜 지들이 짜는 로직들은 작은거 하나까지 모듈화/캡슐화 해서 정리하면서 css는 왜 모듈화 안하냐고 서버쟁이들아 제발 내가 그러고 있으면 반성하자.

- 어쨌든 예제 폼은 이렇다.

이 정도도 모르면 웹개발자라고 하지 말자. HTML따위는 하루만 공부하면 되잖아

- form 태그의 method에 따로 기재를 하지 않으면 GET요청을 기본으로 한다.

- action 속성은 form태그 안의 내용들을 받을 url을 기재한다.

- 서버의 관점에서 input 필드에서 중요한 것은 name 속성이다. 서버에서는 이 속성을 통해 필드를 인식한다.

- html에서는 같은 페이지에 폼을 여러개 사용도 가능하다. (물론 submit 누를 때 새로고침 되는 건 고려해야함)

- 폼은 논리적 일관성을 지켜야 한다.

 

3. 인코딩

- 폼을 보낼 때에는 인코딩을 반드시 해야하며, 명시하지 않을 경우 application/x-www-form-urlencoded 이다.

- 익스프레스도 이를 지원하고 기본이다.

- 파일을 올려야할 경우엔 multipart/form-data 인코딩을 사용해야 한다. 구글링이나 chatGPT에 물어보자.

 

4. AJAX를 사용하지 않는 폼처리에서 고려해야할 것

- 브라우저가 폼을 전송하게 되면 리로드를 피할 수 없다.

- 폼 처리의 경로를 따로 두어 불필요한 URL에 쿼리스트링 노출을 막는다

- 폼 처리 이후 302 리디렉트 : 안쓴다

- 폼 처리 이후 303 리디렉트 : HTTP1.1에서 추가 되었으며, 원래 메서드와 관계 없이 GET요청을 사용하여 리디렉트를 따라가도록 한다.(권장)

- 성공/실패 전용 페이지로 리디렉트하도록 분기를 나눈다.

- 플래시 메시지와 함께 원래 위치로 리디렉트하는 경우 : 현재 URL로 채워진 숨은 필드를 사용한다. (그냥 AJAX 쓰자..)

- 새 위치로 리디렉트 : 제출 결과에 대해 사용자에게 피드백을 제공하는 플래시 메시지를 사용해야 UX에 좋다.

 

 

다음 시간엔 실제로 익스프레스를 이용한 폼 처리 코드에 대해 자세히 아라보자.