TIL은 Today I learned의 약자로, 매일매일 배운 내용을 기록하는 것 TIL을 '같이' 작성해보자! 주제 별로 나눠서 배운 것들을 정리해서 올리는 TIL도 있지만, 나는 이렇게 하면 얼마 못가고 흐지부지될 것 같았다. 그래서 나는 각잡고 쓰는 느낌이 아닌, 그냥 가볍게 오늘 공부한거나 경험한 것 등 형식에 구애받지 않고 가볍게 쓰는 방향으로 정했다. 어떻게 보면 일기처럼 보일 수도 있는 이 TIL을 꾸준히 작성할 수 있을까 고민하던 때에, 동네 친구들과 얘기하다가 TIL을 같이 쓰면 동기부여도 되고 좋을 것 같다고 생각하게 되었다. (동네 친구들도 다 컴공이다 ㅋㅋ) 그래서 만들었다. 이름하야 Self-Driven-Development 각자 자기주도개발을 해서 개발자국을 남기자고 저렇게 지었..
가천대학교 사이버캠퍼스에서 과제를 한눈에 모아볼 수 있는 익스텐션을 개발했다. Gachon Tools - 사이버캠퍼스 확장프로그램 가천대학교 사이버캠퍼스 확장프로그램 chrome.google.com 깃허브에도 확인할 수 있다. 개발 이유? 작년에 코로나가 막 풀렸을 때라 대학교에서 대면과 비대면을 병행해서 수업을 진행했었다. 그러다 한번 교수님이 휴강을 하시고 녹화 강의로 출석을 대체했다. 당시에 21학점을 듣고 있었는데 딴 과제랑 할 일을 하느라 녹화 강의를 들어야 할 게 있었다는 걸 완전히 잊고 있었다. 마감기한이 다음 강의 시작 전이었는데, 강의실에 도착해서 여유롭게 있다가 옆에서 친구가 강의 들었냐는 말에 잊었던 녹화 강의가 떠올랐다. 결국 지각 처리가 되었고, 억울했지만 까먹은 내 탓이라 할 말..
react-seekbar 라는 라이브러리를 만들었다. progressbar지만 드래그해서 움직일 수 있고 핸들 크기, hover 시 보이는 색상 등 다양하게 커스텀할 수 있다. 이번 글에서는 배포하는 과정에서 생각했던 내용 중심으로 작성해보려 한다. 왜 만들었는데? 이전 개인 프로젝트에서 음악 재생 기능이 있었다. progress bar를 드래그하면 특정 위치로 이동하는 기능이 필요해서 찾아봤는데, 마음에 드는 라이브러리가 없었다. 그런 기능을 갖고 있는 라이브러리는 존재했지만 내 입맛대로 커스텀하기 어려웠다. 그냥 내가 직접 라이브러리로 만들면 되겠네! 해서 무작정 시작했다. 전부터 나만의 라이브러리를 만들어서 배포해볼까하는 생각을 항상 해왔는데, 이번 기회에 배포 경험도 얻어갔다. 세팅 여러 블로그들..
음악 재생 기능은 유저가 로그인한 경우에만 기능을 사용할 수 있다. 그래서 Spotify를 결제했다 로그인할 때 유저의 playback 상태에 접근할 수 있도록 하기 위해 scope를 추가해 주어 권한을 설정해야 한다. scope 설정 스포티파이 로그인 페이지로 리다이렉트 할 때 scope를 아래와 같이 설정하자. 'user-read-private user-read-email user-read-playback-state user-modify-playback-state streaming' 유저의 playback state를 읽고 수정할 수 있도록 하고, 스트리밍까지 할 수 있도록 권한 설정을 했다. SDK 세팅 window에서 onSpotifyWebPlaybackSDKReady 메서드를 인식하기 위해 먼저..
React Query를 Server Side에서 데이터를 미리 가져와서 queryClient에 전달하는 방법은 두 가지가 있다. 1. InitialData 사용 getStaticProps 또는 getServerSideProps에서 가져온 데이터를 useQuery의 initialData option에 전달하는 것이다. export async function getStaticProps() { const posts = await getPosts(); return { props: { posts } } } function Posts(props) { const { data } = useQuery(['posts'], getPosts, { initialData: props.posts }); // ... } 2. Hyd..
평소에 음악을 많이 듣고 좋아하다 보니 자연스럽게 음악 관련된 프로젝트를 해보고 싶다는 생각이 들었다. 그래서 open API가 어떤 게 있나 찾던 중 Spotify API를 발견했다. 문서도 깔끔하게 잘 되어있고 다양한 API들이 있어서 Spotify API를 사용하기로 했다. 프로젝트에 Next.js를 사용했다. 몇 번 사용해보기는 했지만 익숙하지 않은 부분도 많고 SSR 관련해서도 해보고 싶은 것들이 있어서 적용해보았다. 기술스택은 다음과 같다. React, TypeScript, Next.js, Recoil, React-Query(Tanstack Query), emotion 원래 FLO 라는 음악 스트리밍 플랫폼을 이용 중이었는데 프로젝트 진행하면서 Spotify로 넘어갔다. 첫 이용 3개월 무료라..
