[React&Node.js] 간단한 쇼핑몰사이트 구현해보기 (2)

혼자서 여태까지 배웠던 프론트,백엔드 기술들을 실전에 적용시켜야 실력이 늘을 것 같아서, 간단한 쇼핑몰 프로젝트를 하기로 결심했다.

지난 상황에 이어서 이번에는 로그인 회원가입을 구현해봤는데, 간단하게 그림으로 설명해보면,

 

지난번과 다르게, login.jsx(pages폴더에 있음) 를 통해 loginform.jsx로 넘어가는 컴포넌트를 추가했다.

나는 node.js(express)를 사용해서 백엔드를 구현해보기로 했기 때문에, 여태까지 만들었던 폴더들은 client라는 폴더로 따로 빼주었고, 

node_modules와 database.json은 gitignore해주었음.

나머지 백엔드 관련된 파일들을 만들어주었다. 만드는 방법은 전에도 몇번이나 블로그에 올렸지만,

$npm init -y

를 통해서 node_modules와 package.json을 생성한후에, 

필요한것들을 각각 인스톨 해주었다. 현재 package.json 상태는 이렇다.

 

"scripts": {
    "client": "cd client && npm start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
    "start": "node server.js"
  },
  "dependencies": {
    "body-parser": "^1.20.0",
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "mysql": "^2.18.1",
    "node": "^18.7.0"
  },
  "devDependencies": {
    "concurrently": "^7.3.0"
  },

 

아직 Css는 꾸미지 않아서 현재 /login 상태는 이렇다.

react-router-dom을 통해 /login으로 넘어가게 해주었고, 왼쪽에는 광고 느낌?으로 지금 이 블로그를 걸어놓았다. css는 나중에 이쁘게 바꿀 예정이다. 현재 기능으로는, 회원가입시 데이터베이스에 저장이 되고, 그 아이디 비밀번호로 로그인을 했을경우 

data에 원하는 데이터베이스가 잘 넘어오는걸 알 수 있다.

간단한 백엔드 코드를 올려보면,

 

server.js

const fs = require('fs');
const express = require('express');
const mysql = require('mysql');
const cors = require("cors");

const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 8000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));
app.use(cors());

const data = fs.readFileSync('./database.json');
const conf = JSON.parse(data);

const db = mysql.createConnection({
    host: conf.host,
    user: conf.user,
    password: conf.password,
    database: conf.database
  });

app.post('/register', (req, res) => {
    const email = req.body.email
    const password = req.body.password

    db.query("INSERT INTO users (email, password) VALUES (?,?)",
    [email, password],
    (err, result)=>{
        console.log(err);
    })
})

app.post('/login', (req,res)=>{
    const email = req.body.email
    const password = req.body.password

    db.query(
        "SELECT * FROM users WHERE email = ? AND password = ?",
    [email, password],
    (err, result)=>{
        if(err){
            res.send({err: err});
        }
        else{
            if(result.length>0){
                res.send(result);
            }
            else{
                res.send({message: "잘못된 아이디 또는 비밀번호 입니다. "});
            }
        }
})
})

app.listen(port, () => console.log(`Listening on port ${port}`));

 

나는, database.json을 만들어서 그곳에 미리 만들어 두었고,

 

database.json

{
    "host" : "localhost", 
    "user" : "root",
    "password" : "본인 비밀번호",
    "database" : "login_system" 
}

그걸 그대로 불러와서 mysql과 연동했다. 리액트 없이 프론트엔드와 백엔드를 연동해보는 것은 해보았지만, 강의 영상을 보고 했기 때문에 완전히 내 실력은 아니라고 할 수 있고, 또 리액트로 처음 백엔드 부분을 연결하는 것은 처음이여서 애먹었다.

하지만 프론트 부분에서 자바스크립트의 통신 기능인 axios를 사용하면 쉽게 할수 있다. 

 

우선,

const [usernameReg, setUsernameReg] = useState('');
const [passwordReg, setPasswordReg] = useState('');

State설정을 해주고,

 

const register = () =>{
        Axios.post('http://localhost:8000/register', {
        email: usernameReg, 
        password: passwordReg
      }).then((response)=>{
        console.log(response);
      });
    }

이런식으로 통신을 해주는 함수를 만들고,

 

<input className={styles.input} 
                    type="text"
                    onChange={(e)=>{
                        setUsernameReg(e.target.value);
                    }}
                    placeholder="이메일"
                    />

input 태그안에다가 그대로 값을 넘겨준후에 회원가입 등록 버튼을 눌렀을경우, 위에서 만든 register 함수만 불러오면 잘 저장된다.

 

나머지 소스코드는 깃허브에 올렸다. 우선은 여기까지만 했고, 앞으로의 계획에 대해서 적어두어야 겠다.

 

 

1. 로그인 중복 처리

2. 로그인 성공시 message를 넘겨서 message와 같다면 다시 홈으로 돌아가도록 > 그후 로그인한 (email 님)으로 뜨도록

3. /login 화면 css 꾸미기

4. /board로 넘겨서 게시판 구현 예정(안해봐서 좀 걸릴것 같다.)

5. 회원가입 /register 컴포넌트도 추가해서 로그인에서 계정 등록클릭시 /register로 넘어가도록

 

우선은 여기까지만 해보고, 시간이 날때마다 조금씩 추가해봐야겠다.