Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
W
WYH
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
sangminLee
WYH
Commits
2fb44c9e
Commit
2fb44c9e
authored
4 years ago
by
epson220
Browse files
Options
Downloads
Patches
Plain Diff
detailBoard img
parent
e766830e
Branches
Branches containing commit
No related tags found
No related merge requests found
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
frontend/.eslintcache
+1
-1
1 addition, 1 deletion
frontend/.eslintcache
frontend/src/components/DetailBoard.js
+3
-1
3 additions, 1 deletion
frontend/src/components/DetailBoard.js
with
4 additions
and
2 deletions
frontend/.eslintcache
+
1
−
1
View file @
2fb44c9e
[{
"C:
\\
WYH
\\
frontend
\\
src
\\
reportWebVitals.js"
:
"1"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
App.js"
:
"2"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
index.js"
:
"3"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Profile.js"
:
"4"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Board.js"
:
"5"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Home.js"
:
"6"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Signup.js"
:
"7"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Login.js"
:
"8"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
WriteBoard.js"
:
"9"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
DetailBoard.js"
:
"10"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
WriteProfile.js"
:
"11"
},{
"size"
:
362
,
"mtime"
:
1606157613272
,
"results"
:
"12"
,
"hashOfConfig"
:
"13"
},{
"size"
:
1764
,
"mtime"
:
1607415610889
,
"results"
:
"14"
,
"hashOfConfig"
:
"13"
},{
"size"
:
544
,
"mtime"
:
1606240034288
,
"results"
:
"15"
,
"hashOfConfig"
:
"13"
},{
"size"
:
2234
,
"mtime"
:
1607425040281
,
"results"
:
"16"
,
"hashOfConfig"
:
"13"
},{
"size"
:
4100
,
"mtime"
:
1607506999836
,
"results"
:
"17"
,
"hashOfConfig"
:
"13"
},{
"size"
:
370
,
"mtime"
:
1606662762631
,
"results"
:
"18"
,
"hashOfConfig"
:
"13"
},{
"size"
:
1575
,
"mtime"
:
1607345129868
,
"results"
:
"19"
,
"hashOfConfig"
:
"13"
},{
"size"
:
1232
,
"mtime"
:
1606662786263
,
"results"
:
"20"
,
"hashOfConfig"
:
"13"
},{
"size"
:
3419
,
"mtime"
:
1607104090152
,
"results"
:
"21"
,
"hashOfConfig"
:
"13"
},{
"size"
:
2846
,
"mtime"
:
1607506029707
,
"results"
:
"22"
,
"hashOfConfig"
:
"13"
},{
"size"
:
3396
,
"mtime"
:
1607369801073
,
"results"
:
"23"
,
"hashOfConfig"
:
"13"
},{
"filePath"
:
"24"
,
"messages"
:
"25"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
},
"10w9ldj"
,{
"filePath"
:
"26"
,
"messages"
:
"27"
,
"errorCount"
:
0
,
"warningCount"
:
1
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
null
},{
"filePath"
:
"28"
,
"messages"
:
"29"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"30"
},{
"filePath"
:
"31"
,
"messages"
:
"32"
,
"errorCount"
:
0
,
"warningCount"
:
3
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"33"
,
"usedDeprecatedRules"
:
"30"
},{
"filePath"
:
"34"
,
"messages"
:
"35"
,
"errorCount"
:
0
,
"warningCount"
:
3
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
null
},{
"filePath"
:
"36"
,
"messages"
:
"37"
,
"errorCount"
:
0
,
"warningCount"
:
1
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
null
},{
"filePath"
:
"38"
,
"messages"
:
"39"
,
"errorCount"
:
0
,
"warningCount"
:
1
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"40"
},{
"filePath"
:
"41"
,
"messages"
:
"42"
,
"errorCount"
:
0
,
"warningCount"
:
1
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"43"
},{
"filePath"
:
"44"
,
"messages"
:
"45"
,
"errorCount"
:
0
,
"warningCount"
:
4
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"46"
,
"usedDeprecatedRules"
:
"47"
},{
"filePath"
:
"48"
,
"messages"
:
"49"
,
"errorCount"
:
0
,
"warningCount"
:
4
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
null
},{
"filePath"
:
"50"
,
"messages"
:
"51"
,
"errorCount"
:
0
,
"warningCount"
:
6
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"52"
,
"usedDeprecatedRules"
:
"30"
},
"C:
\\
WYH
\\
frontend
\\
src
\\
reportWebVitals.js"
,[],
"C:
\\
WYH
\\
frontend
\\
src
\\
App.js"
,[
"53"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
index.js"
,[],[
"54"
,
"55"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Profile.js"
,[
"56"
,
"57"
,
"58"
],
"import React, { useEffect, useState } from
\"
react
\"
;
\r\n
import axios from
\"
axios
\"
;
\r\n
import { Link } from
\"
react-router-dom
\"
;
\r\n
import { withRouter } from
\"
react-router-dom
\"
;
\r\n
axios.defaults.withCredentials = true; // 기존에 해당 설정으로 cors 에러가 나게 한 부분
\r\n\r\n
const Profile = ({ match, history }) => {\r
\n
const { email } = match.params;
\r\n
const [Profile, setProfile] = useState({\r
\n
profile_photo:
\"\"
,
\r\n
created_at:
\"\"
,
\r\n
self_intro:
\"\"
,
\r\n
user_id:
\"\"
,
\r\n
user_email:
\"\"
,
\r\n
age:
\"\"
,
\r\n
location:
\"\"
,
\r\n
});
\r\n\r\n
const [User, setUser] = useState({\r
\n
email:
\"\"
,
\r\n
password:
\"\"
,
\r\n
name:
\"\"
,
\r\n
created_at:
\"\"
,
\r\n
deleted_at:
\"\"
,
\r\n
});
\r\n\r\n
const [Img, setImg] = useState(
\"\"
);
\r\n\r\n
useEffect(async () => {\r
\n
const fetchData = async () => {\r
\n
const result = await axios.post(
\"
http://localhost:3001/profile
\"
, {\r
\n
email: email,
\r\n
});
\r\n
console.dir(result);
\r\n
setProfile(result.data.p);
\r\n
setUser(result.data.u);
\r\n\r\n
setImg(
\"
http://localhost:3001/uploads/
\"
+ result.data.p.profile_photo);
\r\n
};
\r\n
fetchData();
\r\n
}, []);
\r\n\r\n
return (
\r\n
<>
\r\n
<h1>
{
Profile.user_email
}
의 프로필화면</h1>
\r\n
<div>닉네임:
{
User.name
}
</div>
\r\n
<div>자기소게:
{
Profile.self_intro
}
</div>
\r\n
<div>나이:
{
Profile.age
}
</div>
\r\n
<div>사는곳:
{
Profile.location
}
</div>
\r\n
<div>
\r\n
프로필사진:<img src=
{
Img
}
width=
\"
200px
\"
height=
\"
200px
\"
></img>
\r\n
</div>
\r\n
<Link to=
\"
/board
\"
>메인화면으로 돌아가기</Link>
\r\n
<button onClick={() => history.goBack()}>뒤로가기</button>
\r\n
</>
\r\n
);
\r\n
};
\r\n\r\n
// const Profile = (login_info) => {\r
\n
// const [user, setUser] = useState(
\"\"
);
\r\n\r\n
// fetch(
\"
/profile
\"
, {\r
\n
// method:
\"
get
\"
,
\r\n
// headers: {\r
\n
//
\"
Content-Type
\"
:
\"
application/json; charset=utf-8
\"
,
\r\n
// },
\r\n
// credentials:
\"
same-origin
\"
,
\r\n
// body: JSON.stringify(login_info),
\r\n
// })
\r\n
// .then((res) => res.json())
\r\n
// .then((data) => {\r
\n
// console.dir(data);
\r\n
// setUser(data);
\r\n
// });
\r\n\r\n
// return (
\r\n
// <div>
\r\n
// <h1>
{
user.username
}
</h1>
\r\n
// <h1>
{
user.nicname
}
</h1>
\r\n
// </div>
\r\n
// );
\r\n
// };
\r\n\r\n
export default withRouter(Profile);
\r\n
"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Board.js"
,[
"59"
,
"60"
,
"61"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Home.js"
,[
"62"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Signup.js"
,[
"63"
],
"import React, { useState } from
\"
react
\"
;
\r\n
//import { post } from
\"
../../backend/app
\"
;
\r\n
import { post } from
\"
axios
\"
;
\r\n\r\n
const Signup = () => {\r
\n
const [email, setEmail] = useState(
\"\"
);
\r\n
const [nicname, setNicname] = useState(
\"\"
);
\r\n
const [password, setPassword] = useState(
\"\"
);
\r\n\r\n
const onChangeEmail = (e) => setEmail(e.target.value);
\r\n
const onChangeNicname = (e) => setNicname(e.target.value);
\r\n
const onChangePassword = (e) => setPassword(e.target.value);
\r\n\r\n
// const handleFormSubmit = () => {\r
\n
// const url =
\"
/signup
\"
;
\r\n
// const formData = new FormData();
\r\n
// formData.append(
\"
username
\"
, username);
\r\n
// formData.append(
\"
password
\"
, password);
\r\n
// formData.append(
\"
nicname
\"
, nicname);
\r\n\r\n
// const config = {\r
\n
// headers: {\r
\n
//
\"
content-type
\"
:
\"
multipart/form-data
\"
,
\r\n
// },
\r\n
// };
\r\n\r\n
// return post(url, formData, config);
\r\n
// };
\r\n\r\n
return (
\r\n
<form action=
\"
http://localhost:3001/signup
\"
method=
\"
post
\"
>
\r\n
<h1>회원가입</h1>
\r\n
이메일:
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
email
\"\r\n
value=
{
email
}
\r\n
onChange=
{
onChangeEmail
}
\r\n
></input>
\r\n
비밀번호:
\r\n
<input
\r\n
type=
\"
password
\"\r\n
name=
\"
password
\"\r\n
value=
{
password
}
\r\n
onChange=
{
onChangePassword
}
\r\n
></input>
\r\n
닉네임:
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
nicname
\"\r\n
value=
{
nicname
}
\r\n
onChange=
{
onChangeNicname
}
\r\n
></input>
\r\n
<button type=
\"
submit
\"
>가입완료</button>
\r\n
</form>
\r\n
);
\r\n
};
\r\n\r\n
export default Signup;
\r\n
"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Login.js"
,[
"64"
],
"import React, { useState } from
\"
react
\"
;
\r\n
import { post } from
\"
axios
\"
;
\r\n\r\n
const Login = () => {\r
\n
const [username, setUsername] = useState(
\"\"
);
\r\n
const [password, setPassword] = useState(
\"\"
);
\r\n\r\n
const onChangeUsername = (e) => setUsername(e.target.value);
\r\n
const onChangePassword = (e) => setPassword(e.target.value);
\r\n\r\n
// const handleFormSubmit = () => {\r
\n
// const url =
\"
/login
\"
;
\r\n
// let formData = new FormData();
\r\n
// formData.append(
\"
username
\"
, username);
\r\n
// formData.append(
\"
password
\"
, password);
\r\n\r\n
// let config = {\r
\n
// headers: {\r
\n
//
\"
content-type
\"
:
\"
multipart/form-data
\"
,
\r\n
// },
\r\n
// };
\r\n\r\n
// return post(url, formData, config);
\r\n
// };
\r\n\r\n
return (
\r\n
<form action=
\"
http://localhost:3001/login
\"
method=
\"
post
\"
>
\r\n
<h1>로그인 화면</h1>
\r\n
이메일:
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
email
\"\r\n
value=
{
username
}
\r\n
onChange=
{
onChangeUsername
}
\r\n
></input>
\r\n
비밀번호:
\r\n
<input
\r\n
type=
\"
password
\"\r\n
name=
\"
password
\"\r\n
value=
{
password
}
\r\n
onChange=
{
onChangePassword
}
\r\n
></input>
\r\n
<button type=
\"
submit
\"
>로그인</button>
\r\n
</form>
\r\n
);
\r\n
};
\r\n\r\n
export default Login;
\r\n
"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
WriteBoard.js"
,[
"65"
,
"66"
,
"67"
,
"68"
],
"import React, { useState } from
\"
react
\"
;
\r\n\r\n
const WriteBoard = () => {\r
\n
const [title, setTitle] = useState(
\"\"
);
\r\n
const [content, setContent] = useState(
\"\"
);
\r\n
const [hobby, setHobby] = useState(
\"\"
);
\r\n\r\n
const onChangeTitle = (e) => setTitle(e.target.value);
\r\n
const onChangeContent = (e) => setContent(e.target.value);
\r\n
const onChangeHobby = (e) => setHobby(e.target.value);
\r\n\r\n
return (
\r\n
<div>
\r\n
<form
\r\n
action=
\"
http://localhost:3001/writeBoard
\"\r\n
method=
\"
post
\"\r\n
encType=
\"
multipart/form-data
\"\r\n
>
\r\n
<label>제목</label>
\r\n
<input type=
\"
text
\"
name=
\"
title
\"
onChange=
{
onChangeTitle
}
></input>
\r\n
<br></br>
\r\n
<label>본문</label>
\r\n
<textarea
\r\n
type=
\"
text
\"\r\n
name=
\"
content
\"\r\n
onChange=
{
onChangeContent
}
\r\n
></textarea>
\r\n
<br></br>
\r\n
<label>취미</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
ex/sp
\"
name=
\"
hobby
\"
/>
\r\n
운동/스포츠
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
out/tr
\"
name=
\"
hobby
\"
/>
\r\n
아웃도어/여행
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
bk/wr
\"
name=
\"
hobby
\"
/>
\r\n
인문학/책/글
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
fg/lg
\"
name=
\"
hobby
\"
/>
\r\n
외국/언어
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
cul/pfm
\"
name=
\"
hobby
\"
/>
\r\n
문화/공연
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
mu/inst
\"
name=
\"
hobby
\"
/>
\r\n
음악/악기
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
cft
\"
name=
\"
hobby
\"
/>
\r\n
공예/만들기
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
dan
\"
name=
\"
hobby
\"
/>
\r\n
댄스/무용
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
volu
\"
name=
\"
hobby
\"
/>
\r\n
봉사활동
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
par
\"
name=
\"
hobby
\"
/>
\r\n
사교/인맥
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
game
\"
name=
\"
hobby
\"
/>
\r\n
게임/오락
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
pic
\"
name=
\"
hobby
\"
/>
\r\n
사진/편집/촬영/영상
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
inv
\"
name=
\"
hobby
\"
/>
\r\n
제테크/투자
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
cok/fod
\"
name=
\"
hobby
\"
/>
\r\n
요리/음식/맛집
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
fas/bea
\"
name=
\"
hobby
\"
/>
\r\n
패션/뷰티/코디
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
art/draw
\"
name=
\"
hobby
\"
/>
\r\n
미술/그림
\r\n
</label>
\r\n
<br></br>
\r\n
<br></br>
\r\n
<label>사진첨부</label>
\r\n
<input type=
\"
file
\"
name=
\"
photo
\"
></input>
\r\n
<br></br>
\r\n
<button type=
\"
submit
\"
>ok</button>
\r\n
</form>
\r\n
</div>
\r\n
);
\r\n
};
\r\n\r\n
export default WriteBoard;
\r\n
"
,[
"69"
,
"70"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
DetailBoard.js"
,[
"71"
,
"72"
,
"73"
,
"74"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
WriteProfile.js"
,[
"75"
,
"76"
,
"77"
,
"78"
,
"79"
,
"80"
],
"import React, { useEffect, useState } from
\"
react
\"
;
\r\n
import axios from
\"
axios
\"
;
\r\n\r\n
const WriteProfile = () => {\r
\n
const [Profile, setProfile] = useState({\r
\n
profile_photo:
\"\"
,
\r\n
created_at:
\"\"
,
\r\n
self_intro:
\"\"
,
\r\n
user_id:
\"\"
,
\r\n
user_email:
\"\"
,
\r\n
location:
\"\"
,
\r\n
age:
\"\"
,
\r\n
});
\r\n
const [Img, setImg] = useState(
\"\"
);
\r\n
const [imgBase64, setImgBase64] = useState(
\"\"
);
\r\n
const [imgFile, setImgFile] = useState(null);
\r\n\r\n
const handleChangeFile = (event) => {\r
\n
let reader = new FileReader();
\r\n
reader.onloadend = () => {\r
\n
// 2. 읽기가 완료되면 아래코드가 실행됩니다.
\r\n
const base64 = reader.result;
\r\n
if (base64) {\r
\n
setImgBase64(base64.toString()); // 파일 base64 상태 업데이트
\r\n
}
\r\n
};
\r\n
if (event.target.files[0]) {\r
\n
reader.readAsDataURL(event.target.files[0]); // 1. 파일을 읽어 버퍼에 저장합니다.
\r\n
setImgFile(event.target.files[0]); // 파일 상태 업데이트
\r\n
}
\r\n
};
\r\n\r\n
const onChangeProfilePhoto = (e) =>
\r\n
setProfile({ profile_photo: e.target.value });
\r\n
const onChangeSelfIntro = (e) => setProfile({ self_intro: e.target.value });
\r\n
const onChangeLocation = (e) => setProfile({ location: e.target.value });
\r\n
const onChangeAge = (e) => setProfile({ age: e.target.value });
\r\n\r\n
useEffect(async () => {\r
\n
async function fetchData() {\r
\n
console.log(
\"
writeProfile axios get 호출
\"
);
\r\n
let res = await axios.get(
\"
http://localhost:3001/getProfileInfo
\"
);
\r\n
console.log(res);
\r\n
console.dir(res.data[0]);
\r\n
if (res.data[0] != undefined) {\r
\n
setProfile(res.data[0]);
\r\n
setImg(
\"
http://localhost:3001/uploads/
\"
+ res.data[0].profile_photo);
\r\n
}
\r\n
}
\r\n
fetchData();
\r\n
}, []);
\r\n\r\n
return (
\r\n
<div>
\r\n
<label>기존 프로필 사진</label>
\r\n
<br></br>
\r\n
<img src=
{
Img
}
width=
\"
200px
\"
height=
\"
200px
\"
></img>
\r\n
<br></br>
\r\n
<label>선택한 프로필 사진</label>
\r\n
<br></br>
\r\n
{/* <div
\r\n
style={{ backgroundColor:
\"
#efefef
\"
, width:
\"
200px
\"
, height:
\"
200px
\"
}}
\r\n
> */}
\r\n
<img src=
{
imgBase64
}
width=
\"
200px
\"
height=
\"
200px
\"
/>
\r\n
{/* </div> */}
\r\n
<form
\r\n
method=
\"
post
\"\r\n
action=
\"
http://localhost:3001/writeProfile
\"\r\n
encType=
\"
multipart/form-data
\"\r\n
>
\r\n
<label>프로필 사진</label>
\r\n
<input
\r\n
type=
\"
file
\"\r\n
name=
\"
photo
\"\r\n
//value=
\"
http://localhost:3001/uploads/
\"
+`
{
Profile.profile_photo
}
`
\r\n
// onChange=
{
onChangeProfilePhoto
}
\r\n
onChange=
{
handleChangeFile
}
\r\n
></input>
\r\n
<br></br>
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
self_intro
\"\r\n
placeholder=
\"
간단한 자기소개 및 관심사
\"\r\n
value=
{
Profile.self_intro
}
\r\n
onChange=
{
onChangeSelfIntro
}
\r\n
></input>
\r\n
<br></br>
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
age
\"\r\n
placeholder=
\"
나이
\"\r\n
value=
{
Profile.age
}
\r\n
onChange=
{
onChangeAge
}
\r\n
></input>
\r\n
<br></br>
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
loc
\"\r\n
placeholder=
\"
사는 곳
\"\r\n
value=
{
Profile.location
}
\r\n
onChange=
{
onChangeLocation
}
\r\n
></input>
\r\n
<br></br>
\r\n
<button type=
\"
submit
\"
>작성 완료</button>
\r\n
</form>
\r\n
</div>
\r\n
);
\r\n
};
\r\n\r\n
export default WriteProfile;
\r\n
"
,{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"82"
,
"line"
:
1
,
"column"
:
17
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
1
,
"endColumn"
:
26
},{
"ruleId"
:
"85"
,
"replacedBy"
:
"86"
},{
"ruleId"
:
"87"
,
"replacedBy"
:
"88"
},{
"ruleId"
:
"89"
,
"severity"
:
1
,
"message"
:
"90"
,
"line"
:
29
,
"column"
:
13
,
"nodeType"
:
"91"
,
"endLine"
:
41
,
"endColumn"
:
4
},{
"ruleId"
:
"89"
,
"severity"
:
1
,
"message"
:
"92"
,
"line"
:
41
,
"column"
:
6
,
"nodeType"
:
"93"
,
"endLine"
:
41
,
"endColumn"
:
8
,
"suggestions"
:
"94"
},{
"ruleId"
:
"95"
,
"severity"
:
1
,
"message"
:
"96"
,
"line"
:
51
,
"column"
:
15
,
"nodeType"
:
"97"
,
"endLine"
:
51
,
"endColumn"
:
59
},{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"98"
,
"line"
:
2
,
"column"
:
10
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
2
,
"endColumn"
:
15
},{
"ruleId"
:
"89"
,
"severity"
:
1
,
"message"
:
"90"
,
"line"
:
18
,
"column"
:
13
,
"nodeType"
:
"91"
,
"endLine"
:
39
,
"endColumn"
:
4
},{
"ruleId"
:
"89"
,
"severity"
:
1
,
"message"
:
"99"
,
"line"
:
39
,
"column"
:
6
,
"nodeType"
:
"93"
,
"endLine"
:
39
,
"endColumn"
:
8
,
"suggestions"
:
"100"
},{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"98"
,
"line"
:
2
,
"column"
:
10
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
2
,
"endColumn"
:
15
},{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"101"
,
"line"
:
3
,
"column"
:
10
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
3
,
"endColumn"
:
14
},{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"101"
,
"line"
:
2
,
"column"
:
10
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
2
,
"endColumn"
:
14
},{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"102"
,
"line"
:
4
,
"column"
:
10
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
4
,
"endColumn"
:
15
},{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"103"
,
"line"
:
5
,
"column"
:
10
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
5
,
"endColumn"
:
17
},{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"104"
,
"line"
:
6
,
"column"
:
10
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
6
,
"endColumn"
:
15
},{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"105"
,
"line"
:
10
,
"column"
:
9
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
10
,
"endColumn"
:
22
},{
"ruleId"
:
"85"
,
"replacedBy"
:
"106"
},{
"ruleId"
:
"87"
,
"replacedBy"
:
"107"
},{
"ruleId"
:
"89"
,
"severity"
:
1
,
"message"
:
"90"
,
"line"
:
31
,
"column"
:
13
,
"nodeType"
:
"91"
,
"endLine"
:
56
,
"endColumn"
:
4
},{
"ruleId"
:
"108"
,
"severity"
:
1
,
"message"
:
"109"
,
"line"
:
43
,
"column"
:
38
,
"nodeType"
:
"110"
,
"messageId"
:
"111"
,
"endLine"
:
43
,
"endColumn"
:
40
},{
"ruleId"
:
"89"
,
"severity"
:
1
,
"message"
:
"112"
,
"line"
:
56
,
"column"
:
6
,
"nodeType"
:
"93"
,
"endLine"
:
56
,
"endColumn"
:
8
,
"suggestions"
:
"113"
},{
"ruleId"
:
"95"
,
"severity"
:
1
,
"message"
:
"96"
,
"line"
:
68
,
"column"
:
9
,
"nodeType"
:
"97"
,
"endLine"
:
68
,
"endColumn"
:
71
},{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"114"
,
"line"
:
16
,
"column"
:
10
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
16
,
"endColumn"
:
17
},{
"ruleId"
:
"81"
,
"severity"
:
1
,
"message"
:
"115"
,
"line"
:
33
,
"column"
:
9
,
"nodeType"
:
"83"
,
"messageId"
:
"84"
,
"endLine"
:
33
,
"endColumn"
:
29
},{
"ruleId"
:
"89"
,
"severity"
:
1
,
"message"
:
"90"
,
"line"
:
39
,
"column"
:
13
,
"nodeType"
:
"91"
,
"endLine"
:
51
,
"endColumn"
:
4
},{
"ruleId"
:
"108"
,
"severity"
:
1
,
"message"
:
"109"
,
"line"
:
45
,
"column"
:
23
,
"nodeType"
:
"110"
,
"messageId"
:
"111"
,
"endLine"
:
45
,
"endColumn"
:
25
},{
"ruleId"
:
"95"
,
"severity"
:
1
,
"message"
:
"96"
,
"line"
:
57
,
"column"
:
7
,
"nodeType"
:
"97"
,
"endLine"
:
57
,
"endColumn"
:
51
},{
"ruleId"
:
"95"
,
"severity"
:
1
,
"message"
:
"96"
,
"line"
:
64
,
"column"
:
7
,
"nodeType"
:
"97"
,
"endLine"
:
64
,
"endColumn"
:
59
},
"no-unused-vars"
,
"'Component' is defined but never used."
,
"Identifier"
,
"unusedVar"
,
"no-native-reassign"
,[
"116"
],
"no-negated-in-lhs"
,[
"117"
],
"react-hooks/exhaustive-deps"
,
"Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
\n\n
useEffect(() => {\n async function fetchData() {\n // You can await here
\n
const response = await MyAPI.getData(someId);
\n
// ...
\n
}
\n
fetchData();
\n
}, [someId]); // Or [] if effect doesn't need props or state
\n\n
Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching"
,
"ArrowFunctionExpression"
,
"React Hook useEffect has a missing dependency: 'email'. Either include it or remove the dependency array."
,
"ArrayExpression"
,[
"118"
],
"jsx-a11y/alt-text"
,
"img elements must have an alt prop, either with meaningful text, or an empty string for decorative images."
,
"JSXOpeningElement"
,
"'Route' is defined but never used."
,
"React Hook useEffect has a missing dependency: 'input'. Either include it or remove the dependency array."
,[
"119"
],
"'post' is defined but never used."
,
"'title' is assigned a value but never used."
,
"'content' is assigned a value but never used."
,
"'hobby' is assigned a value but never used."
,
"'onChangeHobby' is assigned a value but never used."
,[
"116"
],[
"117"
],
"eqeqeq"
,
"Expected '!==' and instead saw '!='."
,
"BinaryExpression"
,
"unexpected"
,
"React Hook useEffect has missing dependencies: 'Board' and 'board_id'. Either include them or remove the dependency array."
,[
"120"
],
"'imgFile' is assigned a value but never used."
,
"'onChangeProfilePhoto' is assigned a value but never used."
,
"no-global-assign"
,
"no-unsafe-negation"
,{
"desc"
:
"121"
,
"fix"
:
"122"
},{
"desc"
:
"123"
,
"fix"
:
"124"
},{
"desc"
:
"125"
,
"fix"
:
"126"
},
"Update the dependencies array to be: [email]"
,{
"range"
:
"127"
,
"text"
:
"128"
},
"Update the dependencies array to be: [input]"
,{
"range"
:
"129"
,
"text"
:
"130"
},
"Update the dependencies array to be: [Board, board_id]"
,{
"range"
:
"131"
,
"text"
:
"132"
},[
1071
,
1073
],
"[email]"
,[
1141
,
1143
],
"[input]"
,[
1542
,
1544
],
"[Board, board_id]"
]
[{
"C:
\\
WYH
\\
frontend
\\
src
\\
reportWebVitals.js"
:
"1"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
App.js"
:
"2"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
index.js"
:
"3"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Profile.js"
:
"4"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Board.js"
:
"5"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Home.js"
:
"6"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Signup.js"
:
"7"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Login.js"
:
"8"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
WriteBoard.js"
:
"9"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
DetailBoard.js"
:
"10"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
WriteProfile.js"
:
"11"
},{
"size"
:
362
,
"mtime"
:
1606157613272
,
"results"
:
"12"
,
"hashOfConfig"
:
"13"
},{
"size"
:
1764
,
"mtime"
:
1607415610889
,
"results"
:
"14"
,
"hashOfConfig"
:
"13"
},{
"size"
:
544
,
"mtime"
:
1606240034288
,
"results"
:
"15"
,
"hashOfConfig"
:
"13"
},{
"size"
:
2234
,
"mtime"
:
1607425040281
,
"results"
:
"16"
,
"hashOfConfig"
:
"13"
},{
"size"
:
4100
,
"mtime"
:
1607506999836
,
"results"
:
"17"
,
"hashOfConfig"
:
"13"
},{
"size"
:
370
,
"mtime"
:
1606662762631
,
"results"
:
"18"
,
"hashOfConfig"
:
"13"
},{
"size"
:
1575
,
"mtime"
:
1607345129868
,
"results"
:
"19"
,
"hashOfConfig"
:
"13"
},{
"size"
:
1232
,
"mtime"
:
1606662786263
,
"results"
:
"20"
,
"hashOfConfig"
:
"13"
},{
"size"
:
3419
,
"mtime"
:
1607104090152
,
"results"
:
"21"
,
"hashOfConfig"
:
"13"
},{
"size"
:
2882
,
"mtime"
:
1607519522761
,
"results"
:
"22"
,
"hashOfConfig"
:
"13"
},{
"size"
:
3396
,
"mtime"
:
1607369801073
,
"results"
:
"23"
,
"hashOfConfig"
:
"13"
},{
"filePath"
:
"24"
,
"messages"
:
"25"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"26"
},
"10w9ldj"
,{
"filePath"
:
"27"
,
"messages"
:
"28"
,
"errorCount"
:
0
,
"warningCount"
:
1
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
null
},{
"filePath"
:
"29"
,
"messages"
:
"30"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"31"
},{
"filePath"
:
"32"
,
"messages"
:
"33"
,
"errorCount"
:
0
,
"warningCount"
:
3
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"34"
,
"usedDeprecatedRules"
:
"31"
},{
"filePath"
:
"35"
,
"messages"
:
"36"
,
"errorCount"
:
0
,
"warningCount"
:
3
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
null
},{
"filePath"
:
"37"
,
"messages"
:
"38"
,
"errorCount"
:
0
,
"warningCount"
:
1
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
null
},{
"filePath"
:
"39"
,
"messages"
:
"40"
,
"errorCount"
:
0
,
"warningCount"
:
1
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"41"
},{
"filePath"
:
"42"
,
"messages"
:
"43"
,
"errorCount"
:
0
,
"warningCount"
:
1
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"44"
},{
"filePath"
:
"45"
,
"messages"
:
"46"
,
"errorCount"
:
0
,
"warningCount"
:
4
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"47"
,
"usedDeprecatedRules"
:
"48"
},{
"filePath"
:
"49"
,
"messages"
:
"50"
,
"errorCount"
:
0
,
"warningCount"
:
4
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
null
},{
"filePath"
:
"51"
,
"messages"
:
"52"
,
"errorCount"
:
0
,
"warningCount"
:
6
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"53"
,
"usedDeprecatedRules"
:
"31"
},
"C:
\\
WYH
\\
frontend
\\
src
\\
reportWebVitals.js"
,[],[
"54"
,
"55"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
App.js"
,[
"56"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
index.js"
,[],[
"57"
,
"58"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Profile.js"
,[
"59"
,
"60"
,
"61"
],
"import React, { useEffect, useState } from
\"
react
\"
;
\r\n
import axios from
\"
axios
\"
;
\r\n
import { Link } from
\"
react-router-dom
\"
;
\r\n
import { withRouter } from
\"
react-router-dom
\"
;
\r\n
axios.defaults.withCredentials = true; // 기존에 해당 설정으로 cors 에러가 나게 한 부분
\r\n\r\n
const Profile = ({ match, history }) => {\r
\n
const { email } = match.params;
\r\n
const [Profile, setProfile] = useState({\r
\n
profile_photo:
\"\"
,
\r\n
created_at:
\"\"
,
\r\n
self_intro:
\"\"
,
\r\n
user_id:
\"\"
,
\r\n
user_email:
\"\"
,
\r\n
age:
\"\"
,
\r\n
location:
\"\"
,
\r\n
});
\r\n\r\n
const [User, setUser] = useState({\r
\n
email:
\"\"
,
\r\n
password:
\"\"
,
\r\n
name:
\"\"
,
\r\n
created_at:
\"\"
,
\r\n
deleted_at:
\"\"
,
\r\n
});
\r\n\r\n
const [Img, setImg] = useState(
\"\"
);
\r\n\r\n
useEffect(async () => {\r
\n
const fetchData = async () => {\r
\n
const result = await axios.post(
\"
http://localhost:3001/profile
\"
, {\r
\n
email: email,
\r\n
});
\r\n
console.dir(result);
\r\n
setProfile(result.data.p);
\r\n
setUser(result.data.u);
\r\n\r\n
setImg(
\"
http://localhost:3001/uploads/
\"
+ result.data.p.profile_photo);
\r\n
};
\r\n
fetchData();
\r\n
}, []);
\r\n\r\n
return (
\r\n
<>
\r\n
<h1>
{
Profile.user_email
}
의 프로필화면</h1>
\r\n
<div>닉네임:
{
User.name
}
</div>
\r\n
<div>자기소게:
{
Profile.self_intro
}
</div>
\r\n
<div>나이:
{
Profile.age
}
</div>
\r\n
<div>사는곳:
{
Profile.location
}
</div>
\r\n
<div>
\r\n
프로필사진:<img src=
{
Img
}
width=
\"
200px
\"
height=
\"
200px
\"
></img>
\r\n
</div>
\r\n
<Link to=
\"
/board
\"
>메인화면으로 돌아가기</Link>
\r\n
<button onClick={() => history.goBack()}>뒤로가기</button>
\r\n
</>
\r\n
);
\r\n
};
\r\n\r\n
// const Profile = (login_info) => {\r
\n
// const [user, setUser] = useState(
\"\"
);
\r\n\r\n
// fetch(
\"
/profile
\"
, {\r
\n
// method:
\"
get
\"
,
\r\n
// headers: {\r
\n
//
\"
Content-Type
\"
:
\"
application/json; charset=utf-8
\"
,
\r\n
// },
\r\n
// credentials:
\"
same-origin
\"
,
\r\n
// body: JSON.stringify(login_info),
\r\n
// })
\r\n
// .then((res) => res.json())
\r\n
// .then((data) => {\r
\n
// console.dir(data);
\r\n
// setUser(data);
\r\n
// });
\r\n\r\n
// return (
\r\n
// <div>
\r\n
// <h1>
{
user.username
}
</h1>
\r\n
// <h1>
{
user.nicname
}
</h1>
\r\n
// </div>
\r\n
// );
\r\n
// };
\r\n\r\n
export default withRouter(Profile);
\r\n
"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Board.js"
,[
"62"
,
"63"
,
"64"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Home.js"
,[
"65"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Signup.js"
,[
"66"
],
"import React, { useState } from
\"
react
\"
;
\r\n
//import { post } from
\"
../../backend/app
\"
;
\r\n
import { post } from
\"
axios
\"
;
\r\n\r\n
const Signup = () => {\r
\n
const [email, setEmail] = useState(
\"\"
);
\r\n
const [nicname, setNicname] = useState(
\"\"
);
\r\n
const [password, setPassword] = useState(
\"\"
);
\r\n\r\n
const onChangeEmail = (e) => setEmail(e.target.value);
\r\n
const onChangeNicname = (e) => setNicname(e.target.value);
\r\n
const onChangePassword = (e) => setPassword(e.target.value);
\r\n\r\n
// const handleFormSubmit = () => {\r
\n
// const url =
\"
/signup
\"
;
\r\n
// const formData = new FormData();
\r\n
// formData.append(
\"
username
\"
, username);
\r\n
// formData.append(
\"
password
\"
, password);
\r\n
// formData.append(
\"
nicname
\"
, nicname);
\r\n\r\n
// const config = {\r
\n
// headers: {\r
\n
//
\"
content-type
\"
:
\"
multipart/form-data
\"
,
\r\n
// },
\r\n
// };
\r\n\r\n
// return post(url, formData, config);
\r\n
// };
\r\n\r\n
return (
\r\n
<form action=
\"
http://localhost:3001/signup
\"
method=
\"
post
\"
>
\r\n
<h1>회원가입</h1>
\r\n
이메일:
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
email
\"\r\n
value=
{
email
}
\r\n
onChange=
{
onChangeEmail
}
\r\n
></input>
\r\n
비밀번호:
\r\n
<input
\r\n
type=
\"
password
\"\r\n
name=
\"
password
\"\r\n
value=
{
password
}
\r\n
onChange=
{
onChangePassword
}
\r\n
></input>
\r\n
닉네임:
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
nicname
\"\r\n
value=
{
nicname
}
\r\n
onChange=
{
onChangeNicname
}
\r\n
></input>
\r\n
<button type=
\"
submit
\"
>가입완료</button>
\r\n
</form>
\r\n
);
\r\n
};
\r\n\r\n
export default Signup;
\r\n
"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
Login.js"
,[
"67"
],
"import React, { useState } from
\"
react
\"
;
\r\n
import { post } from
\"
axios
\"
;
\r\n\r\n
const Login = () => {\r
\n
const [username, setUsername] = useState(
\"\"
);
\r\n
const [password, setPassword] = useState(
\"\"
);
\r\n\r\n
const onChangeUsername = (e) => setUsername(e.target.value);
\r\n
const onChangePassword = (e) => setPassword(e.target.value);
\r\n\r\n
// const handleFormSubmit = () => {\r
\n
// const url =
\"
/login
\"
;
\r\n
// let formData = new FormData();
\r\n
// formData.append(
\"
username
\"
, username);
\r\n
// formData.append(
\"
password
\"
, password);
\r\n\r\n
// let config = {\r
\n
// headers: {\r
\n
//
\"
content-type
\"
:
\"
multipart/form-data
\"
,
\r\n
// },
\r\n
// };
\r\n\r\n
// return post(url, formData, config);
\r\n
// };
\r\n\r\n
return (
\r\n
<form action=
\"
http://localhost:3001/login
\"
method=
\"
post
\"
>
\r\n
<h1>로그인 화면</h1>
\r\n
이메일:
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
email
\"\r\n
value=
{
username
}
\r\n
onChange=
{
onChangeUsername
}
\r\n
></input>
\r\n
비밀번호:
\r\n
<input
\r\n
type=
\"
password
\"\r\n
name=
\"
password
\"\r\n
value=
{
password
}
\r\n
onChange=
{
onChangePassword
}
\r\n
></input>
\r\n
<button type=
\"
submit
\"
>로그인</button>
\r\n
</form>
\r\n
);
\r\n
};
\r\n\r\n
export default Login;
\r\n
"
,
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
WriteBoard.js"
,[
"68"
,
"69"
,
"70"
,
"71"
],
"import React, { useState } from
\"
react
\"
;
\r\n\r\n
const WriteBoard = () => {\r
\n
const [title, setTitle] = useState(
\"\"
);
\r\n
const [content, setContent] = useState(
\"\"
);
\r\n
const [hobby, setHobby] = useState(
\"\"
);
\r\n\r\n
const onChangeTitle = (e) => setTitle(e.target.value);
\r\n
const onChangeContent = (e) => setContent(e.target.value);
\r\n
const onChangeHobby = (e) => setHobby(e.target.value);
\r\n\r\n
return (
\r\n
<div>
\r\n
<form
\r\n
action=
\"
http://localhost:3001/writeBoard
\"\r\n
method=
\"
post
\"\r\n
encType=
\"
multipart/form-data
\"\r\n
>
\r\n
<label>제목</label>
\r\n
<input type=
\"
text
\"
name=
\"
title
\"
onChange=
{
onChangeTitle
}
></input>
\r\n
<br></br>
\r\n
<label>본문</label>
\r\n
<textarea
\r\n
type=
\"
text
\"\r\n
name=
\"
content
\"\r\n
onChange=
{
onChangeContent
}
\r\n
></textarea>
\r\n
<br></br>
\r\n
<label>취미</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
ex/sp
\"
name=
\"
hobby
\"
/>
\r\n
운동/스포츠
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
out/tr
\"
name=
\"
hobby
\"
/>
\r\n
아웃도어/여행
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
bk/wr
\"
name=
\"
hobby
\"
/>
\r\n
인문학/책/글
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
fg/lg
\"
name=
\"
hobby
\"
/>
\r\n
외국/언어
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
cul/pfm
\"
name=
\"
hobby
\"
/>
\r\n
문화/공연
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
mu/inst
\"
name=
\"
hobby
\"
/>
\r\n
음악/악기
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
cft
\"
name=
\"
hobby
\"
/>
\r\n
공예/만들기
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
dan
\"
name=
\"
hobby
\"
/>
\r\n
댄스/무용
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
volu
\"
name=
\"
hobby
\"
/>
\r\n
봉사활동
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
par
\"
name=
\"
hobby
\"
/>
\r\n
사교/인맥
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
game
\"
name=
\"
hobby
\"
/>
\r\n
게임/오락
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
pic
\"
name=
\"
hobby
\"
/>
\r\n
사진/편집/촬영/영상
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
inv
\"
name=
\"
hobby
\"
/>
\r\n
제테크/투자
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
cok/fod
\"
name=
\"
hobby
\"
/>
\r\n
요리/음식/맛집
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
fas/bea
\"
name=
\"
hobby
\"
/>
\r\n
패션/뷰티/코디
\r\n
</label>
\r\n
<br></br>
\r\n
<label>
\r\n
<input type=
\"
radio
\"
value=
\"
art/draw
\"
name=
\"
hobby
\"
/>
\r\n
미술/그림
\r\n
</label>
\r\n
<br></br>
\r\n
<br></br>
\r\n
<label>사진첨부</label>
\r\n
<input type=
\"
file
\"
name=
\"
photo
\"
></input>
\r\n
<br></br>
\r\n
<button type=
\"
submit
\"
>ok</button>
\r\n
</form>
\r\n
</div>
\r\n
);
\r\n
};
\r\n\r\n
export default WriteBoard;
\r\n
"
,[
"72"
,
"73"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
DetailBoard.js"
,[
"74"
,
"75"
,
"76"
,
"77"
],
"C:
\\
WYH
\\
frontend
\\
src
\\
components
\\
WriteProfile.js"
,[
"78"
,
"79"
,
"80"
,
"81"
,
"82"
,
"83"
],
"import React, { useEffect, useState } from
\"
react
\"
;
\r\n
import axios from
\"
axios
\"
;
\r\n\r\n
const WriteProfile = () => {\r
\n
const [Profile, setProfile] = useState({\r
\n
profile_photo:
\"\"
,
\r\n
created_at:
\"\"
,
\r\n
self_intro:
\"\"
,
\r\n
user_id:
\"\"
,
\r\n
user_email:
\"\"
,
\r\n
location:
\"\"
,
\r\n
age:
\"\"
,
\r\n
});
\r\n
const [Img, setImg] = useState(
\"\"
);
\r\n
const [imgBase64, setImgBase64] = useState(
\"\"
);
\r\n
const [imgFile, setImgFile] = useState(null);
\r\n\r\n
const handleChangeFile = (event) => {\r
\n
let reader = new FileReader();
\r\n
reader.onloadend = () => {\r
\n
// 2. 읽기가 완료되면 아래코드가 실행됩니다.
\r\n
const base64 = reader.result;
\r\n
if (base64) {\r
\n
setImgBase64(base64.toString()); // 파일 base64 상태 업데이트
\r\n
}
\r\n
};
\r\n
if (event.target.files[0]) {\r
\n
reader.readAsDataURL(event.target.files[0]); // 1. 파일을 읽어 버퍼에 저장합니다.
\r\n
setImgFile(event.target.files[0]); // 파일 상태 업데이트
\r\n
}
\r\n
};
\r\n\r\n
const onChangeProfilePhoto = (e) =>
\r\n
setProfile({ profile_photo: e.target.value });
\r\n
const onChangeSelfIntro = (e) => setProfile({ self_intro: e.target.value });
\r\n
const onChangeLocation = (e) => setProfile({ location: e.target.value });
\r\n
const onChangeAge = (e) => setProfile({ age: e.target.value });
\r\n\r\n
useEffect(async () => {\r
\n
async function fetchData() {\r
\n
console.log(
\"
writeProfile axios get 호출
\"
);
\r\n
let res = await axios.get(
\"
http://localhost:3001/getProfileInfo
\"
);
\r\n
console.log(res);
\r\n
console.dir(res.data[0]);
\r\n
if (res.data[0] != undefined) {\r
\n
setProfile(res.data[0]);
\r\n
setImg(
\"
http://localhost:3001/uploads/
\"
+ res.data[0].profile_photo);
\r\n
}
\r\n
}
\r\n
fetchData();
\r\n
}, []);
\r\n\r\n
return (
\r\n
<div>
\r\n
<label>기존 프로필 사진</label>
\r\n
<br></br>
\r\n
<img src=
{
Img
}
width=
\"
200px
\"
height=
\"
200px
\"
></img>
\r\n
<br></br>
\r\n
<label>선택한 프로필 사진</label>
\r\n
<br></br>
\r\n
{/* <div
\r\n
style={{ backgroundColor:
\"
#efefef
\"
, width:
\"
200px
\"
, height:
\"
200px
\"
}}
\r\n
> */}
\r\n
<img src=
{
imgBase64
}
width=
\"
200px
\"
height=
\"
200px
\"
/>
\r\n
{/* </div> */}
\r\n
<form
\r\n
method=
\"
post
\"\r\n
action=
\"
http://localhost:3001/writeProfile
\"\r\n
encType=
\"
multipart/form-data
\"\r\n
>
\r\n
<label>프로필 사진</label>
\r\n
<input
\r\n
type=
\"
file
\"\r\n
name=
\"
photo
\"\r\n
//value=
\"
http://localhost:3001/uploads/
\"
+`
{
Profile.profile_photo
}
`
\r\n
// onChange=
{
onChangeProfilePhoto
}
\r\n
onChange=
{
handleChangeFile
}
\r\n
></input>
\r\n
<br></br>
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
self_intro
\"\r\n
placeholder=
\"
간단한 자기소개 및 관심사
\"\r\n
value=
{
Profile.self_intro
}
\r\n
onChange=
{
onChangeSelfIntro
}
\r\n
></input>
\r\n
<br></br>
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
age
\"\r\n
placeholder=
\"
나이
\"\r\n
value=
{
Profile.age
}
\r\n
onChange=
{
onChangeAge
}
\r\n
></input>
\r\n
<br></br>
\r\n
<input
\r\n
type=
\"
text
\"\r\n
name=
\"
loc
\"\r\n
placeholder=
\"
사는 곳
\"\r\n
value=
{
Profile.location
}
\r\n
onChange=
{
onChangeLocation
}
\r\n
></input>
\r\n
<br></br>
\r\n
<button type=
\"
submit
\"
>작성 완료</button>
\r\n
</form>
\r\n
</div>
\r\n
);
\r\n
};
\r\n\r\n
export default WriteProfile;
\r\n
"
,{
"ruleId"
:
"84"
,
"replacedBy"
:
"85"
},{
"ruleId"
:
"86"
,
"replacedBy"
:
"87"
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"89"
,
"line"
:
1
,
"column"
:
17
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
1
,
"endColumn"
:
26
},{
"ruleId"
:
"84"
,
"replacedBy"
:
"92"
},{
"ruleId"
:
"86"
,
"replacedBy"
:
"93"
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"95"
,
"line"
:
29
,
"column"
:
13
,
"nodeType"
:
"96"
,
"endLine"
:
41
,
"endColumn"
:
4
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"97"
,
"line"
:
41
,
"column"
:
6
,
"nodeType"
:
"98"
,
"endLine"
:
41
,
"endColumn"
:
8
,
"suggestions"
:
"99"
},{
"ruleId"
:
"100"
,
"severity"
:
1
,
"message"
:
"101"
,
"line"
:
51
,
"column"
:
15
,
"nodeType"
:
"102"
,
"endLine"
:
51
,
"endColumn"
:
59
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"103"
,
"line"
:
2
,
"column"
:
10
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
2
,
"endColumn"
:
15
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"95"
,
"line"
:
18
,
"column"
:
13
,
"nodeType"
:
"96"
,
"endLine"
:
39
,
"endColumn"
:
4
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"104"
,
"line"
:
39
,
"column"
:
6
,
"nodeType"
:
"98"
,
"endLine"
:
39
,
"endColumn"
:
8
,
"suggestions"
:
"105"
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"103"
,
"line"
:
2
,
"column"
:
10
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
2
,
"endColumn"
:
15
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"106"
,
"line"
:
3
,
"column"
:
10
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
3
,
"endColumn"
:
14
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"106"
,
"line"
:
2
,
"column"
:
10
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
2
,
"endColumn"
:
14
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"107"
,
"line"
:
4
,
"column"
:
10
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
4
,
"endColumn"
:
15
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"108"
,
"line"
:
5
,
"column"
:
10
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
5
,
"endColumn"
:
17
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"109"
,
"line"
:
6
,
"column"
:
10
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
6
,
"endColumn"
:
15
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"110"
,
"line"
:
10
,
"column"
:
9
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
10
,
"endColumn"
:
22
},{
"ruleId"
:
"84"
,
"replacedBy"
:
"111"
},{
"ruleId"
:
"86"
,
"replacedBy"
:
"112"
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"95"
,
"line"
:
31
,
"column"
:
13
,
"nodeType"
:
"96"
,
"endLine"
:
56
,
"endColumn"
:
4
},{
"ruleId"
:
"113"
,
"severity"
:
1
,
"message"
:
"114"
,
"line"
:
43
,
"column"
:
38
,
"nodeType"
:
"115"
,
"messageId"
:
"116"
,
"endLine"
:
43
,
"endColumn"
:
40
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"117"
,
"line"
:
56
,
"column"
:
6
,
"nodeType"
:
"98"
,
"endLine"
:
56
,
"endColumn"
:
8
,
"suggestions"
:
"118"
},{
"ruleId"
:
"100"
,
"severity"
:
1
,
"message"
:
"101"
,
"line"
:
69
,
"column"
:
11
,
"nodeType"
:
"102"
,
"endLine"
:
69
,
"endColumn"
:
73
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"119"
,
"line"
:
16
,
"column"
:
10
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
16
,
"endColumn"
:
17
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"120"
,
"line"
:
33
,
"column"
:
9
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
33
,
"endColumn"
:
29
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"95"
,
"line"
:
39
,
"column"
:
13
,
"nodeType"
:
"96"
,
"endLine"
:
51
,
"endColumn"
:
4
},{
"ruleId"
:
"113"
,
"severity"
:
1
,
"message"
:
"114"
,
"line"
:
45
,
"column"
:
23
,
"nodeType"
:
"115"
,
"messageId"
:
"116"
,
"endLine"
:
45
,
"endColumn"
:
25
},{
"ruleId"
:
"100"
,
"severity"
:
1
,
"message"
:
"101"
,
"line"
:
57
,
"column"
:
7
,
"nodeType"
:
"102"
,
"endLine"
:
57
,
"endColumn"
:
51
},{
"ruleId"
:
"100"
,
"severity"
:
1
,
"message"
:
"101"
,
"line"
:
64
,
"column"
:
7
,
"nodeType"
:
"102"
,
"endLine"
:
64
,
"endColumn"
:
59
},
"no-native-reassign"
,[
"121"
],
"no-negated-in-lhs"
,[
"122"
],
"no-unused-vars"
,
"'Component' is defined but never used."
,
"Identifier"
,
"unusedVar"
,[
"121"
],[
"122"
],
"react-hooks/exhaustive-deps"
,
"Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
\n\n
useEffect(() => {\n async function fetchData() {\n // You can await here
\n
const response = await MyAPI.getData(someId);
\n
// ...
\n
}
\n
fetchData();
\n
}, [someId]); // Or [] if effect doesn't need props or state
\n\n
Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching"
,
"ArrowFunctionExpression"
,
"React Hook useEffect has a missing dependency: 'email'. Either include it or remove the dependency array."
,
"ArrayExpression"
,[
"123"
],
"jsx-a11y/alt-text"
,
"img elements must have an alt prop, either with meaningful text, or an empty string for decorative images."
,
"JSXOpeningElement"
,
"'Route' is defined but never used."
,
"React Hook useEffect has a missing dependency: 'input'. Either include it or remove the dependency array."
,[
"124"
],
"'post' is defined but never used."
,
"'title' is assigned a value but never used."
,
"'content' is assigned a value but never used."
,
"'hobby' is assigned a value but never used."
,
"'onChangeHobby' is assigned a value but never used."
,[
"121"
],[
"122"
],
"eqeqeq"
,
"Expected '!==' and instead saw '!='."
,
"BinaryExpression"
,
"unexpected"
,
"React Hook useEffect has missing dependencies: 'Board' and 'board_id'. Either include them or remove the dependency array."
,[
"125"
],
"'imgFile' is assigned a value but never used."
,
"'onChangeProfilePhoto' is assigned a value but never used."
,
"no-global-assign"
,
"no-unsafe-negation"
,{
"desc"
:
"126"
,
"fix"
:
"127"
},{
"desc"
:
"128"
,
"fix"
:
"129"
},{
"desc"
:
"130"
,
"fix"
:
"131"
},
"Update the dependencies array to be: [email]"
,{
"range"
:
"132"
,
"text"
:
"133"
},
"Update the dependencies array to be: [input]"
,{
"range"
:
"134"
,
"text"
:
"135"
},
"Update the dependencies array to be: [Board, board_id]"
,{
"range"
:
"136"
,
"text"
:
"137"
},[
1071
,
1073
],
"[email]"
,[
1141
,
1143
],
"[input]"
,[
1542
,
1544
],
"[Board, board_id]"
]
\ No newline at end of file
\ No newline at end of file
This diff is collapsed.
Click to expand it.
frontend/src/components/DetailBoard.js
+
3
−
1
View file @
2fb44c9e
...
@@ -65,7 +65,9 @@ const DetailBoard = ({ match }) => {
...
@@ -65,7 +65,9 @@ const DetailBoard = ({ match }) => {
{
Board
.
content
}
{
Board
.
content
}
<
/div
>
<
/div
>
<
div
>
<
div
>
{
Imgurl
&&
(
<
img
src
=
{
Imgurl
}
style
=
{{
width
:
"
600px
"
,
height
:
"
600px
"
}}
><
/img
>
<
img
src
=
{
Imgurl
}
style
=
{{
width
:
"
600px
"
,
height
:
"
600px
"
}}
><
/img
>
)}
<
/div
>
<
/div
>
<
div
>
<
div
>
<
form
method
=
"
post
"
action
=
"
http://localhost:3001/writeComment
"
>
<
form
method
=
"
post
"
action
=
"
http://localhost:3001/writeComment
"
>
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment