Vite App

$$config title: 리액트 안드로이드 배포 keywords: - IT - 강좌 $$ # 관련링크 - [리액트 4주 소원앱, slog.gg/p/1136](https://slog.gg/p/1136) - [리포지터리 : https://github.com/jhs512/react_wish_android_app_2021](https://github.com/jhs512/react_wish_android_app_2021) # 강좌 - [https://slog.gg/p/1208](https://slog.gg/p/1208) # 1강 - [영상 - 21 11 06, ken 1208, 리액트 안드로이드배포, 1강, 수업개요](https://youtu.be/r-XTg2Xx_wA) # 2강 - [영상 - 21 11 06, ken 1208, 리액트 안드로이드배포, 2강, 환경세팅](https://youtu.be/Ivp1AnPitL0) # 3강 - [영상 - 21 11 06, ken 1208, 리액트 안드로이드배포, 3강, 프로젝트 생성](https://youtu.be/LLDZCLLVfYE) ## 명령어 - npm init vite@latest - react 선택 - cd [프로젝트폴더명] - npm install - code . - vs code 열기 - ctrl + ` - vs code 내부 터미널 열기 - npm run dev - http://localhost:3000 에서 확인 # 4강 - [GIT](https://github.com/jhs512/react_wish_android_app_2021/commits/master) - [영상 - 21 11 06, ken 1208, 리액트 안드로이드배포, 4강, GITHUB에 푸시](https://youtu.be/Sf3njOXEUg4) ## 명령어 - git init - git remote add origin [리포지터리주소] - git config user.name "[깃허브아이디]" - git config user.email "[깃허브이메일]" - git add . - git commit -m "세팅" - git push origin master # 5강 - [React & Capacitor 링크](https://capacitorjs.com/solution/react) - [GIT](https://github.com/jhs512/react_wish_android_app_2021/commit/f5939c8576df374c63a0a40bbd60c63749a9276d) - [영상 - 21 11 06, ken 1208, 리액트 안드로이드배포, 5강, 캐퍼시터를 이용해서 안드로이드 프로젝트 생성](https://youtu.be/vsYl-2A6k9E) ## 명령어 - npm install @capacitor/core @capacitor/cli - npx cap init [프로젝트명] [패키지명] --web-dir=dist - EX : npx cap init exam1 com.sbs.jhs.exam1 --web-dir=dist - npm run build - dist 폴더에 빌드파일생성 - npm i @capacitor/android - npx cap add android - 프로젝트 폴더 안에 android 라는 이름으로 안드로이드 프로젝트 폴더 생성 - npx cap copy android - dist 폴더안의 파일을 안드로이드 프로젝트로 복사 # 6강 - [영상 - 21 11 06, ken 1208, 리액트 안드로이드배포, 6강, 안드로이드 프로젝트를 실행](https://youtu.be/F6O9dKyqPVE) # 7강 - [영상 - 21 11 07, ken 1208, 리액트 안드로이드배포, 7강, 새로운 환경에서 작업 이어가기](https://youtu.be/D-dKipUJZZM) # 8강 - [영상 - 21 11 07, ken 1208, 리액트 안드로이드배포, 8강, 쓸데없는 파일 제거](https://youtu.be/E0hPVI0Nmts) # 9강 - [GIT](https://github.com/jhs512/react_wish_android_app_2021/commits/master) - [영상 - 21 11 07, ken 1208, 리액트 안드로이드배포, 9강, 휴대폰에서 라이브리로드](https://youtu.be/p54_z1YKf6E) ## capacitor.config.json 파일 예시 ```json { "appId": "com.sbs.jhs.exam1", "appName": "exam1", "webDir": "dist", "bundledWebRuntime": false, "server": { "url": "http://10.0.2.2:3000", "cleartext": true } } ``` # 10강 - [GIT](https://github.com/jhs512/react_wish_android_app_2021/commit/2f127064b59bc924f9161b5d96bbf0c49b6e8e63) - [영상 - 21 11 07, ken 1208, 리액트 안드로이드배포, 10강, 테일윈드 설치](https://youtu.be/x4PL6xjdC_A) ## 명령어 - 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: [], } ``` # 11강 - [GIT](https://github.com/jhs512/react_wish_android_app_2021/commit/16ba1c601c5aae7c08e1e603a18555a1c016a50c) - [영상 - 21 11 07, ken 1208, 리액트 안드로이드배포, 11강, 테일윈드, JIT 모드 활성화](https://youtu.be/cXSHU8Hysds) ## 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: [], } ``` # 12강 - [GIT](https://github.com/jhs512/react_wish_android_app_2021/commit/b43b455b5f2617beb2a3eb4ce17a2c526dd8d7d2) - [영상 - 21 11 07, ken 1208, 리액트 안드로이드배포, 12강, 데이지UI 적용](https://youtu.be/q27VySe9yfM) ## 명령어 - 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

``` # 13강 - [GIT](https://github.com/jhs512/react_wish_android_app_2021/commit/ef4e16939b077c5d9c1ecc17a599861c9b0077ca) - [영상 - 21 11 07, ken 1208, 리액트 안드로이드배포, 13강, 웹폰트 적용](https://youtu.be/onuCaUoUrqE) # 14강 - [GIT](https://github.com/jhs512/react_wish_android_app_2021/commit/5cf2e8ceb30a6a0404dea49be01d74b7fbd37e54) - [영상 - 21 11 07, ken 1208, 리액트 안드로이드배포, 14강, 소원앱 15강 소스코드 가져와서 실행](https://youtu.be/Q43grAi6VT4)