에러 디버깅 & 리팩토링10 간단한 todo 앱 리팩토링 시도기 2편 (함수 추출하기, 컴포넌트 구조개선) 이어지는 글: https://growingtangerine.tistory.com/81 간단한 todo 앱 리팩토링 시도기 1편 (Fetch API, 함수 추출하기) 오늘은 원티드 프리온보딩 지원 과제로 만든 todo앱을 리팩토링해보려고 한다. 지원 가산점 데드라인때문에 코드가 아쉬운 부분이 많아서, 제출 기한 이후에 꼭 리팩토링을 시도해보고 싶었다. growingtangerine.tistory.com 1편에 이어 남은 리팩토링도 계속 해봅시다! 3. 컴포넌트 구조 개선하기 두번째였던 "반복되는 input과 button을 컴포넌트로 빼서 코드의 가독성을 높이는 것" 작업을 수행하기 전에, signin과 signup 컴포넌트에서 좀 더 개선할 부분을 찾았다. 먼저, 반복되는 역할을 하는 코드가 가독성이 좋지.. 2023. 6. 15. 간단한 todo 앱 리팩토링 시도기 1편 (Fetch API, 함수 추출하기) 오늘은 원티드 프리온보딩 지원 과제로 만든 todo앱을 리팩토링해보려고 한다. 지원 가산점 데드라인때문에 코드가 아쉬운 부분이 많아서, 제출 기한 이후에 꼭 리팩토링을 시도해보고 싶었다. 또한, 처음 시도해보는 리팩토링이라 리팩토링의 개념부터 기법까지를 미리 공부해보았다. - 리팩토링이란? 유지보수 생산성 향상을 위해 기능을 변경하지 않고 소스코드를 수정, 보완하는 것. 내부 구조를 개선하고, 성능 최적화보다는 가독성과 유지보수 향상이 목표이다. - 좋은 설계는 개발 속도를 향상시켜준다! 팀 프로젝트에서도, 개인 프로젝트에서도 처음 설계를 철저하게 하지 않고 코드를 짜기 시작해서 중간중간 구조를 개선하는데에 시간을 날린 적이 꽤나 많았다. 초보 개발자들이 흔히 하는 실수겠지만, 이번에 리팩토링을 하면서 .. 2023. 6. 14. Intersection Observer API로 무한스크롤 구현하기 / 비동기 네트워크 요청 버그 해결 의도한 코드 - 페이지가 처음 렌더링 되었을 때, page 파라미터가 없는 요청이 1회 발생 -> 스크롤을 아래로 내렸을 때, page=2 를 파라미터로 갖는 요청이 1회 발생 실제 동작 - 페이지가 처음 렌더링 되었을 때, page 파라미터가 없는 요청과 page=1 파라미터를 갖는 요청이 두번 발생 (이건 strict mode 때문에 개발 환경에서만 발생) / 스크롤을 아래로 내리기 전에도 page=2를 파라미터로 갖는 요청이 1회 발생 fetch 요청이 작성된 코드는 아래 두 부분이다. 1. 초기 요청 (파라미터 X) 2. 페이지 수 증가 시 요청 발생 우선, useEffect의 특성을 잘못 파악하고 있었다. 2번 요청은 페이지가 렌더링 되었을 때, 즉 page 상태값이 1일 때에도 한번 발생한다... 2023. 5. 30. Intersection Observer API 이용하여 무한스크롤 구현하기 / undefined 네트워크 요청 발생 에러 해결 page 상태가 업데이트 될 때마다 fetch 요청을 실행하는 useEffect를 아래와 같이 작성했다. 그랬더니, 두가지 문제가 발생했다. 1. page 2일 때의 요청이 발생하지 않음 2. page 3, 4, 5, ... 요청은 응답 200을 뱉지만 아래 undefined 라는 알 수 없는 요청이 발생했다. 포스트맨으로 api_key와 page 파라미터를 입력하여 GET 요청을 테스트 해보았을 때는 페이지 당 20개의 영화 리스트가 잘 불러와졌다. 두번째 문제 먼저 파악해보았다. undefined 라는 저 알 수 없는 요청은 뭘까? 우선, 첫 번째로 뜬 undefined를 네트워크 탭에서 뜯어보았다. 301번 코드가 무엇인지 찾아보니, 'Moved Permanently' 즉, 요청한 리소스가 Loca.. 2023. 5. 30. 이전 1 2 3 다음
