TIL

사실 별거 아닌 트러블 슈팅이지만 차후 참고사항으로 쓸 수 있을 것 같아서 작성해본다..  index로 계속 문제를 겪고 있었다. 당연히 css로 해결해야하는 것 이라고 생각하고 다양한 방법으로 css를 주고 있었다. boolean 값으로도 해보고 아는 선에서 다 시도해 보았지만 index가 주어지지 않았다.   const [userDotKey, setUserDotKey] = useState(() => `userDot-${Date.now()}`);결국 key값을 주고 강제로 렌더링을 할 수 있도록 해보았다. 이렇게 강제로 렌더링을 시켜 `dom`에 그려지는 순서를 조작했지만  문제는 동일한 닷 컴포넌트를 그리는 커스텀오버레이에서 hover가 되었을때와 되지 않았을때를 나누는 에서는 index를 줄 수 ..

이번에 커피챗을 하기전 기업의 제품 일부분을 클론코딩 해보기로 했다.  나는 아직 실력은 부족하지만 나의 열정과 관심을 보여드리기 위한 하나의 방법이었따. 회사에서 사용하는 기술 스택에 맞춰서 조금 더 사용성이 좋도록 만든는 것이 목표!! 해당 사이트에서는 사이드 패널을 잘 사용하고 있는 것 같았다. 그래서 사이드 패널을 슬라이딩 형태로 보여주면 사용자가 봤을때 부자연스럽지 않고 자연스럽지 않을까 라고 생각했다. 당당하게 만들기 쉽지 하고 만들었는데 아래 영상처럼 띡 하고 나타났다..  원인이 뭘까 하고 css를 열심히 수정해 보았지만 개선되지 않았다.  코드는 아래와 같다. import { collapsibleStore } from "@/store/collapsibleStore";import { BsC..

테스트로 구현체를 만들고 실제 프로젝트에 가져오니 아래와같은 에러가 생겼다. 코드를 살펴보았을 때 new 로 새로운 객체를 만들어 주고 있는데 왜 문제가 생기는지 이해하지 못했다.  그러다 컴포넌트를 import 하는 page에서 확인해 보니, 에러가 발생하고 있었다.  알고보니 Map이라고 하더라고 map 함수와 혼돈이 있어 발생되는 문제가 발생할 수 있는 것이였다. 그래서 이름을 바꾸어주니 문제없이 잘 된다.  별거 없는 나의 에러TIL

위 에러는 Next.js 에서 next.config.js에 지정되지 않은 호스트이미지를 로드할때 발생되는 에러이다!그래서 아래와같이 작성해주면 해결된다! //next.config.mjs

처음 시도해보는 multipart/form-data  쉬운게 하나도 없다,,ㅎ 장장 6시간을 찾아보았으나 오타로인해.. Boundary를 찾을 수 없다고.. 나의 경우는 formData.append 에서 "images" 로 작성해야하나 오타로 인해 "imgaes" 였다.. ㅎ수정해주니 값을 잘만 받아온다. 참고로 multipart/form-data 형태로 api 요청을 해야하는 경우 axios에서 headers에 content-Type을  multipart/form-data로 해주어야한다!!

새로운 프로젝트를 만들기 위해 next.js를 이용해 초기 셋팅중에 Hydration Error를 마주했다.Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error layout(navbar, footer) 를 모든 페이지에서 보여주되, 로그인페이지에서는 로그인 페이지만 보여줄 수 있도록 하기위해그룹라우터를 이용했고, 그룹라우터 안에서 page와 layout을 만들어주었다. ❓Hydration error가 발생한 이유최상단 layout에 html과 body가 있기..

🚨 문제 발생Vercel 배포를 위해 프로젝트를 빌드하던중 빌드 에러가 발생몇몇은 에러 메세지를 통해 바로 잡았으나, 메세지를 통해 문제의 원인이 바로 나타나지않는 에러들이 존재. 🛠️ 문제 해결 과정소거법을 이용해 폴더, 파일, 코드들을 하나씩 비활성화 하면서 문제 원인 분석 🔥 찾아낸 문제점1. Next.js는 빌드 타임에 모든 페이지를 사전에 렌더링(SSR) 하기 때문에 서버에서 컴포넌트를 HTML 형태로 렌더링 진행.✔️ 이 시점에서 클라이언트 사이드 전용 객체를 참조하면 오류가 발생 ➡️ 서버에는 window나 document 같은 객체가 존재하지 않음2.Session storage 나 useSearchParams 같은 URL 매개변수 훅은 빌드 시점에서 빌드 에러가 발생✔️ next.js..

처음 로그인 페이지 기획 시 로그인 단계는 총 3단계로 구현하기로 기획하였습니다.(next.js 사용) DB > supabaseauth > nextAuth모달 > paraller, InterCepting Routes 1단계 모달 : 선생님 또는 수강생선택2단계 모달 : 선생님 선택 시 2단계 모달로 이동되며 직업, 분야를 추가로 받기3단계 모달 : 실제 회원가입 창 (이메일, 소셜로그인) 구현 방법1. zustand를 이용해 각각의 단계(1단계 2단계)에서 받은 내용을 스토어를 이용해 저장2. 3단계에서 소셜 회원가입 버튼을 누르면 각각의 소셜에서 주는 유저의 정보를 담아 스토어에 저장3. 유효성을 이용해 3개의 단계에서 받은 데이터가 잘 들어왔는 지 확인 후 수퍼베이스에 전송 🚨문제발생위 기획 단계를..

에러가 없는 데이터 가져오기 실패와 더불어 해당 에러까지 포함해 2시간을 잡아먹은...!! 물론 환경변수를 불러오는 부분에서도 문제가 있었다. 하지만 그때는 에러없이 axios에서 값 자체를 받아오지 못했다. 원인을 찾다가 환경변수를 사용할 때에 큰따옴표를 사용하지 않아야 한다는 것을 알았다. 그리고 해당 에러는 이후에 발생된 에러이다. 코드공유 import axios from "axios"; import requests from "./request"; const axiosInstance = axios.create({ baseURL: process.env.REACT_APP_SERVER_URL, headers: { "Content-Type": "application/json", }, params: { id..

import { useNavigate } from "react-router"; import styled from "styled-components"; const navigate = useNavigate(); const onClickInterview = () => { navigate("/detail"); }; export default function ListSection({ text }) { return ( {text} 더보기 ); } useNavigate를 사용했더니 위와같은 에러가 발생했다. 그리곤 깨달았다 왜 저러게 작성했는가... 선언문 밖에다가 선언을 해놓았다니ㅋㅋㅋ 다음에 이런에러가 발생하면 안되겠지만 발생하면 다시 내부에 잘 선언해주자 멍청아...