본문 바로가기

2024~48

[vue] Nuxt.js + Pinia + Vue.js 프로젝트 시작하기 ⚛️ React.js (리액트)와 🍃 Vue.js (뷰) 비교더보기React.js Vue.js JSX(JavaScript XML)자바스크립트 코드 내에서 HTML 구조 작성단일 파일 컴포넌트(SFC)SFC에서 HTML, CSS, JavaScript를 통합하여 작성JSX와 개념(Hooks 등) 익숙해지는 시간 필요HTML, CSS, JS 기본 지식만 있다면 쉽게 시작 가능공식적인 내장 솔루션이 없어 Redux, Zustand 등 외부 라이브러리 사용Pinia (Vue 3 권장), Vuex 등 공식적인 상태 관리 라이브러리 제공대규모의 복잡한 애플리케이션 및 모바일(React Native) 개발에 유리소규모부터 중규모, 대규모 애플리케이션까지 모두 가능하며, 특히 빠르게 프로토타이핑할 때 유리Next.js.. 2025. 7. 30.
[타입스크립트] 스포티파이 데모 - 서치 페이지 Web API Reference | Spotify for DevelopersGet Spotify catalog information about albums, artists, playlists, tracks, shows, episodes or audiobooks that match a keyword string. Audiobooks are only available within the US, UK, Canada, Ireland, New Zealand and Australia markets.developer.spotify.comhttps://github.com/roseraph502on/spotity_pe/blob/master/src/apis/searchApi.ts spotity_pe/src/apis/sear.. 2025. 6. 16.
[리액트] netflix To Do bannerpopular movietop rated movieupcoming movie 2025. 6. 15.
[타입스크립트] 타입 활용하기 - extends, as, infer 1. extends 키워드여러 가지 뜻으로 쓰임. 문맥 따라 다름.인터페이스/클래스 확장 (상속):이게 제일 흔함. 어떤 인터페이스가 다른 인터페이스 기능 물려받거나, 어떤 클래스가 다른 클래스 기능 물려받을 때 씀.예시 (인터페이스): interface Dog extends Animal { ... } -> Dog이 Animal 기능 물려받음.예시 (클래스): class Dog extends Animal { ... } -> Dog 클래스가 Animal 클래스 상속받음.//예시 (인터페이스 확장):interface Animal { live(): void;}interface Dog extends Animal { // ✨ Dog 인터페이스는 Animal 인터페이스를 확장합니다. woof(): void;}c.. 2025. 6. 15.
[타입스크립트] 플레이리스트 추가 훅 : useCreatePlaylist.ts spotity_pe/src/hooks/useCreatePlaylist.ts at master · roseraph502on/spotity_peContribute to roseraph502on/spotity_pe development by creating an account on GitHub.github.com사용 api Web API Reference | Spotify for DevelopersThe popularity of the track. The value will be between 0 and 100, with 100 being the most popular. The popularity of a track is a value between 0 and 1.. 2025. 6. 15.
[리액트] TanStack Query (구 React Query) TanStack Query (구 React Query) 웹 애플리케이션에서 서버 상태(Server State)를 관리하기 위한 강력한 라이브러리더보기과거에는 React Query라는 이름으로 React 생태계에서 매우 유명했지만, 현재는 React뿐만 아니라 Vue, Solid, Svelte 등 다양한 프레임워크를 지원하며 TanStack Query로 이름이 변경되었다.로딩 상태 관리: 데이터를 가져오는 동안 로딩 스피너 등을 보여줘야 합니다.에러 처리: API 호출 실패 시 에러 메시지를 보여주거나 재시도를 해야 합니다.캐싱: 한번 가져온 데이터를 캐시하여 불필요한 중복 요청을 줄이고 성능을 향상시켜야 합니다.데이터 신선도 관리: 캐시된 데이터가 최신 상태인지 확인하고, 필요하다면 백그라운드에서 자동으.. 2025. 6. 15.