포트폴리오 프로젝트 주제 선정
프로폴리오 어떤걸로 진행할지 정해주세요
필수로 있어야 하는 기능
1.로그인,회원가입
내가 선정한 주제 : 여행 계획 & 모임을 위한 서비스
핵심 기능 : 여행 계획을 같이! 세울 수 있는 플랫폼
수업페이지에
친구와 같이 여행 계획을 세울 수 있는 사이트
라고 적음ㅎ
DevFoliOh 참고
[BE]✈️ 두리번- 작은 움직임이 만드는 우리다운 여행
두리번 의 핵심 기능은 다음과 같습니다.
그룹성향파악, 위시리스트, 여행보드, 일정관리
두리번을 통해 함께 여행하는 사람들의 성향을 파악하고, 즐거운 여행을 만들어 가세요.
vs 키시고 저랑 로그인 회원가입까지 같이 할거에요
리액트 프로젝트 생성
clinet
npx create-react-app my-app
server
npm init
필수 설치 라이브러리
-
클라이언트
1. axios
2. react-router-dom -
백엔드
1. express
2. cors
3. nodemon
4. mysql2
5. express-session
설치는
npm install [modulename]
기본 설정
index.js에서 BrowserRouter import하고 App 감싸주기
server.js에서 express,cors 등등등 적어주기 -> 언제 한번 정리 해야겠음
App.js에서 로그인 useState, useContext 선언
StoreContext.Provider에 로그인 변수로 넣어주기
폴더 생성
pages 폴더 생성
Join.js, Login.js 파일 생성
회원가입과 로그인 페이지 분리
Login.js
import React from "react";
function Login() {
return <div>로그인페이지</div>;
}
export default Login;Join.js
import React from "react";
function Join() {
return <div>회원가입페이지</div>;
}
export default Join;App.js에서 나타내보세요..
import React from "react";
import "./App.css";
import Join from "./pages/Join";
import Login from "./pages/Login";
import { Routes, Route } from "react-router-dom";
const StoreContext = React.createContext({});
function App() {
const [loginUser, setLoginUser] = React.useState({});
return (
<StoreContext.Provider
value={{
loginUser: loginUser,
}}
>
<Routes>
<Route exact path="/join" element={<Join />} />
<Route exact path="/login" element={<Login />} />
</Routes>
</StoreContext.Provider>
);
}
export default App;회원가입 기능 구현
하는중...
일단 css는 나중에 하고 기능 구현 먼저
- 아이디,닉네임,비밀번호 입력받음
- 아이디 중복체크 기능 추가
- 입력칸 공백 예외처리 기능 추가
- 확인버튼 입력 시 아이디 중복체크 코드 확인 후 서버로 데이터 전송
- 서버에서 데이터베이스로 데이터 insert
- 회원가입 성공하면 로그인 페이지로 이동
Join.js
import React from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
function Join() {
const navigation = useNavigate();
const [data, setData] = React.useState({
id: "",
nickname: "",
pw: "",
});
const [idcheck, setIdcheck] = React.useState({
code: "error",
});
const valuechange = (event) => {
const name = event.target.name;
const cloneData = { ...data };
cloneData[name] = event.target.value;
// console.log(cloneData);
setData(cloneData);
};
const joincheck = async () => {
if (idcheck.code === "error") {
alert("아이디를 확인하세요!");
return;
}
await axios({
url: "http://localhost:5000/join",
method: "POST",
data: data,
})
.then((res) => {
const { code, message } = res.data;
if (code === "error") {
alert(message);
return;
}
navigation("/login", { replace: true });
})
.catch((e) => {
console.log("회원가입 오류!", e);
});
};
const runidcheck = async () => {
await axios({
url: "http://localhost:5000/idcheck",
method: "POST",
data: { id: data.id },
})
.then((res) => {
const { code, message } = res.data;
if (code === "error") {
alert(message);
}
setIdcheck({ code: code });
})
.catch((e) => {
console.log("아이디 중복체크 오류!", e);
});
};
return (
<div>
<h2>회원가입페이지입니다</h2>
<h3>ID 입력</h3>
<input type="text" name="id" onChange={valuechange} />
<button className="btn" onClick={runidcheck}>
아이디 중복체크
</button>
<h3>닉네임 입력</h3>
<input type="text" name="nickname" onChange={valuechange} />
<br />
<h3>PW 입력</h3>
<input type="password" name="pw" onChange={valuechange} />
<br />
<button className="btn" onClick={joincheck}>
확인
</button>
</div>
);
}
export default Join;server.js
const express = require("express");
const cors = require("cors");
const session = require("express-session");
const mysql = require("mysql2");
const db = mysql.createPoolCluster();
const app = express();
const port = 5000;
app.use(express.json());
app.use(
session({
secret: "SECRET",
resave: false,
saveUninitialized: true,
})
);
app.use(
cors({
origin: true,
credentials: true,
})
);
db.add("project", {
host: "127.0.0.1",
user: "root",
password: "",
database: "aritlce_project",
port: 3306,
});
function runDB(query) {
return new Promise(function (resolve, reject) {
db.getConnection("project", function (error, connection) {
if (error) {
console.log("DB Connection Error!", error);
reject(true);
}
connection.query(query, function (error, data) {
if (error) {
console.log("query error", error);
reject(true);
}
resolve(data);
});
connection.release();
});
});
}
app.get("/", (req, res) => {
res.send("여기로 옵니다!");
});
app.post("/idcheck", async (req, res) => {
/**
* 아이디 중복체크
*/
// console.log(req.body);
const id = req.body.id;
const result = {
code: "success",
message: "아이디 중복체크 완료",
};
if (id === "") {
result.code = "error";
result.message = "아이디를 입력하세요!";
res.send(result);
return;
}
const user = await runDB(`SELECT * FROM user WHERE id = '${id}'`);
// console.log(user);
if (user.length > 0) {
result.code = "error";
result.message = "이미 사용중인 아이디입니다!";
res.send(result);
return;
}
res.send(result);
});
app.post("/join", async (req, res) => {
/**
* 닉네임 비번 확인
* DB에 id,nickname,pw insert
*/
console.log(req.body);
const { id, nickname, pw } = req.body;
const result = {
code: "success",
message: "회원가입 완료",
};
if (nickname === "") {
result.code = "error";
result.message = "닉네임을 입력하세요";
res.send(result);
return;
}
if (pw === "") {
result.code = "error";
result.message = "비밀번호를 입력하세요";
res.send(result);
return;
}
const query = `INSERT INTO user(id,password,nickname) VALUES('${id}','${pw}','${nickname}')`;
await runDB(query);
res.send(result);
});
app.listen(port, () => {
console.log("서버가 시작되었습니다");
});로그인 기능 구현
은 내일이나 수요일에 다시 할게욘
코딩 공부 기록용