가천대학교 사이버캠퍼스에서 과제를 한눈에 모아볼 수 있는 익스텐션을 개발했다. 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개월 무료라..
React에서 상태 관리 라이브러리를 쓰는 이유? React는 여러 컴포넌트로 구성되어있다. 각각의 컴포넌트마다 state가 있을 수 있고, useState 같은 hook으로 상태를 관리할 수 있다. state가 변경되면 컴포넌트가 리렌더링되어 변하게 된다. 리액트는 단방향 데이터 흐름, 즉 부모 -> 자식으로만 데이터가 전달이 가능하기 때문에 자식 컴포넌트도 state에 맞게 변경하려고 한다면 props로 전달해야 한다. 만약 자식 컴포넌트에서도 props로 받은 state를 변경가능하게 하려면 state 변경 함수 또한 props로 전달받아야 한다. // 부모 컴포넌트 function ParentComponent() { const [name, setName] = useState('Parent Name..
