signIn = () => {
fetch("http://10.58.4.128:8000/user/signup", {
method: "POST",
body: JSON.stringify({
email: this.state.email,
password: this.state.password,
username: "ldh",
}),
})
.then(res => res.json())
.then(res => {
this.props.history.push("/main-daehee");
});
};
로그인 페이지에서 입력한 email
password
를 서버에 전송할때 method를 post로 작성한다. 서버에서 설정한 객체의 keys를 body
가 가르키고있는 객체의 key로 설정을 한다.
로그인 페이지에서 입력받은 이메일과 비밀번호의 값을 body
객체의 값으로 입력을 한다.
그 객체를 JSON문자열로 변환하여 body에 저장한다.
.then
은 앞에 fetch 리턴하고 콜백함수를 인수로 받는다. 받은 인수 res
는 json()을 하고 this.props.history.push("/main-daehee");
를 실행하여 메인페이지로 넘어간다.
idhandleIdInput = e => {
this.setState({
[e.target.name]: e.target.value,
});
};
이메일의 input과 pw의 input은 같은 onChange={this.idhandleIdInput}
을 갖고있다. 이메일input에서 idhandleIdInput
을 실행하면 [e.target.name]
은 해당태그의 name
을 가리킨다. 이메일input에서의 name
은 email
이고 email의 키값에 이메일input의 값이 담기게된다.
비밀번호의 input에서 idhandleIdInput
를 실행하게 되면 이메일과 똑같이 [e.target.name]
은 해당태그 name인 password
를 가리킨다. password
의 키에 password의 값이 담기다.
btnEvent = () => {
const { email, password } = this.state;
if (!email.includes("@") && password.length < 5) {
alert("다시 입력해주세요");
return;
}
if (!email.includes("@")) alert("아이디는 이메일 형태로 작성해주세요");
if (password.length < 5) alert("비밀번호는 5자리 이상 작성해주세요");
if (email.includes("@") && password.length >= 5) this.signIn();
};
structor
에 email
와password
의 값을 비교하여 해당 조건을 충족하지 못하면 메인페이지로 넘어가지 못하게 막는다. 첫번째 if문에 return
을 사용하여 같은 조건의 if문이 여러번 실행되는 것을 막았고 로그인 조건을 충족 했을 떄 fetch()
를 실행하게 하여 서버에 데이터를 전송해준다.
class Feeds extends Component {
constructor() {
super();
this.state = {
datas: "",
commentArray: [
{
userName: "Wecodebootcamp",
writeComment: "Fighting~~",
date: Date.now(),
},
],
commentData: [],
};
}
changeComments = e => {
this.setState({ datas: e.target.value });
};
댓글에서 입력받을 때마다 onChangefh changeComments를 실행하여 받은 value를 datas에 저장한다.
btnClick = e => {
e.preventDefault();
this.setState({
commentArray: [
...this.state.commentArray,
{
userName: "Wecodebootcamp",
writeComment: this.state.datas,
date: Date.now(),
},
],
});
this.setState({ datas: "" });
};
로그인 버튼이 클릭할때 마다 btnClick 함수가 실행되게 하며 e.preventDefault();
를 실행하여 버튼이 클릭할 때마다 페이지가 새로고침되는 것을 막는다.
commentArray
에 기존의 commentArray를 넣고 writeComment: this.state.datas
를 써서 writeComment에 입력받은 데이터를 넣어 댓글이 입력될 때마다 배열에 객체를 추가한다. 추가된 객체에는 date에 댓글이 입력될 때의 date값을 넣어 고유의 속성값을 부여해 준다.
◾️ spread 연산자
배얄, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리할 수 있다.
var arr1 = [1, 2, 3, 4, 5];
var arr2 = [...arr1, 6, 7, 8, 9];
console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// String
var str1 = 'paper block';
var str2 = [...str1];
console.log(str2); // [ "p", "a", "p", "e", "r", " ", "b", "l", "o", "c", "k" ]
배열의 각 요소들을 분리 할수 있고 문자열의 각 문자들을 분리할 수 있다. 배열을 병합할 때 concat을 사용하지 않고도 병합할 수 있다.
removeText = e => {
const commentarray = [...this.state.commentArray];
const deleteOneComment = commentarray.filter(item => {
return item.date !== e;
});
this.setState({ commentArray: deleteOneComment });
};
removeText는 comments의 date를 가르키고있다. onClick={() => this.props.removeText(date)}
로 표현했다. 댓글이 작성될때마다 해당 아이콘이 date값을 갖고있으며 commentarray의 요소의 date중에 선택된 댓글을 date를 비교해 같지않은 댓글만 재출력한다. item.date === e
에 해당되는 댓글은 제외하고 출력된다.
componentDidMount() {
componentDidMount() {
fetch("http://localhost:3000/data/Mainfooterlist.json")
.then(res => res.json())
.then(res => {
this.setState({
mainFooter: res,
});
});
}
render(){
return(
,,,(중략)
<ul className="footer1">
{this.state.mainFooter.map((item, index) => {
if (index < 6) return <li>{item.Contents}</li>;
})}
</ul>
<ul className="footer2">
{this.state.mainFooter.map((item, index) => {
if (index > 5) return <li>{item.Contents}</li>;
})}
</ul>
)}
footer에 중복되는 값은 json형태로 public에 저장하고 fetch로 함수로 불러온다. 불러온 값을 mainfooter 키에 저장하고 각 요소들의 index에 조건을 걸어 원하는 요소들을 리스트에 담아서 출력한다.
와 결과물도 정리도 왕깔끔😎