개발/Vue

VSCode에서 @vue/cli4, Prettier 그리고 Eslint 통합환경 구성하기

개발환경을 구성할 때 개발자의 실수와 팀과 맞지 않는 코딩컨벤션을 맞춰주기 위해 Eslint와 Prettier를 설정하는 것은 필수적입니다. ESLint ESLint는 코팅 스타일 가이드를 따르지 않거나 문제가 있는 코드나 안티 패턴을 찾기 위해 사용하는 Javascript linter 입니다. ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있습니다. 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출 해주므로 옳바른 코딩 습관을 갖도록 돕는 유용한 툴입니다. ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parser..

개발/기타

Chrome Extension을 활용해서 HTTP Header를 자유롭게 변경 및 추가하는 방법

들어가기 전에... 회사 내에서 웹뷰와 관련된 작업을 하는 경우가 많은데 그때마다 앱개발자 분들과 앱 그리고 웹 간에 커뮤니케이션 규약을 맞춰야 될 경우가 많았습니다. 예를 들어 앱에서 사용하고 있는 Auth Token이라던가 모바일웹일 경우가 아닌 실제 Android, iOS 애플리케이션에서 접속했는지에 대한 판별을 하기 위해서 웹뷰에서도 이러한 정보를 받아서 처리해야 될 경우들이 있습니다. 이러한 경우에 사용하는 방법이 Request Header와 UserAgent입니다. 하지만 매번 애플리케이션 내에서 웹뷰를 테스트하기에는 번거롭고 시간도 아깝습니다. 그래서 종종 Chrome Extension에서 Request Header를 조작할 수 있는 ModHeader를 활용해서 디버깅을 하곤 합니다. Mod..

개발/Google Cloud Platform

Google Cloud Functions와 Puppeteer 그리고 Cloud Scheduler를 활용해서 자동화 크롤러 개발하는 방법 (Node.js)

Google Cloud Functions와 Puppeteer을 활용해서 크롤링하는 방법을 익혀보고 더 나아가 Google Cloud Scheduler를 활용해서 크롤링 자동화까지 구현해보도록 하겠습니다. 해당 포스팅에서는 Google Cloud Functions, Puppeteer 그리고 Google Cloud Scheduler를 기본적으로 숙지하고 있다는 가정하에 진행하도록 하겠습니다. 간략하게 짚고 넘어가면 아래와 같습니다. Google Cloud Functions Google Cloud Functions는 클라우드 서비스를 빌드 및 연결하기 위한 서버리스 실행 환경입니다. Cloud Functions를 사용하면 클라우드 인프라와 서비스에서 발생하는 이벤트에 연결되는 단일 목적의 간단한 함수를 작성할..

개발/Third-party

카카오맵(Kakao 지도) API 초간단 사용방법 (for Web)

리액트 네이티브(React Native, RN)에서 카카오맵(Kakao 지도) API 사용하는 방법 🤚 시작하기 전에 카카오맵(Kakao 지도) Javscript API는 키 발급을 받아야 사용할 수 있습니다. 그리고 키를 발급받기 위해서는 카카오 계정이 필요합니다. 🔑 키 발급 과정 1. 카카오 개발자사이트 (https://developers.kakao.com) 접속 2. 개발자 등록 및 앱 생성 3. 웹 플랫폼 추가: 앱 선택 – [설정] – [일반] – [플랫폼 추가] – 웹 선택 후 추가 4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합다. (예: http://localhost:8080) 5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 ..

개발/Vue

extract-css-chunks-webpack-plugin Conflicting order. Following module has been added 에러 해결방법

Nuxtjs 버전을 올린 후 발생하는 extract-css-chunks-webpack-plugin 와 관련된 에러 해결 방법입니다. 아래는 에러에 관련된 내용입니다. [extract-css-chunks-webpack-plugin] Conflicting order. Following module has been added 해결방법 nuxt.config.js /* ** Build configuration */ build: { extractCSS: { ignoreOrder: true, } }

개발/Google Cloud Platform

GCP(Google Cloud Platform) App Engine에 Next(React SSR) Application 배포하는 방법(Deploy React+Next app to GCP Engine)

GCP App Engine에 Next Application을 배포하는 방법에 대해서 소개하도록 하겠습니다. AWS에 익숙하신 분들은 GCP App Engine과 AWS Elastic Beanstalk과 동일하다고 보시면 됩니다. 해당 포스팅은 GCP 회원가입 및 결제 등록 그리고 Nextjs의 기본지식에 대해서는 다루지 않습니다. Nextjs 설치 필자는 npx create-next-app 명령어를 사용해서 Nuxt 기본 보일러플레이트를 설치했습니다. 기존에 프로젝트가 존재하거나, 다른 방법을 아신다면 해당 방법을 사용하셔도 무방합니다. // install create-next-app npx create-next-app gcp-next-example Google Cloud SDK(gcloud) 설치하기 ..

개발/Javascript

자바스크립트 동등연산자(==)와 일치연산자(===) 차이

자바스크립트에는 추상적 같음 비교(이중 등호, 동등 연산자)와 엄격한 같음 비교(삼중 등호, 일치 연산자)가 있다. 가장 큰 차이점은 이중 등호는 두 값을 비교할 때 자동으로 형변환하여 같음을 비교하지만, 삼중 등호는 형변환을 수행하지 않고 비교한다. 이중 등호 연산자의 예시를 보자. 0 == false //true "" == false //true "" == 0 //true "0" == 0 //true [1,2] == "1,2" //true new String('hello') == 'hello' //true null == undefined //true이중 등호 연산자는 자동으로 형변환을 하고 비교하므로 위 예시는 모두 true를 return한다. 하지만, 삼중 등호 연산자일..

개발/Javascript

Web Storage API(localStorage, sessionStorage)그리고 Cookie

웹 스토리지 API (Web Storage API) 웹 스토리지 API(Web Storage API)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능입니다. 웹 스토리지 API와 쿠키의 기능 자체는 같지만(데이터 저장), 쿠키는 약 4KB(4096bytes)까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있습니다. 웹 스토리지 API 최신 스펙 확인 Web Storage (Second Edition) This specification defines an API for persistent data storage of key-value pair data in Web clients. This section describ..

개발/HTML5

DTD(Document Type Definition) - 문서 형식 정의

doctype이 무엇을 하는지 표준모드(standard mode)와 관용모드(quirks mode)의 차이 두 가지를 정의해보고자 한다. DTD란? 문서 형식 정의(DTD: Document Type Definition)는 마크업 문서의 요소와 속성등을 해석하는 기준을 명시하는 것이다. 문서 형식에는 HTML5, XHTML, HTML 3가지 유형이 존재한다. 이전 버전의 HTML(HTML2 ~ HTML4)은 SGML에 기반을 두어 만들어졌기 때문에 상세한 DTD 참조가 필요하며, 이 때문에 DOCTYPE을 선언하려면 공개 식별자와 시스템 식별자가 포함된 긴 문자열을 작성해야 한다. HTMl 4.01 Strict 모드로 문서 형식을 정의할 경우 DTD를 정의하지 않으면, 관용모드(quirks mode)로 렌..

개발/Nuxt.js

GCP(Google Cloud Platform) App Engine에 Nuxt(Vue SSR) Application 배포하는 방법(Deploy Vue+Nuxt app to GCP Engine)

GCP App Engine에 Nuxt Application을 배포하는 방법에 대해서 소개하도록 하겠습니다. AWS에 익숙하신 분들은 GCP App Engine과 AWS Elastic Beanstalk과 동일하다고 보시면 됩니다. 해당 포스팅은 GCP 회원가입 및 결제 등록 그리고 Nuxt의 기본지식에 대해서는 다루지 않습니다. Nuxt 설치 필자는 npx create-nuxt-app 명령어를 사용해서 Nuxt 기본 보일러플레이트를 설치했습니다. 기존에 프로젝트가 존재하거나, 다른 방법을 아신다면 해당 방법을 사용하셔도 무방합니다. // install create-nuxt-app npx create-nuxt-app gcp-nuxt-example // npx create-nuxt-app // or // np..

개발/Javascript

자바스크립트 호이스팅 (Javascript hoisting)

자바스크립트를 공부하는 사람들은 호이스팅이라는 용어를 접해본 경험이 있을 것이다. 정의를 내려보기 전에, 아래의 예제를 한번 살펴보도록 하자. function greeting() { console.log('hello'); } greeting();greeting 함수를 호출 할 때, 예상대로 hello 문자열이 console에 기록이 될 것이다. 하지만 함수를 선언하기 전에 실행하면 어떻게 될까? greeting(); function greeting() { console.log('hello'); }위 예시는 신기하게도 처음 예시와 동일하게 hello 문자열을 콘솔창에 기록한다. 이것이 바로 호이스팅이 동작하는 방식이다. 대부분 이 호이스팅 동작 방식을 설명할 때, 선언한 변수와..

개발/jQuery

[jQuery All in One] 특정 요소의 앞쪽에 원하는 컨텐츠를 삽입하는 방법 - . prependTo()

jQuery prependTo 메서드는 지정한 요소의 자식 요소들의 가장 앞쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 unshift 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .prependTo(target) 설명 : 일치하는 요소를 대상의 끝에 삽입합니다. .prependTo(target) target Type: Selector or htmlString or Elem..

개발/jQuery

[jQuery All in One] 특정 요소의 앞쪽에 원하는 컨텐츠를 삽입하는 방법 - .prepend()

jQuery prepend 메서드는 지정한 요소의 자식 요소들의 가장 앞쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 unshift 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .prepend(target) 설명 : 특정 요소 앞에 컨텐츠를 삽입합니다. .prepend( content [, content ] ) content Type: htmlString or Element..

개발/jQuery

[jQuery All in One] 특정 요소에 원하는 요소를 삽입하는 방법 - .html()

jQuery html 메서드는 지정한 요소의 자식 요소에 원하는 컨텐츠를 삽입합니다. Javascript 메서드 중에 innerHTML을 떠올리시면 됩니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .html() 설명 : 일치하는 요소 집합에서 첫 번째 요소의 HTML 내용을 가져옵니다. .html() 이 메소드는 매개변수를 받지 않습니다. 이 방법은 XML 문서에서 사용할 수 없습니다. HTML 문서에서 .html ()을 사용하여..

개발/jQuery

[jQuery All in One] 특정 요소의 뒤쪽에 원하는 컨텐츠를 삽입하는 방법 - .appendTo()

jQuery appendTo 메서드는 지정한 요소의 자식 요소들의 가장 뒤쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 push 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .appendTo(target) 설명 : 일치하는 요소를 대상의 끝에 삽입합니다. .appendTo(target) target Type: Selector or htmlString or Element or..

개발/jQuery

[jQuery All in One] 특정 요소의 뒤쪽에 원하는 컨텐츠를 삽입하는 방법 - .append()

jQuery append 메서드는 지정한 요소의 자식 요소들의 가장 뒤쪽에 원하는 컨텐츠를 삽입합니다. Javascript 배열에서 push 메서드를 생각하시면 이해가 편할 것 같습니다. .append() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .appendTo() - 특정 요소의 뒤쪽에 컨텐츠를 삽입 .prepend() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .prependTo() - 특정 요소의 앞쪽에 컨텐츠를 삽입 .html() - 특정 요소에 html을 삽입 jQuery version: 3.4.1 .append( content [, content ] ) 설명 : 매개변수로 지정된 컨텐츠를 일치하는 요소의 끝에 삽입합니다. .append( content [, content ] ) content Type..

개발/CSS3

[크로스 브라우징] IE9에서 자동으로 이미지 높이값을 default size로 계산하는 경우

IE에서 height auto를 정의해주지 않으면, 기본적으로 이미지의 고유 높이값을 자동삽입한다.

개발/jQuery

[jQuery All in One] 일치하는 요소 복사하는 방법 (clone)

jQuery version: 3.4.1 .clone([withDataAndEvents]) 설명 : 일치하는 요소를 깊은 복사(deep copy) 합니다. .clone([withDataAndEvents]) withDataAndEvents (default: false) Type: Boolean 이벤트 핸들러와 데이터를 요소와 함께 복사해야하는지 여부를 나타내는 Boolean 값입니다. .clone([withDataAndEvents][, deepWithDataAndEvents]) withDataAndEvents (default: false) Type: Boolean 이벤트 핸들러와 데이터를 요소와 함께 복사해야하는지 여부를 나타내는 Boolean 값입니다. deepWithDataAndEvents (defaul..

개발/HTML5

inline vs block vs inline-block 차이점 알아보기

inline vs block vs inline-block 속성을 비교해보자. display: inline ? 대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다. width/height 적용불가 margin/padding-top/bottom 적용불가 line-height를 원하는대로 사용할 수 없다. display: block ? block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 div가 있다. display: inline-block ? inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다. 기본적인 특징은 inline 속성과 비슷한데 (줄바..

개발/AWS

AWS Cognito 사용자 지정 속성 추가하는 방법

사용자 지정 속성 사용자 풀에 사용자 지정 속성 25개까지 추가할 수 있습니다. 사용자 지정 속성의 최소 및/또는 최대 길이를 지정할 수 있습니다. 단, 사용자 지정 속성의 최대 길이는 2,048자를 넘을 수 없습니다. 각 사용자 지정 속성: 문자열 또는 숫자로 정의할 수 있습니다. 필수 항목이 될 수 없습니다. 사용자 풀에 추가된 후에는 삭제 또는 변경할 수 없습니다. Amazon Cognito 허용 한도 내에 있는 문자 길이의 이름을 가질 수 있습니다. 자세한 내용은 Amazon Cognito의 제한 값 단원을 참조하세요. 참고 역할 기반 액세스 제어에 대한 규칙 설정 및 코드에서는 표준 속성과 구분하기 위해 사용자 지정 속성에 custom: 접두사가 필요합니다. 사용자 지정 속성 추가를 하게 되면 ..