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

개발/기타

카카오톡 오픈그래프(og:image) 이미지 캐시 삭제

카카오톡에 특정 사이트 URL을 공유할 때 설정해뒀거나 업데이트한 대표 이미지가 표시되지 않거나 갱신되지 않는 경우가 있는데요. 이렇게 이전 페이지 정보가 표시되는 이유는 카카오톡에서 데이터를 효율적으로 활용하기 위해 캐시(cache) 처리를 하기 때문인데요. 캐싱된 데이터가 바로 갱신되길 원한다면 카카오톡 오픈그래프 캐시 초기화 도구를 활용해서 카카오톡 서버에 남아 있는 캐시를 삭제함으로써 해결할 수 있습니다. 이번 포스팅에서는 카카오톡 오픈그래프 캐시 초기화 도구를 활용해서 데이터 캐시를 삭제하고, 업데이트한 오픈그래프 이미지가 정상적으로 표시되게 하는 방법에 대해서 살펴보겠습니다. 카카오톡 캐시 초기화 방법 카카오톡 캐시 초기화 방법 절차는 아래와 같습니다. 카카오톡 오픈그래프 캐시 초기화 도구로 ..

2021.09.22 게시됨

 포스팅 썸네일 이미지

개발/기타

페이스북 오픈그래프(og:image) 이미지 캐시 삭제 (How to clear Facebook's image cache)

페이스북에 특정 사이트 URL을 공유할 때 설정해뒀거나 업데이트한 대표 이미지가 표시되지 않거나 갱신되지 않는 경우가 있는데요. 이렇게 이전 페이지 정보가 표시되는 이유는 페이스북에서 데이터를 효율적으로 활용하기 위해 캐시(cache) 처리를 하기 때문인데요. 캐싱된 데이터가 바로 갱신되길 원한다면 페이스북 공유 디버거를 활용해서 페이스북 서버에 남아 있는 캐시를 삭제함으로써 해결할 수 있습니다. 이번 포스팅에서는 페이스북 공유 디버거를 활용해서 데이터 캐시를 삭제하고, 업데이트한 오픈그래프 이미지가 정상적으로 표시되게 하는 방법에 대해서 살펴보겠습니다. 페이스북 캐시 초기화 방법 페이스북 캐시 초기화 방법 절차는 아래와 같습니다. 페이스북 공유 디버거 사이트로 이동 공유 디버거 메뉴에 캐시 삭제할 UR..

2021.08.12 게시됨

 포스팅 썸네일 이미지

개발/기타

cURL HTTP 구간별 응답시간 체크하는 방법 (How to get response time from curl request (via command-line))

개발을 하다보면 cURL 명령어를 활용해서 각 구간별 HTTP 응답시간을 체크해야될 경우가 생깁니다. 이때 활용하면 굉장히 심플하게 HTTP Response를 체크할 수 있는 방법이 있습니다. vi curl-format.txt // or code curl-format.txt DNS lookup time (s) : %{time_namelookup}s\n Connection establish time (s) : %{time_connect}s\n SSL connect time (s) : %{time_appconnect}s\n Pre-transfer time (s) : %{time_pretransfer}s\n Redirect time (s) : %{time_redirect}s\n Start-transfer ti..

2021.08.09 게시됨

 포스팅 썸네일 이미지

개발/기타

[Mac OS] 파일 및 폴더 위치(경로) 확인하는 방법 (How to copy path of a file)

맥에서 파일이나 폴더 위치를 확인하고 싶을 때가 있습니다. 간편한 기능이긴 하지만 사용해보지 않았다면 분명 귀찮게 한번씩 찾아보게 될 것 인데요. 이번 포스팅에서는 굉장히 쉽고 간편하게 파일 및 폴더 위치(경로)를 확인하는 방법에 대해서 알아보도록 하겠습니다. 경로 확인 방법 맥에서 경로를 확인하는 방법에는 파인더를 사용하는 방법과 터미널을 사용하는 방법이 있습니다. 각 방법 별로 간단한 예시와 함께 사용하는 방법에 대해서 알아보도록 하겠습니다. 파인더(Finder) 모하비 이전까지 Finder에서 파일의 정보 가져오기 메뉴를 통해서 일반적인 복사를 사용하면 그대로 경로가 붙여넣기 되었는데 버전 업그레이드가 된 이후로 해당 기능이 적용되지 않더라구요. (아래 이미지처럼 정보를 확인하려는 이미지(동영상)을..

2021.07.18 게시됨

 포스팅 썸네일 이미지

개발/기타

brew update 403 forbidden 해결방법 (brew update returns 403 Forbidden while accessing)

Homebrew(홈브루)를 활용해 패키지를 설치하려고 했으나 아래 이미지와 같은 에러가 발생했습니다. brew install ffmpeg 디버깅을 위해 검색을 해보니 Homebrew 버전 이슈였고, brew update를 정상적으로 진행하기 위해 메시지에서 나온 GIt 경로의 파일을 받은 후 업데이트를 진행해야 합니다. Homebrew v3.1.0 replaced Bintray with GitHub packages. Running brew update will update to the newest version of Homebrew and solve this issue. 해결방법 git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch -..

2021.07.16 게시됨

 포스팅 썸네일 이미지

개발/기타

VSCode를 사용한다면 포스트맨(Postman) 대신 Thunder Client (API 실행, 사용법)

개발할 때 API 요청에 대한 결과를 확인하기 위해 포스트맨(Postman)이라는 프로그램을 사용하곤 하는데 VSCode를 사용하는 개발자라면 썬더 클라이언트(Thunder Cient)도 좋은 대안이 될 것 같아서 공유차 포스팅을 남깁니다. Thunder Client 썬더 클라이언트(Thunder Cient)는 일단 추가적으로 프로그램을 따로 설치하지 않아도 되고, VSCode 익스텐션으로 관리되기 때문에 꽤 편리하게 사용할 수 있습니다. 썬더 클라이언트를 추가하는 방법은 굉장히 간단합니다. 아래 이미지처럼 VSCode에서 좌측 익스텐션 메뉴를 통해 Thunder Client를 검색하고 설치하면 끝입니다! 혹시 VSCode를 아직 설치하지 않았거나 설치를 고민중이시라면 아래 포스팅을 통해 정보를 얻을 수..

2021.06.08 게시됨

 포스팅 썸네일 이미지

개발/기타

[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 게시됨

728x90
반응형