최근에 Next.js를 계속 공부하고 있는데 그 중 가장 헷갈렸던 부분 중 하나가 'use client' 지시어와 React Hooks의 관계였다.Next.js 13 버전부터 도입된 App Router와 함께 서버 컴포넌트가 기본값이 되면서, React의 useState, useEffect와 같은 훅을 사용하기 위해서는 'use client' 지시어가 필요하게 되었다.이것이 정확히 무엇을 의미하는지, 그리고 이로 인해 SSR(Server-Side Rendering)과 어떤 관계가 있는지 깊이 이해하고 싶어 공부를 시작했고, 이 글에서는 Next.js에서 React Hooks를 사용할 때 'use client' 지시어가 필요한 이유와 이것이 렌더링 방식에 미치는 영향에 대해 자세히 살펴보려 한다.먼저 Ne..

Next.js와 TypeScript로 웹개발 공부를 하면서 정말 간단하게 로그인 기능을 구현하여 main페이지로 라우팅하는 부분을 연습해보았다.이번 글에서는 로그인 페이지부터 인증 후 메인 페이지로 넘어가는 과정까지, 전체 흐름을 코드와 함께 상세하게 설명하려고 한다.특히 각 기술과 개념에 대한 설명을 충분히 제공하여 나와 같이 웹 개발을 배우는 학생들이 이해하기 쉽도록 작성했다.프로젝트 구조 살펴보기Next.js 프로젝트의 구조를 보면 다음과 같다.├── app│ ├── globals.css # 전역 스타일│ ├── layout.tsx # 앱 레이아웃│ ├── page.tsx # 로그인 페이지 (/)│ └── main│ └── pag..

Next.js 라우팅의 기본 개념Next.js의 가장 큰 특징 중 하나는 파일 시스템 기반 라우팅(File-system based routing)이다.이 방식은 React의 SPA(Single Page Application)에서 흔히 사용되는 React Router와 같은 별도의 라우팅 라이브러리가 필요 없다는 큰 장점이 있다.Next.js는 프로젝트의 디렉토리 구조와 파일명을 기반으로 자동으로 라우팅을 구성한다. 파일 시스템 기반 라우팅이란 간단히 말해 폴더와 파일의 구조가 곧 웹 애플리케이션의 URL 경로(path)가 되는 방식이다.예를 들어, /pages/about.tsx 파일은 example.com/about URL로 접근할 수 있다.이렇게 직관적인 구조는 프로젝트의 구조를 이해하기 쉽게 만들고,..

React는 정확히 무엇일까?공식 문서에서는 UI 구축을 위한 JavaScript 라이브러리라고 소개하고 있지만, 주변에서는 프레임워크라고 부르는 경우도 많이 보았다.이 혼란스러운 정체성에 대해 명확하게 이해하고 싶어 라이브러리와 프레임워크의 개념부터 차근차근 정리해보기로 했다.라이브러리란?라이브러리는 개발자가 필요로 하는 기능을 모아놓은 도구 모음이며, 가장 중요한 특징은 개발자가 주도권을 가진다는 점이다.라이브러리는 개발자가 필요할 때 호출하여 사용하며, 프로그램의 흐름을 개발자가 직접 제어한다. 예를 들어, 자바스크립트의 대표적인 라이브러리인 jQuery는 DOM 조작, 이벤트 처리, 애니메이션 등의 기능을 제공하지만 그것을 언제, 어떻게 사용할지는 전적으로 개발자의 몫이다. 라이브러리의 주요 특징..

최근에React로 개발을 진행하면서 가장 큰 특징 중 하나인 SPA(Single Page Application) 환경에서 예상치 못한 문제를 마주쳤다. Apache 서버에 React 애플리케이션을 배포했을 때, 메인 페이지인 '/' 경로는 정상적으로 작동했지만, 다른 경로들에서 404 에러가 발생했다... 😡이 문제를 해결하기 위해 .htaccess 파일을 사용하게 되었고, 그 과정에서 배운 내용들을 정리해보고자 한다!!!SPA(Single Page Application)란?이전 포스팅에서 설명했지만 이 글에서도 SPA에 대한 이해를 다시 한 번 끄집어 내보고자 한다.SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이..

웹 개발을 공부하면서 가장 기본이 되는 개념 중 하나가 뭘까?바로 필자는 HTTP 요청이라고 생각한다!오늘은 필자가 애용하는 Axios와 일반 Fetch에 대해서 비교하고 개념을 정리해보고자 한다.HTTP 요청이란?HTTP 요청은 클라이언트(브라우저)가 서버와 통신하기 위해 사용하는 프로토콜이다.예를 들어, 우리가 웹사이트에서 로그인을 하거나, 게시글을 작성하거나, 상품을 검색할 때마다 HTTP 요청이 발생한다.Fetch API 소개Fetch API는 자바스크립트에 내장된 HTTP 클라이언트로, 별도의 설치 없이 사용할 수 있다는 장점이 있다.Promise 기반으로 작동하며, 모던 자바스크립트의 비동기 처리를 잘 보여주는 API이다.기본적인 Fetch의 사용 예시는 아래와 같다.fetch('https:/..

필자는 최근에 리액트로 프로젝트를 진행하면서 실시간 검색 기능을 구현하게 되었다.처음에는 단순히 onChange 이벤트에 검색 함수를 연결해서 사용했는데, 타이핑할 때마다 API 요청이 발생하는 문제를 발견했다.이를 해결하기 위해 디바운싱(Debouncing)이라는 기술을 알아냈고 적용했는데 정말 이런 실시간 검색 기능에 유용할 것 같아 정리해보기로 했다!디바운싱이란?디바운싱은 연속적으로 발생하는 이벤트를 그룹화하여 마지막 이벤트만 처리하는 프로그래밍 기법이다.예를 들어 사용자가 "hello"라는 단어를 입력할 때, 각 알파벳마다 API를 호출하는 대신 타이핑이 완전히 끝난 후에만 한 번 호출하도록 제어할 수 있다.검색 기능에서의 문제점은 무엇일까?일반적인 검색 구현은 다음과 같이 작성된다.const S..

오늘은 필자가 프로젝트에서 항상 즐겨쓰는 오픈소스 아이콘 라이브러리, lucide-react에 관해 정리해보고자 한다! Lucide-react란?Lucide-react는 React 프로젝트에서 사용할 수 있는 오픈소스 아이콘 라이브러리다.Feather icons를 기반으로 제작되었으며, 간단하고 깔끔한 디자인의 아이콘들을 제공하고 있다! 특히 React 환경에서 쉽게 사용할 수 있도록 최적화되어 있어 개발 생산성을 크게 향상시킬 수 있는데,Lucide는 단순히 아이콘 모음이 아닌, React 컴포넌트로 제공되기 때문에 React의 특성을 살려 동적으로 아이콘을 조작할 수 있다.(또한 TypeScript를 기본적으로 지원하여 타입 안정성도 보장한다!!)설치 방법프로젝트에 Lucide-react를 추가하는 ..

JavaScript ES6 문법을 접하면서 구조분해할당 개념이란 것을 정확히 이해하게 되었다.React를 사용하는 프론트엔드 개발자라면 이 문법이 얼마나 필요한지 얼마나 컴포넌트를 다루는 데에 있어서 편리한지 알지 않을까?하지만 이 개념 자체를 정확히 이해하지 않고 사용하는 개발자들이 많다고 생각이 든다.그래서 오늘은 이 개념에 대해 정리해보고자 한다. 구조분해할당이란?구조분해할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이며,이 문법을 사용하면 코드를 더 간결하고 가독성 있게 작성할 수 있다는 장점이 있다.React에서는 특히 props나 state를 다룰 때 매우 유용하게 사용된다! 아래 예시코드를 살펴보자.const student = { ..

프로젝트를 진행하면서 특정 내용을 프린트하는 기능을 구현해야 하는 상황이 있었다. (pdf 저장기능 포함!)단순히 전체 페이지를 프린트하는 것이 아니라, 필요한 내용만 선택적으로 프린트해야 했고, 프린트 시 레이아웃도 적절하게 조정해야 했다.이 과정에서 React에서의 프린트 기능 구현 방법을 자세히 알아보게 되었고 이에 대해 정리해보기로 했다.프린트 기능의 기본 개념웹 브라우저에서 프린트 기능을 구현할 때는 크게 세 가지 요소를 고려해야 한다.첫째는 프린트 시 적용될 스타일(@media print),둘째는 프린트할 내용을 담을 컨테이너,셋째는 프린트를 실행하는 핸들러 함수다.window.print() API를 사용하면 현재 페이지의 프린트 다이얼로그를 열 수 있지만,그 전에 프린트될 내용과 스타일을 적..