Next.js 심화 2일 차 @프로젝트 세팅

오늘은 프로젝트 세팅을 하며 시간을 보냈다. 몇 가지 기억에 남는 일이라면 폴더 구조 확정, github default branch push 제한, 그리고 typescript에서의 supabase이다. 

 

프로젝트 폴더 구조

먼저 프로젝트의 폴더 구조를 짜는 데에서 약간 고민할 거리가 있었는데, Link를 타고 여러 곳에서 접근해야하는 게시물 디테일 페이지를 어느 폴더에 만들어야 하는지가 고민이었다. 

 

(detail)폴더로 페이지를 묶으려고 해도 다른 라우터 폴더를 거치지 않고 [id] 폴더를 생성하면 '~~.com/123'과 같이 유효하지 않은 세그먼트가 생겨버린다. 

 

테스트를 통해 이러한 경우 404 not found 오류가 발생하는 것을 확인했다.

 

때문에 결국 기존에 하던 대로 list 폴더 하위에 [id] 폴더를 두기로 했다. 

 

홈('/')이나 마이페이지('/mypage')에서 상세페이지로 이어지는 카드를 누르더라도 리스트 폴더 하위의 상세페이지('/list/[id]')로 넘어가도록 하는 것이다. 

 

이렇듯 상하관계를 확실히 지정해야 한다는 것은 단점으로 느껴지기도 하는데, 생각해보니 url을 통해 경로를 지정하는 웹사이트를 구성하는 데에 있어서 이렇듯 url의 구성을 잘 생각하는 것은 중요한 일 같았다. 

 

github default branch push 제한

다음은 github default branch로의 push를 제한하는 세팅을 진행했다. 

아무 설정도 하지 않으면 콜라보레이터로 등록된 사람들은 아무 브랜치에나 제한 없이 push나 pr을 진행할 수 있는데, 이러한 사항들은 개개인이 규칙을 준수하면 문제가 없는 부분이면서도 실수를 통해 문제가 일어날 수 있는 사항들이기도 하다. 

 

때문에 다른 팀원분의 제안에 따라 github setting에서 branch rule을 지정하는 기능을 통해 default branch에는 바로 push하지 못하도록 하는 제한을 걸었다. 

이러한 github의 제한 기능은 이번에 처음 알게 되었는데, 아무래도 취업하고 나서도 github를 사용하는 일이 있을 것 같으니 이러한 기능에 대해서도 어느 정도는 알고 있는 게 좋을 것 같았다.  

 

 

typescript에서의 supabase

타입 문제

supabase를 typescript에서 사용하는 것은 처음인데, 아니나다를까 response 타입에서부터 약간 말썽이 있었다. supabase get 요청의 response 값의 // 타입이 아래와 같이 확정되어서 any[]가 나타난 것이다.

때문에 아래의 // 활용 부분과 같이 as post[]로 따로 데이터 타입을 확정해주어야 할 필요가 생겼다. 다행히 타입을 확정한 myPosts 이후부터는 타입이 잘 나오는 것을 보니 타입 이슈는 이 방법으로 해결이 가능한 것 같아서 다행이다. 

// 코드
const response = await supabase.from("post").select("*");

// 타입
const response: PostgrestSingleResponse<any[]>

// 활용      as type 으로 타입 확정
const myPosts = response.data as post[];

 

SSR + supabase 문제

또 supabase.ts 파일을 만들면서 고려하지 못한 부분이 있었는데, 자세한 로직까지는 알지 못하지만 next.js의 ssr과 supabase를 함께 사용하려면 아래와 같이 @supabase/ssr 라이브러리를 활용해야 한다. 

// @supabase/supabase-js에서 가져오던 것이 @supabase/ssr에서 가져오는 걸로 바뀌었음
import { createBrowserClient } from "@supabase/ssr";

export const createClient = () => createBrowserClient(process.env.SUPABASE_API_URL!, process.env.SUPABASE_API_KEY!);

const supabase = createClient();

export default supabase;

 

이를 눈치챈 후 바로 바꾸었다. 사실 아직은 이전에 그냥 react에서의 supabase와 무엇이 다른지는 잘 모르겠지만, supabase는 우리 프로젝트의 백엔드로써 CRUD가 활발히 일어날 수 있는 데이터이니 ssr로 작동하는 게 맞다. 때문에 일단 이렇게 바꾼 상태에서 프로젝트를 진행하려고 하고, 팀원들에게도 전하여 pr을 올렸다.