yooputer's devlog

https://my-portfolio-nextjs-lemon.vercel.app/ Kim Yoojin PortfolioBuilt with Next.js, Tailwind CSS and shadcn/ui, Notion API. Deployed with Vercel. Contact Email : yooputer@gmail.commy-portfolio-nextjs-lemon.vercel.app 최근에 Next.js와 노션 API를 사용하여 개발자 포트폴리오를 구축하였다. 그리고 배포를 했는데, 메인, 프로젝트 목록, 스킬 페이지는 내용이 바로바로 뜨는데프로젝트 상세 페이지에만 접속하면 유독 페이지가 늦게 떴다. (진짜 느릴 때는 20초정도?) 그래서 아니 늦게뜰꺼면 다 늦게 뜨고, 빨리 뜰꺼면 다 빨리 뜰 것..

Project/포트폴리오(NextJS + Notion API) 2025. 7. 16. 16:40

Next.js에서 Clerk을 사용하여 사용자 인증을 구현하였는데, 어느순간보니 아래와 같은 로그가 다다다 올라오고 계속 sign-in 페이지로 리다이렉트되는 현상이 발생했다. JWT issued at date claim (iat) is in the future. Issued at date: Tue, 01 Jul 2025 00:10:22 GMT; Current date: Tue, 01 Jul 2025 00:10:12 GMT; (reason=token-iat-in-the-future, token-carrier=cookie)Clerk: Refreshing the session token resulted in an infinite redirect loop. This usually means that your ..

Project/etc. 2025. 7. 1. 11:01

오늘은 /projects로 접속했을 때 노션 데이터베이스에 있는 프로젝트 목록을 조회해서화면에 보여주도록 구현하는 과정을 정리해보려고 한다. Notion Database 프로퍼티 추가우선 노션에 Database를 생성한 후 아래와 같이 프로퍼티들을 추가한다. category는 select 타입, description과 slug는 text 타입, order는 number타입, skills는 multi-select 타입이다. 그리고 해당 데이터베이스의 ID를 조회하여 .env에 다음과같이 추가한다. NOTION_PROJECT_DATABASE_ID=DB아이디 데이터베이스 ID는 데이터베이스의 링크를 복사하여 조회할 수 있다. https://www.notion.so/?v=&source=copy_link데이터..

Project/포트폴리오(NextJS + Notion API) 2025. 6. 11. 16:54

이번 포스팅에서는 마크다운 내용에서 목차를 추출한 후 해당 목차로 이동할 수 있는 네비게이션을 구현해보려 한다. 지난 포스팅 AboutMe] 마크다운 화면에 뿌리기, word highlighting 적용 | MDXRemote, Tailwind" data-og-description="이번 포스팅에서는 저번 포스팅에서 구현한 getAboutMeContent 함수를 사용하여노션페이지에서 조회한 마크다운을 화면에 뿌리는 과정에 대해 정리해보려 한다. 지난 포스팅 AboutMe] 노션 페이지 내" data-og-host="yooputer-devlog.tistory.com" data-og-source-url="https://yooputer-devlog.tistory.com/319" data-og-url="http..

Project/포트폴리오(NextJS + Notion API) 2025. 6. 9. 16:42

이번 포스팅에서는 저번 포스팅에서 구현한 getAboutMeContent 함수를 사용하여노션페이지에서 조회한 마크다운을 화면에 뿌리는 과정에 대해 정리해보려 한다. 지난 포스팅 AboutMe] 노션 페이지 내용 조회 함수 구현 | pageToMarkdown" data-og-description="구현 프로세스포트폴리오 사이트의 index 페이지인 AboutMe 페이지를 구현하는 프로세스는 다음과 같다. 프로젝트 세팅노션 페이지에 내용을 작성하는 것을 완료한 후 해당 페이지에 노션 API를 연" data-og-host="yooputer-devlog.tistory.com" data-og-source-url="https://yooputer-devlog.tistory.com/318" data-og-url="h..

Project/포트폴리오(NextJS + Notion API) 2025. 6. 5. 14:18

구현 프로세스포트폴리오 사이트의 index 페이지인 AboutMe 페이지를 구현하는 프로세스는 다음과 같다. 프로젝트 세팅노션 페이지에 내용을 작성하는 것을 완료한 후 해당 페이지에 노션 API를 연결하고, 페이지ID를 .env에 추가한다. 노션 페이지에 API를 연결하는 방법은 아래 포스팅에서 확인할 수 있다. Notion API 연동 데모 서버 실행해보기 | Notion Integration 생성/등록/연동Notion 공식문서에 있는 NotionAPI 연동 Demo 프로그램을 실행시켜보자. Notion API OverviewDiscover how to leverage Notion's Public API to build integrations.developers.notion.com 여러 데모가 있는데..

Project/포트폴리오(NextJS + Notion API) 2025. 6. 4. 11:15

프로젝트 배경어느덧 개발자로 일하게 된지 만 2년이 되었다. 내가 여태까지 했던 일을 기록하고 정리하고 싶어졌다. 그래서 나에 대한 소개와 프로젝트 경험, 내가 배운 것들을 보여주는 웹페이지를 만들어보기로 했다. 기술 선정기술을 선택할 때 가장 고심했던 분야는 '배포'이다. 왜냐면 배포는 돈이 들기 때문이다. 접속자가 몇명일지도 모르는 토이 프로젝트때문에 한달에 몇만원씩 AWS에 갖다바치고 싶지 않았다. 사실 포트폴리오는 정적인 사이트이기 때문에 별도의 데이터베이스와 백엔드 서버를 구축하지 않아도 상관없어서 이정도 비용은 안나오겠지만, AWS에서는 고정 IP를 할당받는것 조차 돈이기 때문에 이번에는 AWS 말고 다른 플랫폼을 이용해보기로 했다. AWS 외의 다른 배포플랫폼 중 프론트엔드 배포에 최적화..

Project/포트폴리오(NextJS + Notion API) 2025. 6. 2. 10:21

https://yooputer.github.io/ jungsantime-front yooputer.github.ioWHY이 프로젝트는 나의 아주 사소한 불편에서 시작되었다. 아래와 같은 상황을 좀 편하게 해결하고자 이 프로젝트를 기획하게 되었다. A, B, C, D, E라는 인물을 통해 상황을 설명해보겠다. A의 생일날 B의 집에 모여 함께 놀기로 했다. 모두 B의 집에는 처음 가는거라 집들이 선물을 사가기로 했다. C가 A의 케이크를 사고, D가 B의 집들이 선물을 사고 B는 다함께 먹을 음식을 샀다.  그럼 A의 케이크값을 B, C, D, E가 C에게 송금하여야 하고B의 집들이선물값을 A, C, E가 D에게 송금하여야 하고음식값을 A, C, D, E가 B에게 음식값을 송금해야 한다.  여러 사람이 결..

Project/정산타임 2025. 3. 7. 13:31