1. react extensions
auto import
auto rename tag
es7+react/rdux/react-native snippets --> 비슷한 이름이 또 하나 있으니 주의
indent-rainbow
javascript and typescript nightly
material Icon Theme
2. vue extensions
Vue VSCode Snippets
ESLint
vetur
3. npm 업그레이드
npm install -g npm
4. 프로젝트 생성
C:\Projects\ViteProject>npm create vite@latest
참고) vue 프로젝트 생성법
1. vue/cli 사용법 (요즘도 쓰나??)
가) 설치
npm install -g @vue/cli 또는 yarn global add @vue/cli
나) 프로젝트 생성법
vue create hello-vue-app
2. vite 사용법 (상당히 빠름. 요즘은 이게 대세)
npm init vite vue@latest
cd 프로젝트명
npm install
npm run dev
3. 실행 :
package json 에 scripts 부분이 관련됨
npm run [serve/dev] 이런식으로...scripts 에 있는 키값을 run 다음에 넣어주면 됨
vite에서 만든 package.json과 vue.cli 에서 만든 게 서로 다름
가) vite에서 만든것
"scripts": {
"dev": "vite",
"build:prod": "vite build",
"build:stage": "vite build --mode staging",
"preview": "vite preview"
},
나) vue/cli 에서 만든 것
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
프로젝트 구조 이해
=================================
1. vue/cli 에서 만든 구조
가) public/index.html
-> 내부에
<div id="app"></div>
나) src/main.js
-> 내부에서
createApp(App).mount('#app')
다) App.vue
index.html과 App.vue 를 main.js 가 연결해주는 구조다.
App.vue 가 index.html에 포함되게 됨.
main.js 를 호출하는건? WebPack 제일 먼저 호출 해줌.
(webpack.config.js 에서 entry 항목이 있음, webpack.js.org 사이트에 Bundel It 을보면 나옴.)
index.html ===> App.vue ===> HelloWorld.vue
그외) redis, maria db 설치
docker run --name=redis -d -p 6379:6379 -e "TZ=Asia/Seoul" -v redis_data_root:/data redis
docker run --name mariadb -d -p 3306:3306 -v mariadb-root_conf.d:/etc/mysql/conf.d -v mariadb-root_data:/mysql_data01 -v mariadb-root_mysql-tmp:/mysql_tmp -v mariadb-root_scripts:/scripts -v mariadb-root_log:/mysql_log -e MYSQL_ROOT_PASSWORD=mariadb -e TZ="Asia/Seoul" mariadb
2. vite에서 만든구조
src/main.js,
src/App.vue 가 있음.
index.html 은 root에 있음. index.html에서 main.js를 호출함
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">시스템 리소스를 로드하는 중입니다. 잠시 기다려 주십시오.</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
'IT > React' 카테고리의 다른 글
| React 배포 과정 (0) | 2025.03.24 |
|---|---|
| 2025년 기술 스택가이드 (0) | 2025.03.22 |
| movies-api 기동화면.... (0) | 2024.02.06 |
| 리액트 차트 (0) | 2023.12.12 |
| 차트라이브러리 (0) | 2023.12.12 |
댓글