👍 Liked
운동 다시 시작
헬스를 2월에 야심차게 다짐해놓고 잠깐 하고 말았다. 점심 식사 중 운동에 대한 얘기를 주고 받다보니, 한 때 운동을 열심히 했었던 그 느낌을 다시 느끼고 싶었다.
때마침 5월이 시작하겠다, 바로 등록해서 다시 시작했다! (이 글을 수정하는 시점(6월 중순)에는 운동 가는게 뜸해져서 '우테코 미라클 모닝'에 가입했다. 오전 6시 기상 - 운동 - 출근 루트를 강제해볼 생각이다. 😀)
협업 미션
2레벨 마지막 미션인 장바구니 미션에서 2주간 협업을 진행하였다. API 설계부터 에러 핸들링까지 전반적인 작업을 같이 진행하였는데, 이렇게 협업을 제대로 해본 것은 처음이라 즐거웠다.
그리고 예전에 과 동기들과 사이드 프로젝트를 진행할 때 배워뒀던 피그마가 이번 협업 미션에서 디자인 시안 내려줄 때 빛을 좀 발했다.
📚 Learned
useState 조금 더 잘 쓰기
useState의 setter에 새로운 값을 넘겨주는 것과 콜백 함수를 넘겨주는 것의 차이를 대략 알고있는 상태였다. 크루들과 해당 부분에 대해 이야기를 주고받다가 콘솔을 찍어본 적이 있었는데 예상한대로 동작하지 않아 공식문서를 좀 파보았고 정리해보았다.
뿐만 아니라 computed value를 통해 불필요한 state를 대체하는 연습 또한 진행해보았다.
Storybook 활용
우테코 미션과 수업을 진행하면서 CDD에 대해 알게되었고, 그 과정에서 '스토리북' 또한 알게되었다.
미션에선 7.0.5 버전을 사용했던 것 같은데, 7 버전으로 올라오면서 문법이 꽤 많이 바뀐 듯하다. 그래도 공식문서가 야무져서 간단한 기능은 어렵지 않게 구사했다.
사용할수록 활용가치가 높은 라이브러리라고 생각이 들었고, 방학 기간동안 (가능하면 스토리북 시리즈를 하나 만들고) 애드온 관련해서 깊게 파볼 생각이다. 🔥
MSW 활용
MSW는 API Mocking 라이브러리라고 볼 수 있겠다. 실제 백엔드 서버 없이 클라이언트 - 서버 간 상호작용을 모킹해주는데, 사용해볼수록 그 활용가치가 높다고 생각이 들었다.
Mock 데이터만을 활용해서 개발을 진행하는 것보다 MSW를 활용하면 실제 비동기 작업을 모킹할 수 있기에 더욱 실제 같은 환경을 구성할 수 있고, 엔드포인트만 변경하면 실제 서버와 통신이 가능한 수준이다. (비동기 로직 및 테스트는 덤)
다만, MSW를 배우면서 사용하는 과정이었기에 빠른 피드백을 받기에는 어려웠고 그 과정에서 여러 삽질도 존재했다. 이 역시 방학기간을 활용하여 빠르고 정교하게 활용할 수 있도록 연습을 많이 해둬야겠다.
Fetch Method는 대문자로
협업 미션을 진행 중에 다른 팀에서 있었던 일이다. 이번 미션에서는 fetch 함수만을 이용하여 API 통신을 진행하라는 제한사항이 있었다.
fetch 함수 인자 중 method를 보통 대문자로 쓰지만 꼭 대문자로 써야하는 줄은 몰랐다. 소문자로 쓰게될 경우 CORS 에러가 난다. 이 때문에 고생하던 팀들이 몇몇 있었다.
즉, 다음과 같이 작성해야한다.
// 정상적인 작성법
fetch(url, {
method: 'POST',
headers: { 'content-Type' : 'application/json' },
body: JSON.stringify(payload)
});
// CORS 발생
fetch(url, {
method: 'post',
headers: { 'content-Type' : 'application/json' },
body: JSON.stringify(payload)
});content-type 은 확인해보던 바론 대소문자로 문제가 발생하진 않는다.
타입스크립트로 API 레이어를 작성했기에 당연히 사전 검사가 이루어질 것이라고 생각했는데, 이 정도까지 검사가 진행되는 것은 아닌거 같다. (그냥 string 검사만 잡아주는 듯하다.)
💦 Lacked
React를 공식 문서 수준으로는 알고가기
4월 회고에서도 작성했던 내용인데, React가 좀 부족한 편이다. 첫 미션에서 리렌더링이 언제 되는지 헷갈렸을 정도이니, 그에 비하면 지금은 많은 성장을 이룬 것은 맞지만 학습의 깊이가 좀 얇다.
미션을 진행하면서 궁금했던 부분을 따로 정리해두었기에, 해당 부분을 확인해보면서 지속적으로 공식문서를 파볼 생각이다.
Storybook, MSW 잘 활용하기
스토리북과 MSW 역시 미션을 진행하면서 처음 써본 라이브러리이기에 학습의 깊이가 많이 얇다. 방학 기간동안 리액트, 스토리북, MSW 이렇게 세 마리의 토끼를 잡고 싶다. (이 글을 수정하는 시점이 방학 기간인데, 나름 그래도 잘 진행하고 있다! 😀)
이제는 사용하는 라이브러리가 러닝 커브가 어느정도 존재하기에 너무 많은 것을 하기보단 몇 개만 뽑아서 집중하는 것이 더 효율적인 것 같다. 사실 저 세 개도 다 하기엔 벅차보인다. (React가 너무.. 🥲)
아무튼 세 라이브러리 모두 공식문서는 잘 되어있으니 방학 기간동안 열심히 파보아야겠다. 🔥
