개발/Third-party

카카오톡 링크 공유 API 초간단 사용방법

카카오 개발자 지원 사이트가 굉장히 깔끔하게 변경되었습니다! 개인적으로 이전 사이트보다 깔끔하고 사용하기 편리하게 구조가 잡힌 느낌이네요. 이전에 웹(Web) 서비스에서 카카오맵 API를 활용하는 방법에 대해서 소개했는데, 이번 포스팅에서는 카카오 링크 공유 API를 사용하는 방법에 대해서 소개해드리도록 하겠습니다. 사전 설정 카카오 링크 공유 기능을 구현하기 위해서는 카카오 개발자 지원 사이트에 로그인을 하셔야 합니다. 상단에 배치된 메뉴에서 내 애플리케이션이나 로그인을 누르시면 로그인을 하실 수 있습니다. 저는 내 애플리케이션을 통해서 로그인을 했기 때문에 바로 내 애플리케이션 페이지로 이동한 모습입니다. 애플리케이션 추가 테스트를 위해서 애플리케이션을 추가하겠습니다. 애플리케이션 추가하기 버튼을 누..

개발/Javascript

자바스크립트로 텍스트 암호화 복호화 하는 방법 (JavaScript string encryption and decryption)

자바스크립트로 개발을 하다보면 텍스트를 암호화해야되는 순간이 찾아올 경우가 생깁니다. 이번 포스팅에서는 자바스크립트로 텍스트를 암호화, 복호화하는 방법에 대해서 소개해드리도록 하겠습니다. 라이브러리 설치 암호화, 복호화 라이브러리 crypto-js를 설치합니다. 제가 개인적으로 텍스트를 암호화할 때 편하게 사용한 경험이 있어서 저는 crypto-js를 사용합니다. npm install crypto-js // or yarn add crypto-js 암호화 복호화 헬퍼함수는 아래와 같습니다. encrypt, decrypt 헬퍼함수의 key는 process.env.PRIVATE_KEY처럼 환경변수로 처리하면 됩니다. import CryptoJS from "crypto-js"; export const encry..

개발/Vue

Vuex 제대로 사용하는 방법 (Vuex의 기초부터 심화까지)

Vuex 란? vuex는 vue.js 애플리케이션을 위한 상태 관리 라이브러리입니다. 모든 컴포넌트들에서 접근 가능한 중앙 집중식 데이터 저장소입니다. 모든 데이터 흐름을 중앙에서 관리함으로써 예측 가능한 애플리케이션을 구현할 수 있습니다. Vue의 공식 devtools 확장프로그램과 통합해서 사용하면 훨씬 사용하기 쉬워집니다. 시작하기 (Vuex 설치 방법) vue-cli를 사용해서 vue 프로젝트를 세팅합니다. vue create vuex-test vue 프로젝트를 세팅했다면 vuex 라이브러리를 설치해주세요. yarn add vuex // or npm install vuex --save Nuxt에서는 기본적으로 Vuex를 지원함으로 따로 설치할 필요가 없습니다! Vuex Store Nuxt.js가 ..

개발/AWS

코그니토 커스텀 속성 삭제하는 방법 (AWS Cognito delete-custom-attributes)

회사에서 AWS Cognito를 활용해서 회원 인증처리를 하고 있는데 작업을 하다보니 커스텀 속성 값을 삭제해야될 상황이 생겼습니다. 그래서 구글링을 해봤는데... Custom attributes cannot be removed or changed once they are added to the user pool. 커스텀 속성값들을 삭제할 수 없다니 이건 너무 불편한 것 아닙니까? 커스텀 속성값을 삭제하려면 유저 풀을 다시 생성해야된다니요... 확장성은 개나줘버리라는 정책을 가지고 서비스하고 있네요. 개선이 필요한 부분이라고 생각하빈다. 사내에서 Cognito를 활용해서 인증 프로세스를 구현할 때 내부 정책을 제대로 정하고 사용하지 않으면 꽤나 골치아플 수 있다고 생각합니다. 코그니토를 사용하시면 이 부..

개발/HTML5

html img 태그에 디폴트 이미지 적용하는 방법 (show default image if image not found in HTML 5)

html img 태그 src 속성에 깨진 이미지 경로를 넣으면 아래와 같이 아무 이미지도 안나오게 됩니다. 하지만 이때 깨진 이미지 경로일 경우 디폴트 이미지로 설정하는 방법이 있습니다. onerror 이벤트를 활용하면 됩니다. img 태그 디폴트 이미지 설정 예시는 아래와 같습니다. // onerror 사용 예시 // or // 이벤트 핸들러 vue에서는 @error를 사용해서 처리하면 됩니다. // vue에서 사용하는 방법

개발/Javascript

자바스크립트에서 SCSS 변수 사용하는 방법(Share SCSS Variables with Javascript)

사전 요구 사항 프로젝트에 구성되어있는 webpack에서 sass를 사용할 수 있게 구성해야 됩니다. 사용방법 자바스크립트에서 SASS(SCSS) 변수를 사용하는 방법은 SCSS의 export구문을 사용하면 됩니다. SCSS의 변수를 관리하는 variables.scss에 하단에 export 구문을 사용하고 사용하고 있는 SCSS 변수들을 그 내부에 추가합니다. // variables.scss $white-color: #fcf5ed; $dark-color: #402f2b; $light-color: #e6d5c3; $medium-color: #977978; $alert-color: #cb492a; $light-black-color: #706e72; $black-color: #414042; :export { ..

개발/Third-party

[자바스크립트/Javascript] 구글맵(Google Map) API에서 커스텀 마커(Custom Marker) 구현하는 방법 (Add Custom Markers with the Google Maps JavaScript API)

우리는 웹 개발을 하다 보면 구글맵, 구글지도(Google Map)을 다루는 경우가 종종 있습니다. 그때마다 구글맵에 우리가 원하는 위치를 표현하기 위해서 마커를 사용하곤 하죠. 기본적인 마커 구현으로 끝나는 경우도 있지만 구현하는 서비스 특색에 맞게 커스텀 마커를 적용해야 되는 경우가 있습니다. 하지만 구글맵에서 제공하고 있는 API의 마커(Marker)를 활용해서 우리의 서비스에 맞는 커스텀 마커를 구현하기에는 굉장히 어려움이 많습니다. (커스터마이징 하기 너무 까다롭습니다.) 이번 포스팅에서는 Google Map API에서 제공하는 OverlayView 클래스를 활용해서 커스텀 마커(Custom Marker)를 구현해보도록 하겠습니다. 들어가기 전에 저는 이번 포스팅에서 Vue 개발환경에서 구글맵 ..

개발/Nuxt.js

nuxt-link와 클릭 이벤트(click event)를 같이 사용하는 방법

nuxt-link와 click 이벤트를 같이 사용해야 될 경우가 있습니다. nuxt-link에 @click.native를 활용하면 간단하게 해결할 수 있습니다. nuxt-link는 vue-router의 router-link를 활용하고 있으니 router-link에서도 동일하게 동작할거라 기대할 수 있습니다. 이동 하지만 만약 nuxt-link를 컴포넌트로 빼서 이벤트 Emit을 활용해서 클릭이벤트를 사용하려고 하면 정상적으로 동작하지 않습니다. 이동 해결방법 해결방법은 조금 편법이긴 하지만 이벤트 핸들링 방식으로 이벤트 핸들러를 연결하는 것이 아닌 props에 이벤트를 전달해서 직접 연결하는 방식으로 처리합니다. 이동 마무리 이벤트 발생(Event Emit)은 컴포넌트의 통신 방법 중 하위 컴포넌트에서 ..

개발/React Native

리액트 네이티브 WebView iOS에서 postMessage가 동작하지 않을 때 해결하는 방법 (React Native WebView postMessage does not work)

리액트 네이티브(React Native, RN) Expo에서 웹뷰(Webview) 작업을 할 때, 앱과 웹 사이에서 커뮤니케이션을 하기 위해서 postMessage 메서드를 활용합니다. 하지만 안드로이드에서 postMessage 처리하는 방식과 iOS에서 postMessage를 처리하는 방식이 조금 다릅니다. 의존성 버전 "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz" "expo": "~36.0.0" 해결방법 안드로이드 플랫폼에서는 document 객체에 message 이벤트 리스너를 등록하고, iOS 플랫폼에서는 window 객체에 message 이벤트 리스너를 등록하면 해결됩니다. 안드로이드(Android..

개발/Nuxt.js

nuxt.js에서 디바이스 타입 체크(감지)하는 방법(detect device)

nuxt.js에서 디바이스 타입(iOS, android, macOS, windows)에 따라서 분기처리를 해야될 경우가 생길 수 있습니다. 이때 nuxt.js에서 디바이스 타입을 체크하는 방법은 @nuxtjs/device 모듈을 활용하면 간단하게 처리 가능합니다. @nuxtjs/device 모듈은 서버/클라이언트에서 굉장히 손쉽게 디바이스를 체크할 수 있도록 도와줍니다. 설치방법 yarn이나 npm을 활용해서 @nuxtjs/device 모듈을 설치합니다. npm i @nuxtjs/device // or yarn add @nuxtjs/device nuxt.config.js에서 modules에 @nuxtjs/device를 추가합니다. // nuxt.config.js { modules: [ '@nuxtjs/d..

개발/React Native

[리액트 네이티브(React Native, RN)] rn-sliding-up-panel 모듈에서 ScrollView 컴포넌트를 사용하는 방법(Enable ScrollView inside rn-sliding-up-panel module)

rn-sliding-up-panel 모듈이란? 아래와 같은 동작을 하는 UI 컴포넌트입니다. rn-sliding-up-panel Draggable sliding up panel implemented in React Native www.npmjs.com 의존성 버전 (dependencies version) "expo": "~36.0.0", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz" rn-sliding-up-panel 모듈에서 ScrollView 컴포넌트를 사용하는 방법 rn-sliding-up-panel 모듈에서 제공하는 Sli..

개발/React Native

[리액트 네이티브(React Native, RN)] 기기 글자 크기 조정 제한하는 방법

의존성 버전 (dependencies version) "expo": "~36.0.0", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", 리액트 네이티브 앱을 개발하다보면 디바이스에서 설정하는 글자 크기와 스타일에 따라서 애플리케이션 폰트 사이즈가 조정되는 것을 볼 수 있습니다. 우리가 사용하는 디바이스는 디바이스 별로 설정에서 글자 크기와 스타일을 조정할 수 있는 기능을 제공합니다. 문제는 글자 크기와 스타일에서 조정하는 크기들이 애플리케이션의 폰트 사이즈까지 반영이 된다는 점입니다. (물론 폰트 크기 조정을 제한하는 것은 좋은 ..

개발/Javascript

자바스크립트에서 CSS 미디어쿼리(Media Queries)를 활용해보자 (How To Use Media Queries in JavaScript) - matchMedia

반응형 웹사이트를 개발할 때 CSS 미디어쿼리를 활용해서 사용자의 화면 크기에 따라서 스타일을 적용했습니다. 하지만 종종 자바스크립트에서도 이러한 반응형에 따른 분기처리될 로직이 존재합니다. 그에 따라서 매번 스타일 따로 자바스크립트 로직 따로 분기처리를 해가면서 작업을 하기에는 굉장히 번거롭고 까다롭습니다. CSS에서 반응형 웹을 개발하기 위해 자주 사용하는 기능인 미디어쿼리(Media Queries)! 자바스크립트에서도 사용할 수 있는 것 알고 계셨나요? 자바스크립트(JavaScript)에도 CSS의 미디어쿼리(Media Queries)와 같은 matchMedia 메서드가 존재합니다. 오늘은 자바스크립트에서 CSS 미디어쿼리를 활용하는 방법에 대해서 알아보도록 하겠습니다. 구문 mqList = win..

개발/React Native

[리액트 네이티브(React Native, RN)] 앱과 웹뷰(Webview) 사이에서 인터페이스를 활용해 커뮤니케이션(통신)하는 방법(react native communicate between app webview)

리액트 네이티브(React Native, RN)에서 코드를 구현하다보면 웹뷰(Webview)와 커뮤니케이션을 해야되는 상황이 생기는데요. 이때 리액트 네이티브에서는 인터페이스(Interface)를 활용해서 웹뷰와 커뮤니케이션(통신)을 할 수 있게 제공해주는 기능들이 존재합니다. 이번 포스팅에서는 이러한 기능을 소개하고, 앱 부분에서 처리하는 부분과 웹뷰에서 처리하는 부분을 나눠서 설명을 하도록 하겠습니다. 웹뷰 -> 앱 웹뷰(Webview) / 웹 코드 onMessage 이벤트를 활용한 간단한 예시를 다뤄보도록 할까요? onMessage 이벤트가 발생하는 조건은 웹뷰에서 ReactNativeWebView.postMessage가 실행되어야 됩니다. ReactNativeWebView.postMessage의 ..

개발/Nuxt.js

nuxt/gmap에서 height 100% 적용하는 방법(google map 100 height)

nuxt/gmaps 모듈은 nuxt(vue ssr) 프로젝트에서 간단하게 구글맵을 사용할 수 있게 해주는 라이브러리입니다. nuxt/gmaps에서 부모 요소의 높이값에 따라서 구글맵의 높이값을 가변으로 적용하는 방법을 소개합니다. Gmap 컴포넌트에는 구글맵이 렌더링됩니다. Gmap 컴포넌트는 기본적으로 구글맵의 높이값을 400px로 고정적으로 렌더링합니다. 이 값을 부모요소의 높이에 따라서 가변으로 변경하는 방법이 존재합니다. 부모 요소에 position속성을 relative로 세팅한 후 내부 Gmap__Wrapper 클래스 요소에 position속성을 absolute로 적용합니다. .gmap-holder 높이값에 따라서 구글맵 영역이 확장되는 예시입니다. 기본적인 google maps 라이브로리를 활..

개발/Javascript

자바스크립트(Javascript)로 정말 쉽게 클립보드 복사하기 기능 구현하는 방법

대부분의 사이트에서 URL을 공유하기 위해 텍스트 클립보드 카피 기능을 제공하고 있습니다. 제가 예시로 든 Ant Design 말고도 정말 많은 서비스에서 이렇게 사용자들에게 편리함을 제공하기 위해 클립보드 복사를 애용하고 있습니다. 이렇게 간편한 클립보드 기능은 직접 구현하는 방법도 있고 clipboard.js라는 라이브러리를 활용해서 쉽게 구현하는 방법도 있습니다. 하지만 직접 구현하는 방법도 굉장히 간단하기 때문에 굳이 라이브러리를 설치하지 않고 직접 구현하는 것도 좋은 방법이라고 생각합니다. 중요한 점은 ClipboardAPI는 WEB API 최신 스펙을 기준으로 사용되고 있으므로, 아직 지원되지 않는 브라우저가 많은 점은 유의해야합니다. 브라우저 호환성 WEB API 최신 스펙을 기준으로 사용되..

개발/Third-party

카카오톡 링크 공유 API ErrorCode(4002) 에러 간단하게 해결하는 방법 (Javascript SDK 카카오톡 링크 공유 API)

카카오톡 링크(Kakaotalk link) 공유 API를 사용하다보면 ErrorCode(4002)를 맞이하는 순간이 올 수 있습니다. 해당 에러코드는 카카오 개발자에 해당 프로젝트에서 사용하는 플랫폼에서 현재 도메인을 허용하지 않았기 때문에 발생하는 이슈입니다. 이슈는 아래와 같은 화면으로 노출됩니다. 카카오 로그인을 구현할 때 했던 작업과 동일하게 웹 플랫폼에 사이트 도메인을 추가해야 합니다. 사이트 도메인을 추가하는 방법을 모르시는 분은 애플리케이션 등록 가이드를 참고해서 반영하면 됩니다. 사이트 도메인과 포트까지 정확하게 일치해야 카카오에서 제공하는 Javascript SDK의 API에서 제공하는 기능들을 사용할 수 있습니다. 문제의 해결 포인트는 카카오 개발자에서 등록한 프로젝트에서 사용하는 플랫..

개발/React Native

리액트 네이티브(React Native, RN)에서 카카오맵(Kakao 지도) API 사용하는 방법

Dependencies version react-native-webview@8.1.2 react-native@0.61.4 expo@~36.0.0 리액트 네이티브(React Native, RN)에서 카카오지도를 사용하는 방법은 웹뷰(Webview)를 활용하면 아주 간단하게 구현할 수 있습니다. 우선 react-native-webview 모듈을 사용해서 WebView 컴포넌트를 추가합니다. 저는 Location의 이름을 가진 stateful component를 생성하겠습니다. // react native screen view import { WebView } from "react-native-webview"; export default class Location extends Component { ... r..

개발/Javascript

자바스크립트(Javascript, Node.js)에서 랜덤 문자열 생성하는 방법(Generate random string/characters in JavaScript)

자바스크립트(Javascript, Node)에서 랜덤 문자열을 간단하게 생성하는 방법은 uuid 모듈을 활용하면 됩니다. uuid 모듈의 v4활용하면 간단하게 랜덤 문자열을 생성할 수 있습니다. 자세한 내용은 여기에서 문서를 참고하세요. // ES6 module syntax import { v4 as uuidv4 } from 'uuid'; var id = uuidv4(); // "110ec58a-a0f2-4ac4-8393-c866d813b8d1" // CommonJS syntax const { v4: uuidv4 } = require('uuid'); uuidv4(); // ⇨ '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed' 만약 의존성없이 코드를 구현하고 싶으시다면, 아래와 같이 직..

개발/기타

웹 브라우저 별 query parameter(url querystring) 최대 길이 제한

웹 브라우저마다 서로 다른 query parameter limit 정책을 가지고 있습니다. query parameter를 다룰 때는 지원하는 웹 브라우저의 이러한 최대 길이 제한에 대해서 숙지하고 작업을 하는 것이 안전합니다. Microsoft Internet Explorer (Browser) Microsoft states that the maximum length of a URL in Internet Explorer is 2,083 characters, with no more than 2,048 characters in the path portion of the URL. Attempts to use URLs longer than this produced a clear error message in In..