728x90
반응형
 포스팅 썸네일 이미지

기술 스택/기타

[eslint] warning Unexpected console statement no-console 해결방법

프로젝트에 eslint를 설정하고나면 eslint의 룰(Rules)로 인해 console 메서드에 대한 warning 메시지가 출력되곤 합니다. 개발단계에서 이러한 경고 메시지가 조금 거슬리는 경우가 있는데요. eslint 룰를 조금만 수정해주면 해당 console 문구에 대한 경고 메세지를 제거할 수 있습니다. no-console - Rules disallow the use of console (no-console) In JavaScript that is designed to be executed in the browser, it's considered a best practice to avoid using methods on console. Such messages are considered to b..

2020.12.18 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

VSCode 터미널에서 code 명령어 실행하는 방법 (vscode terminal code command, zsh: command not found: code)

VSCode에서 터미널을 사용할 때 code 명령어를 사용하는 경우가 굉장히 빈번하게 생기는데요. 간혹 VSCode에서 PATH를 인지하지 못해서 code 명령어를 사용하지 못하는 경우가 생깁니다. // 아래와 같은 명령어를 보는 경우가 생깁니다. zsh: command not found: code 사용법 해당 이슈를 해결하는 방법은 아래와 같습니다. VSCode(Visual Studio Code)를 실행합니다. VSCode Command Palette 를 열어줍니다. [⇧⌘P ] Shell Command 를 입력해 [ Shell Command: Install ‘code’ command in PATH command ] 를 실행합니다. 성공적으로 Shell Command에 등록되었는지 확인하기 위해 터미널..

2020.12.12 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

웹 브라우저 별 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..

2020.08.03 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

npx란 무엇일까? 그리고 npm이랑 어떤 차이점이 있을까?

우리는 종종 npx 명령어를 사용해서 패키지를 설치하곤 합니다. 예를 들어 리액트 CRA를 설치할 때 npx create-react-app을 사용하고 , nuxt를 설치할 때 npx create-nuxt-app을 사용하고, 리액트 네이티브를 설치할 때 조차도 npx create-react-native-app를 사용해서 설치합니다. npx create-react-app my-app // react CRA npx create-nuxt-app my-app // Nuxt npx create-react-native-app my-app // React Native 아무 생각 없이 문서에서 npx를 사용해서 설치하라고 해서 설치는 했다만! 도대체 npm을 사용할 때가 있고(yarn도 있음), npx를 사용할 때가 있..

2020.07.27 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

스토리북(Storybook) v5.3 시작하기 - Vue에서 사용하는 방법

스토리북의 기본 정의나 사용법에 대해서는 여기에서 상세히 설명 되어 있으니 참고하시면 됩니다. 스토리북(Storybook)은 굉장히 많은 프론트엔드 view 라이브러리를 지원하고 있습니다. 스토리북은 현재 React, Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, Ember, Riot, Preact를 지원하고 있습니다. 그 중 Vue.js에서 스토리북을 사용하는 방법을 소개하도록 하겠습니다. 패키지 버전(dependencies) { "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "@babel/core": "^7.10.5", "@storybook/addon-actions": "^5.3.19", "@st..

2020.07.21 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

스토리북(Storybook) v5.3 시작하기 - 기본적인 사용법

스토리북이란 스토리북(Storybook)은 UI 컴포넌트를 위한 유저 인터페이스 개발 환경 및 자유롭게 컴포넌트를 테스트할 수 있는 도구입니다. 스토리북을 활용하면 개발자는 독립적인 환경에서 컴포넌트를 개발할 수 있고, 개발환경에서 컴포넌트들을 인터랙티브하게 보여줄 수 있습니다. 스토리북(Storybook)은 기본적으로 애플리케이션 외부(독립적인 개발환경)에서 실행되므로 사용자는 애플리케이션별 종속성 및 요구 사항에 대해서 걱정할 필요 없이 UI 컴포넌트를 독립적으로 개발할 수 있습니다. 스토리북은 다양한 부가기능(addons)를 지원하며 커스터마이징하기 쉽게 굉장히 유연한 API를 제공합니다. 스토리북의 정적 버전(a Static version of Storybook)은 빌드하여 HTTP 서버에 배포할..

2020.07.21 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

소스코드를 깔끔하게 이미지로 추출하는 방법 (Create images of your source code)

🖼️ 소스코드를 깔끔하게 이미지로 추출하는 방법 웹사이트를 돌아다니다 보면 아래와 같이 소스코드를 깔끔하게 이미지화시켜서 보여주는 글들을 본 적이 있을 겁니다. 바로 Carbon이라는 사이트에서 소스코드를 이미지화시켜서 export를 해서 생성한 것입니다. Carbon Carbon is the easiest way to create and share beautiful images of your source code. carbon.now.sh 해당 사이트로 들어가면 아래 화면을 확인할 수 있습니다. ✍️ 사용방법 좌측부터 원하는 에디터 테마, 사용하는 언어 그리고 마지막으로 Export에는 파일 이름과 사이즈 그리고 다운로드 형식을 설정할 수 있는 영역이 존재합니다. 저는 Dracula 테마를 선호하고 V..

2020.07.07 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

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

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

2020.06.29 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

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..

2020.02.28 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

Netlify 301 Redirect 처리하는 방법

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

2020.02.26 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

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

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

2020.02.24 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

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

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

2020.02.21 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

KG이니시스 웹표준 결제 모듈 연동

이니시스 Javascript 패키지 inipay-js 이니시스 결제 모듈 패키지 www.npmjs.com 이니시스 웹표준 결제에서 제공하는 지불수단은 아래와 같습니다. 신용카드 - 안심클릭, ISP, 비인증 신용카드, 해외 Visa 카드, 삼성월렛, PayPin 간편결제 – 카카오페이, Lpay, SSGpay, 삼성페이, Kpay, Payco 실시간 계좌이체 무통장입금(가상계좌) 휴대폰결제 포인트 상품권(문화상품권, 해피머니상품권, 스마트문화상품권) 전화결제(ARS) 신용카드, 휴대폰 빌링 (빌링키 발급만 가능) 결제 요청 페이지 작성(INIStdPayRequest) signkey값 설정 웹 표준 결제 이용시 패스워드 기능을 하는 코드로 MID 번호별로 부여됩니다. String mid = "INIpayT..

2020.02.13 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

KG이니시스 웹표준 망 취소 요청 및 응답 데이터

※망 취소 요청 데이터(승인 요청 전문과 동일한 스펙) 필드명 한글명칭 예시 [Data Type, 밑줄은 기본값] 설명 필수 여부 크기 (최대) mid 가맹점 id [String] “INIpayTest” 가맹점 아이디 Yes 10 Byte fixed authToken 인증 결과코드 [String] “sgnWSY9uZ3c9lbkJItgiP4VdD 5L+dM0+dmuv+R707vExQC5 XjwjSCUOa/QumiTMW Y8+aLvjFu .......” 인증 결과에 대한 위변조 검증값 Yes (위변조 검증) -- price 인증가격 “1000” 인증 가격 결과에 대한 위변조 확인용 Yes (가격 64 Bytes timestamp 타임스템프 [Number] 1335233672723 TimeInMillis(Lo..

2020.02.13 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

KG이니시스 웹표준 Signature 생성방법 (Javascript)

signature 개요 결제요청시 등 HTTPS post 요청시 가맹점의 요청이 정상적인 요청인지 여부 / 사용자의 위변조 방지를 위해 일부 데이터를 SHA256 으로 Hash 한 값 signature 는 form.submit 시 적용됩니다. signature 첨부 대상 INIpay Standard 의 모든 요청 결제(인증), 승인 APIsignature 생성 대상 필드(Target) 모든 요청의 signature 의 생성방법 동일하며, 요청별로 생성 대상 필드가 다름 * 요청별로 명시된 “signature 생성 대상(Target) 필드”를 참조 인증요청(결제요청) : oid, price, timestamp → “[TABLE 1-2] signature 생성 대상(Target) 필드“참조 승인요청 : au..

2020.02.13 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

KG이니시스 웹표준 승인요청 데이터 필드

승인요청 데이터 필드명 한글명칭 예시 [Data Type, 밑줄은 기본값] 설명 필수 여부 크기 (최대) mid 가맹점 id [String] “INIpayTest” 가맹점 아이디 Yes 10 Byte fixed authToken 인증 결과코드 [String] “sgnWSY9uZ3c9lbkJItgiP4VdD 5L+dM0+dmuv+R707vExQC5 XjwjSCUOa/QumiTMW Y8+aLvjFu .......” 인증 결과에 대한 위변조 검증값 Yes (위변조 검증) -- price 인증가격 “1000” 인증 가격 결과에 대한 위변조 확인용 Yes (가격 위변조 검증) 64 Bytes timestamp 타임스템프 [Number] 1335233672723 TimeInMillis(Long형) →제공라이브러로 ..

2020.02.13 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

KG이니시스 웹표준 승인 결과 데이터 필드

승인결과 데이터(공통) 필드명 한글명칭 Data Type 설명 크기 (최대) tid 거래번호 String 거래 번호 40 Byte resultCode 결과코드 String [0000 : 정상, 기타 : 실패] 승인결과코드 참조 10 Byte resultMsg 결과메세지 String 결과 메세지 100 Byte EventCode 이벤트코드 String 카드 할부 및 행사 적용 코드. [별첨정보 참조] 3 Byte TotPrice 거래금액 String 결제결과 금액 20 Byte MOID 주문번호 String 상점주문번호. 결제 요청시 "oid" 필드에 설정된값 40 Byte payMethod 지불수단 String 결제 방법 10 Byte applNum 승인번호 String 결제수단에 따리 미전송 16 By..

2020.02.13 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

KG이니시스 웹 결제 인증결과 데이터

[TABLE 2-1] 인증결과 데이터 필드명 한글명칭 Data Type 설명 크기 (최대) resultCode 결과코드 String [0000 : 정상, 기타 : 실패] 10 Byte resultMsg 결과메세지 String 성공시 : 성공, 실패시 : 기타 오류 메시지 100 Byte mid 가맹점 ID String 가맹점 ID 10 Byte orderNumber 가맹점 주문번 호 String 가맹점 주문번호 40 Byte authToken 승인요청 String 승인요청검증토큰 authUrl 승인요청 Url String 해당 URL로 HTTPS API Request(httpClient 통신) 승인 요 청(POST) netCancelUrl 망취소요청 Url String 승인요청후 인증결과 수신 실패 / ..

2020.02.13 게시됨

 포스팅 썸네일 이미지

기술 스택/기타

KG이니시스 웹 결제 기본 요청데이터 필드

필드명 한글명칭 예시 [Data Type, 밑줄은 기본값] 설명 필수 여부 크기 (최대) version 버전 [String]"1.0" [1.0] 전문 버전 Yes 20 Byte mid 상점아이디 [String] "INIpayTest" 제공된 mid * 10자리 고정 Yes (위변조검증) 10 Byte Fixed oid 주문번호 [String] INIpayTest__1335233672723 주문단위 unique한 값 ( mid+”_”+timestamp ) Yes 40 Byte goodsname 상품명 [String] “키보드/마우스” 한글/특수기호 입력가능 * 40Byte 초과 요청시 37Byte+...으로 자동 변환 Yes 40 Byte price 결제금액 [Number] 1004 숫자만 입력 1달러는 ..

2020.02.13 게시됨

728x90
반응형