오인제 / Tunnel

Go to a project
Toggle navigation Toggle navigation pinning
정의왕
6aee18e5 1 parent 266e2f97

Complete communication between server and client

Inline Side-by-side
Showing 6 changed files with 188 additions and 31 deletions
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AutoImportSettings">
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="a1e8140c-05b3-40e9-ab0b-098f82d0a906" name="Changes" comment="">
<change beforePath="$PROJECT_DIR$/tunnel_BE/server/routes/regiser.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/tunnel_BE/server/server.js" beforeDir="false" afterPath="$PROJECT_DIR$/tunnel_BE/server/server.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/turnel_FE/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/turnel_FE/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/turnel_FE/src/_actions/user_action.js" beforeDir="false" afterPath="$PROJECT_DIR$/turnel_FE/src/_actions/user_action.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/turnel_FE/src/component/views/LoginPage/LoginPage.js" beforeDir="false" afterPath="$PROJECT_DIR$/turnel_FE/src/component/views/LoginPage/LoginPage.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/turnel_FE/src/setupProxy.js" beforeDir="false" afterPath="$PROJECT_DIR$/turnel_FE/src/setupProxy.js" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="ProjectId" id="21pIKstjdmdVo3FfVF9bTksUp4c" />
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="node.js.detected.package.eslint" value="true" />
<property name="node.js.detected.package.tslint" value="true" />
<property name="node.js.selected.package.eslint" value="(autodetect)" />
<property name="node.js.selected.package.tslint" value="(autodetect)" />
<property name="nodejs_interpreter_path" value="$PROJECT_DIR$/../../../../Program Files/nodejs/node" />
<property name="nodejs_package_manager_path" value="npm" />
<property name="settings.editor.selected.configurable" value="settings.nodejs" />
<property name="vue.rearranger.settings.migration" value="true" />
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="a1e8140c-05b3-40e9-ab0b-098f82d0a906" name="Changes" comment="" />
<created>1638631541267</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1638631541267</updated>
<workItem from="1638631542578" duration="3985000" />
<workItem from="1638641485255" duration="60000" />
<workItem from="1638641565668" duration="11802000" />
</task>
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" />
</component>
<component name="Vcs.Log.Tabs.Properties">
<option name="TAB_STATES">
<map>
<entry key="MAIN">
<value>
<State />
</value>
</entry>
</map>
</option>
<option name="oldMeFiltersMigrated" value="true" />
</component>
<component name="XSLT-Support.FileAssociations.UIState">
<expand />
<select />
</component>
</project>
\ No newline at end of file
......@@ -2,26 +2,21 @@ const express = require("express");
const bodyParser = require("body-parser");
const router = express.Router();
router.post('/',(req,res)=>{
console.log(req.body);
return res.status(200).json({
success: true
});
router.get('/',(req,res)=>{
res.send('회원가입 페이지');
});
router.get('/',(req,res)=>{
//res.json({id: "hi"});
//console.log(res.body);
router.post('/',(req,res)=>{
console.log(req.body);
return res.json({a: "hi"});
});
//라우트 매개변수사용
//뒤에 위치 요구
/*
router.get("/:id",(req,res)=>{
console.log(req.params, req.query);
//req.body;
req.body;
});
*/
......
import React, {useState} from 'react';
import '../style/Board.scss'
import {CKEditor} from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import {Button} from "semantic-ui-react";
import ReactHtmlParser from 'react-html-parser';
function Board() {
const [BoardContent, setBoardContent] = useState({
title: '',
content:''
})
const [viewContent,setViewContent] = useState([]);
const getValue = e => {
const {name, value} = e.target;
setBoardContent({
...BoardContent,
[name]: value
})
console.log(BoardContent);
}
return (
<div className="Board">
<div className="contents-container">
{viewContent.map(element =>
<div>
<h2>{element.title}</h2>
<div>
{ReactHtmlParser(element.content)}
</div>
</div>)
}
</div>
<div className="form=wrapper">
<input className="title-input"
type='text'
placeholder='제목'
onChange={getValue}
name = 'title'
/>
<CKEditor
editor={ClassicEditor}
data=""
onReady={editor => {
// You can store the "editor" and use when it is needed.
console.log('Editor is ready to use!', editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
console.log({ event, editor, data });
setBoardContent({
...BoardContent,
content: data
})
console.log(BoardContent);
}}
onBlur={(event, editor) => {
console.log('Blur.', editor);
}}
onFocus={(event, editor) => {
console.log('Focus.', editor);
}}
/>
<div className="write-button">
<Button className="ui animated button"
tabIndex="0"
onClick={() =>{
setViewContent(viewContent.concat({...BoardContent}));
}}
>
<div className="visible content">새 고민 작성하기</div>
<div className="hidden content">
<i className="pencil alternate icon"></i>
</div>
</Button>
</div>
</div>
</div>
);
};
export default Board;
\ No newline at end of file
......@@ -19,14 +19,8 @@ function LoginPage(props) {
event.preventDefault();
console.log("ID", Id);
console.log("Password", Password);
let body = {
email: Id,
password: Password
}
};
};
const goToRegister = () => {
navigate('/register');
}
......@@ -65,4 +59,4 @@ function LoginPage(props) {
);
}
export default LoginPage;
export default LoginPage;
\ No newline at end of file
......
import React, {useState} from "react";
import React, {useState, useCallback} from "react";
import { useNavigate } from "react-router-dom";
import "../style/RegisterPage.scss";
import { Button, Icon, Input } from "semantic-ui-react";
import Axios from 'axios'
function RegisterPage() {
function RegisterPage(props) {
const navigate = useNavigate();
const [Id, setId] = useState("");
const [Password, setPassword] = useState("");
const [PasswordCheck,setPasswordCheck] = useState("");
......@@ -22,7 +24,7 @@ function RegisterPage() {
//비밀번호를 입력할때마다 password 를 검증하는 함수
setPasswordCheck(event.currentTarget.value);
};
const onSubmitHandler = (event) => {
const onSubmitHandler = useCallback((event) => {
event.preventDefault();
console.log("ID", Id);
console.log("Password", Password);
......@@ -30,13 +32,23 @@ function RegisterPage() {
if (Password !== PasswordCheck) {
return alert('비밀번호가 일치하지 않습니다.')
}
let body = {
id: Id,
password: Password,
personality: Personality
else{
Axios.post('/api/register',{
Id,
Password,
Personality
})
.then((res)=>{
if(res.status === 200){
alert("회원가입에 성공하였습니다.")
navigate('/login')
}
}).catch((error) => {
console.log(error.response)
})
}
}
},[Id, Password, Personality, PasswordCheck])
return (
<div id="Register">
<div className="register-form">
......@@ -93,4 +105,4 @@ function RegisterPage() {
</div>
);
}
export default RegisterPage;
export default RegisterPage;
\ No newline at end of file
......
......@@ -6,9 +6,7 @@ import App from './App';
import 'semantic-ui-css/semantic.min.css'
ReactDOM.render(
<App />,
<App />,
document.getElementById('root')
);
......