본문 바로가기

Projects/개인 포트폴리오 사이트 만들기8

Github REST API 사용하기(1) import { octokit } from '@/service'; const GITHUB_OWNER = 'www-r'; export async function getRepoReadMe(owner = GITHUB_OWNER as string | undefined, repo: string) { const response = await octokit.request(`GET /repos/${owner}/${repo}/readme`, { owner: owner, repo: repo, headers: { 'X-GitHub-Api-Version': '2022-11-28', accept: 'application/vnd.github.raw+json', //없으면기본base64로인코딩된다 }, }); // console... 2024. 1. 31.
Github REST API 사용하기 (feat. Octokit.js)(0) 이전에는 노션의 데이터베이스만 사용했었는데, 리팩토링을 계속 진행하다보니, Supabase를 도입하게 됐습니다. 그래서 Notion의 데이터베이스에서 가져오던 대부분의 데이터를 Supabase의 데이터베이스로 옮기고, 프로젝트 관련 내용들만 노션의 프로젝트 데이터베이스를 사용하고 있었습니다. 지금 당장 만들때는 좀 귀찮아도 나중에 게시물을 업데이트해야할 때 편하려고 Notion API를 도입했던건데, Notion 특성 상, 두 문장을 가져오는 데도 코드가 길어지는 문제점이 있었습니다. 그리고 프로젝트에 대한 상세한 글을 노션에서도 작성해서 관리하고, Github에서도 README.md를 통해 작성해서 관리해야한다는 것을 깨달았습니다. 초기에 이 사이트 구상을 할 때 제일 메인이 Notion이었던 만큼 고.. 2024. 1. 31.
SupaBase 에서 Google OAuth 사용하기 저기 "구글로 로그인하기" 버튼을 누르면 google 계정으로 로그인이 되어야 한다. OAuth 동의 화면과 계정 선택까지 했는데 계속 아무런 토큰 저장없이 메인페이지로 리다이렉트된다. 왜 그럴까 하고 다시 자세히 보는데, 저기 주석에 이유가 그냥 적혀있다. 저 함수에 대해서 다시 한번 공식문서에서 읽어보자 https://supabase.com/docs/reference/javascript/auth-onauthstatechange 다시 읽는 김에, 처음부터 과정을 기록해두기로 했다. supabase 에서 Google OAuth Login ( Sign In ) 시작! Login with Google 아, 혹시 글보다 영상을 선호하시는 분들은 밑에 영상을 보셔도 될 것 같습니다. https://supabas.. 2024. 1. 23.
[ React ] hover 구현하기 useEffect(() => { formCoverRef?.current?.addEventListener('mouseEnter', () => { setIsHovered(true); }); formCoverRef?.current?.addEventListener('mouseLeave', () => {}); setIsHovered(false); }, []); 위의 함수는 해당 화면에 마우스를 올리면 로그인하기 버튼이 나오게 하기 위해 만든 함수였다. (버튼 디자인이 저건 아니다.) 근데 동작을 하지 않아서 구글링을 해봤다. 처음에 찾은 문제점은 dependency였다. 위의 로직대로라면 컴포넌트가 마운트되고 나서 한번 실행되는데, 그때는 아직 formCoverRef를 컴포넌트에 주기 전이니 당연히 undefin.. 2024. 1. 22.
방명록 추가하기 사이트에 방명록을 추가하기로 했습니다. 그래서 이번 기회에 전에 들어보았던 supabase를 한번 써보려고 합니다 데이터 테이블은 쉽게 만들 수 있었습니다. 데이터 타입은 요렇게! { id: uuid; created_at: timestamptz message: text; author: varchar; is_locked:boolean; password: int4; } 데이터 타입이 평소에 쓰던 string,number,boolean이 아니라 뭔가 세분화되어 있어서 약간의 서칭은 필요했지만, 그래도 여기까지는 수월하게 왔는데, 왠지 REST API를 사용하기 시작하면서부터 글을 쓸 일이 생길 것 같아서 미리 시작해봅니다. 이제 진짜 본격적으로 시작해봅시다. 공식문서 2024. 1. 17.
노션을 데이터베이스로 사용하는 포트폴리오 사이트 만들기(3) - 기존에 만든 포트폴리오 사이트 리팩토링 기존에 만든 포트폴리오 사이트도 Next.js 로 만들었지만, 모든 내용을 하드코딩되어 있어서 노션 DB에서 내용을 가져오는 형태로 리팩토링하려고 한다. 기존 포트폴리오 사이트 깃허브 https://github.com/www-r/portofolio GitHub - www-r/portofolio: 김영은 포트폴리오 사이트 김영은 포트폴리오 사이트. Contribute to www-r/portofolio development by creating an account on GitHub. github.com 새로운 포트폴리오 사이트 깃허브 https://github.com/www-r/PorfolioWithNotionDB GitHub - www-r/PorfolioWithNotionDB Contribute to w.. 2023. 11. 21.