간단한 게시판 만들기 - 6

기본적으로 구현하고자 했던 게시판의 기능들은 만들었으니 이제 남은 기능인 로그인, 회원가입 등을 db에 연동하는 과정을 기록하려 한다.

 

일단 두 작업을 만들기 전에 회원 정보를 저장해 둘 db를 만든다.

CREATE TABLE userinfo(
    name VARCHAR(20) NOT NULL,
    id VARCHAR(50) NOT NULL,
    pw VARCHAR(50) NOT NULL,
    PRIMARY KEY(name)
);

만들어놓은 table에 전송받은 데이터를 저장할 쿼리문을 만든다.

 

<index.js>

app.get("/user/userget", (req, res)=>{
    const query = "SELECT * FROM userinfo;";
    db.query(query, (err, result)=>{
        res.send(result);
    })
})

이전에 게시물 목록을 전달받아 저장했던 것처럼 이번에도 유저 목록을 db로부터 받아 저장해볼 것이다.

 

<app.js>

useEffect(()=>{
  Axios.get('http://localhost:8000/user/userget').then((response)=>{
  setUser(response.data);
  })
},[user])

이제 user에 목록을 저장하였고 변화가 생길때마다 새로이 업데이트 될 것이다.

 

로그인 기능은 이미 설정된 user의 값을 대조하면 되기에 수정할 필요가 없으므로, 회원가입 기능만 수정한다.

먼저, 입력된 회원 정보를 db에 저장하는 것부터 만든다.

 

<index.js>

app.post("/create_account", (req, res)=>{
    const query = "INSERT INTO userinfo (name, id, pw) VALUES (?, ?, ?);";
    const params = [req.body.name, req.body.id, req.body.pw];
    db.query(query, params, (err, result)=>{
        res.send('a_created');
    })
})

 

다음으로 해당 url로 데이터를 전송해줄 수 있도록 app.js를 수정한다.

 

<app.js>

function AccountSub(sinfo){
  Axios.post('http://localhost:8000/create_account', {
    name: sinfo.name, id: sinfo.id, pw: sinfo.pw
  })
}

해당 컴포넌트에 적절한 값이 올 수 있도록 배치한다.

else if(mode === 'ACCOUNT'){
	...
    else {
          const sinfo = {name:u_name, id:u_id, pw:u_pw};
          AccountSub(sinfo);
          alert('가입이 완료되었습니다.');
          setMode('LOGIN');
    }
    ...
}

 

 

이렇게 하면 만들어둔 기능과 db의 연결이 완료된다.

 

---