디노문경

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..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 13장 리액트 라우터로 SPA 개발하기 13장 리액트 라우터로 SPA 개발하기 13.1 SPA란? 단일 페이지 애플리케이션(Single Page Application, SPA)는 모던 웹의 패러다임이다. SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다. link tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분를 포함하여 전체 페이지를 갱신하므로..