공부/트러블 슈팅 (16) 썸네일형 리스트형 [트러블 슈팅] SVG 컴포넌트 재사용 시 발생한 이미지 중복 문제 해결하기 발생한 오류 🔥날씨 API를 요청한 후 아이콘 URL을 가져와 `WeatherIcon`컴포넌트를 사용해 여러 개의 날씨 아이콘을 표시하려고 했습니다. 그러나 배열로 `WeatherIcon`을 렌더링 했을 때, 모든 아이콘이 동일한 이미지만 표시되는 현상이 발생했습니다. 해결 과정 🔎처음에는 각 아이콘의 URL을 제대로 전달하고 있다고 생각했지만, 여러 개의 `WeatherIcon`컴포넌트를 렌더링할 때 브라우저가 첫 번째 요소의 이미지만을 참조하는 것을 깨닫지 못했습니다. 기존 코드const WeatherIcon = ({ url, className }) => { const URL = url ? `https://openweathermap.org/img/wn/${url}@2x.png` : "data.. [트러블 슈팅] MBTI 테스트 (Glitch에서 JSON-server의 응답 속도 차이) Glitch에서 JSON-server의 응답 속도 차이발생한 오류 🔥MBTI 테스트 앱을 개발하며 Glitch 플랫폼에서 JSON-server를 배포하여 사용했습니다. 하지만 로컬 환경에서의 실행 속도와 비교했을 때 상당한 지연이 발생하는 문제를 경험했습니다. 해결 과정 🔎로컬에서 `json-server --watch db.json --port 5000`으로 서버를 구동했을 때와`Glitch`에서 서버를 구동했을 때와 응답 시간이 거의 10배 이상 차이 나는 현상을 `console.time`을 통해 확인했습니다. 로컬서버 `네트워크 지연` : Glitch 서버가 해외에 위치하고 있기 때문에, 데이터 요청과 응답에 상당한 네트워크 지연이 발생했습니다.`리소스 제한` : Glitch는 무료 플랜에서 제한.. [트러블 슈팅] 방콕 스타일 (새로고침 시 좋아요 랜덤 활성화 이슈) 팀 프로젝트 방콕스타일을 진행하면서 발생한 트러블 슈팅입니다.발생한 오류 🔥방콕 스타일 뉴스피드 프로젝트에서 게시물 목록을 렌더링 하던 중 페이지를 새로고침했을 때, `좋아요`가 랜덤으로 활성화된 상태로 표시되는 오류가 발생했습니다. 좋아요가 랜덤으로 표시되는 건 아주 큰 문제였기 때문에 해결이 시급했습니다. 해결 과정 🔎useOnAuthStateChange supabase에서 auth 관련 event가 발생할 때마다 알림을 받는 메서드입니다. 그래서 session이 있으면 컨텍스트에 `session.user`정보를 보내서 컨텍스트에서 유저 정보를 저장하게 됩니다.// 유저정보를 context에 저장하는 함수const useOnAuthStateChange = () => { const { signI.. [트러블 슈팅] 방콕 스타일 (supabase RLS 오류) 팀 프로젝트 방콕스타일을 진행하면서 발생한 트러블 슈팅입니다. Supabase RLS(행 수준 보안) 상태 업데이트 오류발생한 오류 🔥supabase를 사용하면서 좋아요 테이블 상태 업데이트를 시도할 때 결과가 반영되지 않고 빈 배열만 반환하는 오류가 발생했습니다. 해결 과정 🔎RLS에 대해 인지하지 못하고 있을 때 요청을 보내는 쿼리문이 잘못됐나 여러 번 확인을 거치고 칼럼명과 쿼리문을 확인해 봤는데 아무런 문제가 없었습니다. 그래서 오류를 발견하기까지 오랜시간이 걸렸습니다. 그러다가 빈 배열을 반환하는 이유가 RLS 정책에 관련된 걸 알게 되었고 확인을 진행했습니다. 정책 확인 우선, RLS 정책이 올바르게 설정되었는지 점검했는데 설정이 안되어 있는 것을 확인했습니다. 그래서 해당 정책을 다시 한.. [트러블 슈팅] 포켓몬 도감 (svg, router, 이벤트 버블링) [개인 과제] 포켓몬 도감 회고개인 과제 소개 📖react, styled-components, context API를 이용한 포켓몬 도감입니다.배포 링크 : https://pokemon-app-sepia-nine.vercel.app/깃허브 주소 : https://github.com/smu06030/pokemon-app 요구 사항 📌필수 구현mingos-habitat.tistory.com포켓몬 도감 만들기를 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다!SVG를 JSX 문법으로 컴포넌트화 하는 과정에서 발생한 Invalid DOM property 오류발생한 오류 🔥`HTML` 속성과 React `JSX` 속성 간의 차이 때문에 발생한 오류 해결 과정 🔎HTML과 JSX 속성의 차이 React.. [트러블 슈팅] styled-components 오류 (표준, 비표준 속성) 발생한 오류 🔥import { useState } from "react";import styled from "styled-components";const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; margin: 20px;`;function App() { return ( 박스 );}예제를 테스트해 보는 과정에서 `it looks like an unknown prop "borderColor" is being sent through to the DOM, which will likely trigger a React c.. [트러블 슈팅] 커스텀 훅의 업데이트가 반영되지 않을 때 [개인 프로젝트] 올림픽 메달 트래커를 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다.커스텀 훅의 상태가 업데이트 됐는데 컴포넌트가 렌더링이 되지 않음발생한 오류 🔥국가 추가, 수정, 삭제를 커스텀 훅으로 따로 관리하고 해당 기능이 필요한 곳에서 `useCountry` 훅을 호출하는 방식으로 코드를 수정했는데 국가 추가를 눌렀을 때 `InputGroup` 컴포넌트에서 발생한 `addCountry` 함수는 잘 동작하지만 `MedalList` 컴포넌트에서 리스트가 보이지 않는 문제 발생. 해결 과정 🔎https://react.dev/learn/reusing-logic-with-custom-hooks Reusing Logic with Custom Hooks – ReactThe library for.. [트러블 슈팅] 영화 검색 사이트 (TypeError, 애니메이션, 이미지 로딩) [팀 프로젝트] 영화 검색 사이트팀 프로젝트 소개 📖TMDB API를 이용한 영화 검색 사이트입니다.Github 주소 : https://github.com/smu06030/movie-app-team12배포 링크 : http://movie-app-team12.s3-website.ap-northeast-2.amazonaws.com/ 요구 사항 📌필수 구mingos-habitat.tistory.com영화 검색 사이트 개발을 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다. 1. TypeError: Cannot read properties of null (reading 'addEventListener')발생한 오류 🔥`common.js`에서 사용하는 formatMovie 메서드를 `detailPag.. 이전 1 2 다음
