**Concurrently를 통한 동시 실행// package.json{ "scripts": { "dev": "concurrently \"npm run server\" \"npm run client\"", "server": "node server.cjs", "client": "vite" }}concurrently: 여러 명령어를 동시에 실행하게 해주는 도구npm run dev 하나로 서버와 클라이언트를 동시에 실행 **실행 프로세스npm run dev ├─> npm run server (3001 포트) └─> npm run client (5173 포트)**서버 (server.cjs)const express = require('express');const app = express()..

// 2. 별만 있는 패턴 정의 (호버된 경로용) const starPattern = document.createElementNS(SVG_NAMESPACE, "pattern"); starPattern.setAttribute("id", "stars-only-pattern"); // 별 패턴 ID starPattern.setAttribute("patternUnits", "userSpaceOnUse"); // ★ 중요: 별 크기 고정 starPattern.setAttribute("width", "200"); // 패턴 타일 크기 starPattern.setAttribute("height", "200"); // 패턴 배경은 투명하게 (아..

svg의 각 path가 hover할 시 그라데이션 효과와 함께 별 하늘 효과를 적용하려고 했는데 fill의 한계인지 어느 한 패턴이 다른 패턴을 덮어버리는 문제가 발생했다. 만약에 그라데이션을 별 패턴에 적용할 경우 예쁘지 않은 박스 형태로 그라데이션이 적용되버렸다....그렇다고 박스 자체의 적용 크기를 키우면 그라데이션 자체가 제대로 적용이 안되버리니 아예 개발자 도구에서처럼 박스 자체를 좌표로 따서 그 부분에 전체 그라데이션을 적용하고 효과도 주려고 했다. 그런데 웬걸. 실제로 박스를 가져오니 이런 문제가 발생했다.문제 원인결론부터 말하자면 path가 가진 transform 속성의 문제였다. 최종적으로 path를 이동시키니 path의 각 좌표를 최상단 하단 좌단 우단을 따도 어긋남이 발생한것. 문제가..

본격적으로 지도를 꾸며서 hover가 의미있도록 하려고 한다.fetch를 통해 불러온 것이기 때문에 직접 onclick 이벤트를 부여하면서 hover 효과도 같이 부여한다.**MapComponent.tsx useEffect(() => { const clickHandlers = new Map(); fetch('/Map_of_South_Korea-blank.svg') .then((res) => res.text()) .then((svgText) => { if (containerRef.current) { containerRef.current.innerHTML = svgText; const paths = containerRef.curren..

앞서 실행한 홈페이지에서 지도 이동으로 지역을 누르면 아래와 같은 목록이 구현되도록 했다.**연결 과정//app/page.tsx //MapComponent.tsx router.push(`/provinces/${provinceName}`);해당 부분을 통해 지도의 특정 지역을 클릭하면 해당 지역의 provinceName(예: '경기도', '서울시' 등)을 URL에 포함시켜 /provinces/경기도 또는 /provinces/서울시와 같은 경로로 이동시킨다.**provinces/[PROVINCE]/page.tsximport { getMountainsByState } from '@/lib/db'import MountainCard from '@/components/MountainCard'export de..

2차 개선 : 지도 클릭으로 이동하도록 개선구현 아이디어. 각 구역의 링크부분을 각각 지도에 배치하는 방식으로 구현하여 시각적으로 어느 위치에 있는 산인지 파악이 쉽도록 수정 지도 데이터는 위키 백과의 svg를 사용했습니다. 파일:Map of South Korea-blank.svg - 위키백과, 우리 모두의 백과사전원본 파일 (SVG 파일, 실제 크기 800 × 1,200 픽셀, 파일 크기: 320 KB) 설명Map of South Korea-blank.svg English: Blank map of territory claimed by South Korea 한국어: 대한민국(남한)의 백지도 날짜 2009년 11월 14일 출처ko.m.wikipedia.org 많은 프로그램에서 지역을 클릭하면 해당 지역에..

활용 자료https://www.bigdata-forest.kr/frn/index산림빅테이터 거래소의 산림관광정보 csv입니다. 한국산림복지진흥원에서 무료로 제공하는 데이터입니다. 데이터 상품 정보 - 산림 관광지와 관련된 산정보소재지, 산정보상세내용, 산이미지 등 ■ 기간 및 범위 ∙ 2019년 1월 ~ 2019년 12월 (월단위) ■ 컬럼(속성) 정보 ∙ 산정보 목록 : 산정보 카테고리(산정보소재지. 산정보상세내용 등) ∙ 산 이미지 정보 : 산 이미지 카테고리(이미지명, 이미지파일명 등) ∙ 전통마을숲 : 전통마을숲 카테고리(전통마을숲명, 전통마을숲소재지명 등) ∙ 명산정보 목록 : 명산정보 카테고리(100대명산 선정이유 내용, 소재지 등)  ■ 활용 예제 ∙ 본 데이터 상품을 활용하여 사용자는 다음..

MovieDetailPage 부분1. 파일 상단에 'use client' 지시문 추가**제목'use client'Next.js 13 이상에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트이다.React hooks를 사용하는 컴포넌트는 클라이언트 컴포넌트로 지정해야 하므로 'use client' 지시문이 필요// 기존 React Routerconst { id } = useParams();const navigate = useNavigate();// Next.jsimport { useParams, useRouter } from 'next/navigation'; const params =useParams(); const id = params?.id as string; // ?가 없을 경우 const route..

React Router 기반 코드를 Next.js로 마이그레이션하는 주요 이유들 중 가장 큰 이유는 SEO(검색 엔진 최적화) 성능 향상이다.Next.js는 서버 사이드 렌더링(SSR)을 기본적으로 지원검색 엔진이 JavaScript를 실행하지 않고도 콘텐츠를 크롤링 가능초기 페이지 로드 시 완성된 HTML을 제공하여 검색 엔진 최적화에 유리장점:SEO 최적화서버 사이드 렌더링(SSR) 기본 지원메타 태그 관리 용이검색 엔진이 콘텐츠를 더 잘 인식성능 향상자동 코드 분할이미지 최적화정적 페이지 생성(SSG)증분 정적 재생성(ISR)개발 편의성파일 기반 라우팅API 라우트 내장자동 Hot ReloadingTypeScript 기본 지원빌드 최적화자동 번들링미리 렌더링자동 폴리필단점:학습 곡선Next.js만의..