Web dev39 Intersection Observer API 이용하여 무한스크롤 구현하기 Intersection Observer API를 이용하여 무한스크롤을 구현하고자 한다. 사용하는 영화 리스트 API 의 데이터 구조는 page 한개 당 20개의 영화 리스트를 담은 배열 형태로 되어있다. 따라서, 한번에 20개의 영화 리스트를 받을 수 있고 그 다음 20개의 영화 리스트를 요청하기 위해서는 fetch 요청 URL에서 page=2 라는 파라미터를 추가해주어야 한다. 이러한 데이터 구조를 보았을 때, 무한스크롤을 구현하기 위해서는 1. Intersection Observer가 맨 아래 요소를 관측함 2. 관측이 확인되면 page 라는 상태 값을 1 증가시킴 3. 의존성 배열로 page 값을 갖는 useEffect 훅을 작성함 -> 해당 훅에서 page 값의 업데이트가 감지되었을 때, 해당 p.. 2023. 5. 29. 타입스크립트 Call signature / 오버로딩 - call signature : 함수 위에 마우스를 올렸을 때 보게 되는 것 / 어떻게 함수를 호출하는지와 함수의 반환 타입을 알려줌. -> 선언하는 방식: type Add = (a:number, b:number) => number; const add:Add = (a,b) => a + b; -> 함수의 타입을 설명하고 나서 코드를 구현할 수 있게 해줌. -> props로 함수를 전달할 때의 편의성. - overloading : 여러개의 call signature가 있는 함수 type Add = { (a: number, b:number) : number (a: number, b:string) : number } const add: Add = (a, b) => { if(typeof b === 'strin.. 2023. 4. 5. 타입스크립트 - 기본 타입들 * 노마드코더 타입스크립트 2주 챌린지의 1, 2일차 학습 내용을 정리하였습니다. 타입스크립트란, 개발자에게 자동완성과 보호장치를 제공하는 언어라고 생각하면 쉽다. 개발자의 실수나 발생 가능한 에러, 버그를 런타임 이전에 캐치해준다. 기본적으로 알고 있는 타입인 number, string, boolean 이외에 새롭게 배우게 된 타입들에 대해서만 정리해보겠음. - optional properties '?' : 프로젝트를 하면서 마주쳤던 에러 중, 가장 골머리를 앓았던 에러가 optional type을 알았다면 쉽게 풀렸을 것이다. optional property는, let age : number | undefined = 20 let age? : number // 위 두 코드는 동일하게 작동함 위의 코드처.. 2023. 4. 4. 노마드코더 타입스크립트 2주 챌린지 시작! 오늘은 드디어 부트캠프 메인 프로젝트의 데모데이였습니다! 팀원들과 모두 모여 시즌 2를 위한 KPT 회고를 진행하고, 심기일전하여 프로젝트 결과물을 더 디벨롭시켜보기로 했습니다. 그리고 프로젝트를 진행하며 타입스크립트에 대한 학습의 필요성을 크게 느꼈습니다. 그래서 시작하는 노마드코더 타입스크립트 2주 챌린지! 아자아자 화이팅이다~! 2023. 4. 3. 이전 1 2 3 4 5 6 7 ··· 10 다음