권용휘

함수나 메서드를 설계할 때, 매개변수를 어떻게 받을지는 코드의 가독성, 유지보수성, 확장성에 큰 영향을 미칩니다. 이는 특정 라이브러리나 프레임워크를 넘어 모든 프로그래밍 언어와 설계에서 공통적으로 고려해야 할 중요한 요소입니다. 이번 글에서는 매개변수를 직접 받는 방식과 객체로 받는 방식을 비교하며, 각 방식의 장단점과 적합한 상황을 설명합니다. ■ 매개변수를 직접 받는 방식매개변수를 함수의 인자로 하나씩 나열하여 전달하는 방식입니다.호출부와 정의부에서 매개변수의 순서가 정확히 일치해야 하며, 매개변수가 적을 때 가장 간단하고 직관적입니다.# 코드 예제function calculateRectangleArea(width: number, height: number): number {   return wid..

React Query를 사용할 때, 한 페이지에서 여러 mutate를 사용하다 보면 코드가 복잡해지고 가독성이 떨어질 수 있습니다.저 역시 page.tsx에서 useMutation을 직접 사용하던 초기 방식에서, 이를 hooks 폴더로 분리하여 관리 효율성을 높였습니다.이번 글에서는 제가 겪었던 문제와 이를 해결하기 위한 과정을 소개합니다. ■ 기존 폴더 구조처음에는 src/api 폴더에서 API 호출 로직만 분리하고, page.tsx에서 직접 useMutation을 사용했습니다.src/ ├── api/ │ ├── map.ts # 경로 관련 API │ ├── user.ts # 사용자 관련 API │ ├── index.ts # API 묶음 관리├── app/ │ ├── page.tsx # 페이지 컴포넌트 ..

Next.js를 사용하면 웹 애플리케이션의 SEO를 손쉽게 개선할 수 있습니다. SEO(Search Engine Optimization)는 검색 엔진에서 더 높은 가시성을 얻기 위해 중요한데, Next.js의 Metadata API를 활용하면 페이지마다 적절한 메타 정보를 설정하여 SEO를 최적화할 수 있습니다. 이번 글에서는 SEO가 무엇인지, 그리고 Next.js 13+ 버전의 app 디렉토리 기반 라우팅에서 메타데이터를 어떻게 설정할 수 있는지에 대해 자세히 살펴보겠습니다. ■ SEO란?**SEO(검색 엔진 최적화)**는 웹사이트가 검색 엔진에서 더 잘 노출되도록 하는 일련의 작업입니다. 구글, 빙, 네이버와 같은 검색 엔진은 웹사이트를 색인(indexing)하고 검색 결과에 표시할 때, 메타데이터..

최근 프로젝트에서 Next.js와 Zustand를 함께 사용해 사용자 상태(userData)를 관리하고 있었습니다. 특히, 상태에 저장된 사용자 정보를 API로 넘기기 위해 Zustand의 useUserStore를 API 함수에서 직접 사용하려 했습니다. 하지만 다음과 같은 오류가 발생했습니다:webpack://_N_E/src/client/app-index.tsx?b6bc의 콘텐츠를 로드할 수 없습니다.  (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP 오류: 상태 코드 404, net::ERR_UNKNOWN_URL_SCHEME) 이 오류는 Next.js가 서버와 클라이언트 모두에서 실행되기 때문에, 클라이언트 전용 상태 관리 훅..

Next.js는 현대 웹 애플리케이션 개발을 최적화하는 데 강력한 도구를 제공합니다. Next.js는 기본적으로 **서버 사이드 렌더링(SSR)**을 사용하지만, 상황에 따라 **정적 사이트 생성(SSG)**을 자동으로 적용하여 성능을 극대화합니다. 이 글에서는 Next.js의 SSR, SSG 최적화 전략과 동적 컴포넌트 관리 방법에 대해 다룹니다. ■ Next.js의 기본 설정: SSR과 SSG의 자동 최적화Next.js는 기본적으로 SSR이 defalut로 적용합니다. 이는 페이지 요청 시 Next.js 서버가 HTML을 생성하고 클라이언트로 전달하는 방식입니다. 여기서 "서버"는 Next.js가 자체적으로 제공하는 서버로, 여러분이 사용하는 백엔드(Spring Boot, Node.js 등)와는 다른..

# 이슈Docker 컨테이너에서 실행 중인 React 프로젝트에서 특정 경로의 이미지를 변경해야 할 때, 어떻게 처리할 수 있는지에 대한 가이드입니다. 이 가이드는 Linux 환경에서 명령어를 사용해 이미지를 교체하는 방법을 설명합니다. # 명령어1. 교체하고자 하는 파일 서버에 전송하기 - 우선, 교체하려는 이미지를 서버에 전송해야 합니다. SFTP 클라이언트(예: Filezilla)를 사용하여 이미지를 서버로 업로드합니다.cd /home/developer/application/ 2. Docker 컨테이너 ID 확인하기현재 실행 중인 Docker 컨테이너의 ID를 확인합니다. 이를 통해 어떤 컨테이너에서 작업할지 명확히 할 수 있습니다. docker ps 3. Docker 컨테이너에 접속하여 파일 경로..

Zustand란?React 애플리케이션에서 상태 관리를 위해 사용되는 경량 상태 관리 라이브러리입니다. 이 라이브러리는 간단하고 직관적인 API로, 작은 애플리케이션부터 복잡한 애플리케이션까지 손쉽게 상태 관리를 할 수 있도록 도와줍니다. Zustand는 단일 스토어 모델을 따르며, 리덕스(Redux)의 보일러플레이트 코드 없이도 쉽게 사용할 수 있습니다. 상태 관리 라이브러리란?상태 관리 라이브러리는 웹 애플리케이션에서 컴포넌트 간의 상태를 효율적으로 관리하고 공유하기 위해 사용되는 도구입니다. 현대 웹 애플리케이션은 사용자와의 상호작용이 많아지고, UI가 복잡해지면서 상태(state)를 효과적으로 관리하는 것이 중요해졌습니다. 상태란 애플리케이션의 특정 시점에서의 데이터의 모습을 의미하며, UI 요소..

윈도우에서는 node버전을 쉽게 관리할 수 있는 NVM을 설치해서 사용하면 정말 편하게 관리 할 수 있다.1. nvm이 설치 되어 있나 확인nvm -v 2. nmv이 있다면 3번으로 이동.   - nvm설치(exe파일 받고 실행시키면 별 다른 설정 없이 설치): https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com 3. 설치할 수 있는 node버전 확인(node 공식홈https://nodejs.org/en에서..

1. CSR(Client Side Rendering)- 서버에서 빈 HTML, 라이브러리, JavaScript 코드를 다운로드하고 클라이언트(브라우저) 측에서 렌더링- useEffect으로 api통신하는 것- 장점    - 한 번만 로딩되면 빠른 UX 제공 →  fetch를 사용해 부분적으로 렌더링 가능    - 서버의 부하가 적음 → 서버는 API 요청을 처리하지만, 페이지 렌더링은 클라이언트에서 수행. 이로 인해 서버의 부담이 상대적으로 적음 - 단점     - 초기 페이지 로딩 시간이 길다     - js활성화 필수    - 서버와 통신해야 해서 보안에 취약함     - CDN에 캐시되지 않음- 단점의 해결책으로 나온것이 SSG, ISR# 예시 코드// pages/index.js import { u..