248031

FACTS(사실, 객관) : 내가 한 일

스파르타 오버플로우 팀플4일차. .

1. 

게시글 리스트별로 작성자 정보를 가져오는 부분에서 자꾸 400err가 뜸

 

열심히 삽질 후 도무지 해결이 안돼서 gpt에 물어보니 대충 Post테이블이 userinfo테이블과 연결되어 있지 않아서 생긴 문제로,

1. PostDetail.jsx에서 사용했던 방법을 그대로 사용하거나

  - 이 경우, 쓸데없는 요청이 다량 발생할 수 있음!

2. supabase에서 두 테이블의 관계를 설정해줘야 한다는 걸 알게 됐다

 

나는 어차피 필요하기도 했고 2번을 택했는데,

=> Post테이블에 있는 userId를 userid테이블의 id와 연결시켜주는 것

 

1) Edit column 클릭

 

 

2) Type을 userid테이블의 id와 동일한 uuid로 변경

- 3부터 수정할 내용과 함께 수정할 수 없으므로 먼저 Type을 수정하고 Save한 후, 3을 진행해야 했다.

 

3) 그리고 Add foreign key 클릭

 

4) 키를 연결 설정

 

나는 userid의 id와 연결해야 했으므로, 먼저 userid 테이블을 선택한 후, id를 선택했다. 

그리고 만약 글쓴이가 이름을 변경할 경우, 작성한 글에서도 이름이 변경되어야 하므로 Action if referenced row is updated는 Cascade(종속)으로 설정했다. 

그리고 Save를 클릭하면 연결된다. 

이제 코드로 돌아와서 

//게시글 리스트 정보
    const fetchPosts = async () => {
      const { data, error } = await supabase.from("Post")
        .select(`*, userinfo:userId (
            username,
            profileImage
          )`);
      if (error) {
        console.log("error =>", error);
      } else {
        console.log("post data =>", data);
        setPosts(data);

        // 작성자 정보 로드
        if (data.userId) {
          fetchAuthor(data.userId);
        }
      }
    };
    fetchPosts();
  }, []);

 

.select에서 userinfo:userId (username, porofileImage) 부분은 

- userinfo:userId () => Post 테이블의 userId 컬럼을 사용하여 userinfo 테이블과 연결된 데이터를 가져온다

- (username, porofileImage) => 그 중에서도 userinfo테이블에서 username과 profileImage를 가져온다 는 뜻

 

그리고 list.jsx에서 posts를 props로 가져오고 ,  

<span>{post.userinfo.username}</span>

 

이렇게 넣어주면 작성자명을 정상적으로 가져올 수 있다!!

 

 

2.

글 작성페이지에서 입력한 코드들을 코드블럭 안에 넣어주는 것

이렇게 코드를 첨부하는 기능. highligt.js 라이브러리를 사용했다. 라이브러리 설치는 프로젝트 셋업 때 국자님이 미리 설치해주셔서 따로 설치할 필요는 없었다. 하지만 사용법을 몰라서 열심히 검색

공식사이트

https://highlightjs.org/

highlight.js

라이브러리 설치부터 자세하게 나와있는 공식?사이트

https://www.npmjs.com/package/react-syntax-highlighter?activeTab=readme

react-syntax-highlighter

스타일을 확인할 수 있는 데모사이트

https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/

React Syntax Highlighter Demo

국자님이 알려주신 참고 사이트

https://jenny0520.tistory.com/160

[코드 블럭] highlight 라이브러리 사용해서 code block 적용하기 (React, Typescript)

그리고 참고한 다른 분 영상

https://www.youtube.com/watch?v=XxGMuoje1g0&t=499s

 

영상은 외국분이시긴 했지만 어차피 따로 말로 설명해주시는 부분도 없었고 그냥 보면서 어떻게 넣었는지 따라할 수 있을 정도여서 코드 복사기능까지 쉽게 추가할 수 있었다.

 

이제 굵직하게 css수정으로 레이아웃정도만 얼추 맞추면 될 것 같다. (세세한 css는 상의하고 전부 맞춰 수정할 것 같다)

---

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

 

---

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

supabase에서 테이블끼리 관계 연결하기

---

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지