인트로 렌탈스튜디오 예약시 간단하게 웰컴가이드 를 제공하고 있다. 기존에는 MVP(minimum value production) 를 위해 구글 독스를 이용해 PPT 형식으로 만들었다. 하지만 가독성이 너무 좋지 않았고 브라우저별 조작(제대로 드래그가 안되는 등)이 원활하지 못했다. 홈페이지 개발의 갈증을 해소하고 싶은 만큼, 내가 직접 웰컴 가이드를 수정하고 싶다고 생각했다. 기존처럼 좌우로 스와이프 하는 형태의 웰컴가이드를 제작할까도 고민했지만, 많은 글을 전달해야 하는 정보 전달 특성 상 우리에게 익숙한 세로 스크롤 형태를 채택하게 되었다. 하지만 세로로 길게 되어있는 줄글의 형식 상 원하는 글로 바로 가는 것이 어려웠고, A부터 Z까지 다 훑어봐야 한다는 불편함이 있었다. 이를 해소하기 위해선 바로..
인트로 여러 공간에서 사용되는 API KEY가 존재하는데, 이를 한번에 변수처럼 관리하고 git에 업로드를 방지해야 한다. npm 라이브러리인, dotenv를 이용했다. 설정 npm install dotenv 를 하여 vue3에 해당 라이브러리를 추가한다. 최상위 폴더에 .env 파일을 추가한다. 파일 안에 필요한 API KEY를 작성한다. 💥 단, 앞에 VUE_APP_을 추가해야지 전역에서 정상적으로 인식한다. 추가로 전역 변수/상수의 경우 대문자로 작성하는 것이 일반적 규칙이다. 작성예) VUE_APP_API_KEY=abc!@#$ git에 업로드를 방지하기 위해, .gitignore에 위 파일을 추가한다. # local env files .env .env.local .env.*.local= main...
개발 환경 - Vue3 (v4.5.13) - typescript (v4.1.5) - vue-gtag-next (v1.14.0) 인트로 이번에 스튜디오 홈페이지를 개발하여 오픈했다. 프론트는 Vue3를 사용하였고, 백엔드는 따로 구성하지 않고 파이어베이스를 통해 진행하였고 호스팅까지 진행했다. 배포한 이후 몇명의 사용자가 오는지 측정하고자 하였는데, 그럴려면 DB에 사이트 조회수를 카운팅해야 했다. 물론 이것도 필요하긴 하지만, 그 추이를 파악하기 위해선 어드민 페이지도 필요했다. 당장의 MVP를 만들기엔 불필요한 부분이었다. 그리고아직 리얼타임 DB 적용해본적이 없다ㅎ 그래서 GA를 달기로 결정했다. 기본적으로 방문자 수 카운팅과 추이를 확인할 수 있었고, 많은 마케터들의 성과 측정 도구인 만큼 한번 사..