yooputer's devlog

이번 포스팅에서는 저번 포스팅에서 구현한 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

지난 포스팅에서는 Notion 공식문서에서 제공하는 Notion API 연동 데모 서버를 실행시켜보았다. Notion API web-form-with-express 데모 실행해보기 | Notion Page에 API 연동Notion 공식문서에 있는 NotionAPI 연동 Demo 프로그램을 실행시켜보자. Notion API OverviewDiscover how to leverage Notion's Public API to build integrations.developers.notion.com 깃허브 레포의 README를 따라 해보도록 하겠다.yooputer-devlog.tistory.com 이번에는 소스코드를 분석해보려 한다. 지난 포스팅과 마찬가지로 web-form-with-express 데모를 살펴..

Development Study/잡기술 2025. 5. 28. 15:01

Notion 공식문서에 있는 NotionAPI 연동 Demo 프로그램을 실행시켜보자. Notion API OverviewDiscover how to leverage Notion's Public API to build integrations.developers.notion.com 여러 데모가 있는데 그중 web-form-with-express 서버를 실행해보려 한다. web-form-with-express의 README를 보고 따라해보겠다. notion-sdk-js/examples/web-form-with-express at main · makenotion/notion-sdk-jsOfficial Notion JavaScript Client. Contribute to makenotion/notion-sdk..

Development Study/잡기술 2025. 5. 27. 15:01

지난 포스팅에서는 HTML이 무엇이고, 웹페이지에서 어떤 역할을 하는지 살펴보았다. 이번 포스팅에서는 HTML을 구성하는 Element와 HTML의 기본 구조에 대해 설명해보려 한다. [HTML] 웹개발자 2년차가 되어서야 정리해보는 HTML이란 무엇인가 | 마크업 언어문득 매일 보는 HTML 코드이지만 HTML에 대해 제대로 공부한 적이 없다는 생각이 들었다. 물론 학교에서도 배웠고, 실무하면서 필요한 정보만 쏙쏙 뽑아먹으며 공부했지만, 학교에서 배운건 시험yooputer-devlog.tistory.com 우선 HMTL은 Element라는 것으로 구성되어 있다. Element는 '요소'라는 뜻이다. (별 뜻은 없다. 그저 무언가를 구성하는 것이라는 뜻)웹페이지에 있는 글자, 이미지, 버튼은 모두 E..

Development Study/HTML&CSS 2025. 5. 20. 13:54

최근에 커서AI와 같은 인공지능이 탑재된 IDE에 대해 관심이 생겼다. 그래서 관련 책도 사고, 커서AI 체험기간동안 체험도 해보구... 그랬는데, WOW 이게 되네? 감탄을 금치 못했다. 마음같아선 일어서서 박수를 치고 싶었다. (회사라서 생각만 했다.) 그러다가 인프런에서 아래 강의를 보고내가 주로 사용하는 IDE인 IntelliJ에 Claude를 붙일 수 있다는 걸 알게 되었다. Claude + IntelliJ로 TodoList 개발하기 - MCP 완전 정복 강의 | Neo - 인프런Neo | , Claude + IntelliJ로 TodoList 개발하기 - MCP 완전 정복'단 한 줄의 코드도 없이 TodoList를 만든다고?'이제는 가능합니다. 이 강의에서는 MCP(ModelContextPro..

Development Study/AI 개발 활용기 2025. 5. 16. 16:45

문득 매일 보는 HTML 코드이지만 HTML에 대해 제대로 공부한 적이 없다는 생각이 들었다. 물론 학교에서도 배웠고, 실무하면서 필요한 정보만 쏙쏙 뽑아먹으며 공부했지만, 학교에서 배운건 시험본 후 까먹어버렸고, 필요할 때만 얻었던 정보들은 휘발되어 버렸다. 웹개발자로 일하면서, 누군가 나에게 HTML이 뭐에요?라고 물어본다면나는 뭐라고 설명해줄 수 있을까? "어... 음... 그러니까 우리가 보는 브라우저에서 보이는 웹페이지의 뼈대를 만들어주는 거에요"라고만 설명할 수 있을 거 같다. 이게 최선일까... 조금 부끄러워 진다. 그래서 HTML에 대해 제대로 공부해보기로 했다. HTML이란? 우선 한가지 말하고 싶은 것이 있다. HTML은 프로그래밍 언어가 아니다. 프로그램을 만들기 위해 사용하는 언어가..

Development Study/HTML&CSS 2025. 5. 15. 11:08