개발/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: 접두사가 필요합니다. 사용자 지정 속성 추가를 하게 되면 ..

개발/Git

gitignore 캐시 삭제하기 (clear gitignore cache)

깃을 사용하다보면 .gitignore에 분명히 파일을 추가했는데 해당 파일을 계속 추적하는 경우가 있습니다. 이런 현상이 발생하는 이유는 .gitignore에 파일을 추가하기 전에 stage에 올라간 파일들은 캐시처리가 되어 기록이 남아있기 때문입니다. 아래 명령어로 캐시를 제거할 수 있습니다. git rm -r --cached . git add . git commit -m "clear git cache"

개발/Javascript

자바스크립트에서 undefined를 체크하는 가장 좋은 방법

x === undefined변수가 선언되어 있지 않으면, 동작하지 않는다. ReferenceError: x is not defined변수가 선언되었지만, 정의가 되어있지 않을 때만 true를 return 해준다. typeof x === 'undefined'를 사용하는 편이 더 낫다.

개발/기타

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

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

개발/기타

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

개발/기타

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

개발/기타

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형) →제공라이브러로 ..

개발/기타

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

개발/기타

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 승인요청후 인증결과 수신 실패 / ..

개발/기타

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달러는 ..

개발/jQuery

[jQuery All in One] 클래스 선택자 다루기 (addClass, removeClass, hasClass, toggleClass)

jQuery version: 3.4.1 .addClass( className ) 설명 : 지정된 클래스를 일치하는 요소 집합의 각 요소에 추가합니다. .addClass( className ) className Type: String .addClass( function ) function Type: Function( Integer index, String currentClassName ) => String 사용예시 요소의 집합에서 선택된 요소의 클래스를 추가하는 예시입니다. .removeClass( className ) 설명 : 지정된 클래스를 일치하는 요소 집합의 각 요소에서 제거합니다. .removeClass( className ) className Type: String .removeClass( fu..

개발/CSS3

display: inline-block 속성 숨겨진 여백 제거

block 속성을 가진 태그 안쪽에 inline element가 있으면, 기본적으로 block 속성과 inline 속성 사이에 빈 여백이 존재한다. 해결법 wrapping된 태그에 font-size:0; letter-spacing:0; word-spacing:0;값을 넣어서 초기화 시켜주고 내부 태그에 다시 정의 내려주면 해결된다. 해결하기 어렵다면, float 속성으로 구현하면 해결된다.

개발/Javascript

디자인 패턴:: Simple Factory - Factory Pattern 1

팩토리 패턴은 추상화된 부모 클래스를 활용해서 다양한 파생 클래스들을 공장처럼 찍어내듯 만들어내는 것을 말합니다. real world 예시로는 자동차, 커피, 피자 등 특정 제품을 만들 때 공통된 부분을 추상화된 부모 클래스로 생성하고 제품들 마다 커스텀하게 만들어야 하는 부분들은 하위 클래스에서 지정해주는 것을 들 수 있습니다. 팩토리 패턴은 크게 3종류로 분류해볼 수 있습니다. Simple Factory Factory Method Abstract Factory 이번 포스팅에서는 Simple Factory를 다뤄보도록 하겠습니다. Simple Factory Simple Factory는 객체들의 생성을 책임지고 관리하는 팩토리를 만들어서 확장 및 관리를 용이하게 해주는 방식입니다. Simple Facto..

개발/Javascript

자바스크립트 call, apply, bind 차이점

자바스크립트 함수를 다루다 보면 this 키워드를 다뤄야 할 경우가 많이 생기게 됩니다. 이 this 키워드를 정확하게 이해하려면 함수와 메서드의 차이부터 제대로 짚고 넘어가야 됩니다. Function vs Method 함수와 메서드는 둘 다 동일한 함수이지만 존재하는 위치에 따라서 함수가 될 수 있고, 메서드가 될 수 있습니다. // 함수 const greeting = () => { console.log(this); } const module = { greeting() { console.log(this); } } greeting(); // window object module.greeting(); // module object차이점이 보이나요? greeting 변수에 할당된 함수에서의 this와 mod..

개발/Nuxt.js

Nuxt 301 Redirect 처리하는 방법 (Handling Redirects in Nuxt.js)

301 Redirect 처리를 위해서 Nuxt redirect-module을 설치합니다. 설치 npm install @nuxtjs/redirect-module // or yarn add @nuxtjs/redirect-module nuxt.config.js 설정 { modules: [ ['@nuxtjs/redirect-module', { // Redirect option here }] ] } 최상위에서도 사용 가능합니다. { modules: [ '@nuxtjs/redirect-module' ], redirect: [ // Redirect options here ] } 사용방법 redirect: [ { from: '/test1', to: '/test2' } ] from이 현재 url 그리고 to가 보낼 ur..

개발/Javascript

자바스크립트 비동기 프로그래밍 - 콜백함수(callback function)

콜백함수(Callback Function)? 콜백함수를 간단하게 정의하면 어떤 특정 함수가 실행을 마친 후에 실행되는 함수를 콜백함수라고 합니다. 조금 더 세부적으로 설명드리면, 자바스크립트에서 함수는 객체입니다. 이러한 특징덕분에 함수는 인자로써 함수를 받을 수 있고, 다른 함수를 리턴할 수 있습니다. 이러한 특징을 가지는 함수를 고차함수(higher-order functions)라고 부릅니다. 인자로 전달된 함수를 콜백함수(callback function)이라고 부르는 거구요. 고차함수(higher-order functions) 조건 함수를 파라미터로 전달받는 함수 함수를 리턴하는 함수 콜백함수가 필요한 이유 콜백 함수를 사용하는 가장 큰 이유 중 하나는 비동기 데이터를 처리하기 위함입니다. 아래의 ..

개발/Google Cloud Platform

구글 클라우드 스토리지 CORS 세팅방법 (set up CORS for Google Cloud Storage Bucket)

gsutil cors set cors-json-file.json gs://example-bucket google cloud shell에서 touch cors-setting.json 을 생성해줍니다. [ { "origin": [ "*" ], "responseHeader": [ "Content-Type" ], "method": [ "GET", "HEAD", "DELETE" ], "maxAgeSeconds": 3600 } ] cors-json-file.json의 내용을 위와 같이 작성해줍니다. 핵심은 origin입니다. 원하는 도메인을 지정하거나 전체 access를 허용한다면 *을 origin에 추가하면 됩니다. CORS 설정파일을 추가했다면, 이제 cors를 제어할 버킷에게 해당 설정을 반영해주면 됩니다. ..

개발/CSS3

CSS Normalize & CSS Reset

모든 웹 브라우저는 HTML 엘리먼트들에 자체적으로 설정된 스타일을 반영합니다. 이 말은 브라우저마다 HTML 엘리먼트 스타일에 대한 처리과정이 조금씩 다르다는 것을 의미합니다. 예를 들어, 사파리와 크롬은 동일한 HTML 문서를 다르게 보여줍니다. 이러한 차이점은 내장된 브라우저 스타일링 때문입니다. 브라우저 간 스타일 불일치를 피하기 위해 내장된 브라우저 스타일링을 제거함으로써 브라우저마다의 스타일링 차이점을 없앨 수 있습니다. 이렇게 내장된 브라우저 스타일링을 초기화하기 위해 사용하는 방법이 CSS Reset과 CSS Normalize입니다. CSS Reset CSS Reset 스타일시트는 모든 HTML 요소에 대한 내장 스타일링을 제거합니다. CSS Reset은 보편적으로 Eric Meyer가 제..