Day 4
동적라우팅 세션을 들으며 컴포넌트의 라이프사이클에 관해 조금 더 이해할 수 있었다. 화요일 세션에서는 제대로 이해하지 못해 어려웠었다.
우선 페이지를 렌더링 할 때 componentDidMount 메소드를 실행해 fetch함수를 실행해 백엔드에서 데이터를 받아올 수 있다. 그리고 백엔드에서 response를 받았을 때 받은 키 값과 state의 키 값이 같아야한다.
컴포넌트 업데이트 했을 때 (버튼이 눌렸을 때 등) componentDidUpdate를 사용해 post를 백엔드 서버로 보내 여러 작업을 처리할 수 있을 것 같다.
emailValidCheck() {
const regExpression = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
if (regExpression.test(this.state.email) === false) {
this.setState({
isEmailvalid: false,
});
}
}
유효성 검사는 위 코드로 작성했다. 근데 if문 조건 내용을 !regExpression.test(this.state.email)로 작성했는데 렌더링 할 때 조건이 제대로 동작하지 않아 우선은 위에 작성한 코드로 커밋을 했다. .test()가 불리언 타입으로 리턴하는데 렌더링할 때 문제가 있는지 어디가 문제인지 모르겠다. 리뷰를 받고 다시 수정 해봐야 할 것 같다.
Day 5
금요일이라 전 날 새벽까지 작업했는데 여파가 좀 큰 것 같다. 새벽 늦게까지 자지 않는건 고려해봐야겠다.
RESTful API 세션을 듣고 회원가입 페이지의 조건부 렌더링을 구현 완료했다.
Day 6
Footer 작업을 시작했다. 회원가입 페이지 로직은 얼추 다 짜여져 백엔드와 소통하려고 했으나 자꾸 NETWORK 에러가 떠서 하지 못했다.
백엔드와 통신 할 때 axios를 사용해서 해봤다. axios를 사용하니 fetch함수를 사용할 때처럼 json을 string으로 바꾸고 response를 받았을 때 다시 json 형태로 바꿔도 되지 않아 편리했다. axios의 여러 메소드들은 시간을 내서 더 공부 해야겠다.
Day 7
백엔드와 통신을 했는데 호열님과의 api로는 CONNECTION_REFUSED라는 에러를 받았다. 수진님 api와 통신을 해봤는데 200을 받아 우선 다른 작업을 진행하기로 했다. 회원가입 축하 페이지를 작업했다. props로 회원가입 페이지에서 전달 받은 유저의 이름을 페이지에 보여주는 걸 작업했다. 아직 전부 다 끝내지는 못했지만 로직은 거의 짜여졌다. withrouterHOC를 이용해 회원가입을 누르면 컴포넌트로 이동하는 루트로 구현해 볼 예정이다. 쇼핑 계속하기 버튼이 있는데 해당 버튼은 Link컴포넌트로 메인으로 이동 예정이다.
