학교에서 React Native를 사용하여 앱을 만드는 프로젝트를 진행했습니다! 그래서 사용자 기분에 따라 어울리는 플레이리스트를 제공하는 어플을 만들어봤습니다. 아래 글에 정리한 Spotify와 Unsplash를 사용했습니다. Spotify에서 플레이리스트 위젯 + Unsplash에서 랜덤 이미지 가져오기 Spotify에서 플레이리스트 위젯 가져오기 (1분 미리 듣기) Embed | Spotify for Developers Music, meet code. Powerful APIs, SDKs and widgets for simple and advanced applications. developer.spotify.com 우.. seyeon.tistory.com 프로토타입 시작화면을 클릭하면 키워드를 선택하..
Spotify에서 플레이리스트 위젯 가져오기 (1분 미리 듣기) Embed | Spotify for Developers Music, meet code. Powerful APIs, SDKs and widgets for simple and advanced applications. developer.spotify.com 우선 스포티파이에 가입이 되어 있어야 합니다. 한국에서는 무료 버전을 제공하지 않아서, 첫 가입이라면 3개월 무료 구독을 하면 됩니다. https://www.spotify.com/kr-ko/ Listening is everything Spotify에는 여러분이 원하는 모든 음악이 있습니다. www.spotify.com 사이트에 들어가서 웹 플레이어 열기를 눌러줍니다. 왼쪽 메뉴의 '플레이리스트..
ScrollView 안에 FlatList나 ScrollView를 사용해서 발생한 오류이다. 우선 기본적으로 FlatList에 scroll이 적용되니, 단순히 스크롤이 하나 필요한 거라면 같이 사용하지 않는다. 다른 요소를 FlatList와 함께 사용하고 싶다면 ListHeaderComponent와 ListFooterComponent에 다른 요소를 집어넣는다. // Nope ❌ item.id} /> // Use this ✅ item.id} /> [형태] 각 FlatList마다 CatgoryBar를 넣고 싶다면 SectionList를 사용한다. const DATA = [ { title: "Category1", data: ["Pizza", "Burger", "Risotto"] }, { title: "Categ..
Date 값에 toLocaleDateString() 함수를 사용했더니 다음과 같은 오류가 발생했다. item.due.toLocaleDateString is not a function. item.due가 Date 객체로 인식되지 않아서 생긴 오류이다. 혹시 해당 값을 JSON.stringfy()한 후 다시 JSON.parse() 했다면 item.due 값이 객체가 아니라 string으로 콘솔에 찍힌다. new Date()로 감싸서 다시 객체로 만들어주자. new Date(item.due).toLocaleDateString()
Next.js는 React의 서버 사이드 렌더링(SSR)을 쉽게 하도록 도와주는 프레임워크입니다. React는 기본적으로 클라이언트 사이드 렌더링(CSR)입니다. CSR은 한 페이지만 화면에 띄웁니다. 그 후 사용자의 요청에 따라 필요한 부분만 다시 렌더링 합니다. 하지만 모든 정보를 처음에 다 불러오기 때문에 초기 로딩 시간이 길어집니다. SSR은 서버에서 필요한 페이지를 완성한 후 이를 브라우저에 보냅니다. 처음 렌더링 된 html만 브라우저에 보내기 때문에 초기 로딩 시간이 짧습니다. 하지만 페이지를 요청할 때마다 정보를 다시 불러 와서, 사용자가 페이지를 이동하는 시간은 더 오래 걸립니다. # 설치, 실행 npm install next npx create-next-app 1️⃣ Router 비교 ..
⚛️React란? React는 facebook에서 만든 JS 라이브러리로, component를 사용해 웹페이지를 효과적으로 렌더링(rendering)합니다. 무슨 소리냐 하면, 예를 하나 들어보겠습니다. 어느 사이트에 회원가입을 한다고 해봅시다. 이름이랑 아이디, 비밀번호, 비밀번호 확인, 닉네임, 이메일, 전화번호 등을 입력하고 가입하기를 눌렀습니다. '비밀번호가 일치하지 않습니다'라는 알림 창이 뜨네요. 아니 근데 알림 창의 확인을 누르는 순간, 화면이 새로고침 되면서 제가 채운 정보가 다 사라지는 겁니다. 이러면 사용자가 실수했을 때 모든 정보를 계속 다시 입력해야 합니다. 이런 불편함을 해결하기 위해 생각해낸 것이, 필요한 부분만 바꾸자입니다. 사용자와 정보가 오가면서 변화를 줘야 할 부분이 생기..
- Total
- Today
- Yesterday
- 키워드밑줄
- 다이나믹프로그래밍
- 프로그래머스
- 백준
- 웅진IT
- dfs
- flutter
- p5js
- fetch
- rn
- 파이썬
- 감시피하기
- Unsplash
- React
- Spotify
- 동기
- 코드분석
- 코딩테스트
- 코어자바스크립트
- React.js
- 판례암기
- Python3
- python
- 비동기
- backtracking
- node.js
- React-native
- 코테
- 프로젝트
- DP
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |