메모장에 적어놨던 til들(이라 쓰고 그때 그때 바로 적은 것들)

1

Context API를 RTK로 적용
캐러셀 라이브
리액트 context
컴포넌트
context api
풀옵스
superbase
코드 컨벤션
깃 컨벤션

마이페이지 불필요
검색 빼고 게시글 작성

기본기능 : 메인 피드, 상세, 마이페이지, 회원가입, 게시글 작성
메인 피드 : 뒤 로 미 루 기
상세 : 민정님
마이페이지 : 현지님
회원가입 : 도현님
로그인 : 도현님
댓글 : 수진님
게시글 작성, 수정 : 해인님

로고,,,, 사이드바

디자인 1명, 셋업 2명, 셋업 디테일 2명으로 분담해서 진행
디테일하게 일정 적어서 제출

회원정보, 검색 키워드, 

기능을 구현하라고 했을 때 지금까지 배운 거 다 모아서 제출해야하는데 기능적으로
월요일까지 다 끝내기,,,,,,,,,,,,,? 화요일에 튜터에게 가서 이렇게 만들었는데 하면서 수정을 한 번 받을 수 있는 시간을 만들기. 수요일에 제출 -> 피드백 개인으로 받음
레퍼 만들고 컨벤션 만들고 월요일 제출, 리뷰 하는 시간 소중하니까 다시 수정ㅇ할 수 잇는 시간 중요하니까 월요일에 다 만들어라

9시 전까지 일정을 오늘 다 정해라/ 몇월 며칠까지 어떤 기능을 구현할 것인지
기능별단위/컴포넌트단위 상관없음

팁은 생각보다 그렇게 머리를 모은다고 정리가 잘 되진 않는다
역할분담 중요


닉네임, 이메일, 관심동네, 내가 작성한 글

2

post에 userId들어가있고 auth.uid() 

filter를 해서 불러올 수 있음....

select문에 

supabase database eq 
equal to a value

getSession.....
getUser.....

git merge dev branch

test@test.com / test1!!
json pot

        const getSession = async () => {
            //getSession으로 사용자 아이디 받아오기
            const { data: userData } = await supabase.auth.getSession();
            setLogin(response.data.session.user.id);
            console.log(response.data.session.user.id);

            //eq로 필터링
            const { data, error } = await supabase
                .from('User')
                .select('UserNickName')
                .eq('UserID', response.session.user.id);
            console.log(data);
            setUsers({ UserID: response.session.user.id, UserNickname: data[0].UserNickName });
        };

        getSession();

 

3

코드

import React, { useEffect, useState } from 'react';
import styled from '@emotion/styled';
// import testImg from '../../img/test.png';
import supabase from '../../supaBasecClient';

const MYPAGE_CONTAINER = styled.div`
    display: flex;
    margin: 30px 30px 30px 130px;
`;

const LeftMypage = styled.div`
    margin-right: 80px;
    padding-right: 80px;
    border-right: 2px solid #000;
`;

const RightMypage = styled.div`
    flex-grow: 1;
`;

const PostBox = styled.div`
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, auto));
    gap: 20px;
    border: 2px solid #000;
`;

const UserInfo = styled.div`
    border: 1px solid black;
    padding: 10px;
    margin-bottom: 20px;
`;

const MyPage = () => {
    const [users, setUsers] = useState([]);
    const [posts, setPosts] = useState([]);
    const [error, setError] = useState(null);
    const [loginUserId, setLoginUserId] = useState(null);

    useEffect(() => {
        const fetchUserData = async () => {
            try {
                // 세션에서 사용자 정보를 가져옴
                const { data: sessionData, error: sessionError } = await supabase.auth.getSession();

                if (sessionError || !sessionData.session) {
                    throw new Error('세션 정보를 가져오는 데 실패했습니다.');
                }

                const userId = sessionData.session.user.id;
                setLoginUserId(userId);

                // 사용자 정보를 불러옴
                const { data: userData, error: userError } = await supabase
                    .from('User')
                    .select('*')
                    .eq('UserID', userId);
                console.log(userId);
                if (userError) {
                    throw new Error('사용자 정보를 불러오는 데 실패했습니다.');
                }
                setUsers(userData || []);

                const { data: postData, error: postError } = await supabase.from('Post').select().eq('UserID', userId);
                if (postError) {
                    throw new Error('게시글이 없습니다');
                }
                setPosts(postData || []);
            } catch (err) {
                setError(err.message);
                console.error(err);
            }
        };

        fetchUserData();
    }, []);

    return (
        <MYPAGE_CONTAINER>
            <LeftMypage>
                {error ? (
                    <p style={{ color: 'red' }}>{error}</p>
                ) : users.length > 0 ? (
                    users.map((user) => (
                        <UserInfo key={user.UserID}>
                            <h5>아이디: {user.UserID || 'N/A'}</h5>
                            <h5>이름: {user.UserNickName || 'N/A'}</h5>
                            <h5>나이: {user.age || 'N/A'}</h5>
                            <h5>주소: {user.UserCity || 'N/A'}</h5>
                        </UserInfo>
                    ))
                ) : (
                    <p>사용자 정보를 불러오고 있습니다...</p>
                )}
            </LeftMypage>
            <RightMypage>
                {/* {[...Array(6)].map((_, index) => (
                        <img key={index} src={testImg} alt={`post-${index}`} />
                    ))} */}
                {error ? (
                    <p style={{ color: 'red' }}>{error}</p>
                ) : (
                    posts.map((post) => (
                        <PostBox key={post.PostTitle}>
                            <img
                                src={`${import.meta.env.VITE_SUPABASE_URL}/storage/v1/object/public/images/${post.PostID}/${JSON.parse(post.PostImgs)[0]}`}
                            />
                            <p>{`${post.PostTitle}`}</p>
                        </PostBox>
                    ))
                )}
                <p>닉네임, 이메일, 관심동네, 내 댓글/게시글이라.....</p>
            </RightMypage>
        </MYPAGE_CONTAINER>
    );
};

export default MyPage;

수정사항

1. 이미지가 원본으로 나오는 거 수정하기 위해서 

const PostBox = styled.div`
    img {
        object-fit: contain;
        width: 100%;
    }
`;
이렇게 추가함
height: 100%;으로 하면 원본 사이즈가 나온다.

2. 이미지가 안 불러와져서 처음에 민정님이 해인님에게 받은 코드

src={`${supabaseUrl}/storage/v1/object/public/images/${postId}/${img.name}}를 사용함. 그래도 해결이 안 되자, 코드를 수정함.

우선 supabaseUrl는 import를 하니까 오류가 나서 도현님께 물어보니까 그거 대신 
import.meta.env.VITE_SUPABASE_URL를 아예 코드 안에 넣으면 해결된다고 하셔서 안에 넣고, postID가 말 그대로 post테이블에서 id를 받아오는 것이었는데, 나는 post자체를 받아왔기 때문에 post.PostID로 수정했다. 마지막으로 img.name도 마찬가지로 post.PostImgs였는데, 이렇게 수정하고 출력해도 분명 값은 잘 받아오는데 사진이 안 나와 코드를 뜯어보니 /게시글 번호/이미지 번호 이렇게 출력되야 하는데 테이블에 들어가있는 값 그대로 /게시글 번호/["이미지 번호"]이렇게 나오는 불상사가 생김.
근데 메인에는 사진이 잘 나와서 그쪽 코드를 뜯어보니 JSON.parse(post.PostImgs)[0]를 사용하는 것을 발견하고 수정하니 해결됨.

src={`${import.meta.env.VITE_SUPABASE_URL}/storage/v1/object/public/images/${post.PostID}/${JSON.parse(post.PostImgs)[0]}`}

3. 

::-webkit-scrollbar-button:vertical:start:increment {
    display: block;
    height: 25px;
}

수정해야하는 부분.
1. mypage UserInfo width
2. mypage post 하단에 여백이 너무 많이 남는 점

4

유효 아이디 연결
import {v4 as uuidv } from 'uuid';


projects0902!A4ads


1,2번은 복사해서 붙여넣기
3번은 useContext에서 setUser에서 로그인 정보를 담고있음
useContext에서 UserContext에서 user를 받아와서 

4번은 로직 그대로 복사해서와서
preventDefault

Outlet
AuthRoute
PrivateRoute
Navigate(튕겨내기)

5

get User
supabase us?

supabase정리
preventDefault

supabase.auth
supabase.auth.signInPassword({
	email,
	password,
});

오류나면

try {
	await supabase.auth.signInPassword({
		email,
		password,
	});
} catch (error) {
콘솔로그
}

로그인 정보 출력하는 방법
onAuthStateChange(로그인과 관련된 권한 상태 변경되면 발생, 즉 유저의 권한이 바뀌면 일어난다)
여기서 유저의 권한이 바뀐다는 것은 
1. 사용자가 로그인 했을 때
2. 사용자가 로그아웃 햇을 때
3. 비밀번호 복구가 시작되었을 때
4. 사용자의 정보가 업데이트되었을 때
5. 세션 토큰이 갱신되었을 때

번외)
위 방법을 사용하지 않을 때
1. 로그인 할 때 setUser(로그인된 유저)
2. 로그아웃 할 때 setUser(null)

사용방법 :
useEffect -> 컴포넌트 렌더링이 일어난 후에 동작한다.
최초 렌더링 시에만 아래서 => {이부분을 동작시킨다는 것}

useEffect(() => {
    const { data, error } = await supabase.from("sample").select("*");
    if (error) {
      console.log("error => ", error);
    } else {
      console.log("data => ", data);
      setUsers(data);
    }
  }
  fetchData();
  );

join으로 한 번에 불러올 수 있다
auth ->