EJS
- Embedded Javascript
- 자바스크립트가 내장되어있는 html파일
- 템플릿 엔진: 문법과 설정에 따라 파일을 html 형식으로 변환 시키는 모듈
<body>
<h1><%=title%> form 결과 확인하기</h1>
<p><span><%=userInfo.id%>(<%=userInfo.email%>)</span>님 환영합니다.</p>
<p>비밀번호는 <span><%=userInfo.pw%></span>입니다.</p>
<a href="/">홈으로 이동</a>
</body>
// <%%> 내부에 JS코드 작성.
// <%=%> 값을 템플릿에 출력할 때 사용.
// <%- include('view의 상대 주소') %>
EJS 설정
// app.js
// ejs views middleware settings
app.set("view engine", "ejs"); // 템플릿 엔진 설정
app.set("views", "./views"); // 뷰파일 폴더 경로 설정
미들웨어
- 양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어.
- 서버와 클라이언트를 이어주는 중간 작업
- use()를 이용해 등록
미들웨어: -static
- 이미지, CSS 파일 및 Javascript 파일(front)과 같은 정적 파일 제공
- Express에 있는 static 메소드를 이용해 미들웨어로 로드
// static 폴더
app.use("/static", express.static(__dirname + "/static"));Form
- 입력된 데이터를 한 번에 서버로 전송하기 위해 사용
- 클라이언트가 서버에게 정보를 전달할때 사용
<form action="/폼_전송할_서버주소" name="폼_이름" method="폼_전송방식">
</form>
action: 폼을 전송할 서버 주소 지정
name: 폼을 식별하기 위한 이름
method: 폼을 서버에 전송할 http 메소드 지정
💻 form method: GET & POST
1. GET 방식: 주로 서버로부터 데이터를 조회할 때 사용
- URL에 폼 데이터를 쿼리 문자열로 추가하여 전송
- = 데이터가 URL에 노출 (보안에 취약)
- 파라미터가 주소창에 나오는 방식, 해당 파라미터만 알고 있다면 브라우저 주소창에 그 주소를 입력하여 이동하는 것이 가능.
- 파라미터란?
- name과 value로 구성되어 있고 클라이언트에서 요청 시 넘어가는 데이터
- 유저가 입력한 정보 혹은 클릭한 정보가 서버의 특정 주소로 넘겨주는 데이터
- 파라미터란?
- 데이터 길이에 제한이 있음
- 공개가 되어도 문제가 되지 않는 정보들을 가지고 있는 페이지에 주로 적용
2. POST 방식: HTTP 프로토콜의 body에 파라미터가 넘어감
- 폼 데이터를 HTTP요청의 본문(body)에 포함하여 전송
- URL에 데이터가 노출되지 않아 GET보다 보안성이 높음
- 입력 내용 길이에 제한을 받지 않음
- HTTP란?
- 웹 서버와 웹 브라우저 사이의 통신에 사용하는 프로토콜
- 요청(request)과 응답(response)로 이루어진 프로토콜
💻 body-parser
// body-parser 설정
app.use(express.urlencoded({ extended: false }));
app.use(express.json());- Node.js의 Express 프레임워크에서 사용되는 미들웨어
- HTTP 요청의 본문(body)을 파싱
- 파싱된 데이터를 req.body 객체로 만들어 서버에서 사용할 수 있도록 함
- 파싱이란?
- 파싱(parsing)이란 의미를 알 수 없는 문자열을 분해하고 분석하여 의미 있는 형태로 변환하는 과정.
- 프로그래밍 언어 컴파일, 데이터 교환, 자연어 처리, 웹 브라우저의 HTML 해석 등에 쓰임.
💻 폼(form) 요소
- input 속성
- type: 인풋 타입
- name: 이름 지정. backend에서 name 으로 key가 설정된다.
- readonly: 읽기 전용(수정불가)
- autofocus: 자동 포커스
- placeholder: 짧은 도움말
- label: 폼 양식에 이름을 붙일 수 있다.
- for: for 속성에 연결할 요소의 id를 적어 label을 클릭해도 해당 요소로 가게 만들 수 있다.
- filedset & legend: 폼 태그 안에 있는 요소들을 그룹화 할때 쓴다.
- form validation 유효성 검사
- form 요소들에 정보가 올바르게 들어갔는지 검사
if (!form.userId.checkValidity() || !form.userPw.checkValidity()) {
alert("아이디와 비밀번호는 필수입니다.");
return;
}
// userId나 userPw가 입력되지 않았으면 alert창을 띄운다.
👻 pattern 속성에서 정규식 사용
정규 표현식 - JavaScript | MDN
정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchA
developer.mozilla.org
💻 API (Application Programming Interface)
- 프론트엔드에서 백엔드로 데이터를 요청하면(request) -> 백엔드에서 프론트엔드로 응답(response)
💻 REST API (Representational State Transfer API)
- HTTP 통신에서 CRUD 요청을 resource + method로 표현, 특정한 형태로 전달하는 방식
- CRUD: Create Read Update Delete
'🌱SeSAC x CodingOn 웹 취업 부트캠프' 카테고리의 다른 글
| [새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 5주차 (2): Multer, Database (1) | 2025.01.02 |
|---|---|
| [새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 5주차 (1): 동적 폼 전송 (0) | 2024.12.12 |
| [새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 4주차 (1): 비동기처리 (0) | 2024.11.24 |
| [새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 3주차 (2): Javascript (3) | 2024.11.19 |
| [새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 3주차 (1): jQuery, 반응형웹 (0) | 2024.11.17 |