rexondex's blog

[Next.js] 현대적인 웹 애플리케이션 개발을 위한 React 프레임워크

Next.js: 현대적인 웹 애플리케이션 개발을 위한 React 프레임워크정의Next.js는 사용자 경험(User Experience)과 개발자 경험(Developer Experience)을 극대화하기 위해 설계된 React 기반의 풀스택 웹 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원하며, 간편한 라우팅, API 엔드포인트 생성, 최적화된 빌드 및 배포 기능을 제공하여 현대적인 웹 애플리케이션 개발을 효율적으로 만들어줍니다.핵심 개념파일 시스템 기반 라우팅 (File-system Routing):pages 디렉터리 내의 파일 구조를 기반으로 자동으로 라우트가 생성됩니다.예시: pages/about.js는 /..

Next.js란 무엇인가요? Next.js는 풀스택 웹 애플리케이션을 빌드하기 위한 React 프레임워크입니다.React Components를 사용하여 사용자 인터페이스를 빌드하고 Next.js를 사용하여 추가 기능과 최적화를 구현합니다. 후드 아래에서 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 툴링을 추상화하고 자동으로 구성합니다. 이를 통해 구성에 시간을 들이는 대신 애플리케이션 빌드에 집중할 수 있습니다. 개인 개발자이든 대규모 팀에 속한 사람이든 Next.js는 대화형, 동적인, 빠른 React 애플리케이션을 구축하는 데 도움을 줄 수 있습니다. https://nextjs.org/docs Introduction | Next.jsWelcome to the Next.js Docum..

리액트 컴포넌트의 이해: 함수형 vs 클래스형리액트에서 컴포넌트는 UI를 구축하는 핵심적인 building block이며, 독립적이고 재사용 가능한 코드 단위입니다. 컴포넌트를 통해 복잡한 사용자 인터페이스를 작고 관리하기 쉬운 조각으로 분할하여 개발 효율성과 유지보수성을 크게 향상시킬 수 있습니다.리액트 컴포넌트는 탄생 초기부터 존재했던 클래스 컴포넌트와 이후 등장하여 주류가 된 함수형 컴포넌트 두 가지 주요 유형으로 나뉩니다.함수형 컴포넌트 (Functional Components)정의:함수형 컴포넌트는 JavaScript의 일반적인 함수로 작성됩니다. 이 함수는 props (properties) 라는 입력 객체를 인자로 받아, 리액트 엘리먼트를 기술하는 JSX (JavaScript XML) 를 반환..

useCallback에 대해 스스로 내용을 정리해 보았습니다.useCallback ? useCallback의 간단한 정의는`리렌더링 간에 함수 정의를 캐싱해 주는 React Hook` 입니다.const cachedFn = useCallback(fn, dependencies)[ 레퍼런스 ] 리렌더링 간에 함수 정의를 캐싱하려면 컴포넌트의 최상단에서 useCallback을 호출합니다import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + pro..

useMemo에 대해 스스로 내용을 정리해 보았습니다.useMemo ? useMemo의 가장 간단한 정의는`재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 Reack Hook` 입니다.const cachedValue = useMemo(calculateValue, dependencies)[ 레퍼런스 ] 컴포넌트의 최상위 레벨에 있는 `useMemo`를 호출하여 재렌더링 사이의 계산을 캐싱합니다.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} - 매개변수calcula..

리액트의 가상 DOM(VirtualDOM)에 대한 핵심 개념을 3가지로 정리해보았습니다.1.성능 향상요소 비교하기 (Reconciliation) :리액트의 "조정(reconciliation)" 과정은 가상 DOM의 변경 사항을 비교하는 Diffing 알고리즘을 사용하여 실제 DOM에 최소한의 변경 사항만 적용하는 핵심 과정입니다.이 과정에서 리액트는 변경된 부분만 효율적으로 업데이트하여 성능을 향상시킵니다.- https://ko.legacy.reactjs.org/docs/reconciliation.html또한, 리액트 18 이후 동시성 렌더링 도입으로 인해서 렌더링의 과정이 많이 변경되었으므로 참고할 수 있습니다.- https://react.dev/blog/2022/03/29/react-v182. 개발 ..

리액트 렌더링 순서에 따라 8단계로 정리하였습니다. 1. 컴포넌트와 JSX컴포넌트 : 레고 블록처럼 UI를 구성하는 작은 단위입니다. 재사용 가능한 코드로, 웹 페이지의 특정 부분을 담당합니다. (예: 버튼, 입력창, 메뉴 등)- https://react.dev/reference/react/Component JSX : HTML처럼 생긴 문법으로, JavaScript 코드 안에서 UI를 쉽게 작성할 수 있게 도와줍니다. 브라우저는 JSX를 이해하지 못하므로, JavaScript 코드로 변환해야 합니다.- https://react.dev/learn/writing-markup-with-jsx React.createElement() : JSX는 React.createElement()라는 함수를 호출하는 형태로 ..

items.json은 깃허브에 배포한 제 블로그의 게시물 데이터 파일입니다. 제 items.json 또한 공개된 장소에 누구나 접근할 수 있으므로 Nest.js에서 Axios로 데이터를 요청해 보았습니다. -- Next.js 설치npx create-next-app@latest-- 프로젝트 디렉토리로 이동cd my-nextjs-project-- 프로젝트 실행npm run dev   Next.js에서는 `/app` 하위에 있는 `page.tsx`가 기본 화면으로 동작합니다. 그래서 `/app/page.tsx`가 `localhost:3000/` 에 접속했을때 보이는 기본 화면이 됩니다. 저는 `/app` 하위에 `/request` 를 생성한 후, `page.tsx`를 생성했습니다. 이 `/reqeust/pag..