디노문경

비동기 처리의 이해 자바스크립트는 동기적(Synchronous)으로 동작하는 언어이다. 따라서 순차적으로 코드가 실행된다. 동기라는 단어는 동일한 기차길이라고 생각하면 이해하기 쉽다. (from 얄팍한 코딩사전) 우리가 집안일을 할 때, 세탁기를 돌려 놓고 다른 집안일을 하는 것(비동기)이 더 빠르게 일을 처리할 수 있는 것처럼 프로그램이 실행될 때도 비동기(Asynchronous) 처리를 해야 하는 상황이 존재할 수 있다. 예를 들어, 다음과 같은 코드는 work()함수가 종료되고 나서야 console.log('다음 작업')이 실행된다. 따라서, 만약 work() 함수가 굉장히 오래걸리는 함수라면 그동안 다른 코드들이 실행되지 못하므로 사용자가 불편을 느끼는 상황이 발생할 수 있다. 이런 경우에 wor..

yarn add http-proxy-middleware // src/setupProxy.js const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = (app) => { app.use( createProxyMiddleware('/v1/search/movie.json', { target: 'https://openapi.naver.com', changeOrigin: true, }), ); app.use( createProxyMiddleware('/api', { target: 'http://localhost:4000/', changeOrigin: true, }), ); }; 위와 같이 설정을 해주면 이제 리액트 애플..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 24장 프런트엔드 프로젝트: 시작 및 회원 인증 구현 24장 프런트엔드 프로젝트: 시작 및 회원 인증 구현 앞으로 개발할 기능 회원가입/로그인 글쓰기 포스트 목록 보기/포스트 읽기 포스트 수정 및 삭제 프로젝트를 처음 만들고 나서 설계를 시작할 때 가장 먼저 무엇을 하면 좋을까요? 바로 리액트 라우터를 프로젝트에 설치하고 적용하는 것입니다. 앞으로 만들 라우트 컴포넌트 LoginPage RegisterPage WritePage PostPage PostListPage 라우터 적용 // src/pages/LoginPage.js import React from 'react'; const LoginPage = () => { ..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 23장 JWT를 통한 회원 인증 시스템 구현하기 23장 JWT를 통한 회원 인증 시스템 구현하기 JWT의 이해 JWT는 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 의미함. 인증 방식에는 대표적으로 세션 기반 인증과 토큰 기반 인증이 존재함. 세션 기반은 서버에서 사용자가 로그인 중임을 기억. 만약 서버의 인스턴스가 여러 개가 된다면, 모든 서버끼리 같은 세션을 공유해야 하므로 세션 전용 데이터베이스를 만들어야 할 뿐 아니라 신경 써야 할 것도 많음. 토큰 기반은 로그인 이후 서버가 만들어 주는 문자열(토큰)(로그인 정보, 서버에서 발급되었음을 증명하는 서명 포함)을 사용자가 가지고..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 21장 백엔드 프로그래밍: Node.js의 Koa 프레임워크 22장 mongoose를 이용한 MongoDB 연동 실습 Koa Koa는 Express의 기존 개발 팀이 개발한 프레임워크. Express는 미들웨어, 라우팅, 템플릿, 파일 호스팅 등과 같은 다양한 기능이 자체적으로 내장되어 있는 반면, Koa는 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리를 적용하여 사용함. 그래서 Express 보다 훨씬 가벼움. // src/index.js const Koa = require('koa'); const app = new Koa(); app.use((ctx) => { ctx.body = 'hello world';..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 19장 코드 스플리팅 19장 코드 스플리팅 CRA의 기본 웹팩 설정에는 SplitChunk라는 기능이 적용되어 node_modules에서 불러온 파일, 일정 크기 이상의 파일, 여러 파일 간에 공유된 파일을 자동으로 따로 분리시켜서 캐싱의 효과를 누릴 수 있게 해줌. 이렇게 파일을 분리하는 작업을 코드 스플리팅이라고 함. 하지만 프로젝트에 기본 탑재된 SplitChunks기능을 통한 코드 스플리팅은 단순히 효율적인 캐싱 효과만 있음. 예를 들어 페이지 A, B, C로 구성된 SPA를 개발한다고 했을 때, 사용자가 A 페이지에 방문했다면 B, C 페이지에서 사용하는 컴포넌트 정보는 필요하지 않음. (사용자가 B 또는 C..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 18장 리덕스 미들웨어를 통한 비동기 작업 관리 18장 리덕스 미들웨어를 통한 비동기 작업 관리 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있고 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다. 리덕스 미들웨어: C..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 17장 리덕스를 사용하여 상태 관리하기 앞의 16장에서는 리덕스를 사용할 때 스토어의 내장 함수인 store.dispatch와 store.subscribe 함수를 사용했지만 리액트 애플리케이션에서 리덕스를 사용할 때는 store 인스턴스를 직접 사용하기보다는 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용하여 리덕스 관련 작업을 처리합니다. 흐름 1. 프로젝트 준비 (생략) 2. 프레젠테이셔널 컴포넌트 작성 3. 리덕스 관련 코드 작성 4. 컨테이너 컴포넌트 작성 5. 더 편하게 사용하는 방법..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 15장 Context API 16장 리덕스 라이브러리 이해하기 15장 Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다. 흐름 Context API를 사용한 전역 상태 관리 흐름 이해하기 (생략) 기본적인 사용법 익히기 동적 Context 사용하기 Consumer 대신 Hook 또는 static contextType 사용하기 15.2 Context API 사용법 익히기 15.2.1 새 Context 만들기 // contexts/color.js import { createContext } from 'react'; const ColorContext = c..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 14장 외부 API를 연동하여 뉴스 뷰어 만들기 14장 외부 API를 연동하여 뉴스 뷰어 만들기 흐름 비동기 작업의 이해 (생략) axios로 API 호출해서 데이터 받아오기 newsapi API 키 발급받기 뉴스 뷰어 UI 만들기 데이터 연동하기 카테고리 기능 구현하기 리액트 라우터 적용하기 14.2 axios로 API 호출해서 데이터 받아 오기 axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트입니다. 이 라이브러리의 특징은 HTTP 요청을 Promise 기반으로 처리한다는 점입니다. async, await을 사용하지 않았을 때 import React, { useState } from 're..