choijming21 님의 블로그

Next.js 는 지속적으로 발전하는 React 기반 웹 프레임워크입니다. 최근 버전에서 라우팅 시스템에 큰 변화가 있었습니다. 이 블로그 포스트에서는 Next.js의 새로운 라우팅 시스템, 특히 useRouter의 대체제인 usePathname, useSearchParams, useParams 그리고 useRouter의 주요 메서드들에 대해서도 자세히 알아보겠습니다.     1. useRouter 란?useRouter는 Next.js에서 제공하는 훅 중 하나로, 현재 페이지의 라우터 정보에 접근할 수 있게 해줍니다. 이를 통해 URL의 정보를 얻거나, 프로그래밍 방식으로 페이지 간 이동을 할 수 있습니다.  ⭐⭐⭐⭐⭐   useRouter는 오직 클라이언트 컴포넌트에서만 사용할 수 있습니다. 서버 컴포..

웹 애플리케이션의 기본 구조는 보통 클라이언트(브라우저)와 서버로 구성합니다. 클라이언트는 사용자와 상요작용하는 부분이고, 서버는 데이터를 처리하고 저장하는 부분입니다.  클라이언트-서버 통신은 주로 HTTP 프로토콜을 통해 통신합니다. 클라이언트가 서버에 요청(request)을 보내면, 서버는 그에 대한 응답(response)을 보냅니다.  Next.js의 역할을 React 기반의 프레임 워크로, 클라이언트 사이드 렌더링과 서버 사이드 렌더링 모두 지원합니다. 또한, API 라우트를 쉽게 만들 수 있게 해줍니다.  이제 전반적인 웹 애플리케이션의 흐름을 알았으니 Route Handler와 Server Action에 대해 알아보도록 하겠습니다.      1. Route Handler목적: API 엔드포인..

오늘은 Next.js에서 사용되는 렌더링 방식에 대해서 블로그에 담아보겠습니다. 먼저 렌더링 방식을 설명하기에 앞서 알아야할 주요 개념이 있습니다. 바로 Pre-Rendering과 Hydration입니다. 이 두가지에 대해 먼저 알아보고 갑시다.    Pre-RenderingNext.js는 렌더링을 할 때, 기본적으로 pre-rendring(사전 렌더링)을 수행합니다. 사전 렌더링이란 서버에서 DOM 요소들을 Build하여 HTML 문서를 렌더링 하는 것을 말합니다. Hydration미리 렌더링 된 HTML에 Javascript를 결합하여 이벤트가 동작할 수 있도록 만드는 과정을 말합니다.      이러한 개념을 봤을 때, pre-renderin을 하는 방법은 SSG와 SSR로 나뉘며 둘의 차이는 HTM..

TypeScript(타입스크립트)란?자바스크립트의 모든 기능을 포함한 상위 집합의 언어입니다. 즉, typescript = javascript + 정적 type system 입니다.    모던 개발 환경에서 안전한 프로그래밍을 위해서는 정적 타입 시스템이 존재하는 언어를 사용하는 것이 필수이기 때문에 타입스크립트는 중요합니다!      Javascript vs TypeScript 특징JavaScriptTypeScript타입 시스템동적 타입정적 타입컴파일필요 없음javascript로 컴파일 필요(프로젝트가 대형화되면 컴파일 시간이 길어짐)개발 경험유연하고 빠르게 시작 가능코드 완성, 타입 검사 등으로 향상된 개발 경험프로젝트 규모작은 프로젝트에 적합대규모 프로젝트에 적합런타임 오류런타임에 오류 발견 가능컴..

비동기 프로그래밍: 자바스크립트는 비동기 작업을 통해 긴 작업이 완료될 때까지 다른 코드가 멈추지 않고 실행되도록 한다.    동기(Synchronous)특징: 작업이 순차적으로 진행되며, 하나의 작업이 끝나야 다음 작업을 수행할 수 있다.문제점: 네트워크 요청이나 파일 읽기 같은 작업이 오래 걸리면, 그 작업이 끝날 때까지 나머지 코드가 실행되지 않는다. 비동기(Asynchronous)특징: 오래 걸리는 작업이 끝나길 기다리지 않고, 다른 작업을 먼저 진행할 수 있다.장점: UI가 멈추지 않고 사용자에게 빠르게 반응할 수 있는 애플리케이션을 만들 수 있다.     비동기 작업을 동기적으로 처리하기!async / await 문법: 자바스크립트에서 비동기 작업을 처리하기 위한 최신 문법이다! 기본적인 작동..

[1-2] 비동기1 - 비동기, promise[1-5] json-server[1-6 ~ 1-7] axios의 GET, POST, DELETE, PATCH, fetch와의 비교[1-10] tanstack query 기본 사용법 (매우중요)[1-15] zustand 기본 사용법[1-20] 인증인가 개념 실습[1-21] tailwind   [1-6 ~ 1-7] axio의 GET, POST, DELETE, PATCH, fetch와 비교 axios란?node.js 브라우저를 위한 Promise 기반 http 클라이언트라고 소개하고 있다. 즉, http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다.    설치yarn add axios json-server 설정{ "todos": [ { "id..

필수 개념은 다음과 같다.[1-2] 비동기1 - 비동기, promise[1-5] json-server[1-6 ~ 1-7] axios의 GET, POST, DELETE, PATCH, fetch와의 비교[1-10] tanstack query 기본 사용법 (매우중요)[1-15] zustand 기본 사용법[1-20] 인증인가 개념 실습[1-21] tailwind  [1-2] 비동기, promise동기: 순차적으로 진행, 요청을 보내고 응답을 기다린다.(ex 주문 후, 커피가 나올 때까지 기다려주세요!  다음사람들은 아직 주문 못한 상태로 기다리는중...) 비동기: 비순차적으로 진행, 요청을 보내고 응답을 기다리지 않고 바로 다음 작업을 진행한다.(ex 주문 후, 진동벨이 울리면 커피를 가지러 오세요! 모든 사람..

호버(hover)란?호버는 마우스 커서를 특정 요소 위에 올려놓은 상태를 말한다. 사용자 인터페이스에서 중요한 상호작용 방식 중 하나로, 추가 정보를 제공하거나 시각적 피드백을 주는데 자주 사용된다.    CSS에서는 ":hover" 의사 클래스(pseudo-class)를 사용하여 호버 효과를 구현한다. 이를 통해 요소에 마우스를 올렸을 때의 스타일을 정의할 수 있다. 아래는 호버 효과 예시이다..hover-button { padding: 10px 20px; background-color: #3498db; color: white; border: none; cursor: pointer; t..

useEffectuseEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.컴포넌트가 마운트 됐을 때, 컴포넌트가 언마운트 됐을 때, 컴포넌트가 업데이트 됐을 때 특정 작업을 처리할 수 있다.즉, 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용해야한다.     useEffect() 사용법 기본형태useEffect(function, deps) - function: 수행하고자 하는 작업- deps: 배열 형태이며 의존성 배열이라고 한다. 배열 안에는 검사하고자 하는 특정 값 or 빈 배열     활용해보기! import를 사용해 useEffect..

React란?Facebook에서 개발한 오픈 소스 프론트엔드 라이브러리이다. 웹 및 모바일 에플리케이션의 사용자 인터페이스를 구축하는데 사용된다.예를 들어, React는 레고블럭과 같다. 작은 블록(컴포넌트)들을 조합하여 복잡한 구조물(애플리케이션)을 만든다.  주로 React는 SPA를 만드는데 사용됨으로 현대 웹개발에서 매우 인기 있는 도구이다. 동적이고 반응적인 사용자 인터페이스를 만드는데 특히 유용해서 많은 기업들이 사용중이다!  주요 특징- 컴포넌트 기반: UI를 재사용 가능한 작은 조각(컴포넌트)으로 나눈다.- 가상 DOM: 실제 DOM 변경을 최소화 하여 성능을 개선한다.- 단방향 데이터 흐름: 데이터의 흐름을 예측 가능하게 만든다. 사용 이유- 효율적인 UI 업데이트: 변경된 부분만 업데이..