본문 바로가기

전체 글402

2024-07-12 Next.js 팀프로젝트 회고(readme) 실제 서비스가 아니라, 토이 프로젝트입니다.글에서 등장하는 인물들은 모두 관련 없는 연예인이며 그저 왕팬입니다.Indie N Bob프로젝트 소개배포 링크어떤 사이트인가요?타인의 자본(제작자의 자본)에 종속되지 않고, 자신의 돈으로 직접 앨범을 제작하고, 홍보 역시 자신의 돈으로 하는 등 독립적으로 활동하는 뮤지션인 인디밴드가 본인의 공연 및 앨범을 홍보하고 사용자들은 본인이 좋아하는 곡, 밴드, 좋았던 공연을 공유하는 커뮤니티 사이트 입니다.사이트 이름인 Indie-N-Bob 인디씬의 싱어송라이터, 밴드 가수들이 밥 걱정 없이(경제적 걱정 없이를 은유적으로 표현) 음악 활동을 이어나갈 수 있도록, 공연 정보를 공유하고, 팬들이 직접 가수를 추천하여 널리 알려질 수 있도록 돕는 커뮤니티를 표방하기 위해 작.. Programing/TIL 2024. 7. 13.
2024-07-11 Next.js 마이페이지 구현 로직 폴더구조```📦 .eslintrc.json.gitignore.vscode│  ├─ extensions.json│  └─ settings.jsonREADME.mdcomponents.json├─ next.config.mjs├─ package.json├─ postcss.config.mjspublicGallery_View_icon.svg├─ src│  ├─ app│  │  ├─ (provider)│  │  │  ├─ (root)│  │  │  │  ├─ auth│  │  │  │  │  ├─ login│  │  │  │  │  │  └─ page.tsx│  │  │  │  │  └─ signup│  │  │  │  │     └─ page.tsx│  │  │  │  ├─ concerts│  │  │  │  │.. Programing/TIL 2024. 7. 12.
2024-07-11 supabase를 클라이언트-서버 컴포넌트에서 사용할 때 클라이언트를 계속 생성해야 하는가? Next.js는 서버 컴포넌트와 클라이언트 컴포넌트 둘 다 지원하는 프레임워크이다. 보통 React.js를 배우고 나서 Next.js로 넘어 가게 될 텐데 매우 혼란스러운 개념이 생긴다.리액트는 기본적으로 클라이언트 컴포넌트이기에, 내가 지금 구현한 페이지의 렌더링 방식이 어떤 것인지 고민할 필요가 없어서 리액트를 배우는 과정에서도 이를 다루진 않는다. 하지만 SSG를 만들어내서 SEO에 유리한 서버 컴포넌트도 작성할 수 있는 Next.js로 넘어 오면서, 기존 리액트에서 쓰던 방식을 그대로 써도 되는 게 있고 안 되는 것이 생기면서 초심자 입장에서는 머리가 복잡해진다. 그 중 하나가 supabase를 세팅하는 부분이 상당히 복잡해졌다는 것인데, 클라이언트, 서버, 추가로 미들웨어까지 세팅을 해주어야 한.. Programing/TIL 2024. 7. 11.
2024-07-08 Next.js 마이페이지 구현하기 (1) 프로젝트 구조 설정project-root/│├── lib/│ └── supabaseClient.ts│├── public/│ ├── favicon.ico│ └── ...│├── src/│ ├── app/│ │ ├── (provider)/│ │ │ ├── (root)/│ │ │ │ ├── layout.tsx│ │ │ │ ├── page.tsx│ │ │ │ └── ...│ │ │ ├── components/│ │ │ │ ├── PostList.tsx│ │ │ │ ├── PostGallery.tsx│ │ │ │ ├── ProfileModal.tsx│ │ │ │ └── ... Programing/TIL 2024. 7. 9.
Supabase 타입 추론 스크립트 추가하기 상황무엇이 되었든 타입스크립트로 데이터를 받아 오려면 응답값의 타입을 지정해주어야 한다.그런데, 관계형 데이터베이스를 사용하는 수파베이스의 특성 상 아무리 작은 프로젝트여도 데이터베이스와 컬럼의 개수가 상당히 많아질 테고 중간 중간 데이터베이스나 컬럼이 수정되는 소요가 있을 텐데 그 때마다 타입을 지정해주어야 한다는 것은 정말 끔찍한 일이다.정말 간단한 토이 프로젝트에서도 이런 타입이 400 라인 가깝게 필요하다. 그러나 다행인 것은 supabase에서는 타입을 자동으로 추론해주는 메서드를 제공한다.공식문서 원문https://supabase.com/docs/guides/api/rest/generating-types Generating TypeScript Types | Supabase DocsHow to .. Programing/Server 2024. 7. 9.
App Routes 만드는 기본 방법 파일 기반 라우팅넥스트는 파일 시스템 기반 라우터 방식을 채택한다. 이 말은 폴더를 만들면 그 폴더 이름으로 URL 세그먼트가 만들어지고, 폴더 안에 폴더 안에 폴더를 만들면 /폴더/폴더/폴더/page.tsx 처럼 중첩 라우팅도 가능하다는 이야기다.리액트에서 라우트 파일을 별도로 만들어서 일일이 설정해줬던 것에 비하면 굉장히 직관적이고 간편하다.마지막 경로(leaf)에 있는 폴더 안에 page.tsx를 만들면 그 경로의 최종적인 페이지를 렌더링 할 수 있음.물론 nated route(중첩 경로)이더라도 중간에서도 페이지를 만들 수도 있음. 예를 들어 app/detail/[id] 라는 라우트가 있을 때 detail 폴더에도 page.tsx 하나, [id] 폴더에도 page.tsx 하나 만들면 디테일 페이지.. Programing/Next.js 2024. 7. 5.
Tistory RSS를 GitHub에 자동으로 md 파일로 파싱하여 커밋하기 구현하고자 하는 기능GitHub Actions를 이용.Tistory의 RSS를 이용하여 최신 게시글을 자동으로 md 파일로 변환하여 깃허브 리포지토리에 수집하고자 함.수동으로 수집할 수도 있고, 시간마다 자동 실행되게 할 수 있음.원리는 GitHub에서 인식 가능한 소스코드를 작성해서 GitHub Actions가 코드를 읽고 실행하게 하는 것임. 내가 실행하는 것이 아님.제목은 티스토리라고 한정지었지만 RSS를 이용하는 것이기 때문에 티스토리, 벨로그, 네이버 그 어떤 플랫폼의 서비스여도 RSS만 발급되면 주소만 바꿔주면 동작함.심지어 RSS를 공개하는 기상청 같은 공공기관이나 뉴스 사이트 등 모든 곳을 이런 방식으로 게시글을 박제(?), 아카이빙(?) 할 수도 있음.이것을 응용해서 남의 블로그 RSS도.. Programing/Git 2024. 7. 5.
[GitHub Actions] Auto-Commit 보호되어 있는 글 입니다. 2024. 7. 5.
App Router란 무엇인가? App Router란?Next.js가 페이지 라우팅을 하는 방법.Next.js 13버전 부터 기존의 Pages Router 방식에서 완전히 새로운 App Router 방식이 도입됨.프로젝트 내부 app 폴더 내에서 새 디렉토리를 만들면 그것이 url 세그먼트가 됨.App Router에서는 공통 레이아웃, 중첩 라우팅, 에러 처리 방법 등을 제공함.만약 pages router와 app router를 한 프로젝트에서 혼용하는 경우 앱 라우터가 우선됨. 따라서 충돌이 발생할 수 있음.개발자가 page.tsx 파일에서 "use client"를 최상단에서 명시하지 않으면 기본적으로 리액트 서버 컴포넌트로 동작함.리액트만 배우고 온 경우에는 서버 컴포넌트 방식이 생소할 수 있어서 러닝 커브가 있을 수 있음.폴더와 .. Programing/Next.js 2024. 7. 5.
Next.js의 라우팅에서 사용되는 필수 용어 정리 Next.js에서 사용되는 라우팅 필수 용어Tree계층 구조를 시각화하기 위한 규칙.부모-자식 컴포넌트가 있는 컴포넌트 트리나 폴더 트리와 같이 사용된다.나무가 뿌리를 내리는 모습과 비슷하게 생겨서 Tree 구조라고 함.Subtreeapp 폴더를 제외하고 그 다음 디렉토리 부터... 트리의 일부분.root(첫 번째 시작점)에서 leaf(끝 지점), 즉 뿌리에서 잎까지 포함하는 개념임.이 Subtree 들이 모여서 하나의 Tree를 만듦.RootSubtree의 시작점.app 폴더 바로 다음 계층을 말함. 즉 첫번째 노드를 말함.그러나 개발자들이 특정 Subtree를 지목하지 않고 '루트 폴더'라고 말하면 프로젝트 폴더의 가장 바깥을 의미함.LeafURL path의 가장 마지막 노드임.더 이상 childre.. Programing/Next.js 2024. 7. 4.

티스토리툴바