1. 프로젝트 소개
1-1 이 사이트를 고른 이유
기본에 충실하며 있는 기능들을 충분히 구현해 실력을 올리기로 했다.
2. ☕️ 회고
프로젝트를 시작하기 전
1차 프로젝트가 끝난 후 초반엔 자신감이 붙었던 것 같다.
우리 팀이 제일 팀원이 많았고 라이브러리 사용도 가능해서 어떤 것을 해도 일단 할 수 있다고 생각했다.
프로젝트를 시작하며
제품의 상세 페이지를 맡았다.
1차때 느낀 것이 있어 최대한 꼼꼼하게 구현하기 위해 빼는 것보다 일단 만들어 보기로 마음을 먹었다.
프로젝트를 진행하며
팀원들이 엄청 열정적으로 진행하면서 나도 더 열심히 했었다.
만들어야 하는 기능들이 생각보다 많았고 백과의 통신이 주로 된 페이지라 약간 머리 속에 복잡함이 있었던 것 같다.
백을 맡은 팀원분들이 API 문서를 만들고 소통을 자주 하면서 통신은 수월하게 진행되었다.
열정적으로 힘차게 진행이 되었었지만, 스트레스는 없었다.
책에서 읽은 멋진 팀원들을 구축하라는 이유가 무엇인지 직접 느끼게 된 기간이었다.
사람들이 많이 사용하는 라이브러리는 일반적으로 복사 붙여넣기보다 더 심오한 기능과 커뮤니티를 가지고 있다는 것도 알게 되었다.
내가 이번에 사용한 react-hook-form은 관련해서 자체 제작한 유튜브 강의와 다른 나라 언어로 쓰여있는 문서도 존재했다.
문법에서 eslint가 불만을 표출할때 무시하는 습관을 가지고 있었는데 팀원분들이 그것을 신경 쓰는 것을 보고 fragment가 아니라면 최대한 오류가 안나오게 고쳤었는데 혼자 공부하는 것 보다 팀으로 프로젝트를 하는 것이 성장에 굉장히 도움이 되었었고 이 성장이 코드 실력만을 올려주는 것이 아니라 마인드나 소통능력 등 다양한 것이 포함된다는 것을 다시 한번 알게되었다.
프로젝트 2주가 끝나고
팀원들이 열심히 하고 아직 부족하지만 나도 꽤 성장했는지 완성도가 높은 결과물이 나왔다고 생각한다.
2-1 기록하고 싶은 코드
🖥 프론트 - 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에 대해서 공부의 필요성을 느끼게 되었다.
3. 결론
느낀점
- 필요할 때에 필요한 라이브러리의 사용은 좋다 하지만
- 쉽게 필요한 기능을 사용할 때 코드의 양도 줄어들고 시간도 절약된다. 하지만 남용은 좋지 않다
- 해야한다 보다 하고 싶다는 생각을 하자
- 마음을 긍정적으로 가져야 즐겁고 더 좋은 코드를 얻을 수 있는 것 같다.
- 함부로 브라우저의 console 오류를 무시하지말자
- 문법으로 불평을 한다면 최대한 맞춰주자.
앞으로의 마음가짐
- 매일 30분이라도 흥미를 가지고 있던 스킬이 있다면 탐색을 해본다.
- 코드가 안된다면 고집을 버리고 10분을 쉬고 다시 본다.
- 고장난 코드를 잡고 끌고 가지말자
- 한번 코드의 설계를 했다면 더 좋은 방법이 있는지 다시 생각해보자.
- 팀원의 코드를 보는 것으로 성장이 가능하다. 내 코드도 팀원들에게 공유해본다.
