React

[React] Debounce_lodash 활용

Debounce란? Debounce는 함수를 여러번호출하고 마지막 호출에서 일정 시간이 지난 후 해당 함수의 기능이 동작하는 기법 Debounce는 호출 시 지정된 시간 이후 호출된 가장 마지막 이벤트만 실행되는 기술 Debounce 함수는 lodash의 debounce 함수를 사용할 수 있음 예를 들어 검색창에 "google"을 검색하는 경우 6번의 api 요청을 한다 → 비효율 Debounce를 사용하는 경우 함수는 6번 호출되지만 일정 시간이 지난 후 마지막 호출에서 api 요청을 함 api 호출 횟수가 5번에서 1번으로 감소 → 효율 scroll, resize, input, mousemove 와 같은 이벤트는 짧은 시간 간격으로 연속해서 발생 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출..

[React] redux

리덕스(redux) - 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리 redux를 사용하기 적절한 때 계속해서 바뀌는 상당한 양의 데이터가 있음 상태를 위한 단 하나의 근원이 필요함 최상위 컴포넌트가 모든 상태를 가지고 있는 것은 적절하지 않음 redux 기본 개념 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다. 3. Changes are made with pure functions 변경은 순수함수로만 가능하다. 리듀서..

[React] 리덕스

이론상으로 리덕스를 한번 훑어봤지만 많이 사용되는 라이브러리치고는 사용 이유를 모르겠어서 다시 한번 정리하고자 함 Redux(리덕스)란 Javascript(자바스크립트) 상태 관리 라이브러리이다. 상태 관리 도구가 왜 필요한가? 상태 : React에서 State는 component 안에서 관리되는 것이다. 리액트는 여러 컴포넌트로 구성되어 있다. 각각의 컴포넌트마다 state가 있을 수 있고, useState와 같은 hook으로 상태를 관리할 수도 있다. state가 변경되면 컴포넌트가 리렌더링되어 변하게 된다. 리액트는 단방향 데이터 흐름( 부모 -> 자식) 으로만 데이터가 전달이 가능하기 때문에 자식 컴포넌트도 state에 맞게 변경하려고 한다면 props로 전달해야 한다. 만약 자식 컴포넌트에서도 ..

[React] 백엔드 프로그래밍 : Node.js의 Koa 프레임워크

Node.js 자바스크립트 엔진을 기반으로 웹 브라우저뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임 Koa Node.js 환경에서 웹 서버를 구축할 때 보통 Express, Hapi, Koa등의 웹 프레임워크를 사용 Koa는 Express의 기존 개발 팀이 개발한 프레임워크 Express는 미들웨어, 라우팅, 템플릿, 파일 호스팅 등과 같은 다양한 기능이 자체적으로 내장되어 있음 Koa는 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리를 적용하여 사용 즉, Koa는 우리가 필요한 기능들만 붙여서 서버를 만들 수 있기 때문에 Express보다 훨씬 가벼움 Koa는 async/await 문법을 정식으로 지원하기 때문에 비동기 작업을 더 편하게 관리 미들웨어 Koa 애플리케이션은 미들웨어..

[React] 서버 사이드 렌더링

클라이언트 사이드 렌더링(CSR) UI 렌더링을 브라우저에서 모두 처리하는 것 서버에 html 문서를 요청하는 것이 아니라, 브라우저에서 자바 스크립트로 콘텐츠를 렌더링 하는 것 body 안에 id = "root"만 들어있고, 어플리케이션에 필요한 자바스크립트의 링크만 들어가 있다 html이 비어있기 때문에 처음 접속하면 빈 화면만 보이게 된다 [단점] 사용자가 첫 화면을 보기까지의 시간이 오래 걸릴 수 있다는 점 썩 좋지 않은 SEO(Search Engine Optimization) * SEO : 구글과 네이버와 같은 검색 엔진들은 서버에 등록된 웹 사이트를 돌아다니면서 웹 사이트의 HTML 문서를 분석해서 우리가 검색할 때 웹 사이트를 빠르게 검색할 수 있도록 도와준다 하지만 CSR에서 사용되어지는 ..

[React] 코드 스플리팅

코드 스플리팅(code splitting) 자바스크립트로 개발을 하고 배포하ㅁ는 과정에서 빌드(build) 과정을 거치게 되는데, 이 과정에서 모든 파일들이 하나로 합쳐지게 된다. → 즉, 우리가 index.js, components들로 나눴던 소스 코드들이 하나의 거대한 소스 코드로 합쳐진다는 말임 간단한 프로젝트라면 영향이 적겠지만, 거대한 프로젝트라면(특히 SPA 페이지에서) 길고 많은 자바스크립트 코드(.css, .html도 마찬가지)가 탄생합니다. 이 경우 인터넷 환경이 좋지 못한 곳에서는 거대한 소스 코드들을 불러오는데 상당한 로딩시간을 갖게 됩니다. 이를 개선하고자 코드에서 당장 사용하는 부분만을 로딩하고, 현재 필요하지 않은 코드 부분은 따로 분리시켜 나중에 로드함으로써 로딩시간을 개선하는..

[React] 리덕스 미들웨어를 통한 비동기 작업 관리

API 서버를 연동할 때 API 요청에 대한 상태를 잘 관리해야 함 (ex) 요청이 시작되었을 때는 로딩중을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 한다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 한다. → 리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면 '미들웨어'를 사용해 매우 효율적이고 편하게 상태 관리를 할 수 있음 미들웨어 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행한다 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있음 리듀서가 액션을 처리하기 전에 미들웨어가 할 수 있는 작업 전달받은 액션을 단순..

[React] 리덕스를 사용해 상태 관리

리덕스를 사용할 때는 액션 타입, 액션 생성 함수, 리듀서 코드를 작성해야 함 이 코드를 각각 다른 파일에 작성해도되고 기능별로 묶어서 파일 하나에 작성해도 됨 actions, constants, reducers라는 세 개의 디렉터리를 만드는 방식 편리하지만 새로운 액션을 만들 때 세 종류의 파일을 모두 수정해야 하여 불편함 리덕스 공식 문서에서 사용되는 가장 일반적인 방식 Ducks 패턴 액션 타입, 액션 생성함수, 리듀서 함수를 기능별로 파일 하나에 몰아서 다 작성하는 방식 Ducks 패턴을 사용해 액션 타입, 액션 생성 함수, 리듀서를 작성한 코드를 '모듈' 이라고 한다 [counter 모듈 ( modules/counter.js] 1. 액션 타입을 정의 - 액션 타입은 대문자로 정의 - 문자열 내용..

[React] 리덕스 라이브러리

Redux 가장 많이 사용하는 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있음 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있음 전역 상태를 관리할 때 효과적 단순히 전역 상태 관리만 한다면 Context API를 사용하는 것으로 충분함 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있어서 프로젝트의 규모가 큰 경우 리덕스를 사용 코드 유지 보수성을 높여줌 작업 효율 극대화 미들웨어라는 기능을 제공해 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해줌 액션 상태에 어떤 변화가 필요하면 액션(action)이란 것이 발생 { type: "ADD_TODO", da..

[React] Context API

Context Context는 리액트 컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능 Context API는 Redux나 Mobx 같은 상태관리 라이브러리들의 기반이 됨 전역적으로 사용할 데이터가 있을 때 유용한 기술 예를 들면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용하는데 꼭 전역적일 필요는 없음 → 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트 간에 값을 전달하는 방법이다" 라고 접근을 하는 것이 좋음 컴포넌트에게 데이터를 전달할 때 Props로만 데이터를 전달하게 되면 깊숙히 위치한 컴포넌트에 데이터를 전달해야 하는 경우, 여러 컴포넌트를 거쳐 연달아 Props를 설정해주어야 하기..

[React] 라우팅

라우팅 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것 리액트에서 라우트 시스템을 구축하는 방법 1. 리액트 라우터 가장 많이 사용되는 라이브러리 컴포넌트 기반으로 라우팅 시스템을 설정 2. Next.js 리액트 프로젝트의 프레임워크 파일 경로 기반으로 작동 리액트 라우터의 대안으로 많이 사용됨 멀티 페이지 애플리케이션 (MPA) 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여줌 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합 but..

[React] immer를 사용해 불변성 유지

리액트에서는 배열이나 객체를 업데이트할 때 직접 수정하는 것이 아닌 불변성을 지키며 업데이트 해주어야 한다. const object = { a: 1, b: 2 }; // 직접 수정 X object.b = 3; // ...연산자 이용해 새로운 객체 생성 const nextObject = { ...object, b : 3 }; 객체 뿐만 아니라 배열도 마찬가지로 push, splice 등의 함수를 사용하거나 n번째 항목을 직접 수정하는 것이 아닌 다음과 같이 concat, filter, map 등의 함수를 사용해야 함. const todos = [ { id: 1, text: '할 일 #1', done: true }, { id: 2 text: '할 일 #2', done: false } ]; const inse..