# spotify

20개의 포스트
post-thumbnail

🎧 Spotify API 다루기 -(2)

데이터 프레임 만들기 앨범 정보 가져오기 먼저 2020에 발매된 음악트랙의 정보를 받아온다. 코드 결과 이 때 2020 발매된 앨범에 대한 실질적인 정보는 ‘track → items’의 경로를 통해 얻을 수 있다. album → uri : 앨범에 대한 uri로 sp.album(uri)를 이용해서 앨범의 정보를 얻을

2023년 9월 7일
·
0개의 댓글
·
post-thumbnail

react로 spotify open api 이용하기 #2

리액트 쿼리로 빨리 페칭 해줘야되는데 css에 빠져서 docs진도가 안나가고 있다. ㅋㅋㅋ ^^.. 아니 하다보니까 앱이 점점 커져서 react query 약간 배움 목적으로 사이드 느낌이었는데 지금은 무조건 써야 겠다는 생각밖에 안든다. 한페이지에 다른 api호출이 4-5개 정도 동시에 call되고 그 응답을 기반으로 또 call을 해줘야된다. 여튼 비동기가 좀 복잡하게 돌아가기 때문에 사용자가 누를때마다 로딩을 기다리는건 경험에 안좋을 것이라고 판단이 된다. 이에 프레 패치/페이지 네이션/캐시로 유저 경험을 개선시켜야 겠다. 이건 일단 여담이고 지금 직면한 CSS 목표와 문제점들에 대해 알아보자 intro css 이렇게 복잡하게 갈 생각은 없었는데 레퍼가 애플뮤직이라 나도모르게 복잡하게 구현을 하게 된다.. 애플 뮤직 정말 대단하다.. 사소해서 넘어갔던 부분들.. 막상 구현하려니 와씨 이거 어떻게 했지? 이런거 진짜 많음ㅋㅋ 1. 스크롤 범위 & 스크롤

2023년 9월 1일
·
0개의 댓글
·
post-thumbnail

react로 spotify open API 이용하기

기획 깊게 언어 파는거보다는 다양한 라이브러리/프레임워크 써보는게 나을 것 같다고 조언을 들었다..ㅎ 그래서 리팩토링은 잠쉬 스탑하고 프로젝트를 진행하는데, 간단하게 뮤직 플레이어 만들어볼까..? 하다 만들게 됐다.(전혀 간단하지 않다.) 처음엔 그냥 음악검색 -> 듣기 -> 플레이리스트 저장 정도로 시작해서 라이브러리도 안끼려했는데, 웹이 너무 비어보여서.. ㅎㅎㅎㅎ 이렇게 한 5~6페이지 정도 나오게 기획해봤는데, 은근 packed.. 은근 컴포넌트 단계가 나뉘고 많이 들어가서 zustand설치... 그리고, 뭐만 하면 fetch라 좋다고 소문을 들은 react-query 설치.. 인증 구현 일단 spotify open API 를 프론트로만 구현하기에 처음부터 난관에 부딪히게 되는데,

2023년 8월 31일
·
0개의 댓글
·
post-thumbnail

🎧 Spotify API 다루기 - (1)

스포티파이는 세계 1위의 음악 스트리밍 앱으로 2020년 2분기 말 기준 1억 3,800만명의 유료 구독자를 가지고 있다. 스포티파이는 사용자의 알고리즘 데이터를 분석하여 플레이리스트를 자동으로 생성해주는 기능을 가지고 있다. 뿐만 아니라 소니뮤직, EMI, 워너 뮤직, 유니버설 등과 제휴해 음원을 무료로 공급과 더불어, 국내 음원 플랫폼과는 비교를 불허할 정도로 많은 음원을 고음질로 보유하고 있다. Spotify API deep.daiv에서 진행하는 팀별 프로젝트의 주제를 도서 맞춤 음악 추천시스템으로 선정했다. 전체적인 프로젝트의 흐름은 책의 분위기를 잘 나타낼 수 있는 감정키워드를 추출하여 키워드와 가장 유사한 음악을 추천할 것이다. 🤔 그렇다면 어떤 음악 데이터를 가지고

2023년 8월 31일
·
0개의 댓글
·
post-thumbnail

[W8] Spotify Playlist 애자일하게 개선해보기

지난 W4, Spotify Connecting의 기능 정의에서 플레이리스트 사용성 개선을 언급한 적있다. 또 실제로 나만의 플레이리스트를 제작할 수 있는 기능을 Mid-fi 단계까지 작성했었다. [W4] 보러가기 그렇다면, 실무에서 스포티파이의 플레이리스트의 사용성을 개선한다고 했을 때, 어떤 방식으로 우선순위를 정해야하고 Task를 나눠야할까? 직접 스프린트 플래닝을 해보면서 알아보자! 스포티파이 플레이리스트 개선점 스포티파이 플레이리스트 VoC에서 제일 많은 비중을 차지한 키워드는 '정렬'이다. 스포티파이가 제공하는 정렬 이외에 사용자가 자유롭게 곡 순서를 변경할 수 없다는 것이 사용자에

2023년 2월 5일
·
0개의 댓글
·
post-thumbnail

[W7] Spotify's History

지난 5주 동안 Weekly 프로젝트를 진행하면서, '지금의 스포티파이'에 집중해 프로덕트를 분석해왔다. 그럼 스포티파이가 지금의 모습을 갖추기 위해서는 어떤 과정이 있었을까? 스포티파이의 MVP부터 Spotify's History를 알아보자! Back to 2012 스포티파이가 출시되었던 2012로 돌아가보자. 2012의 스포티파이는 지금의 스포티파이와는 전혀 다른 모습이다. 2012 Spotify's MVP 2012 스포티파이를 살펴보면, 우선 스포티파이 고유의 UI/디자인 시스템이 없는 것을 볼 수 있다. 기

2023년 1월 28일
·
0개의 댓글
·
post-thumbnail

[W6] Spotify's Unique Selling Proposition

W5과제로 'Spoter'를 이용한 마케팅 전략의 계획을 세워봤었다. W5 - Spoter 계획 보러가기 Spoter는 일종의 계획이라, 아직 검증도 안된 '아이디어'에 그치는 전략이었다. 허나 Spoter를 통해 이루고자 했던 부분은 Spotify의 새로운 USP를 만드는 것이었다.(경험이 짧아서 어떻게 이룰지는 아직 모르겠다.) USP는 Unique Selling Proposition의 줄임말로 프로덕트가 경쟁사와 차별화된 고유의 강점이나 고유의 강점을 어필하는 전략을 말한다. 고객이 USP를 통해 얻을 수 있는 Benefit을 명확히 제시해야 비로소 Retent

2023년 1월 20일
·
0개의 댓글
·
post-thumbnail

[W5] Spotify’s Next strategy

Weekly 과제에서 스포티파이를 다루면서 항상 주된 고민은 어떻게 하면 한국 시장을 공략할 수 있는 스포티파이를 만들 수 있지?였다. 개인적으로는 최근 앱서비스에서 받은 경험 중 스포티파이의 경험이 어딘가 독특했기 때문에 뭔가 알리고 싶은 마음이 있었던 것 같다. Spotify는 이미 유럽과 북아메리카에서 거대한 사용자를 보유하고 있고, 171개의 국가에서 댜양한 사용자를 보유하고 있다. 4억 2200만 명이 한 달에 한 번 Spotify를 사용한다고 하니 그 규모가 상상할 수도 없다. 그렇지만 한국에서는 멜론과 유튜브 뮤직의 경쟁 속에 한마리에 새우 같이, 점유율 경쟁에서 등 터지는 중이라고 할 수도 있겠다. 그래서 오늘은 글로벌 스포티파이의 런칭부터 최근까지 사용했던 Growth 전략을 분석

2023년 1월 14일
·
0개의 댓글
·
post-thumbnail

[PMB W4D2] Spotify's Voice of Customer

Short Review⏰ Day17 [TIL] 오늘은디자인 기법, 요구사항 수집 방법을 통해 사용자가 만족할 수 있는 서비스를 만들어 내고, 고도화 하는 과정을 공부했다. 디자인 기법은 제품의 상황, 팀 방식에 따라 선택하여 사용한다. 특히 IT 업계는 빠르게 수정하고 배포할 수 있는 환경을 가졌기 때문에, 적절한 디자인 기법 사용을 통해 급변하는 트렌드, 환경, 사용자 요구를 반영할 수 있다. 디자인 기법은 다양하지만 대표적으로 디자인 씽킹, 더블 다이아몬드 모델, 애자일 방법론, 디자인 스프린트 등이 있다. 중요한건 각각의 방법들에 대한 설명이 아니다. 결국 이 방법들을 도입해 고객에 대한 집착으로 어떻게 문제를 찾고 잘 정의할 것인지 고민해야한다. 이때, 고객의 요구사항을 수집해 고객에게 어떤 문제가 있는

2023년 1월 3일
·
2개의 댓글
·
post-thumbnail

[Python] Spotify API token 생성

0. 실행 환경 > Python : 3.9 1. 토큰 생성

2023년 1월 1일
·
0개의 댓글
·
post-thumbnail

[ERROR] (Not Solved) Airflow HttpSensor 400 Client Error: Bad Request for url

0. 실행 환경 > AWS EC2 t2.xlarge OS : Red Hat 9.1 Python : 3.9 Airflow : 2.5.0 1. Code curl, request로 하면 결과가 나오는데 task 실행시키니까 400 에러가난다. HttpSensor, SimpleHttpOperator 로 해봐도 안된다. response_check=False를 넣어도 안된다. providers/http/hooks/http.py, requests/models.py를봐도 response code를 확인하는거 밖에 없는데 원인을 모르겠다. task정의에서 header를 제거해도 같은 오류가난다. 2. Connection 3. API Test 1) Curl 결과 ![](https://ve

2023년 1월 1일
·
0개의 댓글
·
post-thumbnail

[W2-2] Spotify UX 리서치

Preview > 사람은 같은 사과를 봐도 다른 사고를 한다. 인터뷰를 할 때마다 Spotify가 새로웠다고 하면 이상할까? 진짜 그랬다. 위클리 과제를 빌미로 총 5명의 인터뷰이와 똑같은 주제인 Spotify에 대해 30분 이상, 길면 4시간동안 이야기했다. 어떤 인터뷰이는 추천 서비스를 원한다고 했고, 어떤 인터뷰이는 원하지 않는다고 했다. 어떤 인터뷰이는 더 이상 Spotify를 이용하지 않는다고 했고, 어떤 인터뷰이는 Spotify를 이용하고 싶다고 했다. 같은 프로덕트라도 사용하는 사람에 따라 해석도 이용하는 방법도 달랐다. 그래서인지 약간의 철학적 고민을 하게 됬던 것 같다. 하나의 프로덕트에 5명의 사용자만 봐도 이렇게 다른데, 그럼 과연 프로덕트를 누구를

2022년 12월 25일
·
0개의 댓글
·
post-thumbnail

[W2-1] Spotify 프로덕트 분석

Spotify 선정이유 선정이유가 약간 가벼운 느낌도 있는데, 일단 W1D2과제 하면서 너무 재밌었습니다. 점점 궁금해지는 프로덕트여서 8주간 잘 이끌어 갈 수 있다는 자신감에 선택하게 되었습니다. 또 PMB에 들어오기 전에 개개인에 따라 달라지는 앱서비스(초개인화 서비스)를 기획해보고 싶다는 막연한 목표가 있었습니다. 똑같은 앱을 써도 화면, 사용법이 달라지는 앱들이 너무 매력적으로 다가왔습니다. 그래서 초개인화 서비스를 성공적으로 제공하고 있는 프로덕트를 선정했습니다. 다만, AI에 대한 지식이 너무 많이 부족해서 기술적인 부분을 잘 정리할 수 있을지 걱정입니다. 프로젝트 해보면서 AI 관련 정보도 조금씩 스터디 해보겠습니다! Spotify 핵심 문제 & 니즈 정

2022년 12월 21일
·
0개의 댓글
·
post-thumbnail

[PMB W1D2] PD Life Cycle And SPOTIFY

PD Life Cycle > PD Life Cycle를 이해해보자! 내가 좋아하는 프로덕트를 PD Life Cycle 단계별로 분석해보고, PD Life Cycle을 이해해보자! 스포티파이 스트리밍 서비스 SPOTIFY! 유튜브 뮤직, 멜론, 플로 등 다양한 스트리밍 서비스 사이에서 정착하지 못하다 접한 서비스다. 최근 3개월동안 스포티파이를 잘 사용하고 있다. 스포티파이만의 음악 추천서비스, UX/UI가 매력적으로 느껴졌기 때문이다. PD Life Cycle을 통해 내가 좋아하는 SPOTIFY 서비스를 심층 분석해 보고자한다. P

2022년 12월 13일
·
0개의 댓글
·
post-thumbnail

Spotify 소셜 로그인 하기 - 2편

💡 로그인에 성공했으니, 이번엔 새로고침을 해도 로그인이 유지되는 기능을 구현해보자. 구현 목표 새로고침을 해도 로그인이 유지된다. 기존 로그인 로직 지난 글에 작성해둔 로그인 과정을 다시 한 번 살펴보자. 아래 로직에 몇 가지 작업을 추가해 로그인 유지 기능을 만들어 볼 것이다. ❶ 유저가 앱에 접속 👉 index.tsx의 useCheckToken이 실행된다. useToken에 토큰 있으면 isTokenValid 로 토큰의 유효성을 검사한다. 유효하지 않다면 로그인 페이지로 리다이렉트 유효하다면 메인 페이지로 이동 useToken에 토큰 없으면 바로 로그인 페이지로 리다이렉트 한다. ❷ login.tsx 로그인 버튼이 있는 페이지. 유저가 버튼을 클릭하면 requestLogin API를 호출한다. ❸ loading.tsx Spotify App에 등록해놓은 Redirect URL이다. 스포티파이 로그인 페이지에서 유저가

2022년 7월 25일
·
0개의 댓글
·
post-thumbnail

Spotify 소셜 로그인 하기 - 1편

학회 플젝에서 진행했었던 프로젝트 내의 Spotify 소셜 로그인 기능에 대해 작성해보려고 합니당~.~ 당시 플젝 기간이 일주일도 채 안됐었어서 대강 굴러가는 대로 코드를 짰었는데, 현재 리팩토링 작업을 하고 있어 기록 겸 쓰는 글입니다. 저희는 백엔드와 프론트엔드가 함께 로그인 기능을 구현했는데, NextJS 쓰는 분이라면 그냥 Next-Auth를 쓰십시오... 그때 10분만에 만들 수 있었어요 ✅ 구현 목표 앱 내에 만든 스포티파이 플레이어에서 노래를 재생하기 위해서는, 우리 어플리케이션에 로그인할 때 스포티파이 프리미엄 계정으로 소셜 로그인을 해야 한다! 소셜 로그인을 하면 access_token을 주는데, 이 토큰을 Spotify Web API의 인자로 넣어야 노래 재생이 가능하기 때문. 또 유의해야 할 점은 토큰의 유효 시간이다. 1시간이 지나면 토큰이 expired 상태가 되어 노래 재생이 불가능해진다. 이때 다시 새로운 토큰을 요청해야 한다

2022년 7월 24일
·
0개의 댓글
·
post-thumbnail

firebase functions 7 spotify mock data

실제 spotify계정으로 테스트를 여럿 진행하다보니 해당 계정이 정지 되었다... 따라서 목데이터를 이용해서 테스트하는 방식으로 변경할 것이다. 목표 기존의 코드는 최대한 유지하고 테스트 환경에서만 목데이터를 넘겨주는 라이브러리를 만들 것이다. SpotifyTestApi 모듈 생성 기능 API호출시 json으로 저장된 mock데이터를 반환해줌 파일 구조 코드 SpotifyWebApi를 상속받아 해당 메서드 호출시 그대로 목데이터를 리턴해줌 Mock data 수집 기존 api의 결과 값을 json파일

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

firebase functions 5 Spotify o-auth 구현

"스포티파이로 로그인" 기능을 구연하기 위해 두가지 API를 만들것이다. getSpotifyOAuthUrl // 스포티파이로 로그인 할 수 있는 URL을 제공한다. getSpotifyCustomToken // 로그인후 받는 Spotify토큰을 파이어베이스 토큰으로 변환 사전작업 Spotify developers dashboard에 접속하여 Redirect URIs에 http://localhost/callback을 추가해준다. 스포티파이로 로그인후 redirect 될 주소이다. 대시보드에서 사용할 테스트 계정을 테스터로 추가해준다. ![](https://images.velog.io/images/coderhyun/post/8907899d-e170-42ed-a694-8b85a86ce9b1/imag

2022년 1월 30일
·
0개의 댓글
·
post-thumbnail

Firebase functions 4 spotify api 소개

음악 스트리밍을 위해 spotify에서 제공하는 api를 사용할 것이다. 장점은 저작권이나 보안 문제를 책임지지 않아도 된다는 점이지만 단점은 spotify에서 premium을 결제한 유저만 사용이 가능하다. 따라서 우리 서비스는 필수적으로 o-auth("sign in with spotify")를 통해 로그인을 해야한다. Spotify developer setup 우선 스포티파이 개발자 웹사이트에 로그인하여 파이어베이스 처럼 프로젝트를 하나 만든다. 생성한 프로젝트는 기본적으로 개발모드이고 승인된 유저만 서비스에 로그인 할 수 있도록 되어있다. 따라서 개발중에 사용할 스포티파이 계정을 하나 추가해주면 된다.

2022년 1월 29일
·
3개의 댓글
·