본문 바로가기

전체 글102

간단한 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.
Todo 앱 구현하기 1. (회원가입, 로그인) 배포링크 Gyuri's Todo App wanted-pre-onboarding-frontend-liard.vercel.app 깃허브 리포지터리 링크 GitHub - ImGyuriKim/wanted-pre-onboarding-frontend Contribute to ImGyuriKim/wanted-pre-onboarding-frontend development by creating an account on GitHub. github.com 원티드 프리온보딩 지원 과제로 Todo앱을 구현하게 되었다. 백엔드 API는 주어지는 상황이었고, API 문서를 참고하여 - 회원가입 - 로그인 - todo CRUD 이렇게 크게 3가지를 구현하는 과제였다. 먼저, 그 중 회원가입과 로그인 기능을 구현한 과정을 기록해보고.. 2023. 6. 13.
프론트엔드가 백엔드와 소통하는 법 (feat. Fetch API / Axios 비교) 프리온보딩 지원 과제로 todo 앱을 만들던 중, 기술에 대한 고민 없이 단순히 fetch 로 네트워크 요청을 보내게 되었다. 그러던 중, POST 요청의 body에 담아서 보내야 하는 데이터 타입이 헷갈렸고, 네트워크 탭의 에러메세지를 보며 디버깅하는데에 시간을 꽤 쓰게 되었다. 그래서 fetch API, axios 라이브러리 등 이미 배웠지만 까먹고 헷갈리는 네트워크 요청에 대해 한번 공부해서 정리해보고자 한다! 이 둘을 비교하고, 어떤 상황에서 어떤 기술을 선택해야 하는지의 기준을 정리해볼 것이다. Fetch API / Axios는 무엇인가? 공통점 - promise 기반의 HTTP 클라이언트이다. 네트워크 요청을 이행했을 떼, resolve / reject 할 수 있는 promise가 반환된다... 2023. 6. 13.

티스토리툴바