개발/Google Cloud Platform

[Google Cloud Functions] Cannot deploy functions; The engine "node" is incompatible with this module. Expected version ">=10" 에러 해결방법

Node v10.16.3 GCF을 배포하기 위해서 gcloud deploygcloud functions deploy function1 --trigger-http --runtime nodejs10 --memory 1024MB --region asia-northeast1 명령어를 실행했는데 아래와 같은 에러가 발생 (gcloud.functions.deploy) OperationError: code=3, message=Build failed: {"error": {"canonicalCode": "INVALID_ARGUMENT", "errorMessage": "`yarn_install` had stderr output:\nwarning package.json: No license field\nFATAL ERROR..

개발/AWS

[AWS Cognito] A client attempted to write unauthorized attribute 에러 해결방법

Cognito Custom Attribute를 추가하는 과정에서 A client attempted to write unauthorized attribute 에러가 발생 attributes 목록을 구성해서 cognitoUser의 updateAttributes 메서드를 활용해서 속성을 업데이트를 하려고 했으나 실패 attributes = [ { Name: 'name', Value: '박경두' }, { Name: 'first_ename', Value: 'KYUNGDOO' }, { Name: 'last_ename', Value: 'PARK' }, { Name: 'phone', Value: '01047595398' }, { Name: 'gender', Value: 'm' } ] const list = attrib..

개발/AWS

[AWS Cognito] 이메일 인증 안하고 사전 로그인 시키는 방법 (Cognito without Verifying Email)

AWS Cognito의 기본 인증 프로세스에서는 이메일 가입을 할 때 이메일 인증절차를 거치게 되어있습니다. 하지만, 이메일 인증절차 없이 가입을 시켜야 될 상황이 생길 수 있습니다. 이번 포스팅에서는 이메일 인증을 하지 않고 사전 로그인시키는 방법에 대해서 알려드리도록 하겠습니다. 우선 Cognito UserPool에 진입한 후 Triggers/Pre sign-up을 보시면 가입 전 람다 함수를 설정할 수 있는 패널을 확인하실 수 있습니다. 람다 함수를 추가하기 위해서는 함수를 생성해야됩니다. 아래처럼 람다 함수를 작성해주고 함수를 배포합니다. exports.handler = (event, context, callback) => { // autoConfirmUser 플래그를 true로 설정해주면 인증없..

개발/React Native

[React Native] fontFamily fontName is not a system font and has not been loaded through Font.loadAsync.

Custom Font를 활용하기 위해 spoqa 폰트를 import하는 과정에서 아래와 같은 문제가 발생했습니다. fontFamily "spoqa-regular" is not a system font and has not been loaded through Font.loadAsync. - If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system. Dependencies React Native v0.61 해결방법 state = { loading: true }; async componentDidMount() { await Fon..

개발/React Native

[React Native] ViewPagerAndroid has been removed from React Native 문제 해결방법

React Native의 react-native-swiper 라이브러리를 활용해서 스와이프를 구현하려고 하는데 아래와 같은 에러가 발생했습니다. ViewPagerAndroid has been removed from React Native. It can now be installed and imported from 'react-native-viewpager' instead of 'react-native'. Dependencies React Native v0.61 react-native-swiper v1.5.14 해결방법 yarn remove react-native-swiper yarn add react-native-swiper@nightly react-native-swiper를 제거한 후 react-nat..

개발/Google Cloud Platform

Serverless Framework를 활용해서 Google Cloud Functions 배포하는 방법

Serverless Framework를 활용해서 Google Cloud Functions에 배포하려면 우선 Serverless Framework CLI를 설치해야 됩니다. macOS & Linux curl -o- -L https://slss.io/install | bash Windows choco install serverless YARN or NPM yarn global add serverless // or npm install -g serverless serverless --version을 통해서 Serverless가 정상적으로 설치되었는지 확인합니다. 아래와 같이 Serverless Framework의 정보가 나오면 정상적으로 설치된 것입니다. 자 Serverless를 설치했으니 CLI를 활용해서 ..

개발/React Native

[React Native] React Navigation bottom-tabs에 custom icon 적용하는 방법

리액트 네이티브 라이브러리 @react-navigation/bottom-tabs을 사용할 때 custom icon을 적용하는 방법에 대해서 설명하겠습니다. React Native와 React Navigation 버전정보는 아래와 같습니다. 꼭 참고하시기 바랍니다. Dependencies React Native v0.61 @react-navigation/bottom-tabs v5.0.7 저의 메인 라우트 설정은 아래와 같습니다. active와 inactive에 따른 이미지 처리를 하기 위해 각 이미지를 각 라우트의 property로 설정해뒀습니다. export const mainRoutes = [ { name: "메뉴1", com: Home, inactiveIcon: require("../assets/ic..

개발/기타

MacOS에서 커맨드로 폴더 이름 변경하는 방법

mv 명령어를 사용하면 손쉽게 MacOS에서 폴더 이름을 변경할 수 있습니다. mv 현재폴더이름 변경할이름 // ex) mv test test2 -> test 폴더 이름이 test2로 변경된다

개발/Javascript

자바스크립트 인스턴스 이름 가져오는 방법 (javascript get instance name)

자바스크립트 인스턴스 이름을 가져오는 방법은 constructor에 접근해서 name을 가져오면 됩니다. function FooBar() { } var foobar = new FooBar(); console.log(foobar.constructor.name); // 'FooBar'

개발/Google Cloud Platform

GCF(Google Cloud Functions) CORS 해결방법

GCF CORS 해결방법은 함수의 response Access-Control-Allow-Origin을 설정하는 것입니다. 해결방법 1. exports.exFunc = async (req, res) => { res.set("Access-Control-Allow-Origin", "*"); // CORS settings if (req.method === "OPTIONS") { // Send response to OPTIONS requests res.set("Access-Control-Allow-Methods", ""); res.set("Access-Control-Allow-Headers", "Content-Type"); res.set("Access-Control-Max-Age", "3600"); res.sta..

개발/AWS

Elastic Beanstalk EACCES: permission denied 에러 해결방법(.npmrc unsafe-perm)

Elastic Beanstalk 배포 과정에서 아래와 같은 에러가 발생했습니다. 기존에는 에러없이 정상적으로 배포가 되었고, 특정 npm 라이브러리를 설치하고 올리는 과정에서 배포가 되지 않는 이슈가 발생했습니다. 간략하게 노출되는 에러메시지가 굉장히 불친절하고 어디서 에러가 발생했는지 정확하게 판단할 수 없어서 전체 로그를 파악할 필요성이 있었습니다. eb-activity.log를 확인해봅시다. 쭉 로그를 확인하다가 하단에 permission denied 에러가 발생했음을 확인할 수 있었습니다. Error: EACCES: permission denied 너가 여기서 왜 나오니..... 해결방법 루트 디렉토리에 .npmrc 파일을 생성하고 아래와 같이 작성하고 배포하니 해결이 되었습니다. unsafe-p..

개발/기타

TinyPNG를 활용해서 이미지를 압축하여 용량을 줄이는 방법 (Compress PNG images while preserving transparency)

TinyPNG는 스마트 손실 압축 기술을 사용하여 PNG 파일의 파일 크기를 줄입니다. 이미지의 색상 수를 선택적으로 줄임으로써 파일 사이즈를 최적화 시켜줍니다. 육안으로는 변화를 알아채기 힘들지만 용량 측면에서는 굉장히 많은 차이가 있음을 확인할 수 있습니다. 사용방법 사용방법은 굉장히 간단합니다. 아래 tinypng 사이트를 가신 후 전면에 있는 Drop your .png or .jpg files here에 파일만 드래그 앤 드랍만 해주시면 됩니다. 예시로 447.4KB의 파일을 압축해보도록 하겠습니다. https://tinypng.com/ TinyPNG – Compress PNG images while preserving transparency Make your website faster and s..

개발/Javascript

정규표현식으로 문자열 띄어쓰기와 공백 모두 제거하는 방법 (replace all line breaks javascript)

아래 코드는 자바스크립트로 문자열 내에 있는 모든 띄어쓰기와 공백을 제거합니다. const str = ` hello hello2 hellb helloc `; const replacedStr = str.replace(/\r|\n/g, '');

개발/Node.js

Node.js에서 EUC-KR 한글 깨짐 해결방법

Node.js에서 문자코드를 변경해 주는 모듈은 iconv와 iconv-lite이 있습니다. iconv가 다양한 문자코드를 지원한다면 iconv-lite은 가볍고 간소화된 문자코드를 지원하고 있습니다. 설치방법 const iconv = require("iconv-lite"); iconv-lite Convert character encodings in pure javascript. www.npmjs.com 사용방법 const { data } = await axios({ url, method: "GET" });​ const { data } = await axios({ url, method: "GET", responseType: "arraybuffer" // 추가 });​ const contents = ico..

개발/기타

Netlify 301 Redirect 처리하는 방법

Netlify에서 301 Redirect를 처리하는 방법은 굉장히 간단합니다. netlify.toml 파일에서 TOML의 테이블 배열을 사용하여 각 개별 리디렉션 규칙만 지정해주면 됩니다. from: 리디렉션하기 전 경로 (변경 전) to: 리디렉션하려는 URL 또는 경로 (변경 후) status: 해당 리디렉션에 사용하려는 HTTP 상태 코드입니다. 디폴트는 301입니다. force: 경로의 기존 내용을 무시할지 여부, 디폴트는 false입니다. query: 리디렉션과 일치 시키려면 쿼리 문자열 매개 변수가 필요합니다. conditions: 국가 및 역할 조건과 같이 리디렉션과 일치하는 조건 headers: 프록시 리디렉션으로 보낼 추가 요청 헤더 signed: 프록시 리디렉션을 위한 환경 변수의 이름..

개발/Javascript

자바스크립트로 구현한 싱글톤 패턴 (Singleton Patterns)

싱글톤 패턴(Singleton Pattern)? 싱글톤 패턴(Singleton Patterns)은 디자인 패턴을 공부하려고 할 때 가장 먼저 접하게 되는 패턴 중 하나입니다. 싱글톤 패턴은 이름에서 알 수 있듯이 애플리케이션에서 단 한번만 인스턴스화할 수 있는 객체입니다. 프로그램에서 동일한 커넥션 객체를 생성한다던지 단 하나만 존재해야되는 객체를 생성할 때 유용하게 사용할 수 있는 패턴입니다. 싱글톤 패턴이라는 단어나 사용법을 모르더라도 무의식적으로 비슷한 개념을 사용한 적이 분명히 있을 것입니다. 혹시 코드 중에 $를 보신 적 있으신가요? 여러분이 jQuery를 사용하고 계시다면, 이미 싱글톤 패턴을 사용해본 적이 있으신 겁니다. 여러분의 어떤 클래스에서든 $를 활용해서 DOM을 조작하고 이벤트도 다..

카테고리 없음

자바스크립트로 페이지를 새로고침하는 방법

자바스크립트로 페이지를 새로고침하는 방법에는 여러가지가 있습니다. 아래와 같은 코드를 사용해서 페이지를 갱신할 수 있습니다. location.reload(); location.reload(true); location.href = location.href; history.go(0);

개발/기타

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

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

개발/Nuxt.js

Nuxtjs에서 scss 전역변수 사용하는 방법 (How to use Scss variables, mixins & functions globally in Nuxt.js)

Nuxtjs와 Scss를 같이 활용하다보면 글로벌 변수와 믹스인을 사용해야될 상황이 오게 됩니다. @nuxtjs/style-resources 라이브러리를 활용하면 이 분을 굉장히 쿨하게 해결할 수 있습니다. 아래는 @nuxtjs/style-resources를 활용해서 Scss 글로벌 변수와 믹스인을 처리하는 방법입니다. yarn add --dev @nuxtjs/style-resources sass-loader node-sass // nuxt.config.js export default { modules: ['@nuxtjs/style-resources'], styleResources: { scss: [ '~/assets/vars/*.scss', '~/assets/abstracts/_mixins.scss' ..

개발/jQuery

[jQuery All in One] 기존 컨텐츠를 둘러싼 새로운 컨텐츠를 삽입하는 방법 (unwrap, wrap, wrapAll, wrapInner)

.unwrap() - 지정한 요소의 부모요소를 제거 .wrap() - 지정한 요소를 wrap의 매개변수로 전달한 태그로 감싼다 .wrapAll() - 지정한 클래스들을 wrapAll 매개변수로 전달한 태그로 모두 감싼다 .wrapInner() - 지정한 요소에 자식 컨텐츠를 wrapInner 매개변수로 전달한 태그로 감싼다. .unwrap() // 지정한 요소의 부모요소를 제거한다. $('p').unwrap(); .wrap() // 지정한 요소를 wrap의 매개변수로 전달한 태그로 감싼다. $('p').wrap(''); .wrapAll() // 지정한 클래스들을 wrapAll 매개변수로 전달한 태그로 모두 감싼다 $('.inner').wrapAll(''); .wrapInner() // 지정한 요소에 자식..