Per ardua ad astra.

Zustand들어가며전역 상태 라이브러리 중 하나인 Zustand에 대해 간단하게 정리해본다. Zustand개념독일어로 상태(Status)라는 뜻리액트 앱에서 전역 상태 관리를 해주는 아주 가볍고 단순한 라이브러리Redux의 복잡한 구조(Action, Reducer, Dispatch)를 사용하지 않고, Hooks 기반의 간단한 API 제공"minimal, fast, scalable"을 목표로 만들어졌다. 비교Redux와 비교Redux는 boilerplate한 코드가 많다.action, reducer, slice를 작성해야 한다.// Redux Toolkitconst slice = createSlice({ name: "counter", initialState: { count: 0 }, re..

Three.js들어가며웹 브라우저에서 3D 그래픽을 쉽게 구현할 수 있게 해주는 라이브러리인 Three.js에 대해 간단하게 정리해본다. Three.js개념웹 브라우저에서 3D 그래픽을 쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리웹에서 3D 콘텐츠를 보여주기 위해 거의 필수로 사용되는 도구 Three.js – JavaScript 3D Library threejs.org 핵심 개념① Scene (장면)모든 3D 객체가 배치되는 무대 공간나무, 빛, 카메라 등 모든 객체는 이 scene에 추가되어야 화면에 렌더링된다.여러 객체를 그룹화하거나 배경색, 안개 효과 등을 설정할 수 있다.const scene = new THREE.Scene();// 배경색을 검정색으로 설정scene.backg..

헤더에 인증 정보 추가하는 방법들어가며Axios를 사용하여 헤더에 인증(Authorization) 정보를 추가하는 방법을 정리해본다.이 글은 리액트(React) 코드로 작성되었다. 방법① 파일에 인증 헤더 부분 추가하기API 호출을 하고자 하는 파일 안에 인증 정보를 담은 변수를 생성하여 추가하는 방법이다.// 인증 정보를 담은 변수const authHeader = (thunkAPI) => { return { headers: { authorization: `Bearer ${thunkAPI.getState().user.user.token}`, }, };};export const createJobThunk = async (job, thunkAPI) => { try { const..

외부 컴포넌트 라이브러리의 UI 컴포넌트 스타일을 직접 수정하는 방법들어가며antd 등 외부 컴포넌트 라이브러리의 UI 컴포넌트를 Styled-Components를 이용하여 직접 수정하는 방법을 정리해본다. 방법스타일 파일(컴포넌트명.style.js)이나 컴포넌트 파일(컴포넌트명.js/jsx/tsx)에서 다음과 같이 코드를 작성하고 변경/추가하고자 하는 스타일을 넣어주면 된다.import styled from "styled-components";import { 외부컴포넌트명 } from "외부_컴포넌트_라이브러리_패키지";export const 커스텀외부컴포넌트명 = styled(외부컴포넌트명)`속성: 값;`; 그리고 다른 일반적인 Styled-Components 요소처럼 사용하면 된다.i..

HTTP 메서드들어가며Axios와 함께 HTTP 메서드에 대해 정리해본다. HTTP 메서드개념HTTP(Hypertext Transfer Protocol) 메서드는 웹 서버에서 데이터를 가져오거나 수정하거나 삭제하는 등의 작업을 수행할 때 사용하는 메서드이다.자주 사용되는 메서드로는 GET, POST, PATCH, DELETE가 있으며, fetch() 또는 Axios 등을 이용하여 이러한 요청을 보낼 수 있다. 종류① GET서버에서 데이터를 가져오는 데 사용된다.주로 데이터베이스에서 정보를 조회하거나, 웹 페이지를 읽거나, 파일을 다운로드할 때 사용된다.try { const response = await axios.get('/api/data'); console.log(response.data);} ..

전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor)들어가며Axios의 전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor) 개념에 대해 정리해본다. 전역 인스턴스(Global Instance)개념Axios의 기본 인스턴스를 설정하여 애플리케이션 전체에서 사용할 수 있도록 하는 방법모든 Axios 요청에 기본적인 설정(예: baseURL, headers 등)을 적용할 수 있다. 설정 방법프로젝트의 src 폴더 안에 axios 폴더를 만들고, global.js 파일을 생성한다.그리고 다음과 같이 코드를 작성한다.import axios from 'axios';// In latest axios version common proper..

Axios 라이브러리들어가며Axios 라이브러리에 대해 알아보자. Axios개념Node.js 및 브라우저에서 동작하는 HTTP 클라이언트 라이브러리 중 하나주로 HTTP 요청(Request)을 생성하고 응답(Response)을 처리하는 데 사용된다.Axios는 Promise 기반으로 작성되어 있어 비동기 코드를 쉽게 다룰 수 있다.동일한 코드베이스로 브라우저와 Node.js에서 실행할 수 있다.서버 단(Server-Side)에서는 네이티브 Node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.Axios를 사용하면 HTTP 요청을 쉽게 생성하고 응답을 처리할 수 있다.특히 비동기 프로그래밍에서 Promise를 사용하므로 코드가 더 읽기 쉽고 유..