본문 바로가기
반응형

전체 글

 (118)
Next.js 알아보기 3 (React Server Component, Client Component) React Server Component & Client Component 📖✨ 기본적으로 `app`폴더 하위의 모든 컴포넌트는 `서버 컴포넌트`입니다! 서버 컴포넌트말 그대로 서버에서 실행되는 컴포넌트입니다.// src>app>page.tsxexport default function Home() { console.log("여기는 어디일까요?"); return ( 안녕하세요! Next.js 입니다! );} 밑에 사진을 캡처 화면을 보면 브라우저가 아닌 `terminal`에 로그가 출력된 것을 확인할 수 있습니다. 이처럼 컴포넌트의 실행 환경이 브라우저인지 서버인지에 따라서 `서버 컴포넌트``클라이언트 컴포넌트`가 결정됩니다. 클라이언트 컴포넌트브라우저 상에서 실행되는 컴포넌..
[트러블 슈팅] Next.js SSR 업데이트 기능 (새로고침 동작x) 발생한 오류 🔥Next.js에서 클라이언트 측 라우팅을 위한 `Link` 컴포넌트를 사용하던 중, 내가 원하던 동작은 `SSR` 페이지로 이동할 때마다 데이터를 가져오는 것이었지만, 첫 번째 렌더링만 데이터를 가져오고 이후에는 router에 의해 캐싱이 돼서 새로운 데이터를 가져오지 못하는 문제가 있었습니다. 기존 코드// app > layout.tsxexport default function RootLayout({  children,}: Readonly) {  return (                            CSR |          ISR |          SSR |          SSG                {children}            );}// app > ss..
Next.js 알아보기 2 (Link, useRouter, 예약 파일) Link 📖prefetching 지원next.js의 `` 컴포넌트는 뷰포트에 링크가 나타나는 순간 해당 페이지의 코드와 데이터를 미리 가져오는 `prefetching`기능을 지원합니다. 사용자가 클릭했을 때 즉시 페이지를 볼 수 있게 합니다. client-side navigation 지원`` 컴포넌트는 새 페이지를 로드하기 위해 클라이언트 측에서 페이지를 바꿔주기 때문에 페이지 전환 시 빠른 사용자 경험을 제공합니다.import type { Metadata } from "next";import { Inter } from "next/font/google";import "./globals.css";import Link from "next/link";const inter = Inter({ subsets: [..
Next.js 알아보기 1 (App Router, Pages Router) React 프레임워크 Next.js 📖라이브러리와 프레임워크 차이프레임워크개발자가 기능 구현에만 집중할 수 있게 구조와 틀을 제공하는 기술의 조합 라이브러리공통 기능의 모듈화가 이루어진 프로그램의 집합  ❗비슷해 보이지만, 중요한 차이점은 애플리케이션의 제어 흐름의 권한을 누가 가지고 있는지가 핵심입니다.React에서 Routing } /> } /> } /> } />  위 코드처럼 라우팅 설정을 위해 개발자가 직접 제어를 하고 있습니다. Next.js에서 Routingnext.js에서 미리 정해놨기 때문에 아무것도 안 해도 됩니다! App Router와 Pages Router 차이 📖File System Base 라우팅Next.js는 폴더구조를 기반으로 라우팅을 자동 생성하..
[팀 프로젝트] Go 캠핑! Go 캠핑! 🏕️지도, 고캠핑 API를 활용해 전국의 캠핑장 위치와 상세정보를 제공해 주고, 날씨 API와 유튜브 API를 활용해 캠핑 관련 추가 정보를 제공해 주는 캠핑 정보 사이트입니다! 배포 링크 : https://go-camping-pi.vercel.app/깃허브 링크 : https://github.com/doo1b/Go_Camping 파일 구조 🗂️📦src┣ 📂api┣ 📂assets┃ ┣ 📂header┃ ┣ 📂indexpages┃ ┣ 📂region┣ 📂components┃ ┣ 📂detailpage┃ ┣ 📂guidepage┃ ┣ 📂layout┃ ┣ 📂mainpage┃ ┗ 📂searchresultpage┣ 📂hooks┣ 📂pages┃ ┣ 📂debugpage┃ ┣ 📂d..
[트러블 슈팅] 카카오맵 API를 활용한 캠핑장 데이터 렌더링 최적화 카카오맵 API를 활용한 캠핑장 데이터를 처리하는 과정에서 발생했던 렌더링 이슈에 대해 작성해보려고 합니다. 발생한 오류 🔥캠핑장 공공데이터 활용한 지도 서비스를 개발 중, 데이터 필터링 및 마커 클러스터링 렌더링 과정에서 심각한 성능 이슈가 발생했습니다. 전체 캠핑장 데이터는 `4000개`가 넘었고, 데이터를 필터링해 마커로 지도에 표시하는 과정에서 지도를 드래그하거나 확대/축소할 때 프레임이 10~40FPS로 급격히 떨어지는 문제가 있었습니다. 특히 확대 시에는 정상적으로 동작하는 것처럼 보였지만, 축소 시 여전히 프레임 저하가 발생했습니다. 해결 과정 🔎성능 문제를 정확하게 파악하기 위해 먼저 데이터 필터링 과정의 속도를 측정했습니다. `console.time`을 사용해 데이터 필터링 과정이 느..
[리팩토링] 커스텀 훅을 활용한 날씨 데이터 관리 구조 개선 최근 프로젝트에서 날씨 정보를 사용자들에게 제공하기 위해 행정 구역 데이터와 오늘, 이번 주 날씨 데이터를 가져와 화면에 표시하는 기능을 구현했습니다. 이 과정에서 UI와 데이터 관련 로직을 효과적으로 분리하기 위해 커스텀 훅을 도입했습니다. 구조 변경 이유 ✨데이터 요청, 포맷팅, 상태 관리 등의 로직이 컴포넌트 내부에 존재해서 UI와 데이터 로직이 혼합되어 가독성이 떨어지고, 유지보수가 어려운 상황이 발생했습니다.분리했을 때 이점`가독성 향상` : 컴포넌트가 UI에만 집중할 수 있어 코드의 가독성이 높아졌습니다.`유지보수 용이` : 데이터 로직을 커스텀 훅으로 분리하여, 각 기능을 독립적으로 수정하거나 확장할 수 있습니다.`재사용성` : 커스텀 훅을 다른 컴포넌트에서도 재사용할 수 있어 코드 중복을 ..
[트러블 슈팅] SVG 컴포넌트 재사용 시 발생한 이미지 중복 문제 해결하기 발생한 오류 🔥날씨 API를 요청한 후 아이콘 URL을 가져와 `WeatherIcon`컴포넌트를 사용해 여러 개의 날씨 아이콘을 표시하려고 했습니다. 그러나 배열로 `WeatherIcon`을 렌더링 했을 때, 모든 아이콘이 동일한 이미지만 표시되는 현상이 발생했습니다. 해결 과정 🔎처음에는 각 아이콘의 URL을 제대로 전달하고 있다고 생각했지만, 여러 개의 `WeatherIcon`컴포넌트를 렌더링할 때 브라우저가 첫 번째 요소의 이미지만을 참조하는 것을 깨닫지 못했습니다. 기존 코드const WeatherIcon = ({ url, className }) => {  const URL = url  ? `https://openweathermap.org/img/wn/${url}@2x.png`  : "data..

티스토리툴바