728x90 반응형 webpack8 [React] Vite 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 vite 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Vite란? vite는 webpack, rollup 등과 같이 모듈 번들링을 수행할 때 사용되는 번들러 중 하나입니다. vite가 처음 등장하면서 개발자들에게 알려지기 시작할 때 봤었던 "리액트가 10배가 빨라집니다" 라는 글이 아직도 생각이 납니다. 이런 글의 내용처럼 vite의 가장 큰 특징 중 하나는 속도가 빠르다는 겁니다. ESM, HMR, ESBuild 등을 활용하여 서버 구동되는 시간, 번들링 속도, 코드 갱신 속도 등 다양한 방면에서 빠른 속도를 자랑하기 때문에 프로젝트의 규모가 커질수록 느낄 수 있었던 답답했던 번들링 속도 문제들을 개선하는데 도움을 줍니다. 번들링 속도 문제들을 개선.. 2023. 7. 11. [React] CRA 사용하지 않고 타입 스크립트 개발환경 세팅하기 안녕하세요. J4J입니다. 이번 포스팅은 CRA 사용하지 않고 타입 스크립트 개발환경 세팅하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 세팅 방법 [ 1. 작업할 폴더 생성 및 이동 ] VSCode 터미널을 이용하여 다음 명령어를 통해 작업 폴더를 생성해주시면 됩니다. $ mkdir { 폴더 명 } // ex) mkdir init_typescript $ cd { 폴더 명 } // ex) cd init_typescript [ 2. package.json 생성 ] $ npm init 명령어를 입력하면 부가 정보들을 추가적으로 작성해줘야 합니다. 필요한 내용들에 대해 입력해주시면 되고 괄호가 있는 곳은 아무것도 입력하지 않을 경우 괄호 안의 내용이 default로 입력이 됩니다. package.. 2022. 2. 16. [React] CRA 사용하지 않고 개발환경 세팅하기 안녕하세요. J4J입니다. 이번 포스팅은 CRA 사용하지 않고 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 세팅 방법 [ 1. 작업할 폴더 생성 및 이동 ] 보통 React를 이용해 개발할 때는 대부분의 사용자들이 VSCode를 IDE로 선택합니다. VSCode를 사용하시는 분들은 터미널을 이용하여 다음과 같이 간단하게 폴더 생성 및 이동을 해주시면 됩니다. $ mkdir { 폴더 명 } // ex) mkdir init $ cd { 폴더 명 } // ex) cd init [ 2. package.json 생성 ] $ npm init 명령어를 입력할 경우 다음과 같이 추가 정보를 입력해야 되는데 필요한 부분만 입력해주시면 되고 또한 괄호가 있는 곳은 입력을 하지 않을 경우 괄호.. 2022. 2. 15. [Svelte] 초기 환경 세팅하기 안녕하세요. J4J입니다. 이번 포스팅은 Svelte 사용을 위한 초기 환경 세팅에 대해 적어보는 시간을 가져보려고 합니다. Svelte에서도 React에서 기본 환경 세팅이 되어 있는 템플릿인 CRA와 같은 기능들이 존재합니다. 다만 어떤 번들러를 사용하냐에 따라 사용되는 명령어가 구분되어집니다. SPA기술들을 사용할 때 일반적으로 많이 사용되는 번들러는 Webpack이 있습니다. 그리고 최근에 관심도가 높아지고 있는 번들러 중에 Rollup이라는 것이 있습니다. Svelte에서 제공해주는 CRA기능에선 Webpack을 사용하냐 또는 Rollup을 사용하냐에 따라 명령어가 구분되고 그에 따라 사용하기 원하는 번들러에 맞게 명령어를 입력해주시면 됩니다. 번들러 사용에 있어 부가적인 정보를 더 드리자면 S.. 2021. 10. 4. [React] Tree Shaking으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 tree shaking으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Tree Shaking이란? tree shaking은 나무 흔들기라는 뜻으로 소스코드에서는 명시되어 있지만 실제로 프로그램 실행에 영향을 주지 않는 코드들을 빌드 단계 때 제거하는 것을 의미합니다. tree shaking을 이용하여 프로그램 실행에 영향을 주지 않는 코드들을 제거했을 때 돌아오는 이점은 번들 파일의 크기 최적화입니다. 서비스의 규모가 커짐에 따라 프로그래밍되는 코드들도 많아지고 결국 번들 파일의 크기가 커지는 것은 당연한 상황이 됩니다. 그리고 번들 파일의 크기가 커지게 되면 브라우저가 번들 파일을 로드할 때 더 많은 시간을 소비하게 만듭니다. 이런 상황에서 tr.. 2021. 8. 31. [React] regeneratorRuntime is not defined 에러 안녕하세요. J4J입니다. React를 이용하여 프로그래밍을 하다가 다음과 같은 에러에 마주한 적이 있습니다. Uncaught ReferenceError: regeneratorRuntime is not defined 해당 에러를 마주하게 된 원인은 async/await의 사용이었습니다. 사용되던 async/await을 걷어내고 promise로 변경했더니 정상적으로 실행되는 것을 확인했습니다. 하지만 그렇다고 async/await을 사용하지 않을 수 없으니 해결방법을 찾아봤고 다음과 같은 방법으로 해결할 수 있었습니다. [ 1. 패키지 설치 ] $ npm install babel-polyfill [ 2. webpack 설정파일 중 entry에 babel-polyfill 추가 ] entry: ["babel-.. 2021. 7. 17. [React] Webpack Proxy설정을 이용하여 CORS 해결 안녕하세요. J4J입니다. 이번 포스팅은 webpack proxy설정을 이용하여 cors 해결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. CORS란? cors는 cross-origin resource sharing의 약자로 교차 출처 리소스 공유라고 표현됩니다. server-client 간 개발을 하다 보면 정말 쉽게 접할 수 있는 문제가 cors문제인데 cors문제가 발생하는 이유는 간단하게 보안 때문입니다. cors는 본인이 운영하는 웹사이트가 아닌 다른 피싱 사이트에서 요청한 request가 넘어오게 되면 request처리를 하지 않고 에러를 발생되도록 도와줍니다. cors설정을 하지않을 경우 일반적으로 동일 도메인 + 동일 포트로 넘어온 request에 대해서는 데이터 처리가 정상적으로 .. 2021. 7. 17. [React] CRA 없이 개발환경 구축하기 (webpack 구 버전 사용) 안녕하세요. J4J입니다. 이번 포스팅은 CRA 없이 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 [ 1. package.json 생성 ] $ npm init npm init을 입력하게 되면 아래와 같은 부가정보들을 입력해줘야 합니다. 각 행마다 원하는 정보들을 입력해주면 되고 괄호로 덮여있는 부분은 아무것도 입력하지 않고 엔터를 입력할 경우 괄호에 해당하는 값으로 지정되는 것을 의미합니다. package name: (init) react_init version: (1.0.0) description: react init description entry point: (index.js) index.jsx test command: git repository: keywo.. 2021. 7. 12. 이전 1 다음 728x90 반응형
