7장이 없는 이유는 템플릿에 관한 것이기 때문입니다. 2023년을 살고 풀스택을 목표로 하시는 분들에게 퍼그나 핸들바는 사치입니다.
React Vue Angular와 같은 CSR SPA 프레임워크, NEXT 및 NUXT와 같은 SSR 프레임워크 또는 순수한 HTML CSS js 및 원시 데이터 인코딩과의 연결은 수백만 번 도움이 될 것입니다. 이제 8장의 양식 프로세스로 바로 이동하겠습니다.
1. 클라이언트 데이터를 서버로 전송
– 서버에 데이터를 보내는 방법에는 쿼리 문자열을 사용하는 방법과 요청 본문에 보내는 방법 두 가지가 있습니다.
– 일반적으로 쿼리 문자열은 GET 요청의 경우 조건이 필요할 때 사용하고 다른 요청의 경우 본문을 사용합니다.
– GET 요청은 문자 그대로 올바른 데이터를 가져옵니다. 요청 본문에 조건을 넣어 다른 방법을 사용하여 응답을 얻을 수 있지만 이 방법은 SEMANTIC이 아닙니다. 가져오기는 단어 GET 자체를 사용하고 다른 것들은 메서드 이름 자체에 의해 결정되기 때문에 RESTFUL이 아닙니다. (REST API 방법론)
– 서버 개발자는 기본적으로 변태이기 때문에 방법론에 맞는지 아닌지에 민감합니다. 들은 대로 행동하는 방법을 배우는 것이 좋습니다.
– GET과 POST 모두 HTTPS를 사용할 때는 안전하고 HTTPS를 사용하지 않을 때는 둘 다 안전하지 않습니다. 다른 AJAX 메서드에도 동일하게 적용됩니다.
2. HTML 양식
– 서버 플레이어도 기본 HTML 형식을 알고 있어야 합니다.
– 그냥 리얼 HTML이 아니라 아직 웹개발자이니 최소한 HTML CSS JS의 기본은 가지고 오시기 바랍니다.
– 디자인이나 퍼블리셔가 없는 프론트팀과 백팀이 만든 솔루션을 보면 인라인 CSS가 절름발이가 되어 지옥에서 새로 만든 디자인과 마크업에 암에 걸린 것 같습니다.
– 가장 작은 것까지 모듈화/캡슐화하여 그들이 만드는 로직을 정리하면서 CSS를 모듈화하면 어떨까요?
– 어쨌든 샘플 양식은 이렇습니다.
– form 태그의 메소드가 지정되지 않은 경우 기본값은 GET 요청입니다.
– action 속성은 양식 태그에서 콘텐츠를 가져오기 위한 URL을 설명합니다.
– 서버 입장에서 입력 필드에서 가장 중요한 것은 name 속성이다. 서버는 이 속성을 사용하여 필드를 인식합니다.
– HTML에서는 동일한 페이지에서 여러 양식을 사용할 수 있습니다. (물론 제출을 누를 때 업데이트를 고려해야 합니다.)
– 형식은 논리적으로 일관성이 있어야 합니다.
3. 인코딩
– 양식을 제출할 때 인코딩을 사용해야 하며 지정하지 않으면 application/x-www-form-urlencoded입니다.
– 익스프레스도 이를 지원하며 기본이다.
– 파일을 업로드해야 하는 경우 Multipart/Form-Data 인코딩을 사용해야 합니다. Google 또는 chatGPT에 문의하십시오.
4. AJAX 없이 Form을 처리할 때 고려해야 할 사항
– 브라우저를 통한 양식 제출 시 부득이하게 새로고침이 발생합니다.
– 쿼리 문자열이 불필요한 URL에 노출되지 않도록 별도의 양식 처리 경로
– 양식 처리 후 302 리디렉션: 사용하지 않음
– 양식 처리 후 303 리디렉션: HTTP 1.1에 추가, 원래 방법과 상관없이 리디렉션을 따르려면 GET 요청을 사용합니다(권장).
– 분기를 분할하여 성공/실패 전용 페이지로 리디렉션합니다.
– 플래시 메시지와 함께 원래 위치로 리디렉션하는 경우: 현재 URL로 채워진 숨겨진 필드를 사용합니다. (그냥 AJAX를 쓰자..)
– 새 위치로 리디렉션: 플래시 메시지를 사용하여 제출 결과에 대한 사용자 피드백을 제공하는 경우 UX에 좋습니다.
다음 시간에는 Express를 이용한 폼 프로세싱 코드에 대해 자세히 살펴보도록 하겠습니다.