.with Route Handlers 목표 : (구) API Routes라고 불리는 현 Route Handler를 활용해서 API를 Mocking해보자 Framework : NextJS 13(App Router) 여기서 사용 할 예시 API는 POST api/v1/users/login 로그인 기능이다. 돌아가는 지 확인만 해 볼 예정으로 간단하게만 mocking 해 볼 예정 1. app directory에 api 경로 생성 우선, API 명세서의 엔드포인트에 맞게 경로를 생성한다. app directory 내부에 다음과 같이 생성한다. app ┗ api ┃ ┗ v1 ┃ ┃ ┗ users ┃ ┃ ┃ ┣ login ┃ ┃ ┃ ┃ ┗ route.ts만약 엔트포인트 끝에 id와 같은 특정 값이 들어오는 경우 ..

React 18에 등장한 React Server Components React 18에서 새롭게 도입된 개념인 React Server Component(RSC) 에 대해 살펴봅시다. React Server Components(RSC)란? RSC는 서버에서만 렌더링되어 전달되는 컴포넌트를 의미합니다. 이는 HTML이 아닌 특별한 형태로 서버에서 렌더링되어 클라이언트에게 전달됩니다. 특히, NextJS App Router는 이를 기본적으로 지원합니다. 기존 방식의 문제점 컴포넌트 구조는 다음과 같이 설정됩니다 const App = () => { return ( ) } 기존의 방식은 각 컴포넌트에서 API 호출을 통해 데이터를 렌더링합니다. 이렇게 하면 각 컴포넌트는 자신에게 필요한 데이터만을 받게 됩니다. 각..

오늘은 Next.js 13버전이 Stable이 되고 시간이 흘러 안정되었다고 하여 이를 프로젝트에 적용해보고자 하였고, Page Router였던 12버전 대신 App Router을 사용할 예정이므로 큰 변환점을 중심으로 하여 리뷰해보려고 합니다. 다들 Next.js가 React를 기반으로 한 프레임워크라는 것을 알고계신다는 전제 하에 진행하도록 하겠습니다! 간단하게 알아볼 5가지 특징들(App Router 기준) 여기서 알아볼 5가지는 다음과 같습니다. App Router로 넘어오면서 새로 등장한 app directory App Router로 넘어오면서 변경된 Rendering 설정방법 개선된 Navigation tag, API Routes를 통한 백엔드 접근 보다 개선된 이미지 렌더링을 위해 사용된 1..

BEM (Block, Element, Modifier)은 CSS 클래스를 명명하는 방법론 중 하나로, HTML과 CSS의 구조를 더 이해하기 쉽고 유지보수하기 쉽게 만들어주는 효과가 있습니다. BEM의 이름은 아래 세 가지 컴포넌트에 따라 붙여집니다. Block (블록) Element (요소) Modifier (수정자) 1. Block (블록) 블록은 독립적인 엔티티로, 재사용이 가능합니다. 예를 들면, 헤더, 컨테이너, 메뉴, 체크박스 등이 이에 해당합니다. 2. Element (요소) 요소는 블록 내부의 구성 요소로, 블록이 없으면 의미를 가지지 못합니다. 예를 들면, 메뉴 항목, 리스트 항목, 헤더 타이틀 등이 이에 해당합니다. 3. Modifier (수정자) 수정자는 블록이나 요소의 상태와 행동을..

자바스크립트에서 함수를 작성하는 방법은 여러 가지가 있습니다. 그 중에서도 함수 선언문, 함수 표현식, 그리고 화살표 함수에 대해 알아보겠습니다. 이들의 차이점은 무엇이고 어떤 상황에서 어떤 것을 사용하면 좋을까요?1. 리액트에서의 함수 표현식과 선언문리액트에서 컴포넌트 함수를 작성할 때, 함수 선언문과 함수 표현식 중 어떤 것을 사용해야 할까요? 여기에는 정답이 없지만, 두 방식 간의 차이점을 이해하고 상황에 맞게 적절하게 선택하는 것이 중요합니다. 함수 선언문(function () {})을 사용하면 메인 로직을 한눈에 보여주고, export default와 선언을 동시에 할 수 있습니다. 그런데 이 경우, 일반적인 자바스크립트에서 함수 표현식을 사용할 때의 장점을 일부 포기하게 됩니다. 반면, 함수 ..

최근 useEffect 대응방안에서 useMemo를 사용해서 개선하는 방향과 관련된 글을 쓰다가 생각난 건데, 어떤 글에서 useMemo를 쓰지 말라는 주제로 글이 있던 것이 생각났습니다. 그래서 이참에 이것도 알아보기로 하였죠. 왜 useMemo를 쓰면 안 되는 건지, 그전에 useMemo는 무엇인지부터 알아보고 가도록 하겠습니다. 이전 글 보고오기 [React] 왜 React에서는 useEffect의 사용을 추천하지 않을까? - Side Effect 관리 React는 페이스북에서 개발한 강력한 프론트엔드 라이브러리 입니다. 상당히 많은 부분에서 useEffect 훅을 이용하여 개발을 진행하는데, React에서는 useEffect를 지양하고 있다고 합니다. 이번 글에서 time-map-installer..