react, next 2

노션 API로 멜론 원터치 플레이리스트 생성하기

서론지난 글에 이어, 이번엔 노션 데이터베이스에서 가져온 음악 정보를 바탕으로 멜론에서 바로 실행할 수 있는 플레이리스트 링크를 자동으로 생성하는 방법을 소개합니다.노션 API로 데이터베이스를 연결하는 과정이 궁금하시면 이 글을 읽어주세요.노래 데이터베이스에는 이름, 앨범, 키워드, 멜론Id 속성이 있습니다. 멜론 Id란, 멜론 음원 사이트에서 각 곡에 부여된 고유 식별자입니다. 플레이리스트를 만들려면 이 Id가 필요해요. ( 같은 곡이어도 음원 사이트마다 Id는 달라요. )예를 들어, ONF의 "Beautiful Beautiful"의 멜론 ID는 33313442입니다. 아래는 해당 곡의 멜론 링크에서 Id를 확인하는 방법이에요. 기본적으로 노션 데이터베이스에서 데이터를 가져오면 다음과 같은 형식입니다...

react, next 2025.05.08

next.js에서 노션 데이터베이스 api 사용하기

서론현재 진행하는 사이드 프로젝트에서 정적인 데이터를 불러오는 기능이 필요했습니다.백엔드 개발자 없기에 데이터를 파일 내부에 JSON으로 관리할 수도 있었지만, 데이터 양이 많았고, 주기적으로 값을 업데이트해야 했습니다. 프로젝트 외부에서 데이터를 관리하는 방법을 찾던 중, 노션 api를 알게되었습니다.노션 api를 활용하면 노션에 있는 정보들을 불러올 수 있습니다. 노션을 데이터 저장소로 활용할 수 있는거죠.저는 노션에서 제공하는 api로 불러올 수 있는 옵션 중 데이터베이스를 연동해보기로 하였습니다.본론notion API 연동Notion Developer 페이지에서 원하는 워크스페이스를 등록하고 Notion Integration Token을 발급받습니다.데이터를 저장할 데이터베이스를 생성하고, 해당 ..

react, next 2025.05.08