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..

• format_list_bulleted React
• · 2022. 10. 27.
• textsms

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을 생성할 수도 있다...

• format_list_bulleted JavaScript
• · 2022. 10. 26.
• textsms

자바스크립트 깊은 복사 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..

• format_list_bulleted JavaScript
• · 2022. 10. 25.
• textsms