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

개발/기타

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

 포스팅 썸네일 이미지

개발/Javascript

자바스크립트로 HTML5 캔버스(Canvas)에 백그라운드 배경 추가하는 방법

자바스크립트로 캔버스에 백그라운드 색상을 적용하려면 어떻게 할까요? 구현하는 과정은 아래와 같습니다. 캔버스 태그를 생성합니다. 캔버스 컨텍스트(ctx) 객체를 정의합니다. 캔버스 컨텍스트에 색상과 색상을 채울 도형을 만듭니다. 예시 아래 예시는 캔버스를 생성한 후 원하는 백그라운드 색상으로 캔버스에 적용하는 예시입니다. // html 여기서 만들 도형은 캔버스에 꽉찬 정사각형으로 fillRect의 가로, 세로 값을 캔버스의 넓이와 높이로 설정한 것을 알 수 있습니다. // javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#009ac8'; ctx.f..

2021.01.06 게시됨

 포스팅 썸네일 이미지

개발/Javascript

Node.js에서 캔버스(Canvas)로 이미지 만들고 저장하는 방법

Node.js에서 캔버스를 사용해서 이미지로 저장하는 방법은 canvas 라이브러리를 사용하면 간단히 구현할 수 있습니다. Canvas 라이브러리 설치 npm install canvas // or yarn add canvas 사용방법 아래 예시는 이름과 디스크립션 그리고 아이콘을 적절하게 배치하여 캔버스 이미지를 만들고 jpg로 이미지를 추출해주는 예시입니다. 전체 코드 구현 예시 const generateETFThumbnail = (etfName) => { return new Promise(async (resolve) => { const tmpdir = os.tmpdir(); const filename = `${uuidv4()}.png`; const filepath = path.join(tmpdir, ..

2021.01.04 게시됨

 포스팅 썸네일 이미지

개발/기타

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

 포스팅 썸네일 이미지

개발/Vue

앤트디자인(ant-design-vue) 모달 애니메이션 제거하는 방법(Is there any way to disable modal animations?)

프로젝트에서 앤트디자인을 사용하다보면 Modal 컴포넌트의 애니메이션을 제거하고 싶은 경우가 생깁니다. 저또한 Vue 프로젝트에서 ant-design-vue 라이브러리를 사용하면서 Modal 컴포넌트의 애니메이션을 제거하려고 했으나 문서에서 찾으려고 했을 때 바로 나오지 않아서 꽤 귀찮게 찾은 경험이 있어서 해당 이슈 공유합니다. 리액트(React)에서도 동일하게 처리 가능하니 참고바랍니다. Ant Design - The world's second most popular React UI framework ant.design 해결방법 해결방법은 의외로 굉장히 간단합니다. 사용하는 Modal 컴포넌트의 트랜지션과 마스크 트랜지션 속성 이름을 none으로 적용하면 애니메이션 효과가 사라집니다. 어떤 원리인지는..

2020.12.16 게시됨

 포스팅 썸네일 이미지

개발/Google Cloud Platform

[Serverless] Google Cloud Functions에서 환경변수 사용하는 방법 (Using Environment variables)

서버리스 프레임워크에서 구글 클라우드 함수(Google Cloud Functions)를 사용할 때 함수에 환경 변수를 추가하고 싶은 경우가 생깁니다. 이러한 상황에서 환경 변수를 추가하는 방법에 대해서 살펴보도록 하겠습니다. 기본적으로 구글 클라우드 함수(Google Cloud Functions)에서 환경 변수를 사용하는 방법은 아래와 같습니다. 환경 변수 사용 | Cloud Functions 문서 | Google Cloud 배포 시 Cloud Functions에 임의의 키-값 쌍을 설정할 수 있습니다. 이러한 키-값 쌍은 런타임 시 코드에서 액세스할 수 있는 리터럴 환경 변수 또는 빌드팩 시스템의 구성 정보로 표시됩니다. 키-값 cloud.google.com 서버리스(Serverless) 프레임워크에서..

2020.12.14 게시됨

 포스팅 썸네일 이미지

개발/기타

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

 포스팅 썸네일 이미지

개발/Git

Git commit으로 issue 종료하는 방법 (close issue with commit)

Git(github, gitlab)과 같은 버전 관리 시스템을 활용하면 코드 관리 뿐만 아니라 팀원들과의 협업 또한 굉장히 효율적이게 진행할 수 있습니다. git에서 굉장히 자주 사용하는 명령어 중에는 commit이라는 명령어가 있는데요. Commit이란 우리가 추가, 수정, 삭제를 함으로써 코드를 변경한 이력들을 저장하는 행위입니다. commit으로 issue를 종료하는 방법 git commit 명령어를 통해 issue를 종료하는 방법은 굉장히 간단합니다. commit 명령어를 사용할 때 우리는 커밋 메시지를 작성하는데요. 커밋 메시지에 이슈 번호가 같이 기입되어 있는 경우 해당 이슈를 종료처리를 하게 됩니다. 일반적으로 git commit 명령어를 사용할 때는 아래와 같이 사용합니다. git comm..

2020.12.08 게시됨

 포스팅 썸네일 이미지

개발/Git

.git/index.lock file exists 문제 해결하는 방법

git add 명령어를 사용하면 아래와 같은 에러가 발생하는 경우가 생깁니다. fatal: Unable to create '{your-file-path}/.git/index.lock': File exists. Another git process seems to be running in this repository, e.g. an editor opened by 'git commit'. Please make sure all processes are terminated then try again. If it still fails, a git process may have crashed in this repository earlier: remove the file manually to continue. 해결방법..

2020.12.04 게시됨

 포스팅 썸네일 이미지

개발/Vue

Nuxt.js에서 vue-awesome-swiper loop pagination 버그 해결하는 방법

라이브러리 버전 vue-awesome-swiper@4.1.1 swiper@5.4.5 Nuxt.js에서 vue-awesome-swiper를 활용해서 swiper 페이지네이션(pagination) 기능을 구현할 수 있는데요. 구현하려는 의도는 아래와 같습니다. 하지만 swiper 이벤트에 vue 컴포넌트 데이터 변이 로직을 넣으니까 위 의도대로 동작하지 않았는데요. 증상은 아래와 같습니다. swiper에서 제공하는 페이지네이션을 누르자 2번째 슬라이드에서 3번째 슬라이드로 넘어가는 도중 이상한 버그가 발생하여 처음 의도와는 다르게 동작한다는 사실을 발견하게 되었습니다. 구현된 코드 nuxt에서 vue-awesome-swiper를 사용한 코드는 아래와 같습니다. {{ n }} export default { d..

2020.12.01 게시됨

 포스팅 썸네일 이미지

개발/Vue

vue-awesome-swiper Loop + Autoplay + Pagination 적용하기

Swiper 라이브러리에서 무한루프(loop), 페이지네이션(pagination), 자동재생(autoplay)를 유기적으로 버그없이 잘 동작하게 구현하는 것은 생각보다 까다로울 수 있습니다. 이번 포스팅에서는 Swiper 라이브러리를 활용해서 3가지 기능의 타이밍을 정확하게 제어하여 Carousel Slider 기능을 구현해보도록 하겠습니다. 라이브러리 버전 vue-awesome-swiper@4.1.1 swiper@5.4.5 구현할 최종 결과물 우리가 구현할 최종 결과물은 아래와 같습니다. 코드 vue-awesome-swiper를 활용해서 구현한 예시는 아래 코드와 같습니다. // template code {{ n }} v-swiper를 적용하는 태그에 v-once 디렉티브를 같이 적용해야 됩니다. v-..

2020.12.01 게시됨

728x90
반응형