# vite

29개의 포스트

React 초기 세팅 방법들과 장단점

create-react-appcreate-react-app ejectcreate-react-app + react-app-rewirednpm init(추천) vite...등 다양한 방법으로 React app을 setup 할 수 있다.각각의 장단점이 있기 때문에, 상황에

4일 전
·
0개의 댓글
post-thumbnail

lodash 번들사이즈 경량화 그리고 rollup-plugin-visualizer

빌드 후 파일용량을 줄이는 최적화에 필요한 라이브러리다.프로젝트에서 차지하는 파일의 용량 및 의존성있는 라이브러리들의 용량을 계산하여 프로젝트 총용량이 어떻게 구성되어 있는지(?) 확인 할 수 있다.이렇게 셋팅 해주고하면 dist/report.html 파일이 생성됌.r

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

vite 프로젝트 환경 적용해보기

1. vite 실행 생성 명령어 사용 Scaffolding Project Project Name Package Name Select a framework : vue Select a variant : vue-ts 실행 소스파일 옮기기 main.ts 파일 에러 1) alias인 '@' 에러 발생 해결 방법 : ht

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

Vue3, TS 환경에서 StoryBook 구성하기

Vue3, TypeScript, Vite 환경에서 StoryBook을 구성하는 방법

2022년 6월 16일
·
0개의 댓글

Vue Vite, Vuex, Pinia

vite는 현재 사용하는 프론트엔드 개발에서 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있는데, 이 웹팩을 사용할 때 보다 훨씬 더 빠르게 개발하고 배포할 수 있기 때문에 등장한 javascript 네이티브 모듈을 기반으로 한 dev server이다. 웹팩은

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

React, Typescript, Vite, TailwindCSS 프로젝트 세팅

프로젝트에서 React, Typescript, Vite, TailwindCSS, Eslint, Prettier를 적용하는 방법

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

vite로 react프로젝트 설치

이렇게 간단해도 되나 싶을 정도로 너무 간단하다.npm init vite 를 실행하면프로젝트 이름 설정프레임워크 설정 (vanilla, vue, react, preact, lit svelte)typescript를 선택할 것인지 여부이렇게 선택만하면 기본셋팅이 완료된다.

2022년 6월 9일
·
0개의 댓글

쇼핑몰 프로젝트 1일차(clone-coding)

react-query와 swr을 제대로 써보지 않아, 클론코딩을 통해서 한번 접해보려한다. 인프런의 정재남강사님이 하시는 쇼핑몰 프로젝트고 어떤 식으로 코딩을 하는지 정확하게 한번 살펴보고, 또 이분의 js강의를 들어왔던 터라 궁금하기도 했다. 아마 이번이 클론코딩은 마지막이 되지 않을까.. 토이 프로젝트를 진행하며 혼자 만들어보면서 나름 어느정도 페이지...

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

vite에서 favicon 적용하기(vite-plugin-favicon)

vite는 favicon 적용이 webpack 보다 어렵다. 그래도 결국 알아냈지.

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

[Photorage] 2. React + TypeScript를 Vite로 시작하기(스토리북 추가)

이번엔 Vite를 이용하여 프로젝트를 생성 하고 사용하고자 하는 추가 개발 도구들(스토리북 등)을 설치 해보자. 그 전에 앞서 npm 이나 yarn 이 설치가 되어있지 않은 분들은 그것을 먼저 설치 하도록 하자. 참고 링크 - https://heropy.bl

2022년 5월 26일
·
0개의 댓글
post-thumbnail

[Photorage] 1-3. CRA 대안 선택(Vite React)

1.에서 CRA가 아닌 Vite를 사용하기로 했다. 이번엔 바이트를 이용하여 프로젝트를 생성 하고 사용하고자 하는 추가 개발 도구들(스토리북 등)을 설치 해보자. yarn create vite [프로젝트 명] --template react-ts 사용 시 ![](ht

2022년 5월 26일
·
0개의 댓글

[Photorage] 1-1. React CRA가 최선이고 최고일까?

공부 배경 내가 ICT 인턴을 진행하는 기업의 서비스는 90%가 Vanila TypeScript로 이루어져있고, 요새 새로 추가하는 신규 기능 같은 경우는 React를 통해 개발을 진행하고 있다. 나는 입사 당시만해도 React를 전혀 몰랐기 때문에 아무런 감흥도 없었

2022년 5월 17일
·
0개의 댓글

vue 프로젝트 생성

1. vscode 폴더 열기 2. vite로 설치 npm 3. 로컬 서버 접속

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

Vite 는 Webpack을 대체 가능할까?

vite 공식문서 Getting started 의 첫 줄을 보면,vite 는 프랑스어로 빠르다 를 의미합니다.라는 설명이 있습니다.이 설명 그대로 vite 는 "빠른" 자바스크립트 번들링 툴입니다. 대표적인 자바스크립트 번들링 툴은 Webpack 과 Rollup 등이

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

[React] Vite & webpack

우연히 youtube 추천 영상에서 vite를 발견했다. React를 빠르게? 무엇을 빠르게 한다는 걸까 궁금했다. 이번 게시물에서는 vite와 webpack의 차이점과 vite에서 react 프로젝트를 실행하는 것을 간단하게 알아보려고 한다. React를 알기 전에

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

리액트 프로젝트 초기 설정: vite vs cra

이번 자율프로젝트를 리액트로 하면서 기존처럼 cra를 사용할지 vite를 사용할지 고민하게 되었다. vite와 cra에 대해서 간략하게 알아보자

2022년 4월 25일
·
0개의 댓글

[Vue/Vite] 빌드 시 이미지 동적 로딩 에러

Vite로 Vue 앱을 구성해보았다. 하지만 assets 폴더에 있는 이미지에 대해 동적으로 불러올 때 에러가 발생하였다. 기존의 웹팩을 사용한 프로젝트와는 어떻게 다르게 구성해야하는지 시행착오를 겪은 것을 정리해 보았다.

2022년 4월 15일
·
0개의 댓글

Vite

Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for mode

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

왜 Create React App 대신 Vite일까

초보 개발자든, 숙련된 개발자든, 대부분의 개발자들은 Create React App(CRA)을 이용하여 리액트 프로젝트를 생성했을 거예요. CRA는 리액트 팀이 추천하는 공식 리액트 보일러 플레이트이기도 하고, HMR(Hot Module Replacement)과 같은

2022년 3월 20일
·
0개의 댓글
post-thumbnail

(번역) Vue 3 - Vue의 진화

2022년 2월 7일 부터 Vue 3가 Vue의 기본 버전이 되었습니다. 이는 근 2년 동안의 Vue 생태계에서 가장 기념비적인 일입니다. 최근 2년간 Vue에는 다음과 같은 변화가 있었습니다.

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