playhong 님의 블로그

가취뽀 - 프로필이미지 수정문제발생회원정보를 수정할 때 다른 정보는 회원가입시 사용했던 것으로 어떻게 만들어놨는데 프로필 이미지 변경이 안된다 원인추론스토리지에 이미지가 들어가지 않는 것으로 보아 로직 자체에 문제가 있는 것 같다로직에 문제가 없다고 해도 (정상적으로 이미지가 선택된다고 해도) 회원가입때 사용했던 것을 그대로 사용하면 한사람이 프로필 이미지를 계속 바꾸면 이미지도 계속 쌓이게 되므로 수정은 필연적이었다. 해결방안1. 회원가입할 때 이미지를 넣어줄 경로에 있는 기존 이미지를 삭제하고 새로 넣어주는 방법더보기1. 사용자가 이미지를 선택했을 경우 2. user_image / user_id 경로의 모든 이미지를 삭제한 후 3. 선택한 이미지를 user_image / user_id 경로에 넣고 4..

가취뽀 - 프로필 이미지 업로드문제발생이미지 등록 시 400 에러가 뜸// 프로필 이미지 등록 핸들러 const handleImgUpload = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) { console.log('파일을 선택해 주세요.'); return; } const { data: imgData, error: imgError } = await browserClient.storage .from('profile_img') .upload(`${user_id}/${file.name}`, file, { cacheControl: '3600', ..

가취뽀 - 회원가입문제발생테이블에 정보가 두개씩 쌓임 원인추론 // 폼 제출 함수 const onSubmit: SubmitHandler = async (formData) => { // Supabase에 사용자 등록 const { data, error: supabaseTableError } = await browserClient.auth.signUp({ email: formData.email, password: formData.user_pw }); if (supabaseTableError) { console.log('supabaseTableError =>', supabaseTableError); return; } if (!data.use..

가취뽀 - 회원가입/로그인페이지에 이미 로그인한 사용자가 접근하는 것을 막기문제발생import { useRouter } from 'next/router';const { isLoggedIn } = useAuthStore(); const router = useRouter(); // 이미 로그인한 사용자인지 구분해서 접근막기 useEffect(() => { if (isLoggedIn) { router.replace('/'); } }, [isLoggedIn, router]);오류: NextRouter가 마운트되지 않았습니다. https://nextjs.org/docs/messages/next-router-not-mounted 원인추론https://nextjs.org/docs/messa..

가취뽀 - 로그인문제발생로그인 시, 정확한 정보를 입력해도 Invalid login credentials(잘못된 로그인 자격증명)이라고 뜨는 문제 원인추론제출 폼 함수의 const { data, error } = await supabase.auth.signInWithPassword({ email: formData.user_id, password: formData.user_pw }); 이 부분이 문제가 되는게 아닐까 했다. 이건 supabase에서 제공하는 이메일로 로그인 할 때 사용되는 로직인데, 나는 사용자의 id(uid가 아닌 가입시 사용자가 직접 입력하는 id)로 로그인하도록 하고 싶어서 email: user_id로 하면 알아서 아이디로 로그인 되지 않을까? 했다. 해결방안에..

가취뽀 - 회원가입문제발생유효성 검사결과가 화면에 뜨지않고 통과하지 못해도 폼이 제출되는 등 아직 문제는 많긴하지만 회원가입 버튼을 눌렀을 때 supabase에 가입 정보가 등록되는데,supabase에서 제공해주는 Authentication(암호화가능한?유저테이블)에는 가입데이터가 다 쌓이는거 같은데 (제공되는 컬럼이랑 내가 저장해야하는 데이터랑 일치하지 않는 부분이 많아 전부 확인은 못했지만..) 내가 만든 auth테이블에는 안쌓임!! uuid랑 이메일이 들어오는데 이메일은 또 user_id에 쌓임 ㅠㅠㅠㅠ 원인추론403은 권한 문제가 있을 때 발생한다고 함..vs상에서 error를 넣어 콘솔로 확인할 수 있는 모든? 곳을 찍어봤는데도 내가 찍은 console은 찍히지 않고 그냥 403에러가 뜬다는 점..

FACTS(사실, 객관) : 내가 한 일 베이직반 복습 export const useTodoStore = create()(()=>({})) 이 콜백 함수에서는 객체를 리턴해주기 때문에 (() =>  (  {}  )  ) 이렇게 소괄호로 감싸줘야 함.( () => {return {} } ) 이것의 축약법.보통 사용했던 것은 ( () => {} ) 소괄호로 감싸지지 않는 이것이었는데 자바스크립트에서 코드블럭인지 객체를 리턴하는 것인지 구분을 못함! 그래서 객체를 리턴해줄것이다! 를 구분해 줄 때에는 저렇게 소괄호로 감싸주면 됨! 매개변수에 타입을 지정해줘야 함. 리액트에서는 id 사용을 지양해야 함.id="cat"> 고양이  그래서 useId() 훅을 사용해야 한다"use client"const Cat = ..

FACTS(사실, 객관) : 내가 한 일Lol-dex - 타입지정문제발생제출 직전 타입을 확인해보는데 any가 들어가 있는 것을 확인하고 이걸 수정하는 과정에서 문제가 생겼다. 타입을 지정해주고 나니 내가 가져오는 데이터는 객체형태인데 그걸 return에서 map을 돌려주고 있어서 오류가 난 것. (근데 여기에 더해 as ItemInfo[]로 타입을 단언해서 vs상에선 에러가 안났는데 실제로 에러가 나는 상황이 발생..) 원인추론이 객체로 된 것을 배열로 가져와야 했다.  해결방안타입지정부터 문제였다고 하셨음 ㅠㅠ나는 export type ItemInfo = { name: string; plaintext: string; image: { full: string; }; gold: { ba..

FACTS(사실, 객관) : 내가 한 일MBTI 테스트 리팩토링 1. App 컴포넌트에서 불필요한 React Fragment ( )를 사용하고 있습니다. 단일 자식 요소를 반환할 때는 Fragment가 필요하지 않습니다.  를 지워서 해결function App() { return ;} 2. user와 isLogin 상태를 Router 컴포넌트에서 관리하고 있는데, Context api 를 사용하는게 크게 복잡하지 않아서 이 부분을 Context 로 개선해보면 좋을 것 같아요 :) Prop drilling으로 내려주던 것을 context. api로 개선import { createContext } from "react";export const AuthContext = createContext(null);c..

FACTS(사실, 객관) : 내가 한 일Lol-dex - 다크모드 추가문제발생다크모드는 정상적으로 추가됐는데! (라이브러리가 아닌 이전 베이직반에서 다뤘던 다크모드 구현방법을 사용함)다크모드인 상태에서 새로고침을 하면 페이지가 로딩되는 동안에 다크모드가 풀렸다가 페이지가 모두 렌더링 된 후 다크모드가 다시 적용되는 문제! => 눈뽕유발! 원인추론혼자서는 원인을 찾지못하고 질문하러 갔었는데이건 브라우저 렌더링 방식, 그리고 돔이랑 css가 언제 결합되는지 공부해보면 좋을거같다는 말을 들었다! 해결방안뭔가 더 깊~~은 공부가 필요한거 같고, 당장은 되긴 하니까 이대로 사용을 하되 다음엔 shadcn에서 제공하는 theme을 사용해보는 방향을 제시해주셨다.내가 겪은 문제와 동일한 주제의 발표도 추천해주셨는데,..