기본에 충실하며 있는 기능들을 충분히 구현해 실력을 올리기로 했다.
1차 프로젝트가 끝난 후 초반엔 자신감이 붙었던 것 같다.
우리 팀이 제일 팀원이 많았고 라이브러리 사용도 가능해서 어떤 것을 해도 일단 할 수 있다고 생각했다.
제품의 상세 페이지를 맡았다.
1차때 느낀 것이 있어 최대한 꼼꼼하게 구현하기 위해 빼는 것보다 일단 만들어 보기로 마음을 먹었다.
팀원들이 엄청 열정적으로 진행하면서 나도 더 열심히 했었다.
만들어야 하는 기능들이 생각보다 많았고 백과의 통신이 주로 된 페이지라 약간 머리 속에 복잡함이 있었던 것 같다.
백을 맡은 팀원분들이 API 문서를 만들고 소통을 자주 하면서 통신은 수월하게 진행되었다.
열정적으로 힘차게 진행이 되었었지만, 스트레스는 없었다.
책에서 읽은 멋진 팀원들을 구축하라는 이유가 무엇인지 직접 느끼게 된 기간이었다.
사람들이 많이 사용하는 라이브러리는 일반적으로 복사 붙여넣기보다 더 심오한 기능과 커뮤니티를 가지고 있다는 것도 알게 되었다.
내가 이번에 사용한 react-hook-form
은 관련해서 자체 제작한 유튜브 강의와 다른 나라 언어로 쓰여있는 문서도 존재했다.
문법에서 eslint가 불만을 표출할때 무시하는 습관을 가지고 있었는데 팀원분들이 그것을 신경 쓰는 것을 보고 fragment가 아니라면 최대한 오류가 안나오게 고쳤었는데 혼자 공부하는 것 보다 팀으로 프로젝트를 하는 것이 성장에 굉장히 도움이 되었었고 이 성장이 코드 실력만을 올려주는 것이 아니라 마인드나 소통능력 등 다양한 것이 포함된다는 것을 다시 한번 알게되었다.
팀원들이 열심히 하고 아직 부족하지만 나도 꽤 성장했는지 완성도가 높은 결과물이 나왔다고 생각한다.
🖥 프론트 - ReviewModal.js
const onSubmit = data => {
const newFormData = new FormData();
const oldFormData = new FormData();
if (!watch('rating')) {
alert('모든 정보를 입력했는지 다시 확인해 주세요');
} else {
if (formMethod.method === 'POST') {
newFormData.set('productId', product_id);
newFormData.set('userId', userId);
newFormData.set('rating', data.rating);
newFormData.set('content', data.content);
newFormData.set('reviewImage', watchImg ? watchImg[0] : null);
fetch('http://localhost:8000/review/', {
method: 'POST',
headers: { Authorization: localStorage.getItem('userId') },
body: newFormData,
})
.then(cleanData(fileImg))
.then(alert('리뷰를 등록했습니다'));
} else if (formMethod.method === 'PATCH') {
oldFormData.set('rating', data.rating);
oldFormData.set('content', data.content);
oldFormData.set('reviewImage', watchImg ? watchImg[0] : null);
fetch(`http://localhost:8000/review/${formMethod.review_id}`, {
method: 'PATCH',
headers: { Authorization: localStorage.getItem('userId') },
body: oldFormData,
})
.then(cleanData(fileImg))
.then(alert('리뷰를 수정했습니다'));
}
}
};
react-hook-form
을 사용하면 자동적으로 데이터들이 올라가는 줄 알고 있었는데 사진이 안올라갔었다.
formdata
를 이용하니 data안에 전달된 사진 file이 들어가게 되었다.
라이브러리를 사용하면 formdata를 사용하지 않는 방법을 찾고 있었는데 이게 고집이 되어서 다른 방법을 찾고 있지 않았던 것을 반성한다.
그리고 headers에는 설정을 할 수 있다는 것을 알게 되었다.
content-type
과 같은 field를 없애야할 때가 있다는 것을 알았다.
🖥 프론트 - Nav.js
useRef
를 이해하는데 도움이 많이된 코드라 생각했다.
🔙 백 - validateToken.js
프론트에서 header를 통해 설정을 하며 무언가를 보낼때 어떤 값이든 해당하는 key값을 주며 보내면 보내지는 것이 신기했었다.
정해져있는 filed만을 보낼 수 있는 것으로 알고 있었지만 http에 대해서 공부의 필요성을 느끼게 되었다.