Per ardua ad astra.

타입 가드(Type Guard)들어가며타입스크립트(TypeScript)의 타입 가드(Type Guard)에 대해 정리해본다. 타입 가드(Type Guard)개념타입스크립트에서 변수의 타입을 좁히는 방법주로 조건문(Conditional Statement)을 사용하여 특정 타입임을 확인한 후, 해당 타입에 맞는 안전한 작업을 수행할 수 있도록 도와준다.타입 가드를 사용하면 컴파일 시점에 타입 오류를 방지하고, 코드의 가독성과 안정성을 높일 수 있다.타입 가드를 효과적으로 사용하면 런타임 오류를 줄이고, 개발 과정에서 타입 관련 버그를 미리 방지할 수 있으며, 코드의 의도를 명확하게 표현하여 협업 시 가독성을 높이는 데 큰 도움이 된다. 타입 가드는 런타임에서 변수의 타입을 확인하여 타입스크립트에게 해당 변수..

모듈 방식 사용하기들어가며타입스크립트(TypeScript)에서 모듈 방식을 사용하는 방법을 정리해본다. 방법타입스크립트 파일(@.ts@/@.tsx@)은 기본적으로 모듈(Module)로 간주되지 않고, 전역 범위의 스크립트로 처리된다.여러 파일에서 동일한 변수명을 생성할 경우, 오류가 발생한다.fileA.tslet name = 'stickman';const susan = 'susan'; fileB.tsconst susan = 'susan'; // 오류 발생 이때, 다음과 같이 2가지 방법으로 타입스크립트 파일을 모듈로 변환할 수 있다. 방법 ① : @import@, @export@ 문 사용하기타입스크립트 파일에 @import@ 또는 @export@ 문을 추가하여 ES6 모듈로 취급되게 하는 방법이다. ..

인터페이스(Interface)와 타입 별칭(Type Alias) 비교들어가며인터페이스(Interface)와 타입 별칭(Type Alias)은 타입스크립트에서 타입을 정의하는 방법이다.타입스크립트(TypeScript)에서 인터페이스(Interface)와 타입 별칭(Type Alias)의 차이에 대해 정리해본다. 인터페이스(Interface)개념인터페이스는 주로 객체(Object)의 구조를 정의하는 데 사용된다.주로 객체의 속성과 메서드를 정의하는 데 사용된다.인터페이스를 구현하는 객체는 해당 인터페이스에서 요구하는 속성이나 메서드를 반드시 포함해야 한다.코드에서 객체의 구조를 명확하게 정의하고, 다른 코드에서 해당 구조를 따르도록 강제할 때 유용하다.@interface@ 키워드를 이용하여 생성할 수 있다...

caseReducers (Redux Toolkit) 속성들어가며리덕스 툴킷(Redux Toolkit)의 @caseReducers@ 속성에 대해 정리해본다.이 속성을 이용하면 슬라이스 내의 개별 리듀서 함수에 직접 접근하고 호출할 수 있다. createSlice() 함수와 caseReducers 속성createSlice() 함수슬라이스(Slice)를 정의하기 위해 사용된다.슬라이스는 특정 상태(State)와 그 상태를 변경하는 리듀서(Reducer)들을 한 곳에 모아놓은 것이다.슬라이스는 자동으로 액션 생성자(Action Creators)와 액션 타입(Action Types)을 생성해준다.reducers 옵션@createSlice@ 함수의 @reducers@ 옵션은 슬라이스의 상태를 변경하는 여러 개의 리..

URL의 파리미터(Parameter) 값 가져오기들어가며리액트(React.js)에서 URL의 파라미터(Parameter) 값을 가져오는 방법을 정리해본다. 파라미터(Parameter)개념URL 경로의 일부분으로, 주로 특정 리소스를 식별하는 데 사용된다.RESTful API 설계에서 흔히 사용되며, 리소스의 고유 식별자를 나타낸다.URL 파라미터를 사용하면 동적인 경로를 생성할 수 있어, 다양한 리소스에 대해 동일한 컴포넌트를 재사용할 수 있다. 종류종류설명경로 파라미터(Path Parameter)- 특정 리소스를 식별하는 데 사용- 예: @/users/:userId@쿼리 파라미터(Query Parameter)- URL의 @?@ 뒤에 위치하며, @키-값@ 쌍으로 다양한 옵션을 전달한다.- 예) @?sea..

daisyUI 테마 설정하기 들어가며테일윈드 CSS의 확장 라이브러리인 daisyUI를 이용하여 페이지에 테마(Theme)를 적용하는 방법을 정리해본다. 방법테마 고르기dasiyUI의 공식 문서에서 원하는 테마를 선택한다. daisyUI themes — Tailwind CSS Components ( version 4 update is here )How to use daisyUI themes?daisyui.com 이 페이지에서는 드라큘라 테마(@dracula@)를 선택했다고 가정한다. 테일윈드 CSS 설정 파일에 추가하기테일윈드 CSS 설정 파일인 @tailwind.config.js@ 파일에 아래의 테마 속성을 추가해준다../tailwind.config.js/** @type {import('tailwind..

index.js로 컴포넌트(Component), 페이지(Page) 관리하기들어가며다음과 같이 @src@ 폴더 내부에 있는 @components@, @pages@ 폴더 안에 @index.js@ 파일을 생성하여 여러 컴포넌트와 페이지들을 하나의 파일에서 관리할 수 있다.이와 관련된 내용을 정리해본다. index.js개념리액트(React.js) 프로젝트에서 @pages@나 @components@ 폴더 안에 위치한 @index.js@ 파일은 해당 폴더 내의 여러 컴포넌트들을 한 곳에서 쉽게 불러올 수 있도록 다시 @export@ 해주는 역할을 한다.@index.js@ 파일 안의 내용은 다음과 같이 구성할 수 있다. 사용 방법@pages@ 또는 @components@ 폴더에 @index.js@ 파일을 생성한 후,..

테일윈드 설정 파일(tailwind.config.js)에서 플러그인(Plugin) 추가할 때 "'require' is not defined" 오류가 뜰 때 해결법들어가며테일윈드 설정 파일(@tailwind.config.js@)에서 @require@를 이용하여 플러그인(Plugin)을 추가할 때, @'require' is not defined@ 오류가 발생할 때 해결하는 방법을 정리해본다.  방법간단하다. 프로젝트 최상단 경로에 있는 ESLint 설정 파일(@eslint.config.js@)에 다음과 같이 환경 변수(@env@) 조건을 추가해주면 된다. ./eslint.config.js{ // ... env: { browser: true, node: true, // 추..

daisyUI들어가며테일윈드 CSS의 확장 UI 라이브러리인 dasiyUI에 대해 정리해본다. daisyUI개념테일윈드 CSS를 확장한 UI 라이브러리다양한 기본 스타일을 제공하여 빠르게 UI를 구성할 수 있도록 도와준다.테일윈드 CSS의 유틸리티 클래스와 함께 사용된다.버튼, 카드, 모달, 알림, 폼 요소 등 여러 가지 컴포넌트 스타일을 미리 정의해 둔 상태로 제공한다.daisyUI를 이용하면 UI를 쉽게 커스터마이징하고, 일관성 있는 디자인을 유지하면서 빠르게 개발할 수 있다. 특징테일윈드 CSS와 완벽하게 호환되며, 추가적인 스타일링 없이 유틸리티 클래스를 사용할 수 있다.일관된 디자인 시스템을 기반으로 하기 때문에, 프로젝트 전반에 걸쳐 일관된 UI를 유지할 수 있다.버튼, 알림, 모달, 카드 등..

Thunk API (Redux Toolkit)들어가며리덕스 툴킷(Redux Toolkit)의 Thunk API에 대해 정리해본다. Thunk API개념비동기 작업을 간편하게 처리할 수 있는 도구로, 여러가지 기능을 제공한다.주로 API 호출과 같은 비동기 작업을 처리할 때 사용되며, 액션(Action)을 디스패치(Dispatch)하고 애플리케이션의 상태를 관리할 수 있다. 구성기본적으로 2개의 매개변수를 제공한다.@dispatch@액션을 디스패치할 수 있는 함수비동기 작업의 결과에 따라 다른 액션을 보낼 수 있다. @getState@현재 스토어의 상태(State)를 가져오는 함수상태에 따라 로직을 다르게 처리할 수 있다. 사용 방법@createAsyncThunk@를 사용하여 비동기 액션 크리에이터를 생성..

자주 사용되는 테일윈드 CSS 클래스 정리들어가며테일윈드(Tailwind) CSS에서 자주 사용되는  클래스들을 정리해본다. 자주 사용되는 클래스들레이아웃(Layout)container: 반응형 컨테이너를 설정mx-auto: 수평 중앙 정렬flex: Flexbox 컨테이너 생성grid: 그리드 레이아웃 설정space-x-*: 자식 요소 간의 가로 간격 설정 (수평)space-y-*: 자식 요소 간의 세로 간격 설정 (수직) 정렬(Alignment)text-center: 텍스트를 중앙 정렬items-center: Flexbox 또는 Grid에서 요소를 수직 중앙 정렬justify-center: Flexbox 또는 Grid에서 요소를 수평 중앙 정렬 간격(Spacing)p-*: 전체 패딩 적용px-*: 좌우..

Tailwind CSS들어가며테일윈드(Tailwind) CSS에 대해 정리해본다. Tailwind CSS개념유틸리티 우선 CSS 프레임워크미리 정의된 CSS 클래스를 사용하여 빠르게 사용자 인터페이스를 구축할 수 있도록 도와준다.전통적인 CSS 프레임워크와 달리, 구성 요소를 만들기 위한 완성된 스타일이 아니라, 각 스타일 속성에 대한 클래스(유틸리티 클래스)를 제공한다.개발자는 자신의 디자인에 맞게 클래스를 조합하여 원하는 스타일을 쉽게 적용할 수 있다. 특징 다양한 스타일 속성을 제어할 수 있는 클래스를 제공한다.예) @bg-blue-500@ : 배경색을 파란색으로 설정CSS의 재사용성과 모듈화를 강조한다.클래스 이름이 의미를 가지므로, 다른 프로젝트에서도 쉽게 이해하고 사용할 수 있다.반응형 디자인..

환경 변수 파일(.env) 다루는 방법들어가며파이썬(Python)에서 @.env@ 파일을 다루는 방법을 정리해본다. .env 파일개념키(Key)-값(Value) 쌍으로 환경 변수를 정의하는 간단한 텍스트 파일이 파일을 사용하면 코드 내에 민감한 정보를 직접 작성하지 않고도 환경 변수(Environment Variable)를 쉽게 관리할 수 있다.@.env@ 파일을 사용하면 환경 변수를 효율적으로 관리할 수 있으며, 코드의 보안성과 유지보수성을 향상시킬 수 있다.API_KEY=your_api_key_hereDATABASE_URL=postgres://user:password@localhost:5432/mydatabaseDEBUG=True 방법패키지 설치하기@python-dotenv@ 패키지가 설치되어 있지 ..

리액트 라우터(React Router)들어가며리액트(React.js)에서 라우팅을 할 때 많이 사용하는 리액트 라우터(React Router) 라이브러리에 대해 정리해본다.v6을 기준으로 정리하였다. 리액트 라우터(React Router)개념리액트 애플리케이션에서 클라이언트 사이드 라우팅을 처리하기 위한 라이브러리리액트 라우터를 사용하면, 사용자가 페이지를 전환할 때 전체 페이지를 새로고침하지 않고도 URL에 따라 서로 다른 컴포넌트를 렌더링할 수 있다. 구성 요소BrowserRouterHTML5의 History API를 사용하여 URL을 관리한다.주로 애플리케이션의 최상위 컴포넌트로 사용된다. Routes각 경로에 대한 라우트를 정의하는 컨테이너하나 이상의 @Route@를 자식으로 가질 수 있다. Ro..

라우팅 관련 기능들 정리 (React Router) : useNavigate, useNavigation, redirect, useLocation, useParams, useHistory, Navigate들어가며리액트(React.js)에서 라우팅을 위해 사용되는 관련 기능들에 대해 간단하게 정리해본다.페이지 이동 및 라우팅을 위해 리액트 라우터(React Router)의 여러 훅과 컴포넌트, 함수들을 사용할 수 있다. ① useNavigate()개념리액트 라우터(React Router) v6 에서 제공하는 훅프로그래밍적으로 다른 경로로 이동하기 위해 사용된다.컴포넌트 내에서 버튼 클릭, 이벤트 발생 시 특정 페이지로 이동할 때 사용한다. 특징@push@와 @replace@를 설정할 수 있어 히스토리에 추가..

폼 데이터 처리하기 (React, React Router)들어가며리액트(React)에서 폼(@@) 데이터를 처리하는 방법을 정리해본다. 폼(Form, @@)개념HTML에서 사용자 입력 데이터를 수집하고 서버로 전송하기 위한 요소로그인, 회원가입, 검색 등 사용자 입력이 필요한 기능을 구현할 때 사용된다. Name: Email: Submit 특징@@ 요소에서 @method@ 속성을 지정하지 않을 경우, 기본적으로 @GET@ 요청이 수행된다.이때, @@ 요소 안의 @@요소의 값을 URL의 쿼리 문자열에 포함하여 서버로 전송한다.속성의 값을 @POST@로 지정할 경우, 데이터를 본문에 포함하여 서버로 전송한다.@@ 요소의 @action@ 속성의 값에 폼을 제출할 때 데이터를 보낼 서버의 URL을 ..

vscode-icons : 리액트 아이콘 적용하는 방법들어가며비주얼 스튜디오 코드(VS Code)의 @vscode-icons@확장의 @.jsx@ 확장자의 아이콘이 @.js@ 아이콘으로 표시될 때, 수동으로 리액트 아이콘으로 표시되게 하는 방법을 정리해본다. 방법@[Ctrl]@ + @[Shift]@ + @[P]@를 누른 후, @Command Pallette@를 실행한다.@settings@ 를 타이핑 한 후, @Preferences: Open User Settings (JSON)@을 클릭한다.아래의 코드를 추가해준다.settings.json{ "vsicons.associations.files": [ { "icon": "reactjs", "extensions"..

CMS(Content Management System)들어가며CMS(Content Management System)에 대해 정리해본다. CMS(Content Management System)개념콘텐츠 관리 시스템웹사이트나 애플리케이션의 콘텐츠를 생성, 관리, 수정, 배포하는 데 사용하는 소프트웨어기술적인 지식이 없는 사용자도 쉽게 웹 콘텐츠를 관리할 수 있도록 설계되어 있다.대표적인 예로 WordPress, Joomla, Drupal 등이 있다.CMS를 사용하면 코딩하지 않고도 텍스트, 이미지, 비디오 등을 추가하거나 변경할 수 있다. 특징비개발자도 쉽게 콘텐츠를 관리할 수 있다.웹사이트 디자인과 레이아웃을 미리 정의된 템플릿으로 설정할 수 있다.다양한 기능을 추가할 수 있는 플러그인과 확장 기능을 지원..

무한 스크롤(Infinite Scroll), 스켈레톤(Skeleton) 효과 적용하기 (with React Query)들어가며React Query를 이용하여 무한 스크롤(Infinite Scroll)과 스켈레톤(Skeleton) 효과를 적용한 예제 코드를 올려본다.개인 미니 프로젝트를 진행하면서 만들었던 코드이다.검색어를 입력하면, 해당 검색어와 관련된 이미지를 표시하는 사이트Unsplash 공개 API를 이용하여 구현하였다. 코드리액트 쿼리의 @useInfiniteQuery()@를 이용하여 무한 스크롤(Infinite Scroll) 기능을 구현하였다.@IntersectionObserver@를 사용하여 스크롤이 페이지의 맨 아래에 도달했을 때만 다음 페이지의 데이터를 불러오도록 설정하였다.@useStat..

.env 파일 만들고 사용하기 (환경 변수 관리)들어가며리액트(React.js)에서 환경 변수 관리를 위해 @.env@ 파일을 만들고 사용하는 방법을 정리해본다. @.env@ 파일개념애플리케이션에서 사용되는 환경 변수(Environment Variables)를 저장하는 파일환경 변수는 운영체제나 애플리케이션의 설정 값들을 외부에서 설정하고 관리할 수 있게 해주는 변수들로, 코드에 직접 하드코딩하지 않고도 민감한 정보나 설정 값을 관리할 수 있게 해준다.리액트나 노드 같은 웹 애플리케이션에서는 주로 다음과 같은 정보를 @.env@ 파일에 저장한다.✅ API 키 ✅ 데이터베이스 연결 정보 ✅ API 엔드포인트 ✅ 앱 환경 설정 (개발, 테스트, 프로덕션 등) 특징애플리케이션에서 민감한 정보나 환경에 따라 달..

React Query Devtools들어가며리액트 쿼리(React Query/Tanstack Query)의 개발자 도구(Devtools)를 설치 및 적용하는 방법을 정리해본다. React Query Devtools개념상태 관리와 서버 데이터 동기화를 디버깅하기 위한 개발 도구React Query가 관리하는 쿼리(Query)와 뮤테이션(Mutation) 상태를 시각적으로 확인할 수 있는 인터페이스를 제공한다.개발자가 쉽게 데이터 흐름을 추적하고, 문제를 파악하거나 성능을 최적화하는 데 도움을 준다. 주요 기능쿼리 상태 확인현재 실행 중인 모든 쿼리의 상태(예: @loading@, @success@, @error@ 등)를 실시간으로 확인할 수 있다.또한 쿼리 결과 데이터, 쿼리 키, 마지막으로 업데이트된 시..

코딩 테스트 준비 : 자료구조 (with Python)들어가며코딩 테스트 전에 가볍게 읽어볼 자료구조(Data Structure) 관련 내용을 정리해본다파이썬(Python) 코드로 정리하였다. 자료구조(Data Structure)배열(Array)연속된 메모리 공간에 데이터를 저장하며, 인덱스(Index)를 통해 요소에 접근할 수 있다.파이썬의 리스트(@list@)가 배열처럼 사용된다.arr = [1, 2, 3, 4, 5]print(arr[2]) # 3arr.append(6) # 값 추가arr.remove(3) # 값 삭제 스택(Stack)LIFO(Last In, First Out) 구조마지막에 들어간 데이터가 가장 먼저 나온다.파이썬의 리스트(@list@)를 스택처럼 사용할 수 있으며, @appen..

코딩 테스트 준비 : SQL들어가며코딩 테스트 전에 가볍게 읽어볼 SQL 관련 내용들을 정리해본다. SELECT 문기본 개념데이터 조회하기SELECT column1, column2 FROM table_name; @DISTINCT@ 키워드를 이용하여 중복된 데이터를 제거할 수 있다.SELECT DISTINCT column1 FROM table_name; 데이터 필터링조건을 활용하여 데이터 필터링하기@WHERE@ 절을 이용하여 특정 조건에 맞는 데이터를 필터링한다.SELECT * FROM table_name WHERE condition; 논리 연산자로 @AND@, @OR@, @NOT@을 사용할 수 있다.@IN@ 연산자는 여러 값 중 하나와 일치하는 데이터츨 찾을 때 사용한다.SELECT * FROM tabl..

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

개발 환경 구축 (React.js)들어가며리액트(React.js) 개발 환경 구축을 위해서 필요한 과정들을 정리해본다. Node.jsLTS 버전으로 설치하기Long Term Service, 장기 지원 버전 Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 버전 관리가 필요할 경우 NVM(Node Version Manager)를 설치한다. Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreyb..

코드 분할(Code Splitting) : useTransition 훅, Suspense 컴포넌트, lazy 함수들어가며리액트(React.js)에서 코드 분할(Code Splitting)의 장점과 함께 사용되는 @useTransition@ 훅과 @Suspense@ 컴포넌트, @lazy@ 함수에 대해 정리해본다. 코드 분할(Code Splitting)개념리액트 애플리케이션에서 코드의 일부분을 나눠서 필요한 시점에 로드하는 방식 장점애플리케이션을 더 작은 청크(Chunk)로 나눔으로써 초기 로드 시 필요한 자바스크립트 크기를 줄인다.이를 통해 첫 화면 렌더링 속도가 빨라지며, 느린 네트워크 환경에서도 빠르게 응답할 수 있다.사용자가 필요로 하지 않는 코드는 나중에 로드되며, 상호작용할 때만 필요한 코드가 동..

useMemo 훅들어가며리액트(React.js)의 @useMemo@ 훅에 대해 정리해본다. useMemo 훅개념컴포넌트의 성능 최적화(Optimization)를 위해 자주 사용되는 훅특정 연산의 결과를 메모이제이션(Memoization)하여 의존성 배열에 있는 값들이 변경되지 않는 한 해당 연산을 다시 수행하지 않도록 한다.불필요한 재연산을 방지하고 성능을 향상시킬 수 있다. 사용 방법첫 번째 인자는 메모이제이션할 값을 반환(return)하는 함수이다. (@computeExpensiveValue@).두 번째 인자는 의존성 배열(Dependency Array)로, 이 배열의 값들이 변경될 때만 메모이제이션된 값이 다시 계산된다.const memoizedValue = useMemo(() => computeE..

useCallback 훅들어가며리액트(React.js)에서 사용되는 @useCallback@ 훅에 대해 정리해본다. useCallback 훅개념컴포넌트의 성능 최적화(Optimization)를 위해 자주 사용되는 훅함수를 메모이제이션(Memoization)하여 컴포넌트가 리렌더링될 때마다 함수가 재생성되는 것을 방지한다. 사용 방법@useCallback(() => {}, [])@와 같이 사용한다.첫 번째 인자로 함수를 받고, 두 번째 인자로 의존성 배열(Dependencies Array)을 받는다.const memoizedCallback = useCallback(() => { doSomething(a, b);}, [a, b]); ⇒ 리액트는 컴포넌트가 리렌더링될 때마다 해당 함수를 다시 생성하지 않고,..

React.memo()들어가며리액트(React.js)에서 제공하는 고차 함수(Higher-Order Component)인 @React.memo()@에 대해 정리해본다. React.memo()개념리액트에서 제공하는 고차 함수(Higher-Order Component)함수형 컴포넌트의 불필요한 재렌더링을 방지하는 역할을 한다.전달된 @props@가 변경되지 않는 한 해당 컴포넌트는 다시 렌더링되지 않도록 최적화(Optimization)할 수 있다.@React.memo()@는 함수형 컴포넌트를 인자로 받아, 그와 동일한 동작을 하는 새로운 컴포넌트를 반환하지만, 추가적으로 @props@가 변경되었는지 확인하는 최적화 작업이 추가된다.@props@가 변경되지 않은 경우, 메모이제이션된 컴포넌트는 이전 렌더링에서..