개발/Nuxt.js

[nuxt] nuxt generate에서 css 파일을 추출하는 방법

nuxt generate에서 스타일을 추출해보자 nuxt.js에서 nuxt generate 명령어를 사용하여 빌드하면 기본적으로 css파일을 추출하지 않고 인라인 방식으로 처리합니다. CSS 파일을 따로 추출하고 싶다면 nuxt.config.js에서 build extractCSS를 추가하면 됩니다. 코드는 아래와 같습니다. module.exports = { build: { extractCSS: true } }

개발/기타

[안드로이드] 갤럭시 개발자옵션 아주 쉽게 활성화 시키는 방법 (안드로이드 디버깅, 크롬 웹뷰 디버깅)

개발자 옵션 활성화하기 안드로이드 개발을 하기 위해서 안드로이드 스마트폰 개발자 옵션을 활성화 해주는 것은 필수적입니다. 물론 안드로이드 개발 뿐만 아니라 웹 개발자가 모바일웹을 확인하거나 애플리케이션 안에 웹뷰로 들어가 있는 웹을 확인하기 위해서 사용하곤 합니다. 기본적으로 USB 디버거모드를 켜기 위해서 사용하곤 하는데요. 개발자옵션을 활성화하는 방법은 아래와 같습니다. 1. 우선 스마트폰의 설정에 들어가서 휴대전화 정보 탭을 누릅니다. 2. 휴대전화 정보 탭에서 소프트웨어 정보를 들어갑니다. 3. 소프트웨어 정보에서 빌드번호가 있는데 이 빌드번호를 여러번 연타로 터치하면 개발자 옵션이 활성화 되었다는 메시지가 뜹니다. 다시 설정으로 돌아가면 아래와 같이 개발자 옵션 탭이 활성화 되었음을 확인할 수 ..

개발/Nuxt.js

nuxt-link Boolean값에 따라서 조건부 처리하는 방법

nuxt-link에는 event props가 존재하는데 이 값을 활용해서 조건부로 경로이동을 시킬지 말지에 대해 처리할 수 있습니다. 아래는 event props를 활용한 예시입니다. 유저가 로그인하지 않았다면 라우팅 처리를 막을 수 있습니다. click.native를 활용하면 조금 더 다양한 처리를 할 수 있습니다. 아래 예시는 인증된 유저라면 라우트 처리를 하고, 아니라면 native 클릭 이벤트를 사용하게 해주는 예시입니다

개발/Javascript

[Javascript] URL QueryString 값을 Object(key-value)로 손쉽게 받아오는 방법

자바스크립트에서 URL의 QueryString 값을 쉽게 파싱해서 사용하는 방법이 있습니다. 아래 함수의 리턴 형태는 Object(key-value)이므로 사용하기 용이합니다. /** * URL queryString 값을 (key-value) 형식으로 가져오는 함수 */ export const getURLParameters = () => { const params = {} location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) { params[key] = value }) return params } 아래는 해당 함수를 사용한 테스트 케이스입니다. // before https://www.google.com/search?q=%..

개발/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을 조작하고 이벤트도 다..