choijming21 님의 블로그

Next.js 프로젝트에 Tailwind CSS를 설치하는 과정에서 "npx tailwindcss init -p" 명령어를 실행했을 때 "could not determine executable to run" 오류가 발생하는 경우가 있었습니다. 이 글에서 이 문제의 원인과 해결 방법에 대해 정리해보겠습니다!    1.  문제 발생❓Next.js 프로젝트를 설정하고 Tailwind CSS를 설치한 후 초기화 명령어를 실행했을 때 다음과 같은 오류가 발생했습니다.npx tailwindcss init -pnpm error could not determine executable to runnpm error A complete log of this run can be found in: /Users/username/..

1.  문제 발생❓ params를 이용한 동적 렌더링 페이지 4개(DynamicPage 컴포넌트)를 구현했습니다. params의 pageId값을 받아 pageId값과 일치하는 데이터를 찾아 각각의 pageConfig 데이터를 초기에는 클라이언트 측에서 렌더링 하는 방식으로 구현했습니다. 하지만 전체 페이지가 클라이언트 컴포넌트로 설정되어 있어 이로 인해 초기 페이지 로딩 시 이미지 렌더링 속도가 현저히 느려지는 문제가 발생했습니다.  2.  원인 분석 🔎 Next.js에서 클라이언트 컴포넌트 "use client"로 설정된 컴포넌트는 서버에서 사전 렌더링 되지 않고 클라이언트 측에서 hydration이 완료된 후에만 완전히 렌더링됩니다. 전체 DynamicPage 컴포넌트가 클라이언트 컴포넌트였기 때문..

1.  문제 발생❓ 제 프로젝트에서는 네비게이션바(GNB)의 버튼들이 두 가지 다른 기능을 수행해야 했습니다:특정 섹션으로 자동 스크롤 되는 버튼 ( "/ " => 해당 섹션으로 이동 )새로운 페이지로 이동하는 버튼 ( "/resource" ) 이러한 두 기능을 사용하는 버튼이 각각 있었는데, 문제는 페이지 이동 후에도 원래의 페이지에서 자동 스크롤 기능을 유지해야 한다는 점이었습니다. 즉, 다른 페이지에서 특정 섹션으로 이동하는 버튼을 클릭 했을 때, 메인 페이지로 이동한 다음 해당 섹션으로 자동 스크롤 되어야 했습니다.    2.  해결 과정 📋 이 문제를 해결하기 위해 useNavigationHandler 커스텀 훅을 개발했습니다. 이 훅은 버튼 클릭 시 동작을 결정하고, 필요에 따라 페이지 이동..

1.  문제 발생❓TypeScript에서 MutableRefObject 타입을 사용하는 Lnb 컴포넌트에서 refs.current를 배열처럼 처리하려고 할 때 문제가 발생했습니다. PdpRefs는 Map 타입으로 정의되어 있지만, 실제로는 숫자 인덱스(0, 1, 2, 3 등)로 접근할 수 있는 객체로 동작했습니다.// 타입 정의export type PdpRefs = Map;// 컴포넌트에서 시도한 코드{refs.current.map((ref, index) => { // 오류: 'map' 속성이 없습니다 // ...})}   2.  원인 추론 🔎TypeScript 타입으로는 PdpRefs가 Map 객체로 정의되어 있음실제 런타임에서 refs.current는 다음과 같은 특성을 보임Object.keys(..

안녕하세요! 오늘은 제가 프로젝트에서 마주친 반응형 이미지 렌더링 문제와 해결 방법에 대해 공유하려고 합니다.  1.  문제 발생❓제 프로젝트에서는 breakpoint가 768px로만 설정되어 있었지만, 이미지는 mobile, tablet, desktop 세 가지 디바이스 크기에 맞춰 렌더링해야 했습니다. 이런 요구사항을 어떻게 효율적으로 구현할지 고민하던 중 HTML의와 태그를 알게 되었습니다.   2.  해결 과정 📋HTML5에서 도입된 태그는 다양한 화면 크기와 해상도에 맞는 이미지를 제공하는 강력한 방법입니다. 이 태그는 태그와 함께 사용하여 미디어 쿼리에 따라 적절한 이미지를 자동으로 선택해 줍니다. import React from "react";import { DesktopViewCon..

1.  문제 발생❓Git은 기본적으로 파일명의 대소문자를 구분하지 않습니다. 예를 들어, Hero.style.ts를 hero.style.ts로 변경하려고 할 때 Git은 이를 같은 파일로 인식하여 변경사항을 제대로 추적하지 못합니다. bashCopy$ git mv Hero.style.ts hero.style.tsfatal: bad source, source=Hero.style.ts, destination=hero.style.ts 이 오류 메시지는 Git의 파일 이름 변경 명령어 실행 중 발생한 문제를 나타냅니다.git mv Hero.style.ts hero.style.ts 명령은 파일 이름을 대문자 'Hero.style.ts'에서 소문자 'hero.style.ts'로 변경하려는 시도였습니다. "fatal..

1. 유닛 테스트란 ?유닛 테스트는 소프트웨어의 개별적인 단위(컴포넌트, 함수 등)가 의도한 대로 작동하는지 확인하는 테스트입니다.   2. 유닛테스트가 필요한 이유? 1. 버그 예방코드 변경 시 기존 기능이 망가지지 않았는지 확인에러를 초기에 발견하여 수정 비용 절감 2. 코드 품질 향상테스트를 작성하며 코드의 문제점을 발견더 나은 코드 구조와 설계를 유도 3. 리팩토링 용이성안전한 코드 수정 가능기능이 올바르게 동작하는지 즉시 확인 4. 문서화 효과테스트 코드가 컴포넌트의 사용법을 보여주는 예시 역할새로운 팀원의 코드 이해도 향상   3. 주요 테스트 라이브러리1. Jestfacebook에서 만든 JavaScrip 테스팅 프레임 워크쉬운 설정과 사용법스냅샷 테스팅 지원풍부한 matcher 함수 제공2..

1.  문제 발생❓Next.js 프로젝트 빌드 시 다음과 같은 에러가 발생했습니다.Export encountered errors on following paths:/(pages)/(club)/club/type-selection/create/one-time/page: /club/type-selection/create/one-time/(pages)/(club)/club/type-selection/create/regular-time/page: /club/type-selection/create/regular-timeerror Command failed with exit code 1.   // app/(pages)/(club)/club/type-selection/create/one-time/page.tsx"use..

1. 문제 발생❓Git 저장소에 Supabase key를 올려버렸습니다...나중에 Git 저장소의 여러 브랜치에 걸처 키가 포함된 'supabaseClient.ts' 파일이 커밋되어 있음을 발견했습니다.알아차린 시점이 조금 늦었습니다.  pr도 올리고 머지 성공하고 각자 팀원들 작업하고 ... 하루 뒤에 알아버렸습니다.pr에도 기록이 남아있고, 개개인 브랜치에도 기록이 남아있는 상태입니다.(돌이킬 수 없는 강...을 건너버렸습니다...🥲)supabaseClient.ts에는 키와 같이 중요한 정보가 들어있어 보안 위험이 있어 노출되면 안됩니다.   2. 원인 추론 🔎개발 과정에서 하드 코딩 된 값을 사용했기 때문입니다.코드 리뷰 과정에서 이 문제를 발견하지 못했습니다.    3. 해결 과정 📋1. p..

1. 문제 발생❓사용자가 마이페이지에서 프로필 사진과 닉네임을 수정한 수, Comments 컴포넌트에서 새 댓글 작성할 때 수정된 프로필 정보가 반영되지 않고 이전 프로필 정보가 남아있는 문제가 발생함.     2. 원인 추론 🔎원래 코드를 살펴보면 Comments 컴포넌트가 처음 렌더링될 때만 useAuthStore에서 사용자 정보를 가져오고 있다.이로 인해 마이페이지에서 프로필 정보를 수정해도 Comments 컴포넌트에는 반영되지 않는다.원래 코드(주요 부분)const Comments = () => { const { newComment, setNewComment, editingComment, setEditingComment } = useCommentStore(); const { token, us..