전체 글

React native에서 무한스크롤 구현하기 (FlatList 사용)

FlatList는 ScrollView처럼 많은 양의 데이터를 처리할 수 있게 해준다. react에서 map을 쓰는 것 처럼 FlatList를 사용할 수 있고, 추가적으로 다양한 기능을 제공받을 수 있다. FlatList에서 필수적으로 필요한 props는 renderItem와 data다. 또한 map의 key를 설정해주는 것처럼 FlatList에서는 keyExtractor로 key를 설정해준다. onEndReached를 통해서 리스트에 끝에 도달했을 때 실행될 함수를 설정할 수 있고, 이를 통해서 무한스크롤을 구현할 수 있다. 스크롤 뷰가 리스트의 맨 끝에 도착하면 새로 다음 페이지의 데이터를 불러오는 함수를 실행시켜 무한스크롤을 구현한다. onEndReachedThreshold를 통해 마지막 컨텐츠의 어..

React 18의 createRoot (ReactDOM.render Warning)

리액트 버전 18에 와서 평소처럼 npm run start를 했는데, 다음과 같은 에러 메세지가 콘솔창에 나타났다. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot How to Upgrade to React 18 – React Blog As we shared in the release post, React 18 introduces features powe..

FormData 객체, Blob 객체

FormData 객체는 서버로 바이너리 데이터를 전달할 때 사용될 수 있다. Blob 객체는 파일 데이터를 저장할 수 있다. 클라이언트에 바이너리 데이터를 저장할 때, blob 객체에 저장할 수 있다. 서버에서 바이너리 데이터를 받기 위해서는 responseType을 blob으로 설정할 필요가 있다. const obj = {hello: 'world'}; const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'}); const url = window.URL.createObjectURL(blob); // 파일을 다운로드하는 url 서버에서 blob 타입으로 파일을 받아 해당 파일을 다운로드하는 URL을 생성할 수도 있다...

자바스크립트 깊은 복사 structuredClone()

Object.assign()과 spread operator, slice()를 사용한 복사는 얕은 복사이다. 깊은 복사를 위해서 JSON.parse, JSON.stringify를 사용할 수 있으나 한게점이 있다. JSON.parse, JSON.stringify를 사용하면, 객체 내부의 함수 등 일부 타입의 데이터가 소실될 수 있다. 이런 문제점을 해결하는 새로운 문법이 structuredClone이다. const a = [1, 2, 3]; const b = [...a]; console.log(a, b); // [1, 2, 3] [1, 2, 3] const c = {a: "a", b: "b", c: "c"}; const d = {...c}; console.log(c, d); // { a: "a", b: "b..