Vite App

$$config title: 리액트 웹앱배포 keywords: - IT - 강좌 $$ # 관련링크 - [리액트 4주 소원앱, slog.gg/p/1136](https://slog.gg/p/1136) - [리포지터리 : https://github.com/jhs512/react_wish_app_2021](https://github.com/jhs512/react_wish_app_2021) # 강좌 - [https://slog.gg/p/1162](https://slog.gg/p/1162) # 1강 - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 1강, 수업개요](https://youtu.be/l0Al9GuQpOA) # 2강 - [리포지터리 : https://github.com/jhs512/react_wish_app_2021](https://github.com/jhs512/react_wish_app_2021) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 2강, 깃허브 리포지터리 생성](https://youtu.be/zCg-tDFgnFY) # 3강 - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 3강, VS CODE 완전삭제](https://youtu.be/Qwfb6PFQ5D4) # 4강 - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 4강, VS CODE 설치](https://youtu.be/uuhPVFM0tOk) # 5강 - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 5강, VS CODE, 한글팩, 테마 꾸미기](https://youtu.be/yhz_4Zby8GU) # 6강 - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 6강, GIT 설치](https://youtu.be/9-qIb3aUPgQ) # 7강 - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 7강, nvm windows로 node 최신버전 설치](https://youtu.be/DZHw5__vGcE) # 8강 - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 8강, npm 최신화](https://youtu.be/ghQbUPJmDKo) # 9강 - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 9강, vite로 프로젝트 생성](https://youtu.be/XoBIzM4_OCY) # 10강 - [GIT](https://github.com/jhs512/react_wish_app_2021/commit/52fe62ca08667cebcf4c85cb8a11d847df74ffe8) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 10강, 깃 푸시](https://youtu.be/G_4SP5XOEH4) # 11강 - [GIT](https://github.com/jhs512/react_wish_app_2021/commit/dd7243cf3085cd565036e6f33ccb6067c35cb690) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 11강, 빌드 시 에셋폴더의 경로를 상대경로로 변경](https://youtu.be/7fvGT3YchJk) # 12강 - [배포된 앱 주소 : https://jhs512.github.io/react_wish_app_2021](https://jhs512.github.io/react_wish_app_2021) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 12강, 깃허브에 배포된 앱 확인](https://youtu.be/t3HtKjVIoM8) # 13강 - [GIT](https://github.com/jhs512/react_wish_app_2021/commit/d1beb1022fb88d1ca87da117f877592c1aa81649) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 13강, 쓸데없는 파일 제거](https://youtu.be/HF_Vahbb1q4) # 14강 - [GIT](https://github.com/jhs512/react_wish_app_2021/commit/321f0797d5765a08ef51dc025ecdd2398e7831fa) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 14강, 테일윈드 설치](https://youtu.be/7oovImL6qhA) ## 명령어 - npm install -D tailwindcss@latest postcss@latest autoprefixer@latest - npx tailwindcss init -p ## index.css ```css @tailwind base; @tailwind components; @tailwind utilities; ``` ## tailwind.config.json ```js module.exports = { purge: ['./index.html', './src/**/*.{js,jsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } ``` # 15강 - [GIT](https://github.com/jhs512/react_wish_app_2021/commit/e26cb3481e8c3718ddcb106b92b2a5faa9e182f1) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 15강, 테일윈드, JIT 모드 활성화](https://youtu.be/uBCtwqHSNdg) ## tailwind.config.json ```js module.exports = { mode: "jit", purge: ['./index.html', './src/**/*.{js,jsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } ``` # 16강 - [GIT](https://github.com/jhs512/react_wish_app_2021/commit/f04a76b91231c433269d07eecee8a5a348e098db) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 16강, 데이지UI 적용](https://youtu.be/LtxGQzmoP1I) ## 명령어 - npm install -D daisyui@latest ## tailwind.config.json ```js module.exports = { mode: "jit", purge: ['./index.html', './src/**/*.{js,jsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [ require('daisyui') ], } ``` ## index.html ```html Vite App

``` # 17강 - [GIT](https://github.com/jhs512/react_wish_app_2021/commit/94587ffa8c969b2cbb7ed7d99c6f8eb68fadef7f) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 17강, ken 1136의 15강 소스코드 가져와서 적용, 1부](https://youtu.be/pl_YgJ_0eIY) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 17강, ken 1136의 15강 소스코드 가져와서 적용, 2부](https://youtu.be/DGFv_OVNKeE) ## 명령어 - npm install react-router-dom@5 - npm install recoil - npm install recoil-persist - npm install swiper # 18강 - [GIT](https://github.com/jhs512/react_wish_app_2021/commit/8f22efa900fd66488082be840e40c14aab08971d) - [영상 - 21 11 02, ken 1162, 리액트 웹앱배포, 18강, 직전 작업에서 발생한 스와이퍼 관련된 버그 수정](https://youtu.be/_X4Hi5_-3to) # 19강 - [영상 - 21 11 06, ken 1162, 리액트 웹앱배포, 19강, 도메인 구매, 도메인을 DNSZI에 등록](https://youtu.be/HtlOP_b28-U) # 20강 - [GIT](https://github.com/jhs512/react_wish_app_2021/commit/85a337875c5cd5b357da62793bee43757c180739) - [영상 - 21 11 06, ken 1162, 리액트 웹앱배포, 20강, 커스텀 도메인, https](https://youtu.be/allY77gUqMY)