반응형 전체 글641 [NextJS] 서버 컴포넌트와 클라이언트 컴포넌트에 대해 araboza ReactJS에서처럼 NextJS에서도 컴포넌트는 웹사이트를 만드는 데 사용되는 기본적인 재사용 가능한 UI(사용자 인터페이스) 조각인데요(본질적으로 같음). JSX(JavaScript XML)를 return하는, 레고 블록처럼 조립해서 복잡한 웹 페이지를 만들 수 있는 재료인데요.NextJS는 클라이언트 컴포넌트만 제공하는 ReactJS와 다르게 클라이언트 컴포넌트와 서버 컴포넌트의 두 가지 유형의 컴포넌트를 제공하는데요. 오늘은 이 둘에 대해서 알아보도록 하겠습니다.1. 클라이언트 컴포넌트클라이언트 컴포넌트는 전통적인 React 컴포넌트와 가장 유사하다고 생각하면 이해하기 쉽습니다.1.1 클라이언트 컴포넌트의 특징브라우저(클라이언트)에서 실행: 이름 그대로 사용자의 웹 브라우저에서 JavaScript.. 2025. 7. 3. [NextJS] NextJS에서 쓰는 라우팅용 특수 파일들 NextJS와 같은 프레임워크는 개발의 생산성과 효율성을 극대화하기 위해 미리 정해진 규칙과 구조를 제공하는데요. 그 핵심 중 하나가 바로 라우팅 시스템을 위한 특수 파일들입니다. 이러한 파일들은 단순한 파일명처럼 보이지만, 각각 고유한 역할을 담당하며 Next.js 애플리케이션의 라우팅 동작, UI 구성, 그리고 데이터 처리에 깊이 관여합니다. 오늘은 이런 특수 파일들에 대해 알아보겠습니다.(typescript 기반으로 알아보겠습니다)우선, 파일명은 무조건 위에 첨부된 사진 .tsx로 해야한다는 점 잊지 마시구요~! 하나씩 알아봅시다.(typescript 환경을 기본으로 가정했습니다.) 자신이 위치한 폴더의 모든 하위 경로에 대해 기본적으로 적용되는 항목들에 대해서는 옆에 별을 넣었습니다. 1. Lay.. 2025. 7. 3. [NextJS] NextJS 프레임워크에 대해 araboza 웹 개발의 세계는 빠르게 변화하고 있으며, 사용자에게 더 나은 경험을 제공하기 위한 새로운 도구들이 끊임없이 등장하고 있습니다. 그중에서도 ReactJS는 프론트엔드 개발의 사실상 표준으로 자리 잡았고, Next.js는 이 ReactJS를 기반으로 강력한 기능을 더해주는 프레임워크로 각광받고 있는데요.이 글에서는 순수 ReactJS로만 개발했을 때의 한계를 알아보고, Next.js가 이러한 한계를 어떻게 극복하고 개선할 수 있는지 알아보려고 합니다.1. 순수 ReactJS로만 개발했을 때의 단점ReactJS는 UI를 구축하는 데 매우 강력하고 유연한 라이브러리입니다. 컴포넌트 기반 아키텍처와 가상 DOM 덕분에 효율적인 UI 업데이트가 가능하지만, 모든 것을 직접 설정해야 한다는 점과 특정 사용 시나리오.. 2025. 7. 1. [React] Redux 라이브러리에 대해 알아봅시다 React 애플리케이션의 규모가 커질수록 데이터의 흐름과 상태 관리는 더욱 중요한데요.이러한 문제에 대한 해답으로 Facebook에서 제시한 Flux 아키텍쳐는 단방향 데이터 흐름을 통해 상태 예측 가능성을 높였고, 이를 기반으로 탄생한 Redux는 React 생태계에서 가장 널리 사용되는 상태 관리 라이브러리로 자리매김했는데요.오늘은 Flux 아키텍쳐와 Flux 아키텍처 기반의 Redux 라이브러리에 대해 알아보도록 하겠씁니다.1. Flux 아키텍쳐flux 아키텍쳐는 웹 애플리케이션을 만들 때 사용하는 설계 패턴으로, 데이터가 한 방향으로만 흐르도록 관리해 애플리케이션 구조를 단순화하는 아키텍쳐인데요. 구성 요소 먼저 살펴보시죠.1.1 Flux 아키텍쳐 구성 요소flux 아키텍쳐의 핵심 구성 요소는 V.. 2025. 6. 29. [React] React의 전역 상태 관리 React로 애플리케이션을 개발하다 보면 컴포넌트 간에 데이터를 공유해야 하는 상황에 자주 직면하게 됩니다. 간단한 애플리케이션에서는 props를 통해 데이터를 전달하는 것으로 충분하지만, 애플리케이션의 규모가 커지고 컴포넌트 트리가 깊어질수록 props drilling (상위 컴포넌트에서 하위 컴포넌트로 여러 단계를 거쳐 props를 전달하는 현상) 문제가 발생하여 코드를 복잡하게 만들고 유지보수를 어렵게 만듭니다. 이러한 문제를 해결하고 애플리케이션의 모든 컴포넌트에서 접근하고 업데이트할 수 있는 데이터를 효율적으로 관리하기 위해 전역 상태 관리(Global State Management)가 필요한데요. 오늘은 전역 상태 관리에 대해서 알아보도록 하겠습니다.1. 전역 상태 관리란?리액트는 useSta.. 2025. 6. 29. 쿠키, 세션, JWT에 대해 araboza 웹 서핑을 하다 보면 '로그인 유지', '장바구니', '최근 본 상품' 같은 기능들을 자주 마주치는데요. 여러분이 로그인하지 않아도 내가 뭘 봤는지 기억하고, 심지어는 내 취향에 맞는 광고까지 띄워주잖아요?신기하게도 이런 기능들 뒤에는 쿠키(Cookie), 세션(Session), 그리고 JWT(JSON Web Token)라는 세 명의 핵심 키워드가 숨어 있답니다.이 친구들이 없으면 웹 서비스는 마치 기억상실증에 걸린 것처럼 매번 "너 누구니?" 하고 물어봐야 할 거예요. 자, 그럼 웹 개발에서 사용자 인증과 상태 관리를 책임지는 이 세 친구들을 지금부터 파헤쳐 볼까욧!!!!!1. 🍪 쿠키 (Cookie): 브라우저 속 비밀 쪽지!쿠키는 말 그대로 브라우저에 저장되는 아주 작은 '쪽지' 같은 데이터로 이.. 2025. 6. 24. 이전 1 2 3 4 ··· 107 다음 728x90 반응형