[Study] BE/Node.js

[포스코x코딩온] 웹 동작 방식 & Form 전송

stop-zero 2023. 3. 28. 21:40
✏️5주 차 수업
처음 배우는 것도 있었고, 3주 차 때 배웠던 내용도 있어서 복습하는 시간이었다.
이번 시간 아니었다면, 1차 프로젝트 종료와 동시에 node 내 머릿속에서 사라졌을 것이다.

수업시간 처음부터 끝까지 다 처음 듣는 내용만 배우는 것보다 전에 했던 내용을 복습하면서 진행하니까 다급하게 따라가야겠다는 생각도 안 들어서 수업에 더 집중할 수 있었다. 계속 사용할 내용이라 더 신경 써서 수업해 주신 듯하다. 

내 컴공 지식 여기와서 하나도 쓸모가 없구나 하고 있었는데, 백엔드를 보니 드디어 빛을 바랄 수 있겠구나 라는 생각이 들었고, 확실히 프론트 수업할 때보다 더 재밌어진 것 같다. 노베이스로 여기 왔다면 아마 탈출하지 않았을까.

강사님이 수업 중간중간마다 git push 하자고 해주셔서 까먹지 않고 잔디심기도 하게 된다. 날이 갈수록 짙어지는 내 잔디밭을 보니, 남은 날들을 더 짙게 채울 욕심이 생겼다. 

 

웹 동작 

강사님께서 열심히 그림까지 그려주시면서 설명해 주셨던 웹 동작 방식 과정이다.
(내 손보다 컴퓨터 마우스 잡고 그리신 게 더 잘 그리신 것 같은.. 아무래 생각해도 난 똥손이다...)
네트워크 배울 때 들었던 것 같은데 예를 들어 정리해 두려고 한다.  
1. user : 네이버에 들어가고 싶어!
2. 브라우저는 서버에게 네이버를 보내달라는 요청 메시지(http)를 서버로 보낸다.
    - 클라이언트와 서버 사이의 데이터는 TCP/IP연결로 전송
3. 메시지를 받은 서버는 웹 사이트를 데이터 베이스에서 찾아 브라우저에게 전송한다. 
 

node 프로젝트 생성

폴더 위치로 이동 후 termial

npm init -y  #- - y옵션 : package.json 기본값으로 생성

#package.json에서 "main" 값을 index.js에서 app.js로 변경 (진입점 파일명)

npm install express ejs #express와 ejs 패키지 설치

package.json에서 main 값을 app.js로 변경

 

프로젝트 진입점 파일 생성 

app.js

const { query } = require("express");
const express = require("express");
const app = express();
const PORT = 00417;

app.set("view engine", "ejs");
app.use("/views", express.static(__dirname + "/views")); //ejs를 담을 views 폴더 경로 설정

//localhost:PORT/ 접속했을 때, index.ejs 를 보여주겠다.
app.get("/", function (req, res) {
  res.render("index");
});

app.listen(PORT, function () {
  console.log(`웹서버 실행!`);
  console.log(`http://localhost:${PORT}`);
});

 

메인 페이지 

index.ejs
- 실습을 위해 기본코드 작성

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>test</p>
</body>
</html>

 

.gitignore 파일 생성

  • - node_modules package-lock.json 추가해 주기

 

폴더 구조 

- 폴더 안에 들어가 있는 파일을 주의해서 만들어야한다.

  • Folder
    • node_modules
    • views
      • index.ejs
    • . gitignore
    • app.js
    • package-lock.json
    • package.json

 

body-parser

  • 데이터 처리를 쉽게 할 수 있는 라이브러리
  • Post로 정보를 전송할 때 요청의 body(req.body)로 받을 수 있게 도와줌
  • express 버전 4 이상부터는 body-parser가 내장되어 있어서 따로 설치가 필요하지 않다. 
app.use(express.urlencoded({ extended: true })); //post 요청으로 들어오는 모든 형식의 데이터를 파싱(분석)
app.use(express.json()); //json 형태로 데이터를 주고 받음 , 확장자 중 하나

 

<form>

: 클라이언트가 서버에게 정보를 전달할 때 사용

  • action: 전송할 서버 주소 지정
  • name : form 식별 이름 
  • target : action 속성값에 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열 수 있도록 함. 
  • method : 전송 방식(get: url, host)
  • target : action 속성값에 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열 수 있도록 함.

 

<form> 요소

  • 주의할 점
    • radio 는 같은 name을 가진 라디오끼리!
      • value 값은 다른 거야.
    • button 태그는 form 태그 안에 있어도 밖에 있어도 상관 없다.
      • button : 단순 버튼 의미, form 태그 밖에서 기본값
      • submit: 제출의 의미, form 태그 안에서 기본값
    • label 을 사용하면 텍스트나 이미지를 선택해도 처리됨.
    • label for값 = input태그의 id값
 

See the Pen form by Jung ji young (@stop-zero) on CodePen.

 

 

form 정보 받기

get방식

localhost:8000/getForm?id=&pw=

get 방식은 필요한 데이터를 쿼리스트링을 통해 URL 주소 끝에 파라미터로 포함한다. 파라미터가 여러 개이면 &로 연결된다. 

 

index.ejs

<form action ="/getFrom" name="get방식" method="get" class="get-form">

app.js

app.get("/getForm", function (req, res) {
  // console.log(req); //{xx: {} , yy: {}, ...}
  console.log(req.query); //{ id: '1234', pw: '1234' }
  res.send("get 요청 성공~!");
});

 

post 방식

localhost:8000/postForm

get 방식과 다르게 필요한 데이터를 http의 body에 담아 전송한다.

 

index.ejs

<form action="/postForm" name="post 방식" method="post" class="post-form">

app.js

app.post("/postForm", function (req, res) {
  console.log(req.body); //{ id: '12345', pw: '12345' }
  res.send("post 요청 성공!!");
});

 

더 자세한 http get, host 차이

 

nodemon 패키지

서버 측 코드 app.js가 변경될 때마다 node 명령어를 종료하고 다시 node app.js 입력이  번거롭다.
nodemon 패키지를 -g 옵션을 넣어 설치해 두면 소스코드 변경 시 자동으로 node 가 재실행된다. 

 

ejs문법 

줄바꿈

  • <% %>

값 출력

  • <%= %>

다른 view 파일 불러옴

  • <%- include<'view의 상대주소'> %>

주석처리

  • <%# 주석 %>

 

form validation(유효성 검사)

  • 입력 값의 유무
  • form 요소들에 올바른 정보가 입력되었는지 검사

required  : 필수값, 빈 값이 있으면 알려줌

 

minlength/mazlength : 최소/최대 문자수

 

min / max : 최소/최대값

 

type  : 입력받는 정보 타입

 

pattern  :  정규식 검사

  • ex.
    • pattern="([a-z])" : a부터z까지
    • pattern="([0-9])" : 0부터 9까지
    • pattern="{4, 9}" : 4글자 이상 9글자 이하
 

 

 


 

저작자표시 변경금지

'[Study] BE > Node.js' 카테고리의 다른 글

[포스코x코딩온] MVC_MySQL  (1) 2023.04.09
[포스코x코딩온] 파일 업로드  (0) 2023.04.05
[포스코x코딩온] Node.js MVC 구조  (0) 2023.04.05
[포스코x코딩온] 동적 Form 전송  (0) 2023.03.30
[포스코x코딩온] Node.js 간단한 백엔드 구축  (0) 2023.03.27

'[Study] BE/Node.js'의 다른글

  • 현재글[포스코x코딩온] 웹 동작 방식 & Form 전송

관련글

티스토리툴바