본문 바로가기

전체 글72

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.
3. 컴포넌트 성능 최적화 우리는 이제 컴포넌트의 성능을 최적화 하는 방법을 알아볼 것입니다. 실습은 다음과 같은 순서로 진행됩니다. 많은 데이터 렌더링 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle, onRemove가 새로워지는 현상 방지 react-virtualized를 사용한 렌더링 최적화 3. 1 많은 데이터 렌더링 이전 실습 내용의 App.js를 다음과 같이 수정해봅시다. function createBulkTodos() { const array = []; for (let i = 0; i { ... }; export default React.memo(TodoListItem); 이제 TodoListItem 컴포넌트는 todo, onRemove, onToggle.. 2023. 7. 26.
2. TodoList API 작성 본격적으로 DRF를 활용하여 실습을 진행해볼게요. 말투가 바뀌었죠? 내맘입니다. 불편하게 글을 쓰니까 적기 싫어져서, 말도 편하게 하려고요 이제는. 하하 아무튼, TodoList API는 기본적인 CRUD기능을 갖춘 시스템을 만드는 것이 목표입니다. 2.1 TodoList API 시작 기본 세팅부터 시작하죠. 다들 아시죠? 생략합니다. 세팅 마지막에는 settings.py에 앱(rest_framework, 내가 만든 앱)을 등록하는 것을 잊지 마세요. 그리고 나중에 만들 파일들을 미리 만들어 놓읍시다. todo 앱 폴더 안에 urls.py, serializers.py 파일을 미리 만듭시다. 최종적인 디렉토리 구성은 다음과 같습니다. models.py 제일 먼저 모델을 생성합시다. 대충 다음과 같이 작성할.. 2023. 7. 21.

티스토리툴바