개발 공부/PWA
-
Vue.js PWA 프로젝트 firebase 호스팅 방법개발 공부/PWA 2023. 10. 6. 08:56
1. firebase 설치 npm install -g firebase-tools 2. 빌드 npm run build * 빌드 후 dist 폴더 생기는걸 볼 수 있음 3. ".firebase" , "firebase.json" 파일 생성 - .firebase : "first" 는 내 프로젝트 이름임 { "projects":{ "default" : "first" } } - firebase.json { "hosting":{ "public":"dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites":[ { "source":"**", "destination":"/index.html" } ] } } * 프로젝트 구성 참고 https..
-
Vue.js 프로젝트 PWA 적용하기 - 매니페스트, 서비스워커 (Manifest, Service Worker)개발 공부/PWA 2023. 10. 5. 13:32
전 시리즈 : Vue js 프로젝트 생성 방법 vue cli로 시작하기 PWA 적용을 위해 필요한 것 - Manifest - Service Worker 1. Manifest 적용 * public 폴더에 manifest.json 파일 추가 - manifest.json { "short_name": "TestRozy", "name": "RozyPWA", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "/images/logo.png", "sizes": "200x200", "type": "image/png" }, { "src": "/images/img.png", "size..
-
Vue js 프로젝트 생성 방법 vue cli로 시작하기개발 공부/PWA 2023. 10. 5. 09:38
뷰js 프로젝트 생성하는 법은 여러가지가 있는데 그 중 vue cli로 시작하는 방법 1. vue cli 설치 npm install -g @vue/cli 2. create 프로젝트 vue create first 3. 생성한 프로젝트 폴더로 들어가서 run npm run serve 실행 완료 * 프로젝트 구성 * 3번에서 진행한 run serve는 PWAPROJECT폴더의 package.json에 정의되어있는게 실행되는거다 따라서 해당 json 내 script에 serve 명령어가 정의되어있지 않다면 실행되지 않음 아래와 같은 에러 뜸
-
Firebase 사용 방법 프로젝트 시작 VSCode 적용개발 공부/PWA 2023. 9. 25. 10:38
Firebase 사용 방법 - 홈페이지 접속 Firebase | Google’s Mobile and Web App Development Platform Discover Firebase, Google’s mobile and web app development platform that helps developers build apps and games that users will love. firebase.google.com - 프로젝트 이름 - 동의, 다음 누르면 생성됨 - 준비 완료 - firebase login - 웹 페이지 나오면 firebase google 아이디로 로그인 - 완료됐다면 콘솔창에 Success 뜸 -와~
-
PWA 빌드 서비스 워커 동작 확인 방법개발 공부/PWA 2023. 9. 20. 08:52
뷰 프레임워크는 바로 브라우저에서 실행되지 않기 때문에 파일을 정적으로 만드는 빌드 과정이 필요함빌드해야 브라우저가 실행 가능한 자바스크립트 파일이 만들어짐. 배포를 위해 빌드하고 서비스 워커 동작 확인까지 해보기 1. 빌드 2. 빌드 후 프로젝트 폴더에 dist 폴더 생긴걸 볼 수 있음 -> Vue Cli가 웹팩을 통해 프로젝트 모든 소스파일 넣어주는 곳 3. 빌드 완료한 앱 실행 -> dist폴더 내 index.html 파일 실행함만약 여기서 보안 오류 ( UnauthorizedAccess , PSSecurityException ) 발생한다면아래 포스팅 참고하기 티스토리좀 아는 블로거들의 유용한 이야기, 티스토리. 블로그, 포트폴리오, 웹사이트까지 티스토리에서 나를 표현해 보세요.www.tisto..
-
보안 오류 PSSecurityException UnauthorizedAccess 해결 방법개발 공부/PWA 2023. 9. 20. 08:25
vscode 터미널에서 vue.js pwa 실행하는데 자꾸 보안 오류 뜸 serve : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\경로\AppData\Roaming\npm\serve.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go .microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + serve dist + ~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 1. Window PowerShell을 관리자모드로 실행 2. 아래 명령어 입력 Get-Ex..
-
Vue.js 프레임워크로 PWA 만들고 실행하기개발 공부/PWA 2023. 9. 20. 08:02
Node js 와 Vue-CLI 설치 완료된 상태로 진행해야됨 참고 : PWA SPA 프로젝트 생성 및 실행하기, node js 설치 SPA란? 단일 페이지 어플리케이션으로 사용자가 접속 후 다시 페이지를 리로딩하지 않고 필요한 부분만 로딩되는 형태. 적은 트래픽과 빠른 페이지 변환이 장점. Node js 설치 SPA 사용을 위해 node js rozy.tistory.com 1. 노드 패키지 Serve 설치 - 간단한 미니 웹 서버, 서비스워커 작동 여부 확인 npm install -g serve 2. 웹 호스팅으로 웹 배포를 위해 firebase-tools 패키지 설치 npm install -g firebase-tools 3. 패키지 설치 : 앱 실행에 필요한 패키지 자동 설치해줌 npm install..
-
Vue js SPA 프로젝트 생성 및 실행하기, node js 설치개발 공부/PWA 2023. 9. 19. 08:29
SPA란? 단일 페이지 어플리케이션으로 사용자가 접속 후 다시 페이지를 리로딩하지 않고 필요한 부분만 로딩되는 형태. 적은 트래픽과 빠른 페이지 변환이 장점. Node js 설치 SPA 사용을 위해 node js 설치 필요 1. 홈페이지 접속 후 LTS 버전으로 다운 2. 명령 프롬프트에서 Vue-CLI 설치 : vue cli가 기본적인 프로젝트 세팅 해줌 (폴더 구조, 웹팩 설정, 라이브러리 구성 등) C:\Users\user>npm install -g @vue/cli 3. 프로젝트 생성 - 신규 프로젝트 템플릭 설정 : 기본 또는 사용자 정의 중 선택 웹팩 모듈 설치 vs code 터미널 창에서 웹팩 모듈 설치할 폴더로 이동후 설치 진행 npm install UNABLE_TO_VERIFY_LEAF_S..