공부블로그

19강. 코드 스플리팅 리액트 프로젝트를 완성하여 제공할 때는 빌드 작업을 거쳐서 배포해야 한다. 이를 통해 파일 크기를 최소화하고, 문법이 원활하게 실행되도록 코드의 트랜스파일 작업도 할 수 있다. 이 작업은 웹팩이라는 도구가 담당한다. CRA( create react-app )의 기본 웹팩 설정에는 SplitChunks라는 기능이 적용되어 node-modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파일을 자동으로 따로 분리시켜서 캐싱의 효과를 누릴 수 있게 해준다. 코드 비동기 로딩을 통해서는 자바스크립트 함수, 객체, 혹은 컴포넌트를 처음에 불러오지 않고 필요한 시점에 불러와서 사용한다. 19. 1 ) 자바스크립트 함수 비동기 로딩 notify. js export de..

리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다. '미들웨어'를 사용하여 비동기 작업을 처리하는 방법을 알아보자. 1. 미들웨어란? 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 저장된 작업들을 실행한다. 따라서 액션과 리듀서 사이의 중간자라고 할 수 있다. 1.1 미들웨어 만들기 액션이 디스패치될 때마다 액션의 정보와 액션이 디스패치되기 전후의 상태를 콘솔에 보여주는 로깅 미들웨어를 작성해보자. src디렉터리에 lib디렉터리를 생성하고 그 안에 loggerMiddleware. js 파일을 생성한다. next 를 호출하면 그다음 처리해야 할 미들웨어에게 액션을 넘겨주고 미들웨어가 없다면 리듀서에게 액션을 넘겨준다 cons..

상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있어서 코드를 유지 보수하는데 편리 react-redux 라이브러리에서 제공하는 유틸함수와 컴포넌트를 사용 props를 받아와서 화면에 UI를 보여주기만 하는 프레젠테이셔널 컴포넌트와 리덕스와 연동되어 있는 컨테이너 컴포넌트를 분리 UI에 관련된 프레젠테이셔널 컴포넌트는 src/components 에 작성, 리덕스와 연동된 컨테이너 컴포넌트는 src/containers 컴포넌트에 작성 1. UI 준비하기 ( 프레젠테이셔널 컴포넌트 ) components 디렉터리 안에 Counter. js 와 Todos. js 를 작성해주고 App 컴포넌트에서 렌더링해준다. 2. 모듈 작성하기 ( 리덕스 ..

14. 1 ) 비동기 작업의 이해 비동기적으로 작업을 처리하면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러 가지 요청을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. 네트워크 송수신 과정에서 시간이 걸리는 API호출, setTimeout 함수를 사용한 특정 작업을 예약할 때 비동기적으로 처리한다. 예를 들어 다음 코드는 3초후에 printMe함수를 호출한다. function printMe() { console.log('Hello World'); } setTimeout(printMe, 3000); console.log('대기 중....'); printMe 함수 자체를 setTimeout 함수의 인자로 전달해 주는데, 이런 함수를 콜백함수라고 한다. Promise는 콜백 지옥 같은..

13. 1 ) SPA란? SPA란 Single Page Application의 약자로 싱글 페이지 애플리케이션이라는 의미이다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 해석한 뒤 보여준다. 하지만 이런 방식은 성능상의 문제가 발생할 수 있다. 그래서 최근에는 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해준다. SPA의 경우, 서버에서 사용자에게 제공하는 페이지는 한 종류이지만 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저 주소 상태에 ..

11. 1 ) 많은 데이터 렌더링하기 createBulkTodos라는 함수를 만들고 useState의 초기값에 파라미터로 넣어서 많은 데이터를 렌더링해보자. import React, { useState, useRef, useCallback } from 'react'; ... function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); //기본값에 파라미터로 함수 형태를 넣어주면 컴포넌트가 처음 렌더링될 때만 createBulkTodos함수 실행된다. //ref를 사용하여 변수 담기 const nextId = useRef(2501); ... export ..

일정관리 웹 애플리케이션을 만들어 보자. 10. 1 ) 프로젝트 준비하기 1. 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn create-app todo-app 으로 새로운 프로젝트를 생성하고 $ yarn add node-sass classnames react-icons 로 필요한 라이브러리를 설치한다. //react-icons는 리액트에서 아이콘을 사용할 수 있는 라이브러리로, SVG형태로 이루어진 아이콘을 리액트 컴포넌트처럼 쉽게 사용할 수 있다. 2. Prettier 설정 2장에서 배웠던 Prettier를 설정하여 코드를 작성할 때 코드 스타일을 깔끔하게 정리해보자. 프로젝트의 최상위 디렉터리에 .prettierrc를 작성 3. index.css 수정 4. App컴포넌트 초기화 ( 프로젝트 ..

리액트에서 컴포넌트를 스타일링할 때는 다음 방식들을 사용한다. 일반 css : 컴포넌트를 스타일링하는 가장 일반적인 방식 Sass : 자주 사용되는 css 전처리기 중 하나로, 확장된 css 문법을 사용하여 css 코드를 더욱 쉽게 작성할 수 있다. CSS Module : 스타일링을 작성할 때 css 클래스가 다른 css클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 9. 1 ) 가장 흔한 방식, 일반 CSS 프로젝트는 일반 css방식으로 만들어져 있다. 소규모 프로젝트를 개발하고 있다면 기본 css 시..