1. 처음부터 코드를 잘 짜야한다. 리팩토링을 하면서 뼈저리게 느낀 것은 처음 짠 코드가 굉장히 중요하다는 것이었다. 처음에 제대로 짜인 코드가 유지 보수 측면에서 굉장히 이점이 있다는 걸 깨달았다. 처음 메인 프로젝트를 진행할 때, 전역으로 관리하는 상태에 대한 필요성에 대해 정확히 알지 못했다. 지금도 정확히 안다고는 표현할 수 없지만, 이번에 리팩토링을 하면서 전역 상태가 왜 필요한지 몸으로 느낀 것 같다. 메인 프로젝트 때에는 그냥 한 컴포넌트에 여러 기능들을 넣어 props로 내리면 되겠지라고 생각을 했다. 따라서 자식 컴포넌트에 props를 전달하고, 또 그 자식 컴포넌트에 props로 연결하여 완성했다. 3개의 컴포넌트로 하나의 페이지를 이루어 사용했지만 그 안에 너무 많은 코드량과 너무 많..
메인 프로젝트를 진행하면서 리팩토링은 꼭 해야겠다고 다짐했었다. 원티드 프리온보딩을 진행하느라 한 달 정도 미뤄졌지만 이제부터라도 진행해야지... 내가 리팩토링을 하려고 한 이유는 1. 컴포넌트의 분리 최대한 기능 별로 컴포넌트와 폴더 구조를 나누고 싶었다. 기능 별로 나누면 어디에 뭐가 있는지 확실히 알게 되고 바로바로 찾아서 작업할 수 있기 때문이다. 한 달만에 다시 코드를 봤는데 내가 짠 코드였는데도 컴포넌트 명이 이상해서 바로바로 찾아가기 어려웠다. 따라서 폴더 명과 컴포넌트 명이 명확하면 유지 보수의 속도가 빨라질 거라 생각했다. 2. React-query의 도입 react-query를 유튜브에서 처음 봤었는데 듣기만 했을 때는 뭐 이런 사기가 다 있어;;라고 생각했었다. 캐싱으로 인해 사용자의..
그동안 진짜 너무 바빠서 블로그 쓸 겨를이 없었던 것 같다. 배운 게 엄청 많아서 복습하느라, 내가 아닌 남이 쓴 코드를 공부하느라, 내가 쓴 코드도 공부하느라 정말 알차게 보냈다. 우리 팀은 각자 역할을 맡아서 합치기로 했는데, 합치는 과정에서 많은 애로사항이 있었다. 다른 팀원의 코드를 가지고 내가 활용하거나 내가 짠 코드를 가지고 다른 팀원이 사용해야 했기에 코드를 이해하기 쉽게 짜려고 노력했고, 또한 재사용성을 고려해서 코드를 짰던 것 같다. 처음에는 각자 역할을 맡아서 하는 게 아니라 각자 코딩을 하고 한 사람 것을 위주로 고치고 제출하는 방향을 원했었지만, 팀원 분들이 각자 역할을 맡아하는 게 좋은 것 같다고 하셔서 마지못해 따랐었다. 돌이켜 보니 혼자 했으면 이렇게 재사용성을 염두하지 않고 ..
Config 저번에 interceptor를 사용하다가 config라는걸 아무 생각없이 붙여다 썼는데 무슨 의미로 썼는지 문득 궁금해서 검색해보았다. config는 configuration(환경 설정)을 줄인 말이다. 프로그램의 매개 변수나 초기 설정 등을 구성하는 데 사용하는 파일이다. XML, JSON 로 저장되기도 한다. Axios type (AxiosRequestConfig, AxiosResponse) axios 관련한 type이 많은 것 같다. typescript는 파도파도 끝이 안보이는 느낌이다. 감이 잡힐만 하면 계속 다른게 나와 ... AxiosRequestConfig => 요청 보낼 타입들이 정리되어 있음. 전부 ?.로 되어있어서 type은 저걸로 뚝딱인거 같다. 요청할 값들의 타입을 지정..
저번 과제에서는 CSS를 만 질 일이 없기도 했고 아침 11시까지 과제를 하다가 하루 종일 잠에 빠져버려 복습을 안 했다. 그래서 이번 과제에서 globalstyle과 theme 사용을 처음 해봤는데 theme는 유지 보수할 때 정말 좋아 보인다. GlobalStyle styled.createGlobalStyle로 글로벌로 쓸 컴포넌트를 만들어 준다. yarn add styled-reset을 이용해 기본적인 글로벌 스타일을 제거하고 위와 같이 코드를 입력해준다. 폰트도 설정할 수 있고, h1, p 값 등의 크기도 조절할 수 있다. index.tsx에 위와 같이 쏵 깔아주면 글로벌 스타일 적용 완성! Theme 예전부터 적용해봐야지 적용해봐야지 하다가 이제야 적용해본다. 이 좋은걸 왜 여태까지... Typ..
사전 과제로 제출했던걸 팀원끼리 리팩토링 해서 하나로 취합하는 과정에서 정말 많은 것을 배울 수 있었다. 특히나 custom hooks의 사용과 CRUD의 분리법 등 정말 시간 가는 줄 모르고 배웠다. 팀원분 중에 한 분이 나가셔서 6명이 되었지만 5명의 스승님들과 함께 하는 마음이라 정말 기쁘다. 특히나 이번에 axios에서 큰 충격을 먹었다. 나는 axios를 그냥 fetch처럼 쓰고 있었구나.. 그냥 빈 껍데기만 쓰고 있었구나라는 것을 깨달았다. create axios create는 custom hook처럼 사용하며 axios 요청 할 때 기본 틀을 만들어 주는 것이다. 주로 주소 값을 넣어 사용하는 것 같다. 보통 axios.(get,post,put,delete)로 썼다면 create로 새로운 변..
메인 프로젝트 리팩토링을 하려고 TypeScript를 공부하는 와중에 프리온보딩이라는 좋은 프로그램을 발견했다. 프리온보딩 커리큘럼은 Ts, Redux, react-query, Next.js를 기업과제를 하며 배우는 방식이다. 물론 리팩토링은 좀 더 뒤로 미뤄지겠지만 기업과제를 하면서 위 4가지를 배울 수 있다는 게 너무 좋아 보여 바로 신청해버렸다... 시간이 남을지는 모르겠지만 시간 남는 대로 리팩토링을 할 예정이다. 주어진 과제만 잘하고 가산점 1점을 주는 기한 내에 제출하면 합격에는 문제없는 듯하다. 물론 잘하는 사람은 가산점 없이도 붙을 듯? 화요일 점심에 OT를 하고, 밤에 수업을 했다. 강의는 일주일에 두 번을 해주시고 강의시간에 기업과제가 나오는 것 같다. 멘토님은 따로 피드백 같은 건 안..
메인 프로젝트 드디어 끝..!!!! 드디어 드디어 끝났다..!! 정말 짧은 1 달이었다. 다소 아쉬운 것도 있지만 그래도 기능 동작은 잘 되니 다행인 것 같다. 흐어엉 데모데이날에 다른 분들이 고쳐야할 부분들을 지적해주셨는데 빨리 해치우고 프로젝트는 그만 만지고 싶다... 잠을 제대로 잔 날이 손에 꼽을 정도로 시간이 너무 부족했고 힘든 나날이었다. 특히 마지막 주는 배포를 하면서 에러와의 전쟁을 치렀다. 마치 밑 빠진 독처럼 뭐 하나 해결하면 다른 게 에러가 나고 후우... 하지만 정말 실력이 눈에띄게 상승했고 나름 만족스러웠던 것 같다. 내가 만든 프로젝트 프로젝트 과정 프리 프로젝트 프리 프로젝트 멤버 그대로 프런트 2명, 백엔드 3명으로 구성된 팀이었다. 프리 프로젝트는 2.5주 였는데 스택 오..