Per ardua ad astra.

Context API를 이용하여 전역 상태 관리하기들어가며리액트(React.js)에서 Context API를 이용하여 전역 상태 관리하는 방법을 정리해본다.Context API를 이용하면 따로 패키지를 설치하지 않고도 전역 상태를 관리할 수 있다. Context API개념컴포넌트 트리에서 전역 상태를 보다 쉽게 공유할 수 있는 기능을 제공하는 API이 방법을 이용하면, 프롭 드릴링(Props Drilling)을 피할 수 있다. 방법① context 파일 생성하기전역으로 사용할 상태를 정의하는 @Context.js@ 파일을 생성한다. ./src/context.jsimport { createContext, useContext, useState } from 'react';// (1) Context 생성하기co..

react-toastify 라이브러리들어가며간단하게 토스트(Toast) 메시지를 띄워야할 때 @react-toastify@ 라이브러리를 사용할 수 있다.@react-toastify@ 라이브러리의 사용법을 간단하게 정리해본다. react-toastify 라이브러리개념리액트 애플리케이션에서 사용자에게 알림을 제공하는 토스트 메시지(Notification)를 쉽게 구현할 수 있게 해주는 라이브러리이 라이브러리를 사용하여 다양한 스타일과 애니메이션 효과로 간단하게 알림을 띄울 수 있다.기본적으로 설정이 간편하며, 다양한 사용자 정의 옵션을 제공하여 알림을 원하는 대로 커스터마이징할 수 있다. 라이브러리 설치$ npm install react-toastify # yarn add react-toastify 사..

uuid, nanoid 라이브러리 사용하기 (key)들어가며다음과 같이 @map@을 이용하여 요소를 하나하나씩 표현할 경우 @key@ 값을 지정해야 하는데 어떤값을 @key@ 값으로 지정해야할 지 모를 경우가 많다.이때, @uuid@ 또는 @nanoid@ 라이브러리를 이용하면 이 고민을 해결할 수 있다.import { data } from './data.js';export default const App = () => { return ( {data.map((item) => {item.content}} )}  uuid 라이브러리개념@uuid@는 Universally Unique Identifier 의 약자로, 전 세계에서 고유한 값을 생성할 수 있는 식별자이다.@u..

로컬 스토리지(LocalStorage)에 내용을 저장하고, 전역 상태 관리 라이브러리(Redux)와 동기화 하는 방법들어가며리액트(React.js)에서 특정 변수를 로컬 스토리지(Local Storage)에 저장하고, 전역 상태 관리 라이브러리(Redux)와 동기화 시키는 방법을 정리해본다.이렇게 함으로써, 사용자의 입력을 받아 특정 변수를 화면에 표시해줘야 할 경우 새로고침을 해도 동일한 내용이 표시되게 할 수 있다. 로컬 스토리지(Local Storage)개념브라우저에 데이터를 영구적으로 저장할 수 있는 방법브라우저가 닫혀도 데이터가 유지되며, 도메인별로 구분되어 저장된다.로컬 스토리지는 키-값(Key-Value) 형식으로 데이터를 저장하며, 데이터는 문자열 형식으로만 저장할 수 있다.따라서 객체(O..

try-except 문 사용할 때 에러 발생 시, 전체 에러 정보 표시 방법들어가며@try-except@ 문을 사용할 때, 에러를 표시하고 싶을 때가 있다.다음과 같이 에러를 표시할 경우, 에러 정보 중 1줄 정도만 짧게 출력된다.이때 1줄이 아닌, 여러 줄의 모든 에러 정보가 표시되도록 하는 방법을 정리해본다.try: print(1 / 0)except Exception as e: print(e)division by zero  방법@traceback@ 모듈 사용하기@traceback@ 모듈을 @import@하여 @try-except@ 문의 예외 처리 부분에 다음과 같이 넣어주면 된다.import tracebacktry: print(1 / 0)except Exception as e: ..

fetch() API와 Axios의 에러 처리 방법 비교들어가며FetchAPI와 Axios의 에러 처리 방법의 차이에 대해 간단하게 정리해본다. 오류 처리 방법 비교fetch() API기본적으로 네트워크 요청이 성공적으로 완료되었는지를 상태 코드(Status Code)가 아닌, 네트워크 오류 여부로 판단한다.즉, 네트워크 연결이 제대로 되어 서버에 요청이 전달되고, 서버로부터 응답이 왔다면, 그 응답이 200번대(성공) 상태 코드인지, 400번대(클라이언트 오류) 또는 500번대(서버 오류) 상태 코드인지와 상관없이 요청이 '성공적으로' 완료된 것으로 간주한다.이 경우 @fetch()@는 프로미스(Promise)를 성공 상태로 반환하며, 응답 객체를 @resolve@한다.이 때문에 4xx 또는 5xx와 ..

전개 연산자 (Spread Operator, ...)들어가며자바스크립트(JavaScript)에서 사용할 수 있는 전개 연산자(Spread Operator, @...@)에 대해 정리해본다. 전개 연산자(Spread Operator, @...@)개념배열(Array)이나 객체(Object)를 쉽게 확장하거나 복사할 수 있는 기능배열, 객체, 함수 호출에서 다양하게 사용할 수 있다.배열의 병합 & 복사객체의 병합 & 복사함수 호출 시 인수 확장전개 연산자를 사용할 때, 얕은 복사(Shallow Copy)가 이루어진다.ES6(ECMAScript 2015)부터 사용할 수 있다. 얕은 복사는 객체나 배열의 최상위 수준만 복사한다. (중첩된 객체나 배열은 원본 데이터에 대한 '참조'를 유지한다.) 따라서 전개 연산자를..

컴포넌트를 생성하는 방법 2가지 (JSX, React.createElement)들어가며리액트(React.js)에서 컴포넌트를 생성하는 방법 2가지를 정리해본다. 컴포넌트 생성 방법① 함수형 컴포넌트function Greeting() { return ( hello world );} 함수형 컴포넌트는 자바스크립트 함수로 정의되며, JSX(JavaScript XML) 문법을 사용하여 UI를 반환한다.@@와 @@ 태그를 사용하여 UI를 정의한다.JSX는 Babel 같은 컴파일러를 통해 @React.createElement@ 호출로 변환된다.코드가 더 직관적이고 읽기 쉬우며, 컴포넌트를 작성할 때 HTML과 유사한 문법을 사용할 수 있다. ② @React.createElement@imp..

리액트 스니펫(Snippet) 정리들어가며비주얼 스튜디오 코드(VS Code)의 리액트(React.js) 스니펫 확장(ES7+ React/Redux/React-Native snippets)을 설치한 후 사용할 수 있는 스니펫들을 정리해본다.  스니펫(Snippet)프로그래밍에서 자주 사용되는 코드 조각이나 템플릿일반적으로 반복적으로 작성해야 하는 코드를 빠르고 효율적으로 생성할 수 있도록 도와주는 기능 VS Code 확장 설치리액트 스니펫을 VS Code에서 사용하려면, 아래의 확장 프로그램을 설치해줘야 한다.ES7+ React/Redux/React-Native snippets ES7+ React/Redux/React-Native snippets - Visual Studio MarketplaceExten..

Create React App과 Vite들어가며리액트(React.js) 애플리케이션을 빠르게 설정하고 개발할 수 있게 해주는 툴인 Create React App과 Vite에 대해 정리해본다.Create React App(CRA)개념페이스북(메타)에서 개발한 리액트 공식 애플리케이션 설정 도구리액트로 새 프로젝트를 시작할 때 필요한 모든 설정을 자동으로 해주기 때문에, 개발자는 코드 작성에 집중할 수 있다. 특징Zero Configuration복잡한 설정 없이 바로 사용할 수 있다.프로젝트 설정, 빌드 도구(웹팩 등), Babel 설정 등을 기본으로 제공하여, 개발자가 직접 설정할 필요가 없다.Out-of-the-box기본적인 리액트 개발 환경을 갖추고 있다.ESLint, Jest, Service Work..

for 문 정리 (for, for...in, for...of, forEach, for await...of)들어가며자바스크립트(JavaScript)에서 사용할 수 있는 for 문(@for@, @for...in@, @for...of@, @forEach@, @for await...of@)에 대해 간단하게 정리해본다. 종류① @for@ 문특정 횟수만큼 반복할 때 사용한다.for (initialization; condition; increment) { // 반복할 코드} 예제 코드for (let i = 0; i  ② @for...in@ 문객체의 열거 가능한 속성을 반복할 때 사용한다.배열(Array)에서도 인덱스를 반복할 수 있지만, 일반적으로 객체(Object)에 사용된다.for (const key in ob..

함수형 업데이트와 직접 참조 업데이트들어가며리액트(React.js)에서 상태(Status)를 업데이트할 때, 함수형 업데이트 방법과 직접 참조 업데이트 방법의 차이에 대해 정리해본다. 함수형 업데이트(Functional Update)setPosts((prevPosts) => [postData, ...prevPosts])상태 업데이트가 이전 상태를 기반으로 이루어진다.함수형 업데이트를 사용할 경우, 다음과 같은 장점이 있다.장점설명안전성- 리액트의 상태 업데이트는 비동기적으로 이루어지기 때문에, 여러 상태 업데이트가 동시에 발생할 수 있다.- 이때, 함수형 업데이트 형태를 사용하면 최신 상태 값을 보장할 수 있다.- @prevPosts@는 항상 현재 상태의 최신 스냅샷을 제공한다.동시성 처리- 상태 업데이..

조건부 렌더링 방법 정리들어가며리액트(React.js)에서의 조건부 렌더링 방법을 정리해본다. 조건부 렌더링(Conditional Rendering)개념특정한 조건에 따라 UI의 일부를 보여주거나 숨기는 방법 방법① 조건부 연산자 / 삼항 연산자(? :)조건부 렌더링을 쉽게 구현할 수 있는 방법조건이 참일 때는 특정 컴포넌트를 렌더링하고, 거짓일 때는 다른 컴포넌트를 렌더링하거나 아무 것도 렌더링하지 않게 할 수 있다.function Example({ isVisible }) { return ( {isVisible ? 이 내용은 보입니다! : 이 내용은 보이지 않습니다!} );} ② 논리 연산자(&&)논리 @&&@ 연산자를 사용하여 조건이 참일 때만 렌더링하도록 할 수 있다.조건..

! 연산자(Non-null Assertion Operator)들어가며타입스크립트(TypeScript)에서 사용되는 @!@ 연산자(Non-null Assertion Operator)에 대해 정리해본다.이 연산자는 타입스크립트에서만 사용할 수 있다. ! 연산자(Non-null Assertion Operator)개념컴파일러에게 해당 표현식이 @null@ 또는 @undefined@가 아님을 보장한다고 알리는 역할을 하는 연산자 사용 예let value: string | null | undefined = "Hello";// 여기서 타입스크립트는 value가 null 또는 undefined일 수 있다고 경고할 수 있다.let length = value!.length; // ! 연산자를 사용하여 컴파일러 경고를..

MODULE_NOT_FOUND (Error: Cannot find module ~\react-scripts\bin\react-scripts.js) 오류 해결 방법들어가며아래와 같은 타입스크립트(TypeScript) 컴파일 시 발생하는 경로 관련 오류를 해결하는 방법을 정리해본다.> my-react-app@0.1.0 start > react-scripts start 'Learn\react\react-beginner\my-react-app\node_modules\.bin\' is not recognized as an internal or external command, operable program or batch file. node:internal/modules/cjs/loader:1080   throw ..

제네릭(Generic)들어가며타입스크립트(TypeScript)에서 사용되는 제네릭(Generic)에 대해 정리해본다. 제네릭(Generic)개념유연하면서도 타입 안전성을 제공하는 방법제네릭을 사용하면 함수나 클래스를 다양한 타입과 함께 사용할 수 있으며, 타입을 구체적으로 지정할 수 있다. 제네릭의 필요성아래의 @insertAtBeginning@ 함수를 보자.이 함수는 배열과 값을 매개변수로 받아, 값이 배열의 맨 앞에 추가된 새로운 배열을 반환한다.function insertAtBeginning(array: any[], value: any) { return [value, ...array];}const updatedArray = insertAtBeginning(demoArray, -1); // [-1,..

타입스크립트의 자료형(TypeScript)들어가며타입스크립트(TypeScript)에서 사용되는 자료형(DataType)을 간단하게 정리해본다. 타입스크립트의 자료형① 원시 자료형(Primitives)@number@ : 숫자형 (정수, 소수 등)@string@ : 문자열 @boolean@: @true@ 또는 @false@ 값@null@, @undefined@ : 기본적으로 모든 타입의 서브타입으로 취급된다.// (1) 숫자let age: number;age = 25;// => let age: number = 25;// (2) 문자열let name: string;name = "Peter";// => let name: string = "Peter";// (3) Booleanlet isActive: boolea..

파이썬(Python)으로 MongoDB 사용하기 (pymongo)들어가며파이썬(Python)으로 MongoDB를 사용하는 방법을 간단하게 정리해본다. MongoDB개념NoSQL 데이터베이스유연한 스키마와 JSON과 유사한 문서 구조를 제공한다.파이썬(Python)에서 MongoDB를 사용하려면 @pymongo@ 라이브러리를 사용해야 한다.@pymongo@ 라이브러리는 MongoDB와의 상호작용을 간단하게 해주는 파이썬 클라이언트이다.MongoDB에서는 데이터베이스 내에 컬렉션(Collection)이라는 단위로 데이터를 저장한다. 또 컬렉션 안에는 문서(Document)가 들어간다. (데이터) 설치하기파이썬에서 MongoDB를 사용하기 위해서는 @pymongo@ 라이브러리를 설치해줘야 한다.$ pip in..

검색 시, 특정 폴더를 검색 범위에서 제외시키는 방법들어가며VS Code에서 검색을 할 때 @node_modules@ 등 특정 폴더를 검색 범위에서 제외하고 싶을 때가 있다.전역적으로 설정하는 방법과 프로젝트 별로 특정 폴더를 검색 범위에서 제외시키는 방법이 존재한다. 방법VS Code 설정 파일인 @settings.json@ 파일에 @search.exclude@키와 값을 설정해주면 된다. ① 전역적으로 특정 폴더를 검색 범위에서 제외시키기VS Code를 이용하여 검색을 할 때, 프로젝트에 관계 없이 전역적으로 특정 폴더를 검색 범위에서 제외시키는 방법이다.@[Ctrl]@ + @[Shift]@ + @[P]@를 눌러 명령 팔레트(Command Palette)를 실행한다.@Preferences: Open U..

Compound Component 패턴들어가며리액트(React.js)에서 자주 사용되는 디자인 패턴(Design Pattern) 중 하나인 Compound Component 패턴에 대해 정리해본다. Compound Component 패턴개념서로 관련된 여러 개의 컴포넌트를 하나의 부모 컴포넌트 안에 캡슐화하는 방식컴파운드 컴포넌트의 주요 아이디어는 사용자 인터페이스(UI)를 구성하는 여러 작은 컴포넌트를 하나의 상위 컴포넌트 안에서 조합하여 더 복잡한 UI를 만드는 것이다. Coompound Component 패턴의 적용 예 : @ - @ Option 1 Option 2 Option 3 Option 4 장점동일한 컴포넌트를 다양한 방식으로 재사용할 수 있다.컴포넌트의 내부 구조를 변..

Framer Motion 라이브러리들어가며Framer Motion 라이브러리에 대해 정리해본다. Framer Motion개념인터랙티브 웹 애니메이션과 UI 디자인을 쉽게 구현할 수 있도록 도와주는 라이브러리리액트 프레임워크와 함께 사용되며, 프론트엔드 개발자가 애니메이션을 더 직관적이고 효율적으로 만들 수 있게 도와준다.강력한 API를 제공하여 복잡한 애니메이션을 쉽게 작성할 수 있게 해주며, 코드 기반의 애니메이션을 만들 때 생산성을 높여준다. 설치$ npm install framer-motion # yarn add framer-motion 주요 기능기본적인 모션을 쉽게 적용할 수 있다.위치, 크기, 불투명도 등의 속성을 애니메이션화할 수 있다.드래그와 같은 인터랙션을 손쉽게 구현할 수 있다.예를..

정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)들어가며사전 렌더링 방법인 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)에 대해 정리해본다. 정적 생성(Static Generation)개념웹 페이지를 미리 생성하여 HTML 파일로 저장하는 방식웹 사이트의 빌드 단계에서 모든 페이지가 사전에 렌더링되며, 사용자가 페이지를 요청할 때 서버에서 미리 생성된 HTML 파일을 즉시 제공하는 방식빠른 로딩 속도와 서버 부하 감소를 위해 사용SSG(Static Site Generation)이라고도 한다. 장점페이지가 미리 생성되어 있으므로, 사용자는 빠르게 페이지를 볼 수 있다. (빠른 페이지 로딩)요청..

메타데이터(Metadata) 추가하기들어가며Next.js에서 컴포넌트에 메타데이터(Metadata)를 추가하는 방법을 정리해본다. 메타데이터(Metadata)웹페이지에 대한 추가 정보를 제공하는 데이터주로 HTML 문서의 @@ 태그 안에 포함되어 있으며, 검색 엔진 최적화(SEO), 소셜 미디어 공유, 브라우저 설정 등 여러 목적으로 사용된다. 메타데이터  추가하기정적 페이지(Static Page)와 동적 페이지(Dynamic Page)에 메타데이터를 추가하는 방법이 다르다. 정적 페이지방법페이지나 레이아웃 파일에 @metadata@라는 이름의 상수를 내보내는 방식을 통해 메타데이터를 설정할 수 있다.export const metadata = { title: 'All Meals', descriptio..

Suspense 컴포넌트들어가며리액트(React.js)에서 사용되는 @Suspense@ 컴포넌트에 대해 정리해본다. Suspense 컴포넌트개념애플리케이션의 비동기 데이터를 쉽게 관리하고 사용자 경험을 개선하기 위해 도입된 기능주로 데이터 로딩 상태를 처리하는데 사용된다.이 컴포넌트를 사용하여 비동기 데이터가 로딩될 때 사용자에게 로딩 스피너(Spinner)나 대체 컨텐츠를 보여줄 수 있다. 사용법@Suspense@ 컴포넌트는 주로 다른 비동기 컴포넌트를 감싸는 용도로 사용된다.@Suspense@는 @fallback@ 이라는 프로퍼티를 통해 로딩 중에 보여줄 컨텐츠를 지정할 수 있다.Loading...}>   사용 시 주의할 점@Suspense@는 클라이언트 측 렌더링에서 동작한다.서버 사이드 렌더링에..

서버 컴포넌트와 클라이언트 컴포넌트들어가며Next.js는 서버 컴포넌트와 클라이언트 컴포넌트의 개념을 도입한 리액트 기반의 풀스택(Full-Stack) 프레임워크이다.Next.js는 단순히 프론트엔드 라이브러리인 리액트를 넘어 서버 측에서도 코드를 실행할 수 있는 기능을 제공한다. 서버 컴포넌트개념Next.js 프로젝트에서는 모든 리액트 컴포넌트가 기본적으로 서버에서 렌더링 된다.이 컴포넌트들을 서버 컴포넌트라고 하며, 브라우저가 아닌 서버에서 실행된다. 예다음과 같이 컴포넌트에 로그를 출력하면, 웹 브라우저 개발자 도구(클라이언트 단)가 아닌, IDE(서버 단)의 터미널에서 로그를 확인할 수 있다. 장점성능 향상클라이언트 측에서 다운로드해야 할 자바스크립트(JS) 코드가 줄어든다. SEO 개선서버 단에..

Image 컴포넌트들어가며Next.js에서 기본으로 제공하는 Image 컴포넌트에 대해 정리해본다. Image 컴포넌트개념Next.js에서 다양한 퍼포먼스 기능과 편리한 설정을 지원하는 컴포넌트 이미지 컴포넌트를 이용하면 이미지 불러오기 작업을 최적화할 수 있다. 또한 이미지 크기 조정, 지연 로딩(Lazy Loading)을 지원하며, WebP와 같은 최신 이미지 형식이 자동으로 처리된다. 다양한 기기와 화면 크기에 맞게 이미지 크기를 유동적으로 조절할 수 있다. 사용 방법기본 사용법@next/image@ 모듈을 불러와서 사용한다.import Image from 'next/image';export default function Home() { return ( Next.js Image E..

Cannot find module 'next/babel' 오류 해결하기 (Next.js)들어가며VS Code에서 Next.js 프로젝트를 작업할 때 아래와 같이 오류가 발생할 경우 해결하는 방법을 정리해본다. 방법프로젝트의 최상위 경로에 @.babelrc@ 파일을 생성하고, 파일 안의 내용을 다음과 같이 작성한다. /.babelrc{ "presets": ["next/babel"], "plugins": []} 그리고 프로젝트의 최상위 경로에 있는 @.eslintrc.json@ 파일을 열고 다음과 같이 내용을 수정해준다. /.eslintrc.json@extends@의 값(Value)을 배열(Array) 형태로 만들어주고, @"next/babel"@ 값을 배열에 넣어준다.{ "extends": ["nex..

낙관적 업데이트(Optimistic Updates) (React Query)들어가며리액트 쿼리(React Query)에서 사용되는 낙관적 업데이트(Optimistic Updates)에 대하여 정리해본다. 낙관적 업데이트(Optimistic Updating)개념데이터가 실제 서버에 반영되기 전에 미리 UI에 반영하여 사용자 경험(UX)을 향상시키는 기법사용자가 서버 응답을 기다리지 않고도 즉각적인 피드백을 받을 수 있게 해준다. 주요 단계① 변경 전 상태 저장낙관적 업데이트를 수행하기 전에, 현재 상태를 저장한다.이 작업은 서버 요청이 실패했을 경우 원래 상태로 롤백(Rollback)하기 위해 필요하다. ② 낙관적 상태 업데이트서버에 데이터를 전송하기 전에, 리액트 쿼리의 @queryClient.setQu..

리액트 쿼리(Tanstack Query, React Query)들어가며React Query라고 불린 Tanstack Query 라이브러리에 대해 정리해본다.Tanstack Query(React Query)개념리액트 애플리케이션에서 서버 상태(데이터)를 쉽게 관리하고 조작할 수 있도록 도와주는 라이브러리React Query가 2022년 초에 Tanstack Query로 이름이 변경되었다.React Query가 포함된 Tanstack 생태계를 확장하고, 다양한 프레임워크와 플랫폼에서 사용할 수 있는 범용 데이터 페칭 및 상태 관리 라이브러리를 목표로 하기 위해서 였다고 한다.Tanstack Query는 이제 React뿐만 아니라 Vue, Svelte, Solid와 같은 다른 프레임워크에 대한 지원도 포함하고..

지연 로딩(Lazy Loading)들어가며리액트(React.js)에서 애플리케이션을 배포하기 전에 코드 최적화 작업을 해주어야 하는데, 이때 지연 로딩(Lazy Loading)을 활용할 수 있다.지연 로딩(Lazy Loading)이 무엇인지 간단히 정리해본다. 지연 로딩(Lazy Loading)개념필요한 시점에 특정 컴포넌트나 모듈을 로드하여 초기 로딩 시간을 줄이고 애플리케이션의 성능을 향상시키는 기술이 방법을 사용하면 초기 로딩 시 불필요한 코드가 로드되지 않으며, 사용자 경험을 개선할 수 있다.  기본적인 사용 방법@React.lazy@와 @Suspense@를 사용하면 컴포넌트를 동적으로 @import@하고 로딩이 완료될 때까지 대체 UI(fallback)를 표시할 수 있다. ① 컴포넌트 동적 im..