React (33) 썸네일형 리스트형 [트러블 슈팅] 공통 헤더 개발 중 발생한 Typescript 오류 (ReactNode, ReactElement) 발생한 오류 🔥Type error: Property 'props' does not exist on type 'string | number | bigint | boolean | ReactElement> | Iterable | ReactPortal | Promise'. Property 'props' does not exist on type 'string'. 공통 헤더를 만드는 과정에서 `leftIcon` props 속성에 접근할 때 위 오류가 발생했습니다.'use client';import { cn } from '@src/utils';import { useRouter } from 'next/navigation';import React from 'react';interface HeaderProps { le.. [트러블 슈팅] SVG 속성 오류 해결하기 - <svg> Height 속성에서 Expected length, "auto" 오류를 수정하는 방법 발생한 오류 🔥 SVG의 `height` 속성을 `auto`로 설정했을 때 발생한 오류였습니다. 해결 과정 🔎HTML, CSS에선 `height`에 `auto`를 사용해 콘텐츠의 높이를 유동적으로 설정할 수 있지만, SVG의 `height` 속성은 `length`값 (예시: `px`,`%`)으로 지정해야 합니다. 따라서 `auto`는 SVG 표준에서 요구하는 유효한 `length`값이 아니어서 오류가 발생했습니다. 해결 방법 ✨수정 후 이 문제를 해결하기 위해 `height`속성을 `auto`에서 `100%`로 변경했습니다. 회고 🧐SVG 속성값을 지정할 때 표준을 준수하고 HTML과 CSS의 차이를 고려해 적절한 속성값을 사용하는 것이 좋을 것 같습니다!출처 🏷️https://github... [팀 프로젝트] 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.. [리팩토링] 커스텀 훅을 활용한 날씨 데이터 관리 구조 개선 최근 프로젝트에서 날씨 정보를 사용자들에게 제공하기 위해 행정 구역 데이터와 오늘, 이번 주 날씨 데이터를 가져와 화면에 표시하는 기능을 구현했습니다. 이 과정에서 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.. [개인 프로젝트] MBTI 테스트 MBTI 테스트 📔본인의 MBTI를 테스트해 볼 수 있는 사이트입니다. 배포 링크 : https://mbti-test-app-six.vercel.app/깃허브 링크 : https://github.com/smu06030/mbti-test-app 파일 구조 🗂️📦src┣ 📂assets┣ 📂api┣ 📂components┃ ┣ 📂Header┃ ┣ 📂Layout┃ ┣ 📂Result┃ ┗ 📂Test┣ 📂constants┣ 📂mock┣ 📂pages┃ ┣ 📂private┃ ┗ 📂public┣ 📂queries┣ 📂routes┣ 📂store┣ 📂utils┣ 📜App.jsx┗ 📜main.jsx 주요 기능💡구현 사항✅ 회원가입, 로그인, 프로필 관리 기능 구현JWT 인증 서버를 사용하여.. [트러블 슈팅] MBTI 테스트 (Glitch에서 JSON-server의 응답 속도 차이) Glitch에서 JSON-server의 응답 속도 차이발생한 오류 🔥MBTI 테스트 앱을 개발하며 Glitch 플랫폼에서 JSON-server를 배포하여 사용했습니다. 하지만 로컬 환경에서의 실행 속도와 비교했을 때 상당한 지연이 발생하는 문제를 경험했습니다. 해결 과정 🔎로컬에서 `json-server --watch db.json --port 5000`으로 서버를 구동했을 때와`Glitch`에서 서버를 구동했을 때와 응답 시간이 거의 10배 이상 차이 나는 현상을 `console.time`을 통해 확인했습니다. 로컬서버 `네트워크 지연` : Glitch 서버가 해외에 위치하고 있기 때문에, 데이터 요청과 응답에 상당한 네트워크 지연이 발생했습니다.`리소스 제한` : Glitch는 무료 플랜에서 제한.. 옵저버 패턴 알아보기 옵저버 패턴이란? 📖객체의 상태 변화를 관찰하는 옵저버(Observer)들이 있고, 관찰 대상이 되는 객체(Subject)가 상태 변화가 있을 때 옵저버들에게 알리는 디자인 패턴입니다. ❗간단하게 설명하면어떤 데이터나 상태의 변화가 일어났을 때, 실시간으로 구독자들에게 알려주는 방식 `Subject (주체)` : 상태를 보유하고 있고, 변화가 일어났을 때 옵저버들에게 알리는 역할`Observer (옵저버)` : 주체의 상태 변화를 감지하고 그에 따라 행동 옵저버 패턴 직접 만들어보기 📖subject.jsconst createSubject = () => { const observers = new Map(); const addObserver = (key, observer) => { if(!obs.. 이전 1 2 3 4 5 다음
