첫 프로젝트가 시작되었다.
클론할 페이지는 'Aēsop' 이다.
내가 맡은부분은 이솝의 로그인&회원가입 부분이다.
이솝은 페이지로 넘어가는것이 아닌 한페이지에 컴포넌트로 넘어가는 형태이다.
그리고 로그인과 회원가입은 모달창으로 이루어져있고 하나의 모달창에서 로그인과 회원가입이 다 진행되는 형태이다.
이솝에서는 처음 로그인을 하기 전에 사용자의 이메일이 저장되어 있는지 체크한다음에 로그인 or 회원가입으로 넘어가는 형태이다.
사실 로그인&회원가입 부분이 내 힘으로 할수 있을거라 생각해서 시작을 했는데
이게 이렇게 복잡하고 힘들줄이야......😭
생각보다... 혼자힘으로 도저히... 힘들어 팀원들과 함께 상의하면서 구현해나가니 어느정도 틀이 잡히고 차근차근 시작할수 있었다.
...... 이게 팀이구나.... 🌵
제일 고민이였던 점은 !!
하나의 모달창에서 인풋이 한개였다가 회원가입으로 넘어가면 여섯개가 생기고 다시 로그인이면 두개로 바뀌는 구조이다. 같은 레이아웃 모달창에서 버튼 이벤트로 인풋창이 추가가되거나 없어지거나 하는것을 구현하는 과정에서 state로 관리를 해야할지 도저히 구현이 안되는 과정에서 팀원에게 도움을 받아 input 을 map으로 돌려주고 필요한것만 꺼내서 접근하는 방식으로 구현해보았다.
서버와 fetch 함수로 통신하는 과정에서 버튼하나로 각각 다른 API 주소로 fetch를 3번 받아야 하는 구조를 구현하기 위해서 form에 onSubmit 함수를 적용시키고, if문으로 접근시켰다. 접근하는 방법은 메일주소확인, 로그인, 회원가입 마다 버튼값이 다르기 때문에 버튼메세지로 접근을 했고, body안에는 예를 들어 로그인창이면 email,password 를 서버로 바디에 담아 보내줘서 서버와 통신을 구현했다. 서버에서 받고 다시 우리에게 데이터를 보내주면 그 응답으로 우리는 res.message로 접근하여 상수데이터에서 메세지마다 받는 객체들을 페이지에 나타날수 있게 state로 담아서 보여주도록 구현
const postUserInfo = e => {
e.preventDefault();
const btnText = RESPONSE_OBJECT[serverMessage].btnContent;
if (btnText === '계속') {
fetch('http://API주소/users/check', {
method: 'POST',
body: JSON.stringify({
email: email,
}),
})
.then(res => res.json())
.then(res => {
setServerMessage(res.message);
});
} else if (btnText === '로그인') {
fetch('http://API주소/users/login', {
method: 'POST',
body: JSON.stringify({
email: email,
password: password,
}),
})
.then(res => res.json())
.then(res => {
localStorage.setItem('token', res.token);
setOpenModalBtn(false);
setLoggedUserName(`${res.last_name}${res.first_name}`);
});
} else {
if (password !== passwordCheck) {
setErrorMessage(SIGNUP_MESSAGE['samePassword']);
return;
}
if (isInputEmpty) {
setErrorMessage(SIGNUP_MESSAGE['fullInput']);
return;
}
fetch('http://API주소/users/signup', {
method: 'POST',
body: JSON.stringify({
email: email,
password: password,
last_name: lastName,
first_name: firstName,
}),
})
.then(res => res.json())
.then(res => {
setServerMessage(res.message);
setUserInfo({
email: '',
password: '',
passwordCheck: '',
lastName: '',
firstName: '',
checkBox: false,
checkBoxTwo: false,
});
});
}
};
상수데이터인 RESPONSE_OBJECT.js를 만들고, 서버에서 받는 메세지로 구분하여 그때그때 받을수 있게 객체화시켰다.
export const RESPONSE_OBJECT = {
Go_To_LogIn: {
title: '푀세아에 다시 오신 것을 환영합니다.',
paragraph: '패스워드를 입력해주세요.',
inputs: [
{
type: 'email',
name: 'email',
placeholder: '이메일 주소',
},
{
type: 'password',
name: 'password',
placeholder: '패스워드',
},
],
btnContent: '로그인',
},이런식으로 Go_To_Login 이라는 메세지를 서버에서 받으면 해당 메세지 객체를(title,paragrph,inputs,btnContent) 불러와 user에게 보여주도록 구현해보았다.
혼자힘이였으면,,, 시작도못했을텐데 팀원들이 있기에 여기까지 오지않았나 싶다.
솔직히 나혼자만의 프로젝트라면 어려운 부분은 그냥 포기하고, 내가 할수있는 그 틀안에서만 구현했을텐데 팀으로 하나의 목표를 가지고 프로젝트를 진행하니 책임감이 생기게 되고, 프론트엔드와 백엔드의 소통을 어떻게 진행해야 될지 어떤식으로 소통을 해야할지를 조금이나마 알게되는듯하다(?).
1차 프로젝트가 끝날때까지 아직 프로젝트가 끝날때까지는 시간이 남았지만 그 기간동안 우리팀의 최종목표를 최선을 다해 함께 이뤄 나갈수 있기를 .... !!
화..이..또..
