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

 포스팅 썸네일 이미지

개발/CSS3

테이블 테두리 둥글게(라운딩) 만드는 방법 | table with border radius css

요즘 실제 웹서비스를 구현할 때 레이아웃에 테이블을 사용하진 않지만 Email HTML 템플릿 코딩을 하다보면 테이블 태그를 꽤 많이 사용합니다. 아래 이미지와 같이 테이블 테두리를 라운딩 처리를 하기 위해 border radius 속성값을 부여했을 때 제대로 동작하지 않는 경우가 생깁니다. 해결방법 만약 테이블 태그에 해당 이슈가 발생했다면 border-collapse: collapse; 속성 때문일 것입니다. .... border-collapse: separate (기본값)으로 설정하면 정상적으로 border radius 속성을 적용할 수 있습니다.

2021.07.25 게시됨

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트 모바일 키보드 닫는 방법(비활성화) | Close Mobile Keyboard & Menu on Return

모바일에서 Input 태그에 포커싱이 들어가면 자동으로 키보드가 활성화 되는데요. input 태그에 값을 모두 입력하고 return을 눌렀을 때 키보드만 hide 처리하는 방법이 있습니다. 보통 form 태그에 감싸져있는 input이라면 return을 눌렀을 때 자동으로 form submit 이벤트가 발생할 것입니다. 해결방법 해결방법은 keypress 이벤트 흐름을 중단시키고 현재 input 포커스를 blur처리를 하면 됩니다. // Javascript document.querySelector('input').addEventListener('keypress', (e) => { if (e.keyCode === 13) { e.preventDefault(); document.querySelector('inp..

2021.07.25 게시됨

 포스팅 썸네일 이미지

개발/AWS

Elastic Beanstalk Amazon Linux 2 마이그레이션 방법 (Migrating your Elastic Beanstalk Linux application)

기존에 사용중인 Amazon Linux AMI 플랫폼이 Deprecated됨에 따라서 Amazon Linux 2로 마이그레이션을 진행하게 되었습니다. 개발환경 Node@12.21.0 Nuxt@2.11.0 as-is Node.js running on 64bit Amazon Linux/4.17.7 to-be Node.js 12 running on 64bit Amazon Linux 2/5.4.2 기존 구성 파일 files: # Found at https://stackoverflow.com/a/42096244/9074640 # Runs right before `npm install` in '.../50npm.sh' "/opt/elasticbeanstalk/hooks/appdeploy/pre/49_yarn.sh"..

2021.07.20 게시됨

 포스팅 썸네일 이미지

개발/기타

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

 포스팅 썸네일 이미지

개발/Vue

Vue render 함수에서 innerHTML 사용하는 방법 (How to use v-html in JSX)

일반적으로 React에서는 dangerouslySetInnerHTML, Vue에서는 v-html을 활용해서 innerHTML 처리를 합니다. 하지만 일반적인 방식이 아닌 렌더 함수(Render Function)를 사용하는 경우도 있는데요. 이때는 아래와 같이 처리하면 굉장히 간편하게 처리할 수 있습니다. 예시 this.$alert({ content: (h) => h('div', { domProps: { innerHTML: err.message } }) }) 좀 더 축약된 방식은 아래와 같습니다. domPropsInnerHTML 활용한 방법 this.$alert({ content: () => { return // return } }) export default { name: "app", data() { r..

2021.07.08 게시됨

 포스팅 썸네일 이미지

개발

텔레그램 오픈 그래프(Open Graph, og:image) 이미지 캐시 삭제

텔레그램(Telegram)에 링크를 보내면 URL에서 제공하는 Open Graph 데이터를 자동으로 읽고 페이지 미리보기를 생성합니다. 동일한 페이지의 오픈 그래프 데이터가 변경되어도 텔레그램은 한번 캐싱한 데이터를 내보내기 때문에 바로 업데이트가 되지 않습니다. 그래서 바로 갱신이 필요하다면 오픈 그래프 데이터 캐시를 지워야 합니다. 미리보기 예시 특정 페이지의 메타 태그로 추가된 오픈 그래프 데이터를 활용해서 미리보기를 생성합니다. 아래 이미지와 같이 텔레그램은 오픈 그래프 데이터를 기반으로 미리보기를 제공할 것입니다. 하지만 해당 사이트의 오픈 그래프 데이터가 변경되었을 때 우리는 변경된 오픈 그래프 데이터를 보는 것을 기대했지만 실제로는 이전에 등록된 오픈 그래프 데이터를 보게 될 것 입니다. 이..

2021.06.24 게시됨

 포스팅 썸네일 이미지

개발/기타

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

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

2021.06.08 게시됨

 포스팅 썸네일 이미지

개발/트러블슈팅

타입스크립트(Typescript)에서 JSON import하는 방법

일반적으로 자바스크립트에서 json을 import하는 방법은 아래와 같습니다. // *.ts import sampleJSON from '../sample.json'; 자바스크립트로 작성했을 때는 문제가 없는 구문인데 만약 타입스크립트로 전환하게 된다면 타입스크립트는 기본적으로 JSON 파일 확인을 지원하지 않기 때문에 json을 가져오기 위해 몇 가지 설정이 필요합니다. // tsconfig.json { "compilerOptions": { "resolveJsonModule": true } } // 또는 tsc 실행시에 --esModuleInterop, --resolveJsonModule 옵션을 추가한 후 빌드

2021.05.26 게시됨

 포스팅 썸네일 이미지

개발/Javascript

인터넷 익스플로러에서 자동으로 엣지로 전환하는 방법(Redirect from IE to Edge)

최근에 유튜브(Youtube), 넷플릭스(Netflex), 페이스북(Facebook)와 같은 글로벌 웹서비스를 인터넷 익스플로러(Internet Explorer, IE)에서 접근하면, 마이크로소프트 엣지(Edge) 브라우저로 자동으로 이동하는 것을 알 수 있습니다. 이렇듯 과거 레거시 브라우저를 대응하기보다 이제는 엣지(Edge) 브라우저로 이동시킴으로써 사실상 IE 대응을 종료한 움직임을 확인할 수 있습니다. 처리방법 코드는 굉장히 간단합니다. 웹서비스에 접근하는 유저정보(UA, UserAgent)를 체크해서 인터넷 익스플로러에서 접근한 유저의 경우 강제로 'microsoft-edge'라는 스키마와 현재 접근 경로를 붙여서 다시 이동시키면 엣지 브라우저가 있을 경우 자동으로 엣지로 이동시킵니다. 'mi..

2021.04.15 게시됨

 포스팅 썸네일 이미지

개발/AWS

AWS HTTPS 인증서 발급받는 방법 (AWS Certificate Manager(ACM) SSL)

웹서비스를 구현하고 서비스를 배포하는 순간 HTTPS 인증서를 받아서 등록해야되는 시점이 오게됩니다. AWS를 사용하고 있다면 Certificate Manager를 활용하면 굉장히 간편하게 SSL 인증서를 발급받을 수 있습니다. 이번 포스팅에서는 AWS Certificate Manager(ACM)을 활용해 도메인에 SSL 인증서를 발급하는 방법에 대해서 소개하도록 하겠습니다. 인증서 발급받는 방법 인증서를 발급받는 절차는 아래와 같습니다. 도메인 이름 추가 검증 방법 선택 태그 추가 검토 및 요청 검증 Certificate Manager 서비스로 이동 우선 인증서를 발급받기 위해 AWS 콘솔에서 certificate Manager를 검색해서 해당 서비스로 이동합니다. certificate Manager ..

2021.02.13 게시됨

 포스팅 썸네일 이미지

개발/CSS3

[CSS] :not() 선택자(selector) 초간단 사용방법

CSS를 작성하다보면 "~이 없을 경우"와같이 특정 선택자가 없을 때에 대한 스타일 처리를 하고 싶은 경우가 생깁니다. 이번 포스팅에서는 특정 선택자가 포함되어 있지 않는 요소에 대하여 스타일을 적용하기 위한 방법에 대해 소개하도록 하겠습니다. :not() 선택자 CSS :not() 선택자는 부정(negation) CSS 가상클래스로CSS의 :not() 선택자를 사용하면 특정 선택자가 제외된 경우에 대한 스타일 적용을 할 수 있습니다. 일반적으로 선택자(selector)를 해당 요소를 선택하기 위해 사용되지만 not 선택자는 해당 선택자를 제외한 나머지 요소를 선택하기 위해 사용합니다. not 선택자를 활용하면 실무에서 꽤 유용하게 사용되는 경우가 많기 때문에 알아두면 작업하는데 많이 도움이 될 것입니다..

2021.02.09 게시됨

 포스팅 썸네일 이미지

개발/CSS3

CSS에서 텍스트 ellipsis('...') 말줄임 표시 처리하는 방법 (2줄, 3줄)

서버사이드에서 데이터를 내려줄 때 강제로 텍스트를 truncate 처리한 후 내려줄 수 있지만, CSS만으로 텍스트를 원하는 단위로 자를 수 있다는 것 알고 계셨나요? 이번 포스팅에서는 CSS를 활용해서 텍스트 말줄임 처리하는 방법에 대해서 알아보도록 하겠습니다. 한 줄 단위로 텍스트 자르는 방법 CSS로 말줄임 처리를 하기 위해서 글자를 출력할 공간이 필요합니다. 기본적으로 CSS display 속성의 inlline 값은 요소의 너비를 가질 수 없기 때문에 이를 block으로 바꿔줌으로써 너비를 가질 수 있게 변경해야 합니다. .box { display: block; } 요소에 너비가 지정되었다면 이제 텍스트는 너비를 넘어서게 되면 자동으로 줄바꿈을 하게 됩니다. 자동으로 줄바꿈되는 것을 white-s..

2021.01.25 게시됨

 포스팅 썸네일 이미지

개발/Git

깃 특정 태그로 이동하는 방법 (How to checkout Git Tags)

Git으로 작업할 때 개발자가 출시한 결과물에 대해 참조를 걸기 위해 태그를 만드는 것은 매우 일반적입니다. 예를 들어, 릴리스 버전에 대한 참조를 갖기 위해 버전을 명시한 태그가 생성됩니다. 브랜치나 커밋을 체크아웃하듯이 태그 또한 체크아웃이 가능하다는 점 알고 계셨나요? 이번 포스팅에서는 깃에서 특정 태그로 체크하는 방법에 대해서 다뤄보도록 하겠습니다. 체크아웃하는 방법 Git 태그를 체크아웃하려면 "git checkout" 명령어을 사용하고 체크아웃할 브랜치와 태그 이름을 지정합니다. // 태그 체크아웃 예시 git checkout tags/ -b 최신 태그 목록 가져오기 원격 저장소에 최신 태그 목록이 존재하는지 태그를 체크아웃하기 전 확인해야 합니다. 아래 명령어를 통해 원격 저장소에서 전체 태..

2021.01.19 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[Javascript] append vs appendChild 차이점 (초간단)

append와 appendChild 메서드는 모두 부모 노드에 자식 노드를 추가하는 메서드입니다. 하지만 두 메서드에도 몇 가지 차이점이 존재합니다. 이번 포스팅에서는 두 메서드의 차이점에 대해서 쉽고 간략하게 다뤄보도록 하겠습니다. append() ? append 메서드를 활용하면 노드 객체(Node object)나 DOMString(text)를 사용할 수 있습니다. 또한 한번에 여러 개의 자식 요소를 설정할 수 있습니다. Node object 사용 예시 // Node object 삽입 const parent = document.createElement('div'); const child = document.createElement('p'); parent.append(child); // 결과 // 문자..

2021.01.19 게시됨

 포스팅 썸네일 이미지

개발/Javascript

부모 노드 맨 앞에 요소를 삽입하는 방법 (appendChild 말고! prependChild Javascript)

appendChild? 자바스크립트를 사용하다보면 특정 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 배치하고 싶을 때 appendChild 메서드를 굉장히 많이 사용하는데요. 아래 예시와 같은 경우에 appendChild를 사용하곤 한답니다. // html Javascript // javascript const el = document.createElement('li'); el.textContent = 'appendChild'; document.querySelector('.list').appendChild(el); // result Javascript appendChild prependChild? 하지만, 특정 부모 노드의 자식 노드 리스트 중 첫번 째 자식으로 배치하고 싶은 경우도 생..

2021.01.18 게시됨

728x90
반응형