또치의 삽질 보관함 또치의 삽질 보관함

vue

• [Vite] 로컬 개발환경에서 https 도메인 설정하기

  Javascript & TypeScript 2022. 12. 24. 22:40

  React, Vue, Svelte와 같은 프론트엔드 기반 웹 서비스에서 실제 운영중이거나 개발 된 주 도메인의 쿠키(Cookie)값을 확인하기위해, 로컬 환경이지만 마치 실제 운영중인 사이트의 서브 도메인(sub domain)처럼 사용해야 하는 경우가 있다. 이를 해결하려면 아래와 같은 준비가 필요하다. 1. @vitejs/plugin-basic-ssl 설치 @vitejs/plugin-basic-ssl 모듈 설치 및 적용을 통해 https 통신이 가능하도록 해야 한다. 2022.12 Vite4 설명상에선 자체 서명된 인증서도 사용할 수 있다고 하나 정상동작하지 않는다. vite.config.js import { sveltekit } from '@sveltejs/kit/vite'; import basicS..

  Read More
• [VSCode] Launch Chrome 설정으로 React 디버그시 OAuth 테스트가 가능하도록 설정.

  ETC 2021. 2. 10. 18:23

  Firebase 인증기능 적용 후 디버그시 "로그인할 수 없음" 화면과 함께 제대로된 디버깅작업을 수행할 수 없는 문제가 생겼다. 이를 해결하려면 launch.json의 config값에 userDataDir 속성을 추가하고 값을 false로 설정해야한다. { "name": "Launch Chrome", "request": "launch", "type": "pwa-chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}", "userDataDir": false } 출처는 아래와 같다. visual studio code - Debugging a firebase auth app from vscode and chrome not working..

  Read More
• [VSCode] NodeJS, Vue등 javascript 기반 프로젝트 간단하게 디버깅 모드 실행하기

  ETC 2021. 1. 23. 21:37

  VSCode 에서 간단하게 디버깅하는 방법이다. Windows에서 테스트했다. VSCode에 한글 확장을 설치하지 않았으므로, 설명의 메뉴나 스크린샷은 모두 영어로 나온다. 1. Chrome 설치 (크로미움 엣지가 없을 경우) 크롬 기반의 브라우저로 디버깅이 되는 것 같다. 엣지만 설치된 환경에선 실패했다. lanuch.json 파일을 만들어서 적용한다면 가능할 수 있지만 "간단하게"가 주목적이므로 설정작업에 손 안대는 방법으로 진행하겠다. (님크없?) 2. 디버깅할 javacript 기반 프로젝트 열기 디버깅할 프로젝트 폴더를 VSCode로 연다. 3. javaScript Debug Terminal 실행 옆 메뉴란에 [Run] -> [javascript Debug Terminal] 을 선택하거나, VS..

  Read More
• [VueJS] Gridsome을 이용한 정적페이지 생성

  Javascript & TypeScript 2020. 8. 16. 18:26

  Gridsome(길그리섬이 아니다.)은 VueJS 기반의 정적페이지 생성 도구이다. React의 Gatsby와 유사한 점이 많지만 gatsby와 달리 언급은 적은편이다. Vue 개발 커뮤니티에서 만든 vuepress도 존재하지만 문서작성에 최적화된 생성도구이다 보니 블로그 쪽은 그닥 이쁘지 않다. 반면 Gridsome은 Getsby처럼 Starter와 Plugin의 조합으로 여러 유형의 사이트 제작에 도움을 준다. Gridsome을 Cli 툴이다. 따라서 npm이나 yarn으로 grobal 설치를 해야한다. npm install --global @gridsome/cli 설치후엔 아래와 같은 명령어로 프로젝트를 생성할 수 있다. gridsome create {생성할 프로젝트명} 생성한 프로젝트 디렉토리로 ..

  Read More