본문 바로가기

전체 글

(72)

⚛️ <Suspense> 활용 이전 글: 2024.06.15 - [👩🏻‍💻 dev] - ⚛️ 란? 에서는 리액트 공식문서의 Suspense props에 대해 알아봤다. 란?" data-og-description="🗣️ 'Suspense'를 써보신 적 있나요? 있다면 언제, 왜 쓰시나요? 안쓰면 어떤 점이 불편하나요? 쓰긴 쓰는데..로딩 중에 대신 보여줄 UI를 제공하기 위해서 아닌가? 리액트의 공식문서에 의하면 " data-og-host="pyotato-dev.tistory.com" data-og-source-url="https://pyotato-dev.tistory.com/9" data-og-url="https://pyotato-dev.tistory.com/9" data-og-image="https://scrap.kakao..

⚛️ <Suspense>란? 🗣️ 'Suspense'를 써보신 적 있나요? 있다면 언제, 왜 쓰시나요? 안 쓰면 어떤 점이 불편하나요? 쓰긴 쓰는데..로딩 중에 대신 보여줄 UI를 제공하기 위해서 아닌가? 리액트의 공식문서에 의하면 는 children이 로딩 전까지 보여줄 fallback 요소를 제공하는 컴포넌트라고 한다.리액트의 에 대해서 더 자세히 다루기 전에,Suspend라는 단어의 뜻을 한번 살펴보고 가면 를 왜 쓰고, 언제 쓰는지, 그리고 역할이 무엇인지 이해하기가 쉽다. Suspend는 일시적으로 어떤 동작이 발생하거나 일어나는 것을 멈추는 것 (temporarily prevent from continuing or being in force or effect)이다. 그럼 리액트의 는 어떤 동작을 언제 잠시 멈춰주는 걸..

선언적인 코드 작성하기 🗣️ '선언적인 코드'에 대해서 들어보셨나요? 들어는 봤는데.. 뭐지? 토스 프론트엔드 챕터에서는 선언적인 코드 (Declarative Code)를 추상화 레벨이 높아진 코드라고 생각한다고 한다. 추상화 레벨이 높아진 코드란? 다음과 같이 배열의 합을 구하는 함수 sum을 살펴보자. sum([1,2,3]);// sum 함수의 구현 function sum(nums: number[]) { let result = 0; for (const num of nums) { result += num; } return result;} sum 함수의 초기값은 0이고, for문을 돌면서 배열의 각 수를 더하고,더해진 결괏값을 리턴해준다. 이 작업이 추상화되어, sum 함수를 사용하는 사람은 내부의 복잡한 제..

TMI. 1장에서 시작하지 않은 포스팅 https://github.com/Pyotato/fe_study/tree/main/modern_react_deep_dive 에서 이사했습니다.🚛💨🚚💨 fe_study/modern_react_deep_dive at main · Pyotato/fe_study📕 프론트엔드 공부를 하면서 끄적이는 이것 저것. Contribute to Pyotato/fe_study development by creating an account on GitHub.github.com 이전 모던 리액트 딥다이브를 읽으면서 정리했던 글은 깃허브에 작성되어 있지만,도중에 다시 글을 정리하기만을 위해 첫 장으로 돌아갈 수 없다고 판단하게 되었다. 그 이유는, 1. 1회독으로 모든 걸 완벽하게 읽었다고 보기 어려운 책 같다.2. ..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(3) 준비물: authorization을 담당할 서버 코드 2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(2) 준비물: authorization을 담당할 서버에 이어서 [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(2) 준비물: authorization을 담당할 서2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(1) 준비물:spotify dev 계정, application 에 이어서.. [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프pyotato-dev.tistory.com 이제 배포할 준비를..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(2) 준비물: authorization을 담당할 서버 2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(1) 준비물:spotify dev 계정, application 에 이어서.. [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(1) 준비물:spotify dev 계정, application2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트 에 이어서 [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트👩🏻‍💻 깃허브 레포 GitHupyotato-dev.tistory.com 이번에는 autho..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트(1) 준비물:spotify dev 계정, application 2024.06.12 - [👩🏻‍💻 dev] - [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트 에 이어서 [spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트👩🏻‍💻 깃허브 레포 GitHub - f-lab-edu/vinlyify: 🎶 search, listen to music via spotify api🎶 search, listen to music via spotify api. Contribute to f-lab-edu/vinlyify development by creating an account on GitHub.github.com 🤔 진행pyotato-dev.tistory.com🛍️ 준비물본격적으로 스포..

[spotify-api] VINYLIFY : 스포티파이 api활용한 검색 + 재생 프로젝트 👩🏻‍💻 깃허브 레포 GitHub - f-lab-edu/vinlyify: 🎶 search, listen to music via spotify api🎶 search, listen to music via spotify api. Contribute to f-lab-edu/vinlyify development by creating an account on GitHub.github.com 🤔 진행하게 된 계기과제 전형 중 탭을 활용해 검색 결과를 filter 하고, 새로고침을 해도 유지가 되도록 하는 태스크가 있었다.당시에는 시간 부족과 urlparam에 대한 이해 부족으로 과제를 완성하지 못했었다.그래서 로컬스토리지에 해당 정보들을 저장하는 방식을 사용했었고, 페이징 기능도 제대로 동작하지 않았다.아..

이전 1 ··· 6 7 8 9 다음

티스토리툴바