티스토리

Bong's Log
검색하기

블로그 홈

Bong's Log

bong-day.tistory.com/m

bong-day 님의 블로그 입니다.

구독자
0
방명록 방문하기

주요 글 목록

  • [RTK]자주 쓰는 Redux Toolkit 기능 Redux Toolkit(RTK)은 Redux 공식팀에서 제공하는 상태관리 툴킷으로, 개발자들이 겪는 복잡한 설정과 보일러플레이트 문제를 해결해줍니다. 특히 현업에서 많이 쓰이는 기능을 잘 알고 있으면, 개발 생산성과 유지보수성이 모두 크게 향상됩니다.이 글에서는 RTK에서 가장 자주 사용되는 기능 5가지를 실전 코드와 함께 자세히 소개합니다.1. createSlice – 상태와 리듀서를 하나로 통합createSlice는 RTK의 핵심 기능 중 하나로, 상태 초기값, 액션 생성, 리듀서를 하나의 선언형 코드로 관리할 수 있게 해줍니다. Redux의 대표적인 단점인 ‘액션 따로, 리듀서 따로’ 구조를 없애줍니다.예시 코드import { createSlice } from '@reduxjs/toolkit' c.. 공감수 0 댓글수 0 2025. 5. 10.
  • RTK(Redux Toolkit) : 비동기 상태관리부터 Axios와의 차이, 예제 Redux Toolkit(RTK)는 단순한 상태 저장소 이상의 기능을 제공하여, 비동기 요청의 상태 변화를 효율적으로 관리할 수 있습니다.이 글에서는 RTK의 핵심 기능인 반응형 상태 처리 개념부터 Axios와의 차이점, 그리고 실전 코드 예제까지 한 번에 정리해드립니다.RTK의 실시간 상태 처리란?RTK는 다음 세 가지 상태를 자동으로 관리해 줍니다:pending: 요청 중fulfilled: 요청 성공rejected: 요청 실패이 상태를 기반으로 로딩 스피너, 에러 메시지, UI 갱신 등을 자동화할 수 있어, 아래와 같은 활용이 가능합니다. 활용 예시채팅 메시지 수신: WebSocket 또는 polling으로 서버에서 메시지를 받아 상태 갱신주문 상태 추적: 배송 상태에 따라 UI를 동적으로 변경파일 .. 공감수 0 댓글수 0 2025. 5. 10.
  • useState 오류 해결: Next.js 13~15에서 'use client'가 필요한 이유 Next.js 13 이상부터 도입된 app 디렉토리 기반 구조는 서버 컴포넌트(Server Component)를 기본으로 채택합니다. 이로 인해 클라이언트 전용 기능인 useState, useEffect, onClick 등을 사용할 경우, 아래와 같은 오류가 발생할 수 있습니다.에러 메시지 예시Error: You're importing a component that needs `useState`. This React hook only works in a client component. To fix, mark the file (or its parent) with the "use client" directive.원인 설명Next.js의 app 디렉토리에서는 페이지나 컴포넌트 파일이 기본적으로 서버 컴포넌트로.. 공감수 0 댓글수 0 2025. 5. 7.
  • Next.js의 라우팅 개념 정리 Next.js는 파일 기반 라우팅(file-based routing) 시스템을 채택하고 있습니다. 이는 기존의 React Router처럼 별도 설정 없이, 폴더 구조만으로 자동으로 라우팅이 구성되는 방식입니다.1. 기본 라우팅src/app/page.jsx → /src/app/about/page.jsx → /aboutsrc/app/login/page.jsx → /login각 디렉토리 안에 있는 page.jsx 파일이 해당 URL 경로와 매핑됩니다.2. 동적 라우팅Next.js에서는 대괄호([param]) 문법으로 동적 라우팅이 가능합니다.src/app/posts/[id]/page.jsx → /posts/1, /posts/abc 등 다양한 id 값 허용3. 중첩 라우트디렉토리를 중첩시켜 라우트를 구성할 수 .. 공감수 0 댓글수 0 2025. 5. 7.
  • 왜 Next.js인가? React, Rust, 기타 프레임워크 중 Next.js를 선택한 이유 웹 프론트엔드 개발을 시작할 때 수많은 프레임워크와 라이브러리 중 어떤 것을 선택할지 고민하게 됩니다. React, Vue, Angular, Svelte 등 다양한 선택지가 있지만, 최근에는 Next.js가 압도적으로 주목받고 있습니다. 왜 그런지, 그리고 왜 나 역시 Next.js를 선택했는지를 공유하고자 합니다.✅ React 위에서 동작하는 프레임워크Next.js는 React를 기반으로 만들어졌기 때문에 기존에 React를 알고 있다면 진입 장벽이 낮습니다. 순수 React만으로 프로젝트를 구성하면 라우팅, SSR(서버사이드 렌더링), SEO 최적화 등을 직접 처리해야 합니다. 반면, Next.js는 이런 부분을 프레임워크 수준에서 기본 제공합니다.✅ 서버 사이드 렌더링(SSR) & 정적 생성(SSG.. 공감수 0 댓글수 0 2025. 5. 7.
  • Next.js에서 'lucide-react' 모듈을 찾을 수 없는 오류 해결 방법 Next.js 프로젝트에서 다음과 같은 오류를 만나는 경우가 있습니다:Module not found: Can't resolve 'lucide-react'이 오류는 외부 패키지인 lucide-react가 프로젝트에 설치되지 않았을 때 발생합니다. 이 글에서는 오류의 원인과 해결 방법을 간단하게 정리해보겠습니다.1. 오류 원인lucide-react는 아이콘 컴포넌트를 제공하는 라이브러리로, 보통 shadcn/ui 기반의 UI 컴포넌트를 생성할 때 함께 사용됩니다. 예를 들어 select, button, input 등 컴포넌트 내에서 다음과 같이 아이콘을 import할 수 있습니다:import { CheckIcon, ChevronDownIcon } from "lucide-react";하지만 lucide-rea.. 공감수 0 댓글수 0 2025. 5. 7.
  • Next.js 프로젝트에서 '@/components/ui/tabs' 모듈을 찾을 수 없는 오류 해결 방법 Next.js로 프로젝트를 개발하다 보면 아래와 같은 오류를 만날 수 있습니다:Module not found: Can't resolve '@/components/ui/tabs'이 오류는 프로젝트가 @/components/ui/tabs 경로에 해당하는 파일이나 모듈을 찾을 수 없을 때 발생합니다. 이번 글에서는 이 문제를 해결하는 방법을 단계적으로 정리해보겠습니다.1. 경로에 파일이 실제로 존재하는지 확인가장 먼저 확인할 것은 tabs.tsx 파일이 실제로 존재하는지 여부입니다.경로 예시:src/└── components/ └── ui/ └── tabs.tsx혹은 tabs/index.tsx 형식으로 되어 있을 수도 있습니다. 파일이 존재하지 않으면 직접 생성하거나, 다음 단계로 넘어가세요.. 공감수 0 댓글수 0 2025. 5. 7.
  • 백엔드 개발자를 위한 UI 컴포넌트 솔루션, shadcn/ui 프론트엔드를 다루는 것이 여전히 익숙하지 않은 백엔드 개발자에게, UI 구성은 때때로 가장 버거운 영역이 되곤 합니다. 저 또한 그랬습니다. 하지만 최근 shadcn/ui라는 도구를 접하고, 프론트 작업에 대한 부담을 상당히 덜 수 있었습니다.shadcn/ui란?shadcn/ui는 React 기반 프로젝트에서 사용할 수 있는 복사-붙여넣기 방식의 UI 컴포넌트 모음입니다. npm 패키지를 설치해서 쓰는 방식이 아니라, 원하는 컴포넌트의 소스 코드를 CLI 도구로 직접 프로젝트에 추가하는 방식입니다. 이 점이 기존 UI 라이브러리들과 가장 큰 차이점이자 장점입니다.기본적으로 Tailwind CSS와 Radix UI 기반으로 구성되어 있어, 시멘틱하고 접근성이 뛰어난 UI 컴포넌트를 만들 수 있습니다. 커스.. 공감수 0 댓글수 0 2025. 5. 6.
  • JSP와 SPA의 페이지 이동 과거의 습관: JSP에서의 리다이렉트전통적인 JSP, Servlet 기반 웹 프로젝트에서는 페이지 전환이 필요할 때 아래와 같은 코드를 자주 사용했습니다.혹은 JavaScript로 직접 URL을 바꾸는 방식도 흔했죠.이 방식은 페이지 전체를 서버에 다시 요청해서 새로 고침합니다. 다시 말하면, HTML, CSS, JS, 이미지까지 모든 자원이 다시 로드되기 때문에 UX 관점에서 불편함이 있습니다.왜 문제가 될까? 문제점 설명 전체 새로고침 발생화면이 깜빡이며 사용자 경험이 떨어집니다느린 페이지 전환매 요청마다 서버에서 다시 렌더링클라이언트 상태 유실로그인 여부나 입력값 등이 초기화될 수 있습니다SEO에 불리할 수도불필요한 리다이렉트는 검색 엔진 최적화에 부정적인 영향을 줄 수 있습니다Next.js & .. 공감수 1 댓글수 1 2025. 5. 6.
  • TypeScript, 써야 할까? 장단점과 도입 고려 사항 정리 프론트엔드 개발을 하다 보면 한 번쯤은 TypeScript 도입을 고민하게 됩니다. 많은 개발자들이 이미 TypeScript를 표준처럼 사용하고 있지만, "모두가 써야만 한다"고 말하기는 어렵습니다.이 글에서는 TypeScript의 장단점을 정리하고, 어떤 상황에서 TypeScript가 좋은 선택이 될지, 또는 피하는 것이 나을지 구체적으로 정리해보려 합니다. 개인 프로젝트를 시작하든 팀 프로젝트를 준비하든, 판단 기준이 되어줄 수 있기를 바랍니다.TypeScript란?TypeScript는 Microsoft에서 만든 오픈소스 프로그래밍 언어입니다. JavaScript의 상위 집합(Superset)으로, 기존 JavaScript 코드에 정적 타입 시스템을 추가한 것이 특징입니다.TypeScript로 작성한.. 공감수 3 댓글수 2 2025. 5. 3.
  • SSR (서버 사이드 렌더링) vs SPA (싱글 페이지 애플리케이션) 1. 개요SSR(Server-Side Rendering)과 SPA(Single Page Application)는 웹 애플리케이션을 구성하는 두 가지 주요 방식이다. 각각의 방식은 성능, 개발 편의성, 배포 방식 등에 차이를 보인다. 본 글에서는 SSR과 SPA의 특징, 장단점, 사용 사례를 비교하고, 어떤 환경에서 어떤 방식을 선택하는 것이 적절한지 살펴본다.2. SSR (서버 사이드 렌더링)1. 개념SSR은 웹 페이지의 HTML을 서버에서 렌더링한 후 클라이언트에게 제공하는 방식이다. 즉, 브라우저가 요청을 보내면 서버에서 HTML을 생성하고, 이를 클라이언트에 전달하는 구조이다.2. 주요 특징초기 로딩 속도가 빠름: 서버에서 HTML을 완성하여 보내므로 클라이언트에서 즉시 화면을 렌더링할 수 있다.J.. 공감수 4 댓글수 0 2025. 2. 16.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.