개발/Javascript

GA clientId 깔끔하게 가져오는 방법 (how to get the GA clientId)

이번 포스팅은 웹 자바스크립트(Javascript) 환경에서 GA(Google Analytics) clientId를 깔끔하게 가져오는 방법에 대해서 소개하고자 합니다. 저 또한 Nuxt.js(Vue)에서 GA 관련 로직을 작성하는 중에 새로운 방법을 알게 되어 공유하게 되었습니다. 기존방식 기존에 GA clientId를 가져오기 위해 사용했던 코드는 아래와 같습니다. ga 객체의 getAll 메서드를 활용해서 모든 trackers를 가져온 후 0번째 인덱스의 tracker를 가져온 후 clientId를 가져오는 예시입니다. ga.getAll()[0].get('clientId'); 변경 개선된 방식은 아래와 같습니다. window.ga객체가 loaded되면 콜백함수가 실행되고, 콜백함수의 인자값이 바로 t..

개발/Git

깃 커밋 메시지 컨벤션 (Git Commit Message Convention)

회사에서 팀 단위로 개발을 진행하거나 개인 토이 프로젝트를 하다보면 자연스럽게 Git과 같은 버전 관리 시스템을 사용하게 됩니다. 버전 관리 시스템을 사용한다면 특정 시점에 작업자의 수정사항이나 추가사항들을 명시하고 저장을 하는 행위인 커밋(commit)을 해야하죠. 하지만 바쁘다는 핑계로 또는 정말 단순히 컨벤션을 모른다는 이유로 커밋 메시지 작성을 소홀히 하지 않으셨나요? 저또한 회사에서 팀 동료들과 좀 더 긴밀하게 협업하기 위해 굉장히 기본적인 부분인 커밋 메시지 컨벤션부터 점검하고자 합니다. 커밋 메시지 컨벤션은 유다시티 커밋 메시지 컨벤션을 참고했고, 앞으로 커밋 메시지를 작성할 때 좋은 가이드가 될 수 있으니 참고해주시면 좋을 것 같습니다. Udacity Nanodegree Style Guid..

개발/Vue

Vue.js v-model 한글 사용 문제 초간단 해결 방법

ue.js를 사용하다보면, input 태그에 v-model 디렉티브를 사용해야될 경우가 굉장히 많습니다. 하지만, Vue에서 v-model 디렉티브를 활용할 때 한글과 같이 사용하면 조금 문제가 생기는데요. 영어를 사용할 때는 발생하지 않았지만, 한글에서는 왜 이러한 문제가 발생하는 것일까요? 현상 Vue에서 v-model 디렉티브를 사용할 때 일반적으로 아래와 같이 사용합니다. 영어와 같은 경우 정상적으로 양방향 바인딩이 되어 있음을 확인할 수 있습니다. 하지만 한글일 경우 어떻게 될까요? 한글을 타이핑하면 조금 문제가 발생하는데요. 발생하는 이슈는 아래와 같습니다. 한글을 입력할 때 키워드 데이터가 즉시 바인딩이 되는 것이 아닌 글자가 조합이 되어야 그제서야 바인딩이 되는 모습입니다. 왜 이러한 이슈..

개발/Nuxt.js

Nuxt.js에서 웹폰트 제대로 사용하는 방법

Nuxt.js로 프로젝트를 진행할 때 여느 때와 같이 main.css 내부에 @import로 webfont를 가져와서 사용하고 있는데, 어느 날 무언가 이상한 점을 발견했습니다. 개발환경에서는 웹폰트가 잘 적용되었기 때문에 "웹폰트가 잘 가져와졌구나"라고 생각했고, 프로젝트 배포를 위해 빌드 후 웹 서버에 올라간 Nuxt.js 프로젝트를 살펴보는데 뭔가 개발버전에서 맞춰놓은 간격과 위치가 미묘하게 다른 점을 발견하게 되었습니다. 폰트에 문제가 있음을 인지하게 되었고, 그 원인을 찾게 되었는데 @import 구문으로 가져오고 있던 웹폰트에 문제가 있었습니다. 프로젝트에서 사용하고 있었던 방법이 Nuxt.js 프로덕션(production) 모드에서 제대로 동작하고 있지 않음을 확인하고 다른 방법으로 변경함으..

개발/HTML5

iOS에서 input에 적용된 shadow 효과 제거하는 방법 (Remove iOS input shadow)

iOS에서 input 태그에 위와 같이 shadow 효과가 적용되는 점을 확인하게 되었습니다. iOS에서 input 태그에 기본적으로 적용된 shadow 효과를 제거하기 위해서는 CSS 속성 중에 appearance 속성을 제거함으로써 input 태그에 적용된 shadow 효과를 제거할 수 있습니다. appearance 속성 적용 예시는 아래와 같습니다. 예시코드 input[type=text] { /* Remove First */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } appearance 속성이 무엇인지 알고 싶다면 아래를 참고하세요. appearance (-moz-appearance, -webkit-appearance)..

개발/AWS

AWS S3 정적 웹사이트 호스팅하는 방법 (Hosting a static website on Amazon S3)

정적 웹 사이트를 호스팅하기 위한 방법에는 다양한 방법이 있습니다. Netlify를 활용하거나 Github를 활용해서 제한적이긴 하지만 무료 웹 사이트 호스팅이 가능합니다. 이외에도 GCP(구글 클라우드 플랫폼, Google Cloud Platform)이나 마이크로소프트 애저 그리고 AWS(Amazon Web Service)에서도 정적 웹사이트를 호스팅하는 환경을 제공하고 있습니다. 이번 포스팅에서는 Amazon S3 버킷에 정적 웹 사이트를 호스팅하는 방법에 대해서 소개하도록 하겠습니다. 서버 측 처리에 의존하지 않는다면 S3 버킷에 정적 웹 사이트를 호스팅하는 방법도 여러 방법 중 선택할 수 있는 좋은 대안 중 하나입니다. Amazon S3 버킷에 정적 웹사이트 호스팅하는 방법 Amazon S3 버킷..

개발/HTML5

HTML 모바일에서 전화걸기 예제(초간단) (How to Create a Click to Call Link Using HTML)

핸드폰에서 웹사이트를 이용할 때 아래와 같이 전화번호를 누르면 바로 핸드폰 기본 전화걸기 창이 뜨는 것을 본적이 있을 것입니다. 이번 포스팅에서는 HTML a 태그를 활용해서 전화걸기 기능을 간단히 구현하는 방법에 대해서 소개하도록 하겠습니다. HTML a태그를 활용해서 전화거는 방법 HTML a태그를 활용해서 전화거는 기능을 구현하는 방법은 굉장히 간단합니다. 코드는 아래와 같습니다. href 속성값에 url을 넣는 대신 tel:전화번호 형식으로 넣으면 끝! // 예제 전화번호: 123-1234-1234 // 실제 사용 예시 전화번호: 123-1234-1234 전화번호: 123-1234-1234 동작 예시 위에서 예시로 기입한 코드의 동작 원리는 아래와 같습니다. PC에서 href에 tel:전화번호 값..

개발/Javascript

자바스크립트에서 replaceAll 사용하는 방법

예전에는 자바스크립트(Javascript)에서 특정 문자를 모두 바꾸기(치환) 위해서 자바스크립트 문자열 객체의 replace 메서드와 정규표현식 조합으로 사용하곤 했습니다. 구현 예시 replace + 정규표현식 replace + 정규표현식 조합으로 구현하는 예는 아래와 같습니다. 정규표현식에서 gi는 g(모든 값에 대한 검사), i(대/소문자 구분 안함)을 뜻합니다. const str = 'dog dog test dog hello hi'; str.replace(/dog/gi, 'monkey'); // "monkey monkey test monkey hello hi" 하지만 최근에 ecma262 공식문서를 보면 자바스크립트(Javascript)에서 공식적으로 replaceAll 메서드를 제공해주는 것을..

개발/Javascript

동적으로 자바스크립트를 추가한 후 콜백받는 방법 (How to import the external JS with callback function)

외부에서 가져온 자바스크립트(Javascript)를 모두 받아온 후 콜백처리를 하고 싶은 경우가 있습니다. 한 예로 비동기로 웹 페이지에 카카오 자바스크립트(Javascript) SDK를 추가한 후, 특정 동작을 실행하는 경우입니다. 사용방법 // 동적으로 자바스크립트를 삽입하는 함수 // 자바스크립트가 모두 로드(load)되었을 때, // callback 함수 실행 const injectScript = (url, callback) => { const s = document.createElement('script') s.src = url; s.type = 'text/javascript' s.addEventListener('load', callback) document.head.appendChild(s) ..

개발/HTML5

input 커서(caret) 색상 바꾸는 방법 (How to change input box cursor color)

웹사이트에서 사용자의 입력 값을 받기 위해 input 태그를 사용하곤 하는데요. 사이트의 특색에 맞게 input 커서의 색상을 커스터마이징을 해야할 경우가 생기게 됩니다. 이때 색상을 바꾸는 간단한 방법에 대해서 알아보도록 하겠습니다. 커서 색상을 변경하는 방법 텍스트 색상을 상속받는 경우 기본적으로 input 커서의 색상은 텍스트의 색상을 상속받습니다. input 텍스트 색상을 변경하면 자동으로 커서의 색상 또한 변경되게 됩니다. input 텍스트 색상을 변경해 보도록 하겠습니다. input { color: blue; } 커서 색상만 변경하고 싶은 경우 글자색과는 다른 색상으로 커서 색상을 바꾸고 싶다면 CSS caret-color 속성을 사용하면 손쉽게 처리할 수 있습니다. 아래와 같이 스타일을 적용..

개발/HTML5

Input 태그 테두리 하이라이트 제거하는 방법 (How to remove the border highlight on an input)

HTML 태그 중 input 태그를 사용하다 보면 현재 사용자가 어떤 input 태그를 사용하고 있는지 활성화시켜주기 위해 강조해주는 하이라이팅 효과가 생기게 됩니다. 보통 하늘색 네모난 박스의 하이라이팅이 표시되죠. 하지만 해당하는 효과를 커스터마이징하기 위해 하이라이팅 효과를 제거해야될 경우가 생기게 됩니다. 해결방법 input태그의 outline 스타일 속성을 none 으로 설정하면 간단하게 해결할 수 있습니다. input:focus { outline: none; } 포커스(focus)된 태그(input:focus)의 아웃라인(outline)을 none으로 설정하는 코드입니다. 해당 코드는 모든 input 태그의 하이라이트 효과가 제거됩니다.

개발/Javascript

새창으로 form submit하는 방법 (How to open a new window on form submit)

자바스크립트(Javascript)에서 동적으로 html form 태그를 생성하고, 새창으로 submit하는 방법은 아래와 같습니다. go 만약 폼으로 생성한 새창의 크기를 조절하고 싶다면 3번째 파라미터로 새창의 크기를 조절하는 속성들을 추가하면 됩니다. // 새창의 크기를 조절하는 방법 (window resize) window.open( 'about:blank', 'auth-form', 'width=' + parseInt(window.innerWidth) * 0.3 + ',height=' + parseInt(window.innerHeight) * 0.3 + ',toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=0,left=0,top=0' )

개발/Git

깃 로컬 브랜치 한번에 정리하는 방법 (Delete all local git branches)

Git을 사용하다보면 master, develop 브랜치 이외에 나머지 feature 브랜치들을 한번에 하고 싶을 때가 있습니다. 아래 명령어는 모든 브랜치는 삭제하지만 "develop"이나 "master"와 같은 필수적인 브랜치는 유지시켜주는 간단한 명렁어입니다. git branch | grep -v "develop" | grep -v "master" | xargs git branch -D

개발/Vue

Vuex 모듈 state 깔끔하게 초기화하는 방법 (Reset Vuex Module State)

들어가기 전에 Vue 라이브러리로 서비스를 개발하다 보면 Vuex라는 상태 관리 도구를 사용하곤 합니다. Vuex는 애플리케이션의 상태 값을 하나의 객체로 관리할 수 있습니다. 하지만 서비스의 규모가 커지면 커질수록 모든 상태 값들을 단일 상태 객체 안에 넣고 관리하는 것은 굉장히 비효율적입니다. 이럴 경우 Vuex의 모듈(Modules) 컨셉을 사용하곤 하는데요. 이때 모듈에서 사용하고 있는 상태 값들을 초기화를 해야 될 경우가 생깁니다. 이번 포스팅에서는 Vuex 모듈에서 상태 값을 깔끔하게 초기화하는 방법에 대해서 다뤄보도록 하겠습니다. 예제코드 예시 1) 객체반환 함수로 구현 getDefaultState 함수는 초기 상태 값을 반환하는 함수입니다. 핵심은 getDefaultState 함수가 값을 ..

개발/Nuxt.js

nuxt core-js@3 사용하는 방법 (how to use core-js@3x with Nuxt.js)

corejs@2와 corejs@3는 모두 babel 7.4.0부터 지원되므로 2.6 Nuxt부터 두 버전 모두 지원하고 있습니다. core-js@3이 필요한 사항이 아니라면 core-js@2(기본값)를 사용하는 것이 좋습니다.(core-js@2에 대한 지침은 필수는 아니지만 권장됨) 적용 예시 2.6 Nuxt부터 core-js@3를 적용하는 방법은 간단합니다. 우선 아래와 같이 core-js@3 디펜던시를 설치합니다. yarn add -D core-js@3 @babel/runtime-corejs3 // or npm i -D core-js@3 @babel/runtime-corejs3 core-js@3와 관련된 의존성을 설치한 후 nuxt.config.js 파일에서 build 프로퍼티의 바벨 속성을 아래와 ..

개발/HTML5

HTML에서 가운뎃점 · | middle dot 쉽게 찍는 법

HTML에서 가운뎃점(· | middle dot)을 찍을 때 쉬운 방법이 있어서 공유합니다. 이 때는 HTML 유니코드를 활용하면 간단하게 해결할 수 있습니다. UNICODE U+000B7; HEX CODE· HTML CODE· HTML ENTITY· CSS CODE \00B7; // html example · // css example span { content: "\00B7"; } 예시 아래와 같이 HTML 문자 사이에 유니코드 문자를 넣어주면 아주 쉽게 가운데 점을 삽입할 수 있습니다.

개발/AWS

AWS CloudFront에서 사용자 기반 정보 사용하는 방법 (feat. CloudFront-Viewer)

AWS CloudFront 새로운 캐시 정책에서 사용자 위치 정보 헤더가 추가되었습니다. 이제 CloudFront를 구성해서 캐싱 및 원본 요청 정책을 더욱 세밀하게 지정할 수 있는 추가적인 위치 정보 헤더를 추가할 수 있습니다. 새로운 헤더를 사용하면 사용자의 국가 이름, 지역, 도시, 우편번호, 위도, 경도에 대한 원본 액세스와 캐시 동작을 더욱 세밀하게 제어할 수 있으며, 모든 것은 시청자의 IP 주소를 기반으로 합니다. 추가된 위치 정보 헤더와 샘플 값은 아래와 같습니다. 사용자의 디바이스 타입 감지를 위한 헤더 CloudFront-Is-Android-Viewer - CloudFront에서 사용자가 Android 운영 체제를 사용하는 디바이스라고 판단하면 true로 설정합니다. CloudFront..

개발/Google Cloud Platform

구글맵 API Key 간단하게 발급받는 방법 (Get an API Key | Maps JavaScript API)

웹사이트에서 구글 지도를 사용하기 위해서는 구글 지도 API 키를 발급받아야 합니다. 구글맵을 사용하기 위한 Maps JavaScript API 설정과 API 키 발급 과정에 대해서 설명하도록 하겠습니다. 과정은 굉장히 단순하니 단계별로 천천히 따라하시면 쉽게 적용할 수 있습니다. Google Map API Key 발급받는 방법 1. 구글 클라우드 플랫폼(Google Cloud Platform, GCP) 콘솔 사이트에 방문 https://cloud.google.com/maps-platform/ 해당 사이트로 이동 후 "시작하기" 혹은 상단의 "콘솔" 버튼을 눌러 진행해주세요. 2. 신규 프로젝트 생성 3. Maps Javascript API 설정 좌측 햄버거 메뉴 클릭 > API 및 서비스 > 라이브러리..

개발/Vue

Vue 클릭이벤트(click event) 여러개 설정하는 방법 (How to call multiple functions with @click in vue)

vue 템플릿에서 @click을 사용할 때 여러 개의 이벤트를 같이 사용하는 방법은 아래와 같습니다. 클릭 버튼 사용 예제 아래는 위 코드를 동작시킨 예시입니다. 버튼을 클릭했을 때 2개의 함수가 동시에 정상적으로 실행된 것을 확인할 수 있습니다. 2개 이상 클릭 이벤트를 연결했을 때도 잘 동작합니다.

개발/AWS

Elastic Beanstalk(EB)에 HTTPS 적용하는 방법

Elastic Beanstalk(EB) 환경에 HTTPS를 적용하기 위해서 사전에 AWS Certificate Manager(ACM)에서 SSL 인증서를 발급받아야 합니다. SSL 인증서를 발급받지 않았다면 인증서부터 발급하고 다음 단계들을 진행해주세요. 해결 방법 우선 준비된 Elastic Beanstalk 환경으로 이동합니다. Elastic Beanstalk 환경 좌측 메뉴에 구성을 클릭합니다. 구성으로 이동한 후 로드 밸런서에 Application Load Balancer에 대한 리스너를 추가할 것입니다. 로드 밸런서를 수정하기 위해 로드 밸런서 편집을 선택합니다. 만약 로드 밸런서가 없다면 용량 수정에서 로드 밸런서를 추가해주세요. 로드 밸런서 편집으로 이동하면 로드 밸런서에 대해 리스너를 지정할..