본문 바로가기

FE21

React를 사용하여 TodoList 만들기 백엔드에서 API가 주어졌고, 나는 React로 TodoList를 만드는 미니 프로젝트를 진행하였다. 요구사항은 다음과 같다. 구현 내용 Data APIs를 제공해주는 React Router 활용하여 아래의 페이지들을 제작합니다 페이지 설명 /: 홈페이지 /todos: todoList 정보를 확인할 수 있는 페이지 페이지에 존재하는 기능 / todo list 제목 작성 todo list 페이지로 이동하는 버튼 제작 /todos CRUD 기능을 하는 버튼 4개 제작 (TodoList에 대한 로컬 상태관리) Firebase Api 명세서를 참고하여 Firebase 연동 및 기능을 구현합니다 뒤로가기 버튼 →/으로 이동합니다 (pop) GET : 데이터 읽기 curl 'https://[SERVER_URL]/t.. 2023. 9. 23.
6. 외부 API 연동하여 뉴스 뷰어 만들기 6.1 비동기 작업의 이해 우리가 만든 웹 앱은 결국 백엔드에서 만들어준 외부 API를 사용해 데이터를 불러옵니다. 이때, API를 호출하면 응답받을 때 까지 시간이 걸리겠죠. Ajax를 사용하여 요청을 보내고, 기다렸다가, 응답을 받으면 데이터를 처리합니다. 이 과정은 비동기적으로 일어납니다. 쉽게 설명해볼게요. 동기적이란 말은, 작업이 끝나면 다른 작업을 하는 것을 말합니다. 비동기적이란 말은, 작업이 동시에 병렬적으로 이루어진다는 것을 말합니다. 동기적(Synchronous)이란 것은 위의 그림처럼 순서대로 작업이 이루어지고요. 비동기적(Asynchronous)이란 것은 위의 그림처럼 동시에 작업이 이루어집니다. 우리의 웹 앱을 동기적으로 처리한다면, 요청에 대한 응답을 받을 때 까지 아무것도 못해.. 2023. 8. 1.
5. React router로 SPA(Single Page Application) 개발하기 5. 1 라우팅이란? 먼저 라우팅이란, 사용자가 요청한 url에 따라 다른 페이지를 보여주는 것을 말합니다. 웹 페이지를 만들때는 단일 페이지로 구성할 수도, 여러 페이지로 구성할 수도 있습니다. 여러 페이지로 구성된 웹 페이지를 만들 때, 페이지별로 컴포넌트를 분리해서 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템입니다. 라우팅 시스템을 위해 많이 사용하는 두 개의 선택지를 소개할게요. React-Router 컴포넌트 기반의 라우팅 시스템을 설정할 수 있습니다. 가장 오래됐고, 가장 많이 씁니다. Next.js 리액트 프로젝트의 프레임워크입니다. 파일 경로 기반의 시스템을 설정할 수 있습니다. 라우팅, 최적화, 다국어지원, SSR(Server-Side-Rendering) 등의 다양한 기능을 지원합.. 2023. 8. 1.
4. immer를 사용하여 더 쉽게 불변성 유지하기 이전 포스팅에서 어떻게 컴포넌트를 최적화 하는지에 대해 배웠습니다. 불변성을 유지하면서 상태를 업데이트 하는 것이 정말 중요했죠. 복잡한 상황에서는 값 하나를 업데이트하기 위해 엄청나게 긴 코드가 필요합니다. 일일이 전개연산자를 써주기에도 참 불편하고 가독성도 떨어집니다. 불변성을 더 편리하게 유지하게 해주는 도구가 immer라고 했고, 이제 immer에 대해 자세히 다뤄볼 예정입니다. 4. 1 immer 설치와 사용법 4. 1. 1 준비 새로운 리액트 프로젝트를 만들고, immer를 설치합시다. $ yarn add immer 4. 1. 2 immer를 사용하지 않고 불변성 유지 일단 immer를 안쓰고 불변성을 유지해볼게요. App.js를 다음과 같이 고쳐봅시다. import { useRef, useC.. 2023. 7. 28.

티스토리툴바