현인

Next.js는 기본적으로 서버 사이드 렌더링(SSR)을 지원한다. 하지만 개발을 하다 보면 간혹 클라이언트 사이드 렌더링(CSR)이 필요한 경우가 생긴다. Next.js는 이러한 경우에도 대처할 수 있도록 CSR 기능도 제공한다. 다시 말해, SSR + CSR 구조로 페이지가 만들어 질 수 있다는 뜻이다.사용 방법사용 방법은 간단한데, ‘use client’ 구문을 컴포넌트 구현 코드 최상단에 선언하면 된다. Next.js 서버에서는 해당 컴포넌트를 CSR 컴포넌트로 해석하여 서버에서 렌더링을 하지 않고 클라이언트로 렌더링을 넘긴다. 아래 코드를 보자.'use client' import { useState } from 'react' export default function Counter() { co..

검색 모달을 구현 중에 다음과 같은 요구사항이 주어졌다."모달 창이 열릴 때 검색 창에 자동으로 포커싱 되게 해주세요."Ref로 Input Element를 참조하고 useEffect를 통해 초기 렌더링시 focus를 주면 될 것 같았다. 따라서 다음과 같이 코드를 작성했다useEffect(() => { if (inputRef.current) { if (searchModalOpen) { inputRef.current.focus(); } } }, [searchModalOpen]);모달 창이 열리고, input에 focus가 잡혔다. 하지만 문제가 있었다. 모달 창을 닫고 다시 열면 focus가 잡히지 않았다. 무엇을 놓치고 있었을까 고민이 들었다. 스스로 유추한 문..

API fetch 중 문제가 발생했을 때, 에러 창을 띄우는 것이 아닌 이전 데이터를 유지 해야 한다는 요구사항이 있어서 다음과 같이 구현했다. 프레임워크는 Next.js 이며, 별도의 API 관련 라이브러리를 사용하지 않고 fetch로 가져온다.const fetchData = useCallback(async () => { const response = await fetch('API URL'); if (response.ok) { const fetchedData = await response.json(); setData(fetchedData); // 데이터를 LocalStorage에 저장, 오류 발생 시 캐시된 데이터 사용하기 위함 localSt..

현재 회사에서 Monorepo 구조로 프로젝트를 관리하고 있는데, Release Tag를 수동으로 찍고 있어서 불편하다고 느꼈다.Release Tag를 찍으려면 package.json 버전을 올리고, 컨벤션에 맞춰서 tag를 생성한 뒤 올려야 하는데 매번 수동으로 작업하면 실수할 수도 있고 귀찮기도 하니 스크립트로 구현했다.내가 원한 기능은 ‘release ’ 명령어를 입력하여 release tag를 작성하는 것이었다.먼저 스크립트는 아래 처럼 구현했다.#!/bin/bash# 명령어 입력 확인if [ $# -eq 0 ]; then echo "❌ Usage: release " exit 1fi# 프로젝트 이름project_name=$1# 프로젝트 경로 설정, 모노레포라서 apps 디렉토리 하위로 프로젝트..

robots.txt 파일은 검색엔진 크롤러가 사이트에서 접근할 수 있는 URL을 지정하는 파일이다. 주로 크롤러 요청으로 인해 사이트에 과부하가 발생하는 것을 방지하기 위해 사용한다. 다만, 이 파일은 웹페이지가 Google 검색결과에 표시되지 않도록 차단하는 수단으로 사용해서는 안 된다. 검색결과에서 페이지를 숨기려면 noindex 태그를 사용하거나 비밀번호로 보호해야 한다.robots.txt 파일의 주요 용도크롤러 트래픽 관리크롤러가 특정 URL이나 리소스에 접근하지 못하도록 제한한다.리소스 크롤링 차단단, 이러한 리소스가 페이지 이해에 중요한 역할을 한다면 차단해서는 안 된다.중요하지 않은 이미지, 스크립트, 스타일 파일 등을 차단하여 크롤러가 불필요한 리소스를 크롤링하지 않도록 한다.미디어 파일 ..