playhong 님의 블로그

JS) 배열 회전시키기

playhong — Thu, 20 Feb 2025 15:14:02 +0900

링크

https://school.programmers.co.kr/learn/courses/30/lessons/120844

문제

정수가 담긴 배열 numbers와 문자열 direction가 매개변수로 주어집니다. 배열 numbers의 원소를 direction방향으로 한 칸씩 회전시킨 배열을 return하도록 solution 함수를 완성해주세요.

어떻게 풀까

1. right일 경우 맨 앞에 numbers의 맨 마지막 인덱스의 원소를 넣어줌
(push로 넣어줄거라 left일 경우 맨 첫 인덱스의 원소를 미리 넣으면 안됨)
2. right인 경우엔 numbers를 그대로 push해주고 left인 경우엔 인덱스에 +1 해서 push
3. left인 경우 맨 뒤에 numbers의 맨 첫번째 원소를 넣어줌

뭘 써야 할까

push 등..

답

function solution(numbers, direction) {
    let answer = [];
    if(direction === "right"){
        answer.push(numbers[numbers.length-1])
    }
    for(let i=0; i<numbers.length-1; i++){
        if(direction === "right"){
            answer.push(numbers[i])
        }else if(direction === "left"){
            answer.push(numbers[i+1])
        }
    }
    if(direction === "left"){
        answer.push(numbers[0])
    }
    
    return answer;
}

위 처럼 해도 문제가 풀리긴 하지만

* 메서드들을 활용하면 더 간단한 코드로 작성할 수 있다.

- unshift() 배열의 맨 앞에 값을 추가

- pop() 배열의 맨 끝 값을 제거

- push() 배열의 맨 끝에 값을 추가

- shift() 배열의 맨 앞 값을 제거

1. answer에 스프레드연산자로 numbers를 복사한다 (numbers를 직접수정하지 않기위해)
2. direction이 right 인 경우, pop()을 사용해 answer의 끝값을 제거하고, 해당 값을 lastNum에 선언한다
3. unshift()를 사용해 lastNum을 배열의 맨 앞에 추가한다.
4. direction이 left인 경우, shift()를 사용해 answer의 첫번째 값을 제거하고, 해당 값을 firstNum에 선언한다
5. push()를 사용해 firstNum을 배열의 맨 마지막에 추가한다.

function solution(numbers, direction) {
    let answer = [...numbers];
    if(direction === "right"){
        let lastNum = answer.pop()
        answer.unshift(lastNum)
    }else{
        let firstNum = answer.shift()
        answer.push(firstNum)
    }
    return answer;
}

JS) 삼각형의 완성조건 (1)

playhong — Fri, 7 Feb 2025 17:11:07 +0900

링크

https://school.programmers.co.kr/learn/courses/30/lessons/120889#

문제

선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다.

가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 합니다.
삼각형의 세 변의 길이가 담긴 배열 sides이 매개변수로 주어집니다. 세 변으로 삼각형을 만들 수 있다면 1, 만들 수 없다면 2를 return하도록 solution 함수를 완성해주세요.

어떻게 풀까

1. 제일 큰 수를 변수에 담고
2. 그 변수를 제외한 배열을 만듦
3. 만든 배열의 [0]번째 원소와 [1]번째 원소를 더한 후
4. 변수와 비교하는 조건문을 작성

(수정)
1. sides를 내림(오름차순)으로 정렬
2. 정렬한 배열의 [1]번째 원소와 [2]번째 원소를 더해 [0]번째 원소와 비교하는 조건문을 작성

뭘 써야 할까

Math.max.apply(null,sides)
filter

(수정)
sort

답 (오답)

function solution(sides) {
    const longest = Math.max.apply(null,sides)
    const filterSides = sides.filter((num)=> num !== longest)
    if(sides[0] === sides[1] && sides[1] === sides[2]){
        return 0
    }else if(filterSides[0]+filterSides[1] > longest){
        return 1
    }else{
        return 2
    }
}

만약 sides가 [2,4,4] 인 경우 filterSides가 [2] 로 필터링되어 정상적으로 계산되지 않음

답

function solution(sides) {
    const sortSides = sides.sort((a,b)=>b-a)
    if(sortSides[0] === sortSides[1] && sortSides[1] === sortSides[2]){
        return 1
    }if(sortSides[0] < sortSides[1] + sortSides[2]){
        return 1
    }else{
        return 2
    }
}

sort를 사용해 내림차순으로 sides를 정렬한 후, index를 이용해 조건문 작성

JS) 짝수는 싫어요

playhong — Wed, 8 Jan 2025 11:20:10 +0900

링크

https://school.programmers.co.kr/learn/courses/30/lessons/120813

문제

정수 n이 매개변수로 주어질 때, n 이하의 홀수가 오름차순으로 담긴 배열을 return하도록 solution 함수를 완성해주세요.

어떻게 풀까

홀수를 찾아서 찾은 홀수를 빈 배열 anwser에 넣기
홀수만 담긴 answer를 오름차순으로 정렬

뭘 써야 할까

0이 될 때 까지 반복 => for문 (let i=n; i>0; i--)
홀수 찾기 => i%2 === 1
찾은 홀수 배열에 넣기 => answer.push(i)
오름차순으로 정렬 => answer.sort((a,b)=>a-b)

답

function solution(n) {
    var answer = [];
    for(let i=n; i>0; i--){
        if(i%2===1){
            answer.push(i)
        }
    }
    const sortArr = answer.sort((a,b)=>a-b)
    return sortArr;
}

JS) 최빈값 구하기

playhong — Tue, 7 Jan 2025 18:59:10 +0900

링크

https://school.programmers.co.kr/learn/courses/30/lessons/120812?language=javascript

문제

최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다.

어떻게 풀까

// 각 배열의 원소 갯수를 세어서 객체로 만들어줌
ex)
[1,2,3,3,3,4]인 경우
obj = { 1 : 1, 2 : 1, 3 : 3 , 4 : 1}
// 값들을 모두 비교해 가장 큰 값의 키를 구함
// 키가 1개면 해당 키를 출력, 아니라면 (2개 이상이라면) -1를 출력

뭘 써야 할까

1. array.forEach
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
배열을 돌면서 각 원소가 몇번 나왔는지 작성

2. Math.max

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/max

가장 큰 수 구하기

3. Object.key (+filter)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

최빈값의 키를 filter를 사용해 배열로 넣음

답

function solution(array) {
    
    let countObj = {}
    
    array.forEach(num => {
        countObj[num] = (countObj[num] || 0) + 1
    })
    // countObj가 있다면 그 값을 사용하고, 없다면(undefined) 0으로 설정
    
    const maxCount = Math.max(...Object.values(countObj))
    // 요소 중 값(value)이 가장 큰 숫자를 넣어줌
    
    const maxCountKey = Object.keys(countObj).filter(key => countObj[key] === maxCount).map(Number)
	// maxCount를 가지고 있는 요소의 키를 찾아 넣어줌
	// 단, ["1"] 이런 형식으로 나오기 때문에 .map(Number)로 문자열이 아닌 숫자형식으로 변경해줘야함
    
    if(maxCountKey.length < 2){
        return maxCountKey[0]
    }else{
        return -1
    }
}

241016

playhong — Wed, 16 Oct 2024 03:43:34 +0900

가취뽀 - 프로필이미지 수정

문제발생

회원정보를 수정할 때 다른 정보는 회원가입시 사용했던 것으로 어떻게 만들어놨는데 프로필 이미지 변경이 안된다

원인추론

스토리지에 이미지가 들어가지 않는 것으로 보아 로직 자체에 문제가 있는 것 같다

로직에 문제가 없다고 해도 (정상적으로 이미지가 선택된다고 해도) 회원가입때 사용했던 것을 그대로 사용하면 한사람이 프로필 이미지를 계속 바꾸면 이미지도 계속 쌓이게 되므로 수정은 필연적이었다.

해결방안

1. 회원가입할 때 이미지를 넣어줄 경로에 있는 기존 이미지를 삭제하고 새로 넣어주는 방법

1. 사용자가 이미지를 선택했을 경우
2. user_image / user_id 경로의 모든 이미지를 삭제한 후
3. 선택한 이미지를 user_image / user_id 경로에 넣고
4. 이 이미지를 프로필 이미지로 등록

순으로 생각했는데 너무 비효율적?이라는 생각이 들었다

새롭게 선택된 이미지로 업데이트 해줄 수 없는지 공식문서를 더 찾아보기로함.

2. upsert

힌트를 얻은 것은 이 문서였다

https://supabase.com/docs/guides/storage/uploads/resumable-uploads

upsert : Update와 Insert를 합친 것으로, 존재하지 않을 경우, Insert하고 존재할 경우, 현재 내용을 덮어쓰는 유용한 쿼리

라고 한다! 저 내용만으로는 부족해 조금 더 찾아봤는데

https://supabase.com/docs/reference/javascript/storage-from-update

https://supabase.com/docs/guides/storage/uploads/standard-uploads

이렇게 사용해준다고 한다.

이렇게 하면 코드를 반으로 줄일 수 있을 것 같다.

// 프로필 이미지 등록 핸들러
  const handleImgUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];

    if (!file) {
      console.log('파일을 선택해 주세요.');
      return;
    }
    console.log(file);
    console.log(userId);

    const { data: imgData, error: imgError } = await browserClient.storage
      .from('user_image')
      .upload(`${userId}/${file.name}`, file, {
        cacheControl: '3600',
        upsert: true
      });
    if (imgError) {
      console.log('이미지 오류 => ', imgError);
    }

    // 업로드된 이미지의 URL 가져오기
    const imageUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/user_image/${userId}/${file.name}`;

    setValue('image_url', imageUrl);
  };

이렇게 작성했는데 이미지를 선택할 때 에러가 난다

file 도 정상적으로 찍히고 userId도 잘 찍히는데 왜??

https://velog.io/@liabin124/%EC%B5%9C%EC%A2%85-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-React-with-typescript-Supabase4Storage%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%AC%EB%9F%AC%EC%9E%A5-%EB%84%A3%EA%B8%B0

이 문제에 대한 답은 여기서 얻었는데, supabase storage에는 한글로 된 파일명은 업로드가 되지 않는다고 한다.

회원가입짤 때 몰랐던 이유는 한글파일로 테스트를 해보지 않아서..

아무튼 나도 똑같이

const profile_image_name = userUid;

UUID를 넣어줘봤다

가입할 때도 저런 유니크한 값으로 바꿔줘야 할 것 같다.

이제 수파베이스 상에서 이미지가 바로바로 바뀐다!

가취뽀 - 마이페이지/회원정보 편집 페이지 404 에러

문제발생

위에서 문제를 해결하면서 알게 됐는데 분명 수파베이스에서는 수정한 정보가 반영되는데 브라우저에서는 반영되지 않는 것을 확인함.

마이페이지/회원정보 편집 페이지에서 새로고침을 할 때마다 404에러가 뜨고

수파베이스상의 변경된 내용을 실시간으로 불러오지 못하고 시크릿창으로 새로 열 때마다 변경된 내용이 반영됨

원인추론

1. 라우팅문제?

해결이 안돼서 질문하러감

내 폴더 구조는 (auth) / mypage, (auth) / mypage / edit

여기서 (auth) 가 문제될 수 있으니 (auth) 폴더 밖으로 꺼내보라고 하셨는데,

(auth)는 서브 사이드바에서 프로필 관련 메뉴만 표시할 수있도록 + 프로젝트 내에서 맡은 부분을 구분하기 위해 그룹화 해놓은 것이고, 다른 login이나 signup페이지도 같은식으로 묶여있는데 동일한 에러가 뜨지 않음.

결정적으로 혹시나? 싶어서 꺼내봤는데도 동일한 문제가 생겨서 이 문제는 아닐거라고 판단했다.

2. 스토리지문제?

처음 이미지 업데이트를 제외한 나머지를 구현했을 정상적으로 수정이 됐었는데

나중에 이미지 업데이트를 추가하고 나서 부터 안되기 시작했음.

그래서 스토리지 부분을 모두 주석처리하고 다시 시도해봤는데 여전히 프로필 수정사항이 반영되지 않음

해결방안

현재 풀어야 할 문제

~~1. 이미지 수정 / 이미지 등록 시 이름 변경~~

2. 사이드바 버튼

~~3. 마이페이지, 회원정보편집페이지에서 404에러가 뜨는 문제~~

4. 이력서, 면접목록 불러오기

5. 마이페이지 편집시 마이페이지로 리다이렉트 시키기

➕ 추가 해야 할 것

로그인시 포인트 지급 (하다 말음)

241015

playhong — Tue, 15 Oct 2024 00:33:25 +0900

가취뽀 - 프로필 이미지 업로드

문제발생

이미지 등록 시 400 에러가 뜸

// 프로필 이미지 등록 핸들러
  const handleImgUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    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',
        upsert: false
      });
    if (imgError) {
      console.log('이미지 오류 => ', imgError);
    }
  };

원인추론

1. 로직이 잘못됨

watch("")등 react-hook-form의 메서드를 활용해 수정해야 할 것 같다.

2. RLS 설정

회원정보 2개씩 쌓이는 문제를 해결하면서 이 설정의 중요성을 느꼈다. 이게 설정되어 있지 않으면 회원가입 중에 테이블이나 storage에 접근할 수 없어 중요하다!

해결방안

1. RLS설정

먼저 RLS를 설정하려했는데 먼저 storage를 사용하고 있는 팀원분이 설정하신걸 보니 public으로 되어있었다.

내가 만든 storage는 처음 만들 때 필요할 것 같아서 일단 만들어 설정하는 것을 전부 건너 뛰어 수정이 필요했다.

근데 public이 아닌 storage를 public으로 변경하는 방법을 찾지 못해 해당 storage를 삭제하고, 다시 만드는 방향으로 진행했다. (어차피 아무것도 들어있지 않았음!)

이걸 눌러서 추가하고

이렇게 설정한 뒤 이름을 적어 save하고

좌측 Policies -> 수정하려는 storage에서 New policy를 한다.

Get started quickly 는 뭔가 원치 않는 설정이 되는 경우도 있는 것 같아(어떤 상황에선 이 설정이 원치 않는 문제를 일으키키도 하고) For full customization을 이용해

그냥 이름 채우고, operation 선택하고 바로 Review를 클릭해 생성?했다.

나중에 사용자가 프로필 이미지를 수정할 것 까지 고려해 insert, select, update를 생성해 주었다.

2. React-hook-form의 메서드를 활용해 이미지 url을 넣어줬다.

먼저 이미지 파일을 선택하지 않았을 때 표시해줄 디폴트 이미지 url을 설정한다.

// 리액트 훅 폼으로 유효성 검사
const { register, handleSubmit, formState, watch, setValue } = useForm({
mode: 'onChange',
defaultValues: {
  user_id: '',
  user_pw: '',
  user_type: 'mentee',
  email: '',
  user_name: '',
  image_url: 'http://~~디폴트프로필이미지.png'
},
resolver: zodResolver(signUpSchema)
});

그리고 react-hook-form 메서드를 이용한 로직으로 수정했다

// 프로필 이미지 등록 핸들러
  const handleImgUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];

    if (!file) {
      console.log('파일을 선택해 주세요.');
      return;
    }

    const userId = watch('user_id');

    const { data: imgData, error: imgError } = await browserClient.storage
      .from('user_image')
      .upload(`${userId}/${file.name}`, file, {
        cacheControl: '3600',
        upsert: false
      });
    if (imgError) {
      console.log('이미지 오류 => ', imgError);
    }

    // 업로드된 이미지의 URL 가져오기
    const imageUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/user_image/${userId}/${file.name}`;

    setValue('image_url', imageUrl);
  };

결과:

const imageUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/user_image/${userId}/${file.name}`;
이미지 url을 profile_img에서 user_image로 변경했는데 변경한 내용이 적용되지 않고 profile_img/~~/~~ 이렇게 들어가는 문제가 있음

=> yarn build를 해보니 변경한 url로 정상적으로 들어오고 이미지를 선택하지 않은 경우, 디폴트 이미지가 제대로 적용됨!

이미지를 선택한 경우도 제대로 적용됨 !!!!

해결!!!!!!!!

가취뽀 - 마이페이지 (정보 불러오기)

문제발생

useAuthStore에 있는 이름을 제외한 내용들 (사용자 타입, 프로필이미지, 현직 여부 등등)이 모두 null로 뜨는 문제

원인추론

useAuthStore에 제대로 정보를 담아주지 못하나..

해결방안

1. 먼저 useAuthStore를 console로 찍어봄.

결과:

2. useAuthStore에 담긴 내용을 console로 찍어봄

console.log(userId, userName, userType, userImg, mentoCurrent, mentoWorkExperience);

결과:

3. useAuthStore에 값이 어떻게 들어가나 확인

if (authData) {
      useAuthStore.setState({
        isLoggedIn: true,
        userId: formData.user_id
      });
    }

로그인 페이지에서 authData가 있을 때 userId만 담고 있는 것을 확인했다 !!

// 폼 제출 함수
  const onSubmit: SubmitHandler<FormData> = async (formData) => {
    const supabase = createClient();

    // auth 테이블에서 id와 일치하는 행의 이메일을 가져옴
    const { data: userData, error: userError } = await supabase
      .from('auth')
      .select('email')
      .eq('user_id', formData.user_id)
      .single();

    if (userError || !userData) {
      console.log('사용자정보가 없습니다. => ', userError);
      return;
    }

    // 위에서 가져온 이메일로 로그인
    const { data: authData, error } = await supabase.auth.signInWithPassword({
      email: formData.user_id,
      password: formData.user_pw
    });

    if (error) console.error(error);
    if (authData) {
      useAuthStore.setState({
        isLoggedIn: true,
        userId: watch('user_id'),
        userName: watch('user_name'),
        userEmail: watch('email'),
        userImg: watch('image_url'),
        userType: watch('user_type'),
        mentoCurrent: watch('mento_current'),
        mentoWorkExperience: watch('mento_work_experience')
      });
    }
  };

이렇게 수정하고, console에 찍히는 데이터를 확인해보니

userId 빼고는 그냥 아예 증발함

4. 로그인 로직을 수정

 // 위에서 가져온 이메일로 로그인
    const { data: authData, error } = await supabase.auth.signInWithPassword({
      email: formData.user_id,
      password: formData.user_pw
    });

먼저 위 코드의 signInWithPassword는 email 기반으로 인증하는 함수인데 나는 user_id를 넘기고 있었다.

이것을 userData.email로 수정하고

if (authData) {
  useAuthStore.setState({
    isLoggedIn: true,
    userId: watch('user_id'),
    userName: watch('user_name'),
    userEmail: watch('email'),
    userImg: watch('image_url'),
    userType: watch('user_type'),
    mentoCurrent: watch('mento_current'),
    mentoWorkExperience: watch('mento_work_experience')
  });
  console.log(authData);
}

watch("")는 회원가입에서는 적절했지만 로그인에선 적절하지 않았다!

왜냐면 input에 입력한 값을 추적해 가져오는건데 내가 하려는건

1. 사용자가 아이디를 입력하면

2. 그 아이디로 auth테이블에서 입력한 아이디가 일치하는 행을 찾아

3. 그 행의 이메일로 로그인

4. 로그인하면 해당 행에 있는 user_id, user_type, email등을 authData에 넣어주기

이고, 인풋은 아이디와 비밀번호를 입력하는 인풋 뿐이다! 그러므로 watch("")를 사용하는 것은 잘못된 것.

// 폼 제출 함수
  const onSubmit: SubmitHandler<FormData> = async (formData) => {
    const supabase = createClient();

    // auth 테이블에서 id와 일치하는 행의 이메일을 가져옴
    const { data: userData, error: userError } = await supabase
      .from('auth')
      .select('email, user_id, user_name, user_type, image_url, mento_current, mento_work_experience')
      .eq('user_id', formData.user_id)
      .single();

    if (userError || !userData) {
      console.log('사용자정보가 없습니다. => ', userError);
      return;
    }

    // 위에서 가져온 이메일로 로그인
    const { data: authData, error } = await supabase.auth.signInWithPassword({
      email: userData.email,
      password: formData.user_pw
    });

    if (error) console.error(error);
    if (authData) {
      useAuthStore.setState({
        isLoggedIn: true,
        userId: userData.user_id,
        userName: userData.user_name,
        userEmail: userData.email,
        userImg: userData.image_url,
        userType: userData.user_type,
        mentoCurrent: userData.mento_current,
        mentoWorkExperience: userData.mento_work_experience
      });

      console.log(authData);
    }
  };

이렇게 수정하고 로그인하니

정상적으로 찍힌다 !! 그리고 마이페이지에서도 정보가 찍히나 확인했는데

이미지 url까지 잘 들어온다!! 이 로그인 정보는 user_type이 멘티여서 mento타입과 관련된 부분은 null로 표시되는 것이므로 정상적으로 들어오는것이 맞다!

현재 풀어야 할 문제

1. 리다이렉트 (1순위)

로그인 한 사용자는 로그인/회원가입페이지에 접근할 수 없게 하는것 까진 했는데 마이페이지에도 접근을 못함

~~회원가입 할 때마다 정보가 두 개씩 쌓임~~ + ~~userData에 null이 찍힘~~

미들웨어 로직을 짜놔서 , useEffect를 안써도 middleware에서 사용자를 감지해 자동으로 페이지를 리다이렉트 시켜주는 것인데 이 부분이 해결되지않음. 어제는 분명 됐던거같은데 오늘 다시시도하니까 리디렉션한 횟수가 너무 많다고 뜸

2. 로그인상태일 때 페이지를 새로고침 하면 로그아웃 버튼이 페이지가 렌더링 되기 전까지 로그인으로 표시되다가 페이지가 렌더링된 이후 로그아웃으로 바뀌는 문제 + 마이페이지에서 새로고침하면 정보없음이 잠깐! 보이는문제(3순위)

3. ~~로그인 할 때 사용자에게 cookie를 set 해주는 로직 추가하기 + 사용자 정보 넣어주기~~ => 해결

4. ~~마이페이지 만들고 사용자 정보 불러오기~~ + 수정하기 기능 => auth 테이블의 정보는 잘 불러오는데 다른 테이블의 정보도 연결해서 가져와야함

5. Authentication이랑 auth테이블에서 특정 유저 정보가 삭제되지 않는 문제

➕ 추가 해야 할 것

1. 회원가입시 포인트 지급 & 로그인시 포인트 지급

241014

playhong — Mon, 14 Oct 2024 14:04:36 +0900

가취뽀 - 회원가입

문제발생

테이블에 정보가 두개씩 쌓임

원인추론

 // 폼 제출 함수
  const onSubmit: SubmitHandler<FormData> = 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.user) {
      console.error('이미 가입된 정보입니다.');
      return;
    }

    const { error } = await browserClient.from('auth').insert({
      user_id: formData.user_id,
      user_pw: formData.user_pw,
      user_type: 'mentee',
      email: formData.email,
      user_name: formData.user_name,
      image_url: formData.image_url,
      id: data.user.id
    });

    if (error) {
      console.log('error => ', error);
    } else {
      console.log('success =>', data);
    }
  };

이 폼제출 함수를 어딘가 잘못 작성한 것 같다.

해결방안

시도1. 폼 제출 함수를 하나로 합쳐보자

const { error } = ~~ 부분을 삭제하고 const { data, error ~ 부분에 해당 내용을 넣는것.

const { data, error: supabaseTableError } = await browserClient.auth.signUp({
  email: formData.email,
  password: formData.user_pw,
  options: {
    data: {
      user_id: formData.user_id,
      user_pw: formData.user_pw,
      user_name: formData.user_name,
      user_type: formData.user_type,
      image_url: formData.image_url,
    }
  }
});

결과: auth테이블에 하나씩만 쌓이긴 하는데, user_pw에 user_name값이 들어가고 user_name에 user_pw값이 쌓이고 user_id에 email값이 쌓임

시도2. 기존에 있던 const { error } ~ 부분을 수정하자

여기 나와있는 대로 따라해봤다.

const { data, error: supabaseTableError } = await browserClient.auth.signUp({
  email: formData.email,
  password: formData.user_pw
});

if (supabaseTableError) {
  console.log('supabaseTableError =>', supabaseTableError);
  return;
}

if (!data.user) {
  console.error('이미 가입된 정보입니다.');
  return;
}

const userData = await browserClient.from('auth').insert({
  user_id: formData.user_id,
  user_pw: formData.user_pw,
  user_type: 'mentee',
  email: data.user?.email,
  user_name: formData.user_name,
  image_url: formData.image_url,
  id: data.user?.id
});
console.log(userData);

결과: 여전히 두개씩 쌓임, 특이점은 마지막에 console.log로 찍어본 userData에 아무런 값이 찍혀있지 않다는거 근데 테이블은 두개씩 쌓이는 중이다.

시도3. const { error } ~ 부분의 insert를 uuid를 찾아 update하는 방향으로 수정.

튜터님께 질문해서 uuid가 일치하는 행을 선택해 수정하는 방향으로 다시 작성.

  const onSubmit = async () => {
    console.log(watch('user_id'));
    // Supabase에 사용자 등록
    const { data, error: supabaseTableError } = await browserClient.auth.signUp({
      email: formData.email,
  	  password: formData.user_pw
    });
    console.log(data);
    if (supabaseTableError) {
      console.log('supabaseTableError =>', supabaseTableError);
      return;
    }

    if (!data.user) {
      console.error('이미 가입된 정보입니다.');
      return;
    }
  const { data: userData, error: updateError } = await browserClient
    .from('auth')
    .update({
      user_id: formData.user_id,
      user_pw: formData.user_pw,
      user_type: 'mentee',
      email: formData.email,
      user_name: formData.user_name,
      image_url: formData.image_url
    })
    .eq('id', data.user.id);

  if (updateError) {
    console.log('회원가입에 실패했습니다 => ', updateError);
  } else {
    console.log('회원가입에 성공했습니다 =>', userData);
  }
};

결과:

아이디에 이메일이 쌓이고 나머지에 아무것도 쌓이지 않음.

console에는 null이 찍힘

시도4. 해결!!!!!!!!!!!!!!!

* react-hook-form 문법에 대해 조금만 더 잘 알았더라면!

* RLS에 대해 조금만 더 잘 알았더라면!

일단 시도3에서 작성한 로직 자체는 문제가 없었음 !!!

1. RLS 로직 설정

Auth policies에서

UPDATE를 수정해 줘야 했음.

create policy "Enable update for users based on email"
on "public"."auth"
for update using (
  (select auth.jwt()) ->> 'email' = email
) with check (
  (select auth.jwt()) ->> 'email' = email
);

기본으로 이렇게 적혀있는데

auth 테이블의 이메일과 로그인 한 사용자의 이메일과 일치할 때만 수정 권한을 주고 있는데

이러면 수정이 되지 않아서 (아직 로그인 전 이니까!)

이걸

alter policy "Enable update for users based on email"
on "public"."auth"
to public
using (
  true
with check (
  true
);

수정이 가능하도록 true로

이렇게 수정해준다.

2. react-hook-form 문법 바르게 사용하기

// 리액트 훅 폼으로 유효성 검사
const { register, handleSubmit, formState, watch } = useForm({
mode: 'onChange',
defaultValues: {
  user_id: '',
  user_pw: '',
  user_type: 'mentee',
  email: '',
  user_name: '',
  image_url: ''
},
resolver: zodResolver(signUpSchema)
});

이렇게 useForm을 하용해 register, handleSubmit, formState, watch를 불러왔는데

watch : watch('키값')으로 값을 뽑아낼 수 있다!

handleSubmit : 인자로 함수(폼제출함수)를 받는데, handleSubmit을 사용하고 있는 form태그 아래에 있는 input들이 유효하면 인자로 있는 함수(폼제출함수) 가 실행이 됨!

register : 인자로 받는 input 요소를 React hook form과 연결시켜 검증 규칙을 적용할 수 있게 해줌!

=> <input {...register('id')}/> 이런식으로 사용

formState : form 전체의 state!

위 메서드 들을 이용했다. (이것들의 활용 방법을 몰라서 많이 헤맸음!)

// 폼 제출 함수
  const onSubmit = async () => {
    // Supabase에 사용자 등록
    const { data, error: supabaseTableError } = await browserClient.auth.signUp({
      email: watch('email'),
      password: watch('user_pw')
    });

    if (supabaseTableError) {
      console.log('supabaseTableError =>', supabaseTableError);
    }

    if (!data.user) {
      console.error('이미 가입된 정보입니다.');
      return;
    }

    const { data: userData, error: updateError } = await browserClient
      .from('auth')
      .update({
        user_id: watch('user_id'),
        user_pw: watch('user_pw'),
        user_type: 'mento',
        email: watch('email'),
        user_name: watch('user_name'),
        image_url: watch('image_url'),
        mento_current: watch('mento_current'),
        mento_work_experience: watch('mento_work_experience')
      })
      .eq('id', data.user.id);
    console.log(userData);

    if (updateError) {
      console.log('회원가입에 실패했습니다 => ', updateError);
    } else {
      console.log('회원가입에 성공했습니다 =>', userData);
    }
  };

이렇게 watch("")로 인풋에 작성된 값들을 뽑아 사용할 수 있는것!

<form onSubmit={handleSubmit(onSubmit)}>
    <div>
      <label htmlFor="user_id">아이디</label>
      <input {...register('user_id')} id="user_id" type="text" required />
      {formState.errors.user_id && <span>{formState.errors.user_id.message}</span>}
    </div>
    <div>
      <label htmlFor="user_pw">비밀번호</label>
      <input {...register('user_pw')} id="user_pw" type="password" required />
      {formState.errors.user_pw && <span>{formState.errors.user_pw.message}</span>}
    </div>
    <div>
      <label htmlFor="user_name">닉네임</label>
      <input {...register('user_name')} id="user_name" type="text" required />
      {formState.errors.user_name && <span>{formState.errors.user_name.message}</span>}
    </div>
    <div>
      <label htmlFor="email">이메일</label>
      <input {...register('email')} id="email" type="email" required />
      {formState.errors.email && <span>{formState.errors.email.message}</span>}
    </div>
    <div>
      <label htmlFor="image_url">프로필 이미지 업로드</label>
      <input type="file" accept="image/*" onChange={handleImgUpload} />
    </div>
    <Button
      onClick={() => {
        console.log('회원가입 폼 제출됨');
      }}
      type="submit"
    >
      회원가입
    </Button>
  </form>

그리고 form태그에 onSubmit으로 handleSubmit을 넣어주는데 인자를 폼제출 함수인 onSubmit으로 넣어주면 된다!

가취뽀 - 페이지 리다이렉트 (로그인/로그아웃/마이페이지 접근 막기)

문제발생

페이지 접근을 막는것은 미들웨어 설정만으로도 가능한것 같은데

나는 미들웨어 설정뿐만 아니라 useEffect와 route를 사용해 적용함 => 페이지 깜빡임이 생김

로그인된 사용자가 로그인 페이지에 이동하려다 다시 홈페이지로 이동하는 과정에서 로그인 페이지가 살짝! 보였다가 이동되는것.

여기에 더해 미들웨어에 설정한 로그인상태의 사용자가 마이페이지로의 이동하면 다시 메인페이지로 리다이렉트되는것..

로그인상태의 사용자는 본인의 마이페이지에 접근할 수 있어야 한다!

원인추론

미들웨어의 설정이 잘못 되었나?

해결방안

시도1. 공식문서를 참고해 작성

export function middleware1(request: NextRequest) {
  const currentUser = request.cookies.get('currentUser')?.value;

  // 리다이렉트 조건

  // 로그인 안된 상태면 login으로 리다이렉트
  if (!currentUser) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 로그인된 사용자가 /login, /signup/mentee, /signup/mento에 접근하는 경우 홈으로 리다이렉트
  const redirectPaths = ['/login', '/signup/mentee', '/signup/mento'];
  if (currentUser && redirectPaths.includes(request.nextUrl.pathname)) {
    return Response.redirect(new URL('/', request.url));
  }
  // 로그인인된 사용자만 마이페이지로 시작하는 url에 접근하도록 허용
  if (currentUser && !request.nextUrl.pathname.startsWith('/mypage')) {
    return Response.redirect(new URL('/mypage', request.url)); // 마이페이지로 접근 허용
  }
}

export const config = {
  // 이 Middleware가 동작할 경로들을 추가해주면된다.
  matcher: ['/login', '/signup/mentee', '/signup/mento', '/mypage/:path*']
};

결과: 여전히 안됨! 이렇게 작성하면 useEffect 등을 삭제해도 리다이렉트 되는게 아닌가?

시도2. 다른 사람의 글을 참고

리다이렉트 될 때 페이지가 깜빡거린다는 점도 같아 이 블로그의 글을 참고해 다시 수정해봤다.

const protectedRoutes = ['/mypage/:path*']; // 로그인 정보가 있어야만 접근할 수 있는 페이지
const publicRoutes = ['/login', '/logout'];
// 로그인 하지 않을 경우 접근할 수 있는 페이지

export function middleware(request: NextRequest) {
  const token = request.cookies.get('accessToken');
  const currentPath = request.nextUrl.pathname;
  console.log(token);

  if (!token && protectedRoutes.includes(currentPath)) {
    const url = request.nextUrl.clone();
    url.pathname = '/login';
    return NextResponse.redirect(url);
  }

  if (token && publicRoutes.includes(currentPath)) {
    const url = request.nextUrl.clone();
    url.pathname = '/';
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

결과: 여전히 안됨!

여기서 든 생각.

지금 위에 console.log로 찍어본 userData에 아무런 값이 찍혀있지 않는 것이 이것과 연관있지 않을까? 토큰이 없어서? 근데 isLoggedIn은 true로 찍히니까 로그인 버튼이 로그아웃으로 바뀌는거 아닌가? 정말 모르겠다..

시도3. use client를 뺀다!

이렇게 깜빡임 현상은 클라이언트 컴포넌트에 문제되는 현상이라고 말씀해주셨음

그럼? SSR을 사용하면 되지 않나?

그래서 useEffect, router도 없겠다 'use client'도 삭제했는데

react-hook-form에서 문제가 된 것

검색해봤더니 같은 문제를 겪은 내용이 나왔는데, 해결방법이

아..

시도 4. middleware의 위치를 변경 + tsconfig.json에 "middleware.ts" 추가

새벽에 튜터님께서 도움을 주시고 가셧다!ㅠㅠ

https://nextjs.org/docs/app/building-your-application/routing/middleware

미들웨어의 위치를 조금 더 밖으로 빼야 한다!

나의 경우엔 src/utils/supabase폴더 안에 깊게 넣어놨었는데 이걸 src폴더로 옮겨주었다

그리고 tsconfig.json 파일에 가서

 "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "middleware.ts"],

이렇게 include부분에 middleware.ts를 넣어준다.

여기까지 하니 이제 깜빡임없이 잘 이동된다!!!

근데 문제는

export function middleware(request: NextRequest) {
  const currentUser = request.cookies.get('currentUser')?.value;
  console.log(currentUser);
  // 리다이렉트 조건

  // 로그인 안된 상태면 login으로 리다이렉트
  if (!currentUser) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 로그인된 사용자가 /login, /signup/mentee, /signup/mento에 접근하는 경우 홈으로 리다이렉트
  const redirectPaths = ['/login', '/signup/mentee', '/signup/mento'];
  if (currentUser && redirectPaths.includes(request.nextUrl.pathname)) {
    return NextResponse.redirect(new URL('/', request.url));
  }
  // 로그인인된 사용자만 마이페이지로 시작하는 url에 접근하도록 허용
  if (currentUser && !request.nextUrl.pathname.startsWith('/mypage')) {
    return NextResponse.redirect(new URL('/mypage', request.url)); // 마이페이지로 접근 허용
  }

  return NextResponse.next();
}

이 코드를 보면 로그인 한 사용자의 쿠키를 바탕으로 페이지를 이동시키는 것인데, 나는 로그인할 때 쿠키를 set 해주는 로직을 아직 짜지 않았다..

const { isLoggedIn } = useAuthStore();
  const router = useRouter();

  // 이미 로그인한 사용자인지 구분해서 접근막기
  useEffect(() => {
    if (isLoggedIn) {
      router.replace('/');
    }
  }, [isLoggedIn, router]);

아마 이 로직 때문에 제대로 움직이는 것 처럼 보이는게 아닐까 싶은데 이건 로그인 페이지 로직에서 수정을 해줘야 될 것 같다.

아닌거같다 여전히 깜빡이는거같다.

일단 로그인할 때 쿠키를 set해주고 따져봐야겠다.

현재 풀어야 할 문제

1. 리다이렉트 (2순위)

로그인 한 사용자는 로그인/회원가입페이지에 접근할 수 없게 하는것 까진 했는데 마이페이지에도 접근을 못함

2. 이미지업로드 (4순위)

스토리지에 이미지를 업로드하는 로직을 구성하긴 했는데 이미지가 정상적으로 올라가지지않음

~~3. 회원가입시 정보가 두개씩 쌓이는 문제 (1순위)~~ => 해결!!

회원가입 할 때마다 정보가 두 개씩 쌓임 + userData에 null이 찍힘

4. 로그인상태일 때 페이지를 새로고침 하면 로그아웃 버튼이 페이지가 렌더링 되기 전까지 로그인으로 표시되다가 페이지가 렌더링된 이후 로그아웃으로 바뀌는 문제 (3순위)

➕ 추가 해야 할 것

1. 마이페이지 만들고 수정하기 기능

2. 회원가입시 포인트 지급 & 로그인시 포인트 지급

❓ 궁금한점

공식문서에 따르라고 해서 context를 만들고 provider로 감쌌는데 이걸 어디서 어떻게 활용하는건지?

=> 이 부분은 로그인/회원가입에서 따로 사용할 일은 없다고 하셨음 ! 다만 다른 팀원 분들이 로그인 상태를 가지고 뭔가 로직을 짤 때 필요할 수 있으므로 만들어 두는게 적절함!!

241013

playhong — Sun, 13 Oct 2024 23:25:37 +0900

가취뽀 - 회원가입/로그인페이지에 이미 로그인한 사용자가 접근하는 것을 막기

문제발생

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/messages/next-router-not-mounted

위는 공식문서

해결방안

공식문서에는 next/navigation으로 마이그레이션 하라고 되어있다.

next/router로 되어있는 것을 navigation으로 수정하지 제대로 된다!

참고) https://velog.io/@meek/Error-NextRouter-was-not-mounted-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

241012

playhong — Sat, 12 Oct 2024 16:42:34 +0900

가취뽀 - 로그인

문제발생

로그인 시, 정확한 정보를 입력해도 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로 하면 알아서 아이디로 로그인 되지 않을까? 했다.

해결방안

에러: 응안돼

내가 너무 납작하게 생각했던 것이었고, 이메일을 아이디로 사용한다면 모를까 나처럼 이메일, 아이디를 따로 나눠 사용하는 경우엔 사용자가 입력한 아이디로 사용자의 이메일을 데이터베이스에서 조회해 해당 메일로 로그인을 해야 하는것!

단순히 email: formData.user_id로는 안되는 것이다..

const { data: userData, error: userError } = await supabase
      .from('auth')
      .select('email')
      .eq('user_id', formData.user_id)
      .single();

    if (userError || !userData) {
      console.log('사용자정보가 없습니다. => ', userError);
    }

먼저 auth테이블에 id로 사용자를 찾아서 사용자의 email 을 userData에 담는다.

const { data, error } = await supabase.auth.signInWithPassword({
      email: userData?.email,
      password: formData.user_pw
    });

그리고 그 userData로 로그인을 시도한다

가취뽀 - 회원가입

문제발생

zod와 react-hook-form을 사용해 유효성검사를 한 내용이 화면에 표시되지 않음

원인추론

내가 작성한 코드는 nextjs를 배우기 전, 리액트만 사용해 작성한 코드를 참고해서 폼 데이터를 useState로 관리하고 있었음

이것이 react-hook-form과 충돌하는 것

해결방안

useState를 삭제하고 react-hook-form으로 상태를 관리하기.

로그인, 멘티 회원가입, 멘토 회원가입 이 세 군데에서 사용하고 있었는데, 회원가입은 로직이 많아 복잡해 일단 로그인페이지부터 수정해봤다.

// zod
  const signInSchema = z.object({
    user_id: z.string().min(1, '아이디는 필수입니다.'),
    user_pw: z.string().min(6, '비밀번호는 최소 6자리 이상이어야 합니다.')
  });

  // 리액트 훅 폼으로 유효성 검사
  const { register, handleSubmit, formState } = useForm({
    mode: 'onChange',
    defaultValues: {
      user_id: '',
      user_pw: ''
    },
    resolver: zodResolver(signInSchema)
  });
  
  type FormData = {
    user_id: string;
    user_pw: string;
    email?: string;
  };

// 폼 제출 함수
  const onSubmit: SubmitHandler<FormData> = async (formData) => {
    const supabase = createClient();

    // auth 테이블에서 id와 일치하는 행의 이메일을 가져옴
    const { data: userData, error: userError } = await supabase
      .from('auth')
      .select('email')
      .eq('user_id', formData.user_id)
      .single();

    if (userError || !userData) {
      console.log('사용자정보가 없습니다. => ', userError);
    }

    // 위에서 가져온 이메일로 로그인
    const { data: authData, error } = await supabase.auth.signInWithPassword({
      email: userData?.email,
      password: formData.user_pw
    });

    if (error) console.error(error);
    if (authData) {
      useAuthStore.setState({
        isLoggedIn: true,
        userId: formData.user_id
      });
    }
  };
  
  return (
    <section>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register('user_id')} type="text" placeholder="아이디" required />
        {formState.errors.user_id && <span>{formState.errors.user_id.message}</span>}
        <input {...register('user_pw')} type="password" placeholder="비밀번호" required />
        {formState.errors.user_pw && <span>{formState.errors.user_pw.message}</span>}
        <Button
          onClick={() => {
            console.log('로그인 폼 제출됨');
          }}
          type="submit"
        >
          로그인
        </Button>
      </form>
      <div>
        <p>아직 회원이 아니신가요?</p> <Link href={'/signup'}>회원가입</Link>
      </div>
    </section>
  );
};

이렇게 작성하니 유효성 검사 결과가 에러없이 정상적으로 효시됨!

이 로그인 페이지를 바탕으로 회원가입페이지까지 작성하면 되겠다!

241011

playhong — Sat, 12 Oct 2024 02:34:03 +0900

가취뽀 - 회원가입

문제발생

유효성 검사결과가 화면에 뜨지않고 통과하지 못해도 폼이 제출되는 등 아직 문제는 많긴하지만

회원가입 버튼을 눌렀을 때 supabase에 가입 정보가 등록되는데,

supabase에서 제공해주는 Authentication(암호화가능한?유저테이블)에는 가입데이터가 다 쌓이는거 같은데 (제공되는 컬럼이랑 내가 저장해야하는 데이터랑 일치하지 않는 부분이 많아 전부 확인은 못했지만..) 내가 만든 auth테이블에는 안쌓임!! uuid랑 이메일이 들어오는데 이메일은 또 user_id에 쌓임 ㅠㅠㅠㅠ

원인추론

403은 권한 문제가 있을 때 발생한다고 함..

vs상에서 error를 넣어 콘솔로 확인할 수 있는 모든? 곳을 찍어봤는데도 내가 찍은 console은 찍히지 않고 그냥 403에러가 뜬다는 점에서..

해결방안

아무나 추가하지 못하도록 여기를 false로 해놨었는데 true로 수정하니까 정상적으로 들어온다!

근데!

연결이 안된다 ㅋㅋ

// Supabase에 사용자 등록
    const { data, error: supabaseTableError } = await supabase.auth.signUp({
      email: formData.email,
      password: formData.user_pw
    });

// auth테이블에 등록
const { error } = await supabase.from('auth').insert({
  user_id: formData.user_id,
  user_pw: formData.user_pw,
  user_type: 'mentee',
  email: formData.email,
  user_name: formData.user_name,
  image_url: formData.image_url,
  id: data.user.id // 여기에서 'id'로 변경
});

이 부분은 Authentication(암호화가능한?유저테이블)에 데이터가 쌓이면 auth테이블에도 데이터를 넣어주는 로직인데 저기에 id 를 추가하고 data.user.id를 넣어주니 정상적으로 추가된다 ㅠㅠ