October 04, 2022
기다리던 프론트엔드 원티드 프리온보딩이 열렸다. 이번주는 프리온보딩 사전과제를 수행하면서 겪은 시행착오에 대해서 정리해 보려한다. Assignment 1) 과제 첫번째는 다음과 같은 조건이다. 로그인/ 회원가입을 페이지를 만들고 유효성 검사를 진행하는데 간단하게 이메일은 @을, 비밀번호는 8자 이상이면 되는 조건이라 간단하게 할 줄 알았지만 예상치 못한…
October 05, 2022
Assignment 2) 어제에 이어 API 에러를 해결하기 위해 다시 시도했지만 여전히 같은 에러가 보였다. 뭐가 잘못된건지 다시 한번 확인하러 안내페이지에 다시갔더니.... API 주소가 바뀌어 있었다....ㅜㅜㅜㅜ 어제 안된건 내가 잘못 입력한 게 아니라 진짜 서버가 꺼져있었거나, 주소를 잘못 제공받았던건가 보다... API주소가 처음부터 맞게 …
October 06, 2022
어제에 이어서 과제를 이어서 해나갔다. 4번째와 5번째는 Todo list를 만드는 것으로 많이 해봐서 쉬울 줄 알았지만 API로 todo를 CRUD하기 때문에 조금 달라 찾아보는데 시간이 걸렸다. Assignment 4) 네 번째 과제의 내용은 다음과 같다. 과제를 스타일링과 API를 연결하는 두 가지 일로 분리해서 작업했다. 1. 스타일링 스타일링을…
October 08, 2022
어제 과제에서 요구하는 전반적인 요구사항에 대한 기능은 개발했지만 리팩토링을 할 부분을 세부적으로 많이 보였다. 리팩토링 할 부분들을 정리해보면 다음과 같다. 회원가입과 로그인의 코드중복: 만들다 보니 너무 똑같은 styling과 api 사용이 반복되어서 수정이 필요하다. 폴더나 파일 구조 설계: 리액트를 개인프로젝트를 주로하다보니 폴더 설계나 어떤 곳에…
October 09, 2022
리액트 폴더, 파일 구조 어제 리팩토링에 이어 폴더와 파일구조에 대해 먼저 고민해보았다. 최근에 혼자 프로젝트를 하다보니 파일 구조에 대해서는 크게 생각해본 적이 없었다. 지스트 청원 서비스 같은 경우에는 친구들과 함께 의논하면서 convention을 정해서 했지만 혼자 할 때는 크게 고민을 안했던 부분이라 이번 기회에 한 번 정리하면 좋을 것 같다는 생…
October 10, 2022
남은 리팩토링할 부분들은 axios와 api 예외사항으로 둘다 http 통신과 연관되어있다는 공통점이 있어서 함께 처리해보려 했다. 1. API 예외사항 과제에서 요구하는 부분이 많지 않아 크게 어려움은 없었지만 작성 중에 마주쳤던 에러 사항들에 대해 정리하면 다음과 같다. 컴포넌트 Status code 내용 회원가입 400 Bad Request 동일한 …
October 11, 2022
1. 최적화와 배포 에러 핸들링을 하기 전에 내일까지 배포하는 것이 목표이기 때문에 그전에 여태까지 한 작업들을 최적화하고 배포를 먼저 한 후에 readme작성을 하게 되었다. 우선 최적화는 memo와 useCallback을 이용해 auth와 todo페이지의 불필요한 re-rendering을 막았다. 1.1 auth 페이지 auth 페이지에서는 회원가입…
October 12, 2022
최적화를 위한 todo Btn 컴포넌트 분리 TodoItem은 memo를 통해 최적화를 해두었기 때문에 투두 아이템에 클릭을 하면 다른 투두아이템들이 re-rendering되는 것은 막았다. 하지만 같은 TodoItem 내부에서 클릭되지 않은 버튼들이 다시 re-rendering이 되는 것을 보고, TodoBtn 컴포넌트로 분리하고 memo로 감싸준 다음…
October 13, 2022
새롭게 배운 내용 사전과제의 요구사항 자체는 그렇게 복잡하지 않았다. 하지만 과제를 처음 만들고 나서, 다시 돌아보면서 코드를 고쳐나가면서 배우는 게 많았다. 1. HTTP 통신에 대한 이해 사전과제를 하는 과정에서 wanted에서 제공해 준 서버의 url이 바뀐 적이 있었다. 4시간 정도 구글링도 하고, wanter에서 제공해준 로컬 서버를 클론해와서 …
October 25, 2022
사전 과제 정리 팀원들의 사전 과제들을 서로 발표하고 어떤 점이 좋은지, 왜 이렇게 했는지 서로 의논하고 피드백을 하는 시간을 삼았다. 발표를 위해 먼저 내가 한 사전 과제를 정리해보고 내가 어떤 점이 부족했는지 보완해서 발표하는 시간을 가졌다. 🔨 수정사항 먼저 수정한 부분은 api들을 클래스로 주입해주는 방식이었다. 단순히 함수를 불러와서 쓰는 것이 …