# dynamic-import

[React] 코드 분할 (Code Spliting)
React 앱들은 번들링(Bundling)을 통해 HTML 웹 페이지에 JavaScript를 쉽게 추가할 수 있다.번들링된 앱은 모든 JavaScript 코드가 한 곳에 있으므로 페이지 설정을 위한 호출 수가 적어지고, 단일 링크 태그만으로 JavaScript를 추가할

[JS]Dynamic Import의 동작방식(feat. Vite, Cypress)
Dynamic Import란 자바스크립트 모듈을 필요할 때 불러오는 방식입니다.Javascript는 ECMAscript 표준으로 dynamic import를 다음과 같이 지원하고 있습니다.

NextJs - react-simplemde-editor 이슈,해결
Nextjs에서react-simplemde-editor를 이용하여 Editor component를 만들고, props데이터로 Preview 기능을 옵셔널하게 바꾸려고 하였습니다.import 후 렌더링시 ReferenceError: navigator is not defi

27day - XSS, CSRF
브라우저보다 Next.js에서 화면이 먼저 그려져서(pre-rendering) 생기는 에러이다.이것을 해결할 수 있는 방법은 세 가지가 있다.1\. useEffect2\. typeof3\. process.brower이렇게 해도 import 자체가 안되는 라이브러리들이

코드 분할 (Code Spliting)
React 앱들은 대부분 Webpack, Rollup 등을 이용해 번들링(Bundling)번들된 앱은 모든 JavaScript가 한 곳에 있기 때문에 링크 태그 하나만으로도 전달 가능but 브라우저(JavaScript 엔진)이 해석해야 하는 자바스크립트 코드의 양이 많
Dynamic Import
React.lazy 함수를 사용하면 dynamic import를 사용해 컴포넌트를 렌더링 할 수 있습니다.React는 SPA(Single-Page-Applicaion)이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있기 때문에 React.lazy를 통해 컴포

[Next.js] Dynamic Import
Nextjs를 공부하다가 Dynamic Import를 알게 되어 소개하려 한다위와 같이 클릭 이벤트를 통해 Left 컴포넌트와 Right 컴포넌트를 바꾸는 간단한 기능을 만들어 봤다그런데 분명히 console.log('hi')는 Right 컴포넌트가 있는 파일에 위치해

Dynamic import(동적 가져오기)
이전에 다루었던 import와 export는 모두 정적인 방식이며, 문법이 단순하고 제약사항이 있다. 하지만 동적 가져오기를 사용하면 이를 해결할 수 있다.

27일) 언제까지 Input type="text"쓸꺼야! 예쁜 웹에디터를 쓰자 ! /react-quill/ dynamic import/ XSS 크로스사이드스크립트 / 제가 개발자인데도 무서워요 잘 막아볼게요 OWASP TOP 10 / Code Camp FE 6기 / 코드캠프
웹에디터 이해크로스사이드스크립트(XSS)OWASP TOP 10

webpack5 설정하기
srcsrc.js/src/webpack.config.js/src/package.json/src/js/index.js/src/js/sub2.jsdist/dist/manifest.json/dist/index.html/dist/sub2.htmldistdist/jscss ba
20220203 TIL
https://tech.kakao.com/2020/12/01/frontend-growth-02/ 위 글에서 보면 commonJS와 ESModule을 함께 사용하기 위해서 @babel/plugin-transform-modules-commonjs, 즉 preset-env
[코드분할] 동적import와 웹팩사용
Create-react-app으로 프로젝트를 만들어 환경설정을 하는 중, ie 지원을 위한 polyfill을 불러오는데, 모듈이 필요한 브라우저에서만 선택적으로불러오면 좋지 않을까하여 고민했던 방법을 정리합니다.