# dynamic-import

16개의 포스트
post-thumbnail

[Node] 모듈

모듈이란 특정한 기능을 하는 함수나 변수들의 집합을 말한다.모듈은 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용할 수 있다. 자바스크립트에서 코드를 재사용하기 위해 함수로 만드는 것과 비슷하다.노드에서는 CommonJS, ECMAScript 두 가지 모

2023년 11월 25일
·
0개의 댓글
·
post-thumbnail

[CS] 프론트 엔드 성능 최적화

✅ 성능 최적화 전에 알면 좋은 것 ❓ 브라우저 주소창 결국은 api get을 이용한다. 비교 >- 브라우져 ⇒ 가지고온 데이터(HTML)를 그림으로 바꿔주는 것이다. >- 포스트맨 ⇒ 요청 했을 때 데이터만 받아오는 것이다. >- axios ⇒ 프로그램 상에

2023년 8월 31일
·
0개의 댓글
·
post-thumbnail

React 코드 스플리팅

React 코드 스플리팅이란?

2023년 6월 9일
·
0개의 댓글
·
post-thumbnail

[React] 코드 분할 (Code Spliting)

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

2023년 5월 22일
·
0개의 댓글
·
post-thumbnail

[JS]Dynamic Import의 동작방식(feat. Vite, Cypress)

Dynamic Import란 자바스크립트 모듈을 필요할 때 불러오는 방식입니다.Javascript는 ECMAscript 표준으로 dynamic import를 다음과 같이 지원하고 있습니다.

2023년 5월 17일
·
0개의 댓글
·
post-thumbnail

NextJs - react-simplemde-editor 이슈,해결

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

2023년 4월 22일
·
0개의 댓글
·
post-thumbnail

27day - XSS, CSRF

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

2022년 12월 11일
·
0개의 댓글
·
post-thumbnail

코드 분할 (Code Spliting)

React 앱들은 대부분 Webpack, Rollup 등을 이용해 번들링(Bundling)번들된 앱은 모든 JavaScript가 한 곳에 있기 때문에 링크 태그 하나만으로도 전달 가능but 브라우저(JavaScript 엔진)이 해석해야 하는 자바스크립트 코드의 양이 많

2022년 11월 28일
·
0개의 댓글
·

Dynamic Import

React.lazy 함수를 사용하면 dynamic import를 사용해 컴포넌트를 렌더링 할 수 있습니다.React는 SPA(Single-Page-Applicaion)이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있기 때문에 React.lazy를 통해 컴포

2022년 11월 28일
·
0개의 댓글
·
post-thumbnail

[Next.js] Dynamic Import

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

2022년 7월 25일
·
0개의 댓글
·
post-thumbnail

Dynamic import(동적 가져오기)

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

2022년 6월 11일
·
0개의 댓글
·
post-thumbnail

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

2022년 3월 27일
·
0개의 댓글
·

20220203 TIL

https://tech.kakao.com/2020/12/01/frontend-growth-02/ 위 글에서 보면 commonJS와 ESModule을 함께 사용하기 위해서 @babel/plugin-transform-modules-commonjs, 즉 preset-env

2022년 2월 4일
·
0개의 댓글
·
post-thumbnail

React-Quill

해킹의 위험성을 없앤상태로 React-Quill 에디터 라이브러리를 쓰는 방법을 설명

2021년 10월 23일
·
0개의 댓글
·

[코드분할] 동적import와 웹팩사용

Create-react-app으로 프로젝트를 만들어 환경설정을 하는 중, ie 지원을 위한 polyfill을 불러오는데, 모듈이 필요한 브라우저에서만 선택적으로불러오면 좋지 않을까하여 고민했던 방법을 정리합니다.

2021년 8월 19일
·
0개의 댓글
·