Skip to content

GitLab

Commit 2a466264 authored by 우지원's avatar 우지원
Browse files

회원가입 server연결

parent f783563f
Show whitespace changes
Inline Side-by-side
client/debug.log deleted 100644 → 0
View file @ f783563f
[1229/112842.005:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
[1229/165211.265:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
[0101/185146.578:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
client/src/Pages/LogInPage.js
View file @ 2a466264
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap'; import { Button, Form, Container, Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Menu from '../Components/Menu';
function LogIn() { function LogIn() {
const [validated, setValidated] = useState(false); const [validated, setValidated] = useState(false);
...@@ -64,7 +63,4 @@ function LogIn() { ...@@ -64,7 +63,4 @@ function LogIn() {
); );
} }
//render(<LogIn />);
export default LogIn export default LogIn
\ No newline at end of file
client/src/Pages/SignUpPage.js
View file @ 2a466264
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { Button, Form, Container, Navbar } from 'react-bootstrap'; import { Button, Form, Container, Navbar, Alert } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Menu from '../Components/Menu';
const INIT_USER = {
username: '',
nickname: '',
email: '',
password: '',
}
function SingUp() { function SingUp() {
const [validated, setValidated] = useState(false); const [validated, setValidated] = useState(false);
const [user, setUser] = useState(INIT_USER)
const [error, setError] = useState('')
const [disabled, setDisabled] = useState(true)
useEffect(() => {
const isUser = Object.values(user).every(el => Boolean(el))
//Boolean : 참거짓 판별
//every : every뒤에 함수값이 return하는 값이 모두 참일때만 true출력 -> element가 하나도 빈 문자열이 존재하지 않을때
//empty string때만 false로 나옴.
isUser ? setDisabled(false) : setDisabled(true)
}, [user])
function handleChange(event) {
const { name, value } = event.target
// console.log(name, value)
setUser({ ...user, [name]: value })
}
async function handleSubmit(event) {
event.preventDefault();
const handleSubmit = (event) => {
const form = event.currentTarget; const form = event.currentTarget;
if (form.checkValidity() === false) { if (form.checkValidity() === false) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
} }
setValidated(true); setValidated(true);
}; console.log(user)
// async function addUser(user) { try {
// await fetch(`http://localhost:3000/users`, { setError('')
// method: 'POST', const response = await fetch('/api/users/signup', {
// headers: { //post, get같은게 주어지지 않으면 기본적으로 fetch에 get요청함
// 'Content-Type' : 'application/json' method: 'POST',
// }, headers: {
// body: JSON.stringify(user) 'Content-Type': 'application/json'
// //json 형식으로 보냄. },
// }) body: JSON.stringify(user)
// } })
const data = await response.json()
function submitUser() { console.log(data)
const username = document.querySelector('#username') // setUser(INIT_USER)
const nickname = document.querySelector('#nickname') } catch (error) {
const email = document.querySelector('#email') console.log(error)
const password = document.querySelector('#password') setError('에러발생')
const user = {
username: username.value,
nickname: nickname.value,
email: email.value,
password: password.value
} }
console.log(user);
} }
return ( return (
<> <>
<Navbar bg="dark" variant="dark"> <Navbar bg="dark" variant="dark">
<Navbar.Brand>YDK Messenger</Navbar.Brand> <Navbar.Brand>YDK Messenger</Navbar.Brand>
</Navbar> </Navbar>
<div> <div>
<Form noValidate validated={validated} onSubmit={handleSubmit}> <Form noValidate validated={validated} onSubmit={handleSubmit}>
<Container className="d-flex justify-content-center"> <Container className="d-flex justify-content-center">
...@@ -64,7 +77,9 @@ function SingUp() { ...@@ -64,7 +77,9 @@ function SingUp() {
<Form.Control <Form.Control
required required
type="text" type="text"
id="username" name="username"
onChange={handleChange}
value={user.username}
placeholder="이름을 입력해주세요" /> placeholder="이름을 입력해주세요" />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type="invalid">
필수 정보입니다! 이름을 입력해주세요! 필수 정보입니다! 이름을 입력해주세요!
...@@ -76,7 +91,9 @@ function SingUp() { ...@@ -76,7 +91,9 @@ function SingUp() {
<Form.Control <Form.Control
required required
type="text" type="text"
id="nickname" name="nickname"
onChange={handleChange}
value={user.nickname}
placeholder="별명을 입력해주세요" /> placeholder="별명을 입력해주세요" />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type="invalid">
필수 정보입니다! 별명을 입력해주세요! 필수 정보입니다! 별명을 입력해주세요!
...@@ -88,7 +105,9 @@ function SingUp() { ...@@ -88,7 +105,9 @@ function SingUp() {
<Form.Control <Form.Control
required required
type="email" type="email"
id="email" name="email"
onChange={handleChange}
value={user.email}
placeholder="이메일을 입력해주세요" /> placeholder="이메일을 입력해주세요" />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type="invalid">
필수 정보입니다! 이메일을 입력해주세요! 필수 정보입니다! 이메일을 입력해주세요!
...@@ -100,7 +119,9 @@ function SingUp() { ...@@ -100,7 +119,9 @@ function SingUp() {
<Form.Control <Form.Control
required required
type="password" type="password"
id="password" name="password"
onChange={handleChange}
value={user.password}
placeholder="비밀번호를 입력해주세요" /> placeholder="비밀번호를 입력해주세요" />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type="invalid">
필수 정보입니다! 비밀번호를 입력해주세요! 필수 정보입니다! 비밀번호를 입력해주세요!
...@@ -108,9 +129,18 @@ function SingUp() { ...@@ -108,9 +129,18 @@ function SingUp() {
</Form.Group> </Form.Group>
<Link to="./login"> {/* <Link to="./login"> */}
<Button type="submit" onClick={{submitUser}} variant="outline-success" size="lg" className="mr-4" block>가입</Button> <Button
</Link> disabled={disabled}
type='submit'
variant="outline-success"
size="lg"
className="mr-4"
block>가입</Button>
{/* </Link> */}
{error && <Alert variant='danger'>
{error}
</Alert>}
</div> </div>
</Container> </Container>
</Form> </Form>
......
package.json
View file @ 2a466264
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"dev" : "nodemon index.js" "dev" : "nodemon server/server.js",
}, },
"repository": { "repository": {
"type": "git", "type": "git",
......
server/controllers/User.controllers.js deleted 100644 → 0
View file @ f783563f
import User from "../models/User.js"
import isLength from 'validator/lib/isLength.js'
const signup = async (req, res) => {
const { name, email, password } = req.body
try {
if (!isLength(name, { min: 3, max: 10 })) {
return res.status(422).send('Name must be 3-10 characters')
}
const newUser = await new User({
name,
email,
password
}).save()
console.log(newUser)
res.json(newUser)
} catch (error) {
console.log(error)
res.status(500).send('User signup error')
}
}
const hello = (req, res) => {
res.send('Hello from users controller')
}
export default { signup, hello }
\ No newline at end of file
server/controllers/user.controller.js
View file @ 2a466264
import User from "../models/User.js" import User from "../models/User.js"
import user from '.../client/src/Pages/SignUpPage.js'
import isLength from 'validator/lib/isLength.js' import isLength from 'validator/lib/isLength.js'
import isEmail from 'validator/lib/isEmail.js' import isEmail from 'validator/lib/isEmail.js'
//꼭 js붙여주기!! //꼭 js붙여주기!!
...@@ -17,7 +16,8 @@ const signup = async (req, res) => { ...@@ -17,7 +16,8 @@ const signup = async (req, res) => {
//이범위를 벗어나면 error발생 //이범위를 벗어나면 error발생
return res.status(422).send('Name must be 3-10 characters') return res.status(422).send('Name must be 3-10 characters')
//422 : 형식이 잘못되었다는 error발생 //422 : 형식이 잘못되었다는 error발생
} else if (!isLength(nickname, { min: 3, max: 10 })) { }
else if (!isLength(nickname, { min: 3, max: 10 })) {
return res.status(422).send('Nickname must be 3-10 characters') return res.status(422).send('Nickname must be 3-10 characters')
} else if (!isEmail(email, { } else if (!isEmail(email, {
allow_display_name: true, allow_display_name: true,
......
server/routes/User.routers.js deleted 100644 → 0
View file @ f783563f
import express from 'express'
import userCtrl from '../controllers/user.controllers.js'
const router = express.Router()
router.route('/api/users/signup')
.post(userCtrl.signup)
.get(userCtrl.hello)
export default router
\ No newline at end of file
server/routes/user.routes.js
View file @ 2a466264
...@@ -4,7 +4,7 @@ import userCtrl from '../controllers/user.controller.js' ...@@ -4,7 +4,7 @@ import userCtrl from '../controllers/user.controller.js'
const router = express.Router() const router = express.Router()
//router의 역할 : './주소'부분을 처리하는 역할함. //router의 역할 : './주소'부분을 처리하는 역할함.
router.route('/signup') router.route('/api/users/signup')
.post(userCtrl.signup) .post(userCtrl.signup)
.get(userCtrl.hello) .get(userCtrl.hello)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment