Back-end/Node.js

로그인 / 회원가입 구현해보기 (1)

Coding Kitsune 2022. 5. 24. 16:08

웹 개발에 있어, 가장 기본적인 백엔드 기능인 로그인 / 회원가입을 구현해보고자 한다.

 

여러가지 강의를 보면서 따라해봤는데, 생각보다 간단하지 않은 작업인거 같아

 

여러번에 나누어 공부한 것을 포스팅 할 계획이다.

 

먼저 VS code, Node.js , MYSQL을 통해 구현하였으며 github 실시간으로 올릴 것이다.

 

github 주소 : https://github.com/heebumpark/node_website

 

GitHub - heebumpark/node_website

Contribute to heebumpark/node_website development by creating an account on GitHub.

github.com

 

가장먼저 서버와 연결을 하는데, http로 연결하기보다 express server framework를 사용하였다.

 

http로 하면 코드도 지저분 해지고, 처리해줘야할 것이 많이 때문이다. 

 

const express = require("express");
const app = express();
 
 
여기서 express 는 Node.js에 사용되는 프레임워크이고 npm의 일종이다. 
 
require를 통해 express를 가져오고 이것을 listen 메소드를 통해
 
포트명(3000)과 성공했을 때 실행될 콜백함수를 넣어  실행시킨다. 
 
 
app.listen(3000, () => {
  console.log("Server run ! ");
});
 
 
후에 get 메소드를 이용하여

 

app.get("/", (req, res) => {
  res.send("root page");
});
app.get("/login", (req, res) => {
  res.send("login page");
});

 

사용자가 어떤 경로로 들어왓을 때, 어떤 것이 실행될 것인지에 대해 결정해준다.

 

하나의 라우터라고 부를 수 있으며 이런 작업을 라우팅(길찾기) 라고도 한다.

 

전체적인 코드를 보면,

 

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("root page");
});
app.get("/login", (req, res) => {
  res.send("login page");
});
app.listen(3000, () => {
  console.log("Server run ! ");
});
이렇게 되고 터미널 창을 열어 node app.js를 통해 서버를 열고
브라우저 창에서 localhost:3000  즉 포트 로컬호스트 포트 3000으로 들어가보면 

 

루트 페이지와 로그인 페이지가 잘 나타난다.

 

그럼 send 메소드에서 루트 페이지 콘솔문을 찍는게 아니라 

 

html 정보를 넣으면 어떻게 될까?

 

app.get("/login", (req, res) => {
  res.send(`<!DOCTYPE html>
  <html lang="ko">
    <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>
      <input type="text" placeholder="아이디" /><br />
      <input type="text" placeholder="비밀번호" /><br />
    </body>
  </html>`);
});

 

이렇게 문제 없이 잘 돌아간다. 그리고 코드를 수정하거나 추가할 때

 

터미널 창에서 서버를 꺼주고 다시 실행해야 웹 사이트에 반영된다.

 

이제 로그인폼을 좀 더 수정하고 하드 코딩이 아닌 모듈화를 통해 대략적인

 

틀을 만들어보자!

저작자표시 (새창열림)

'Back-end > Node.js' 카테고리의 다른 글

로그인 / 회원가입 구현해보기 (6) AWS DB만들기(한글설정), RDS와 변동 및 워크벤치 이용하기  (0) 2022.06.05
로그인 / 회원가입 구현해보기 (5) 회원가입화면 만들기, 요청, 라우팅 구현하기 (DB 없이 구현)  (0) 2022.06.03
로그인 / 회원가입 구현해보기 (4) User data 모델링, 서버 응답 데이터처리, 로그인 화면 꾸미기  (0) 2022.06.01
로그인 / 회원가입 구현해보기 (3) 객체 제어, 로그인 API 만들어서 서버로 데이터 보내기  (0) 2022.06.01
로그인 / 회원가입 구현해보기 (2)  (0) 2022.05.31

'Back-end/Node.js'의 다른글

  • 현재글로그인 / 회원가입 구현해보기 (1)

관련글

댓글

티스토리툴바