1. Login
Client
import { useState } from "react";
import IMG_LOGO from "../images/facebook-logo.svg"
// 반복되는 것을 외부에 컴포넌트를 만들어서 import를 해서 사용
import {Input, Image, Button, Linebar, Title} from "./Component.jsx"
import axios from "axios"
export default function Login(props) {
const [userid, setUserid] = useState("");
const [password, setPassword] = useState("");
const onChangeUserid = (e) => {
// console.log(e.target.value);
setUserid(e.target.value);
}
const onChangePassword = (e) => {
// console.log(e.target.value);
setPassword(e.target.value);
}
const onClickLogin = () => {
console.log(userid, password);
if(!userid) {
alert("사용자 계정(이메일)은 반드시 입력해야 합니다.");
return
}
if(!password) {
alert("사용자 비밀번호는 반드시 입력해야 합니다.")
return
}
axios.post("/api/login", {userid: userid, password:password}).then((res) => {
console.log(res.data);
const {result} = res.data
if(result === "success") {
// alert("로그인 성공");
window.location.href = "/home";
} else {
alert("로그인 실패");
}
})
}
return (
<div className="login-layer">
<div className="logo-box">
<Image src={IMG_LOGO} alt="" />
<Title text="Facebook에서 전세계에 있는 친구, 가족, 지인들과 함께 이야기를 나눠보세요"></Title>
</div>
<div className="login-box">
<div>
<Input title={true} type="text" placeholder="이메일 또는 전화번호" onChange={onChangeUserid}/>
<Input title={true} type="password" placeholder="비밀번호" onChange={onChangePassword}/>
<Button type={"primary"} className="login-button" onClick={onClickLogin} text={"로그인"}/>
<a onClick={() => window.location.href = "/identify"}>비밀번호를 잊으셨나요?</a>
<Linebar/>
<div className="regist">
<Button type={"secondary"} onClick={() => window.location.href = "/regist"} text="새 계정 만들기"/>
</div>
</div>
</div>
</div>
)
}
Server
const express = require("express");
const path = require("path");
const app = express();
// 메인 페이지 접속시 html 응답하는 방법
// 미들웨어 : html, css, js, img 파일들이 담긴 곳 명시
app.use(express.static(path.join(__dirname, "public")))
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'))
})
// Body로 파라미터를 받기 위한 설정
const bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}))
app.use(bodyparser.json())
const api = require("./src/api/index");
app.use("/api", api);
const http = require("http").createServer(app);
http.listen(8080, () => {
console.log("server listen start : 8080")
})
// /api/login POST 데이터를 전달 받는다.
router.post("/login", (req, res) => {
console.log("====================> [POST]/api/login call!!!");
console.log(req.body);
const {userid, password} = req.body
if(userid === "ssjj04022" && password == "12345") {
res.send({result: "success"});
} else {
res.send({result: "fail"})
}
})
2. Regist
Client
import axios from "axios";
import { useState } from "react"
import IMG_LOGO from "../images/facebook-logo.svg"
import {Input, Image, Button, Linebar, Title, Subtitle} from "./Component.jsx"
export default function Regist(props) {
const [name, setName] = useState("");
const [userid, setUserid] = useState("");
const [password, setPassword] = useState("");
const [year, setYear] = useState("");
const [month, setMonth] = useState("");
const [day, setDay] = useState("");
const [gender, setGender] = useState("");
const onChangeName = (event) => {
// console.log(event.target.value)
setName(event.target.value)
}
const onChangeUserid = (event) => {
// console.log(event.target.value)
setUserid(event.target.value)
}
const onChangePassword = (event) => {
// console.log(event.target.value)
setPassword(event.target.value)
}
const onChangeYear = (event) => {
// console.log(event.target.value)
setYear(event.target.value)
}
const onChangeMonth = (event) => {
// console.log(event.target.value)
setMonth(event.target.value)
}
const onChangeDay = (event) => {
// console.log(event.target.value)
setDay(event.target.value)
}
const onClickRegist = () => {
console.log(name, userid, password, year, month, day, gender);
if(!name) {
alert("이름을 반드시 입력해야 합니다.");
return
}
if(!userid) {
alert("아이디를 반드시 입력해야 합니다.");
return
}
if(!password) {
alert("비밀번호를 반드시 입력해야 합니다.");
return
}
if(!year) {
alert("연도를 반드시 선택해야 합니다.");
return
}
if(!month) {
alert("월을 반드시 선택해야 합니다.");
return
}
if(!day) {
alert("일을 반드시 선택해야 합니다.");
return
}
if(!gender) {
alert("성별을 반드시 선택해야 합니다.");
return
}
// key와 value가 이름이 동일할 때는 둘다 안써도 되고 하나만 써도 가능하다
const params = { name, userid, password, year, month, day, gender }
axios.post('/api/regist', params).then((res) => {
const {result} = res.data;
if(result === "success") {
alert("회원가입에 성공하였습니다. 로그인 페이지로 이동합니다.")
window.location.href = "/";
} else {
alert("회원가입에 실패하였습니다.")
}
})
}
return (
<div className="regist-layer">
{/* 상단 로고 이미지 */}
<div className="logo">
<Image src={IMG_LOGO} alt="페이스북 로고" />
</div>
{/* 카드형 박스 */}
<div className="card">
{/* 박스 헤더 */}
<div className="header">
<Title className="title" text="새 계정 만들기"/>
<Subtitle className="subject" text="빠르고 쉽습니다."/>
</div>
<Linebar/>
{/* 박스 콘텐츠 */}
<div className="body">
{/* 성명 입력 폼 */}
<Input type="text" placeholder="이름" onChange={onChangeName}/>
{/* 휴대폰 및 비밀번호 폼 */}
<Input type="text" placeholder="휴대폰 번호 또는 이메일" onChange={onChangeUserid}/>
<Input type="password" placeholder="새 비밀번호" onChange={onChangePassword}/>
{/* 생년월일 */}
<div className="in-age">
<Subtitle text="생일"/>
<div>
{/* 년도 */}
<select id="year" placeholder="연도" name="birthday_year" title="연도" onChange={onChangeYear}>
<option value="" selected="">연도</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2010">....</option>
<option value="1905">1900</option>
</select>
{/* 월 */}
<select id="month" placeholder="월" name="birthday_month" title="월" onChange={onChangeMonth}>
<option value="" selected="">월</option>
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="12">12월</option>
</select>
{/* 일 */}
<select id="day" placeholder="일" name="birthday_day" title="일" onChange={onChangeDay}>
<option value="" selected="">일</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="31">31</option>
</select>
</div>
</div>
{/* 성별 */}
<div className="in-type">
<Subtitle text="성별"/>
<span>
<span className="in-rdo">
<label htmlFor="rdo-1">여성</label>
<input className="gender" id="rdo-1" type="radio" name="sex" value="1" onClick={() => setGender("여성")}/>
</span>
<span className="in-rdo">
<label htmlFor="rdo-2">남성</label>
<input className="gender" id="rdo-2" type="radio" name="sex" value="2" onClick={() => setGender("남성")}/>
</span>
{/* 제 3의 성(?) */}
<span className="in-rdo">
<label htmlFor="rdo-3">개인 지정</label>
<input className="gender" id="rdo-3" type="radio" name="sex" value="3" onClick={() => setGender("개인지정")}/>
</span>
</span>
</div>
{/* 하단의 가이드 */}
<div className="guide">
가입하기 버튼을 클릭하면 Facebook의 약관, 데이터 정책 및 쿠키 정책에 동의하게 됩니다. Facebook으로부터 SMS 알림을 받을 수 있으며 알림은 언제든지 옵트 아웃할 수 있습니다.
</div>
{/* 가입하기 버튼 */}
<div className="regist">
<Button type="secondary" text="가입하기" onClick={onClickRegist}/>
</div>
{/* 로그인 페이지 이동 */}
<div className="login">
<span onClick={() => window.location.href = "/login"} >이미 계정이 있으신가요?</span>
</div>
</div>
</div>
</div>
)
}
Server
const express = require("express");
const path = require("path");
const app = express();
// 메인 페이지 접속시 html 응답하는 방법
// 미들웨어 : html, css, js, img 파일들이 담긴 곳 명시
app.use(express.static(path.join(__dirname, "public")))
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'))
})
// Body로 파라미터를 받기 위한 설정
const bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}))
app.use(bodyparser.json())
const api = require("./src/api/index");
app.use("/api", api);
const http = require("http").createServer(app);
http.listen(8080, () => {
console.log("server listen start : 8080")
})
// /api/regist POST 데이터를 전달 받는다.
router.post("/regist", (req, res) => {
console.log("====================> [POST]/api/regist call!!!")
console.log(req.body);
const {name, userid, password, year, month, day, gender} = req.body;
if(name && userid && password && year && month && day && gender) {
res.send({result: "success"});
} else {
res.send({result: "fail"})
}
})
'FrontEnd > Node.js' 카테고리의 다른 글
[Node] Project - Header, Home (0) | 2022.12.06 |
---|---|
[Node] Project - Identify, DeleteUser (0) | 2022.12.03 |
[Node] Project 구성 (0) | 2022.12.01 |
[Node] Express Router, Server에서 데이터/이미지 보내기(array) (0) | 2022.12.01 |
[Node] callback, Promise, Async & Await (0) | 2022.12.01 |