개발/Javascript

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

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

개발/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 ..

개발/CSS3

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

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

개발/CSS3

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

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

개발/Git

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

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

개발/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); // 결과 // 문자..

개발/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? 하지만, 특정 부모 노드의 자식 노드 리스트 중 첫번 째 자식으로 배치하고 싶은 경우도 생..

개발/Javascript

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

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

개발/Node.js

Node.js 티스토리 파일 업로드 API 구현하는 방법(multipart/form-data 이놈..)

Node.js를 활용해서 티스토리 파일 첨부 API를 사용한 경험에 대해서 공유하고자 합니다. 필자는 Node.js + Puppeteer를 활용해서 티스토리 파일 첨부 API를 구현하려고 했으나 몇 가지 시행착오가 발생했고, 많은 삽질을 통해 이 문제를 해결하여 글로 남겨둡니다. Node.js로 티스토리 파일 첨부 API를 사용하기 위해서 우선 필자의 경우는 동적으로 이미지를 만들고, 동적으로 만든 이미지를 임시 파일 저장소에 임의의 파일 이름으로 경로를 지정하고 생성한 후, 해당 파일을 티스토리 파일 첨부 API를 활용해 업로드를 합니다. 동적 파일 생성 Node.js fs createWriteStream 메서드를 활용해서 필자는 업로드 하고자하는 이미지를 만든 후 임시 파일 저장소에 파일을 저장합니다..

개발/Node.js

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

개발/기타

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

개발/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으로 적용하면 애니메이션 효과가 사라집니다. 어떤 원리인지는..

개발/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) 프레임워크에서..

개발/기타

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에 등록되었는지 확인하기 위해 터미널..

개발/Git

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

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

개발/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. 해결방법..

개발/Nuxt.js

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

개발/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-..

개발/Javascript

[Javascript] for, while 반복문에 async await를 활용해 delay 거는 방법

자바스크립트 반복문에 딜레이 거는 방법에는 다양한 방법이 존재하겠지만, ES7 async/await 구문을 활용하면 굉장히 깔끔하게 이 부분을 제어할 수 있습니다. 이번 포스팅에서는 async/await을 활용해서 for 반복문, while 반복문에서 딜레이 거는 방법에 대해 소개해드리도록 하겠습니다. 사실 for문에서나 while문에서나 딜레이 거는 방법은 동일합니다. 반복문에 딜레이를 걸기 위해서는 비동기 함수로 반복문을 감싼 후 반복문 내부에서 순회를 할 때마다 await을 통해 딜레이를 걸어주는 방식입니다. for문에서 delay 거는 방법 const timer = ms => new Promise(res => setTimeout(res, ms)) async function load () { for..

개발/CSS3

CSS width height 같게 반응형 정사각형 만드는 방법 (CSS width height same)

CSS 작업을 하다보면 너비값(width)은 가변으로 설정이 되지만, 높이값(height)은 가변으로 설정이 되지 않아서 고민을 해본 경험이 있을 것입니다. 이번 포스팅에서는 너비값 기준으로 높이값도 동일하게 가변으로 적용하기 위한 방법에 대해서 다뤄보도록 하겠습니다. 구현 예시 우리가 구현해볼 예시는 아래와 같습니다. CSS로 너비값이 퍼센트(percentage)로 설정되어 있고, 높이값 또한 퍼센트로 세팅해서 디바이스의 크기에 따라 원하는 가변 사이즈의 정사각형을 만들어 내는 것 입니다. 아래 코드와 같이 가변 너비값과 동일하게 높이값을 동일하게 퍼센트로 설정하면 어떻게 될까요? .box { float: left; width: 25%; height: 25%; background-color: blue;..