개발/기타

외부 링크 금지 이미지 레퍼럴 허용하는 방법 (HTML img referrerpolicy)

헤더 referrer 값을 통해 외부 링크 공유 금지를 적용한 이미지에 대해서 no-referrer 설정을 통해 이미지를 보여줄 수 있습니다. 브라우저 서포트를 확인해보면 IE를 제외한 대부분의 브라우저에서 활용할 수 있습니다. 참고 HTMLImageElement.referrerPolicy - Web APIs | MDN The HTMLImageElement.referrerPolicy property reflects the HTML referrerpolicy attribute of the element defining which referrer is sent when fetching the resource. developer.mozilla.org

개발/기타

VSCode에서 사용하지 않는 변수 확인하는 방법 (how to show unused variable without ESLint)

VScode에서 자체적으로 사용하지 않는 변수를 확인하는 방법이 있습니다. 물론 ESLint를 활성화해서 기본적으로 사용하지 않는 변수와 파라미터를 체크할 수 있겠지만, 이를 활용하지 못하는 프로젝트에서 꽤 유용하게 사용할 수 있는 기능입니다. 설정방법 Step 1: VSCode 설정 페이지로 이동 [Command + , ]을 눌러 VSCode 설정으로 이동합니다. Step 2: Settings.json 열기 우측 상단에 아래 메뉴 아이콘을 누릅니다. Step 3: editorUnnecessaryCode.border 추가 { ... "workbench.colorCustomizations": { "editorUnnecessaryCode.border": "#f0f" } } 결과

개발/기타

VSCode에서 사용하지 않는 import 제거하는 방법 (How to remove unused imports in VSCode)

매번 코드를 작성하다가 사용하지 않는 import 구문들을 정리하지 않고, 넘어가는 경우가 있습니다. 물론 Eslint의 도움을 받아 경고나 에러 처리를 하여 관리를 할 수 있지만, VSCode 옵션에서 저장할 때 이러한 불필요한 구문을 제거해주는 기능이 있습니다. 설정방법 [Command + , ]을 눌러 VSCode 설정으로 이동합니다. 우측 상단에 아래 메뉴 아이콘을 누릅니다. settings.json 파일에서 아래 코드를 추가합니다. { ... "editor.codeActionsOnSave": { "source.organizeImports": true }, } 이제 코드에서 불필요한 import을 추가해보고 저장을하면 자동으로 해당 import 구문이 제거되는 것을 확인할 수 있습니다!

개발/기타

nvm 기본(default) 노드 버전 변경하는 방법

nvm에서 기본 노드 버전 변경하는 방법은 nvm에서 바라보고 있는 default alias를 변경하면 됩니다. 아래는 현재 12.21.0 버전을 default로 바라보고 있는 것을 확인할 수 있습니다. default를 16.13.2로 변경하도록 하겠습니다. 아래 nvm 명령어로 default alias를 변경합니다. nvm alias default 16.13.2

개발/기타

외부에서 로컬호스트(localhost) 접속하는 방법 | localtunnel 사용법

내부망 PC의 로컬호스트(localhost)를 외부 인터넷 망(다른 컴퓨터)에서 접근해야되는 경우가 있습니다. 회사에서 빠르게 다른 유관자들에게 현재 진행상황을 공유해야되거나 PC에서 개발하는 프로젝트를 모바일에서 잠깐 확인해야될 경우가 있을 때 유용하게 사용할 수 있습니다. 이때 일반적으로 사용하는 서비스가 바로 ngrok인데요. 대부분 ngrok을 무료 계정으로 이용할텐데 무료 버전의 경우 실행할 때마다 매번 서브도메인 이름이 랜덤으로 변경되기 때문에 조금 불편할 때가 있습니다. localtunnel? Localtunnel을 사용하면 DNS 및 방화벽 설정을 망치지 않고 로컬 개발 시스템에서 웹 서비스를 쉽게 공유할 수 있습니다. Localtunnel은 모든 요청을 로컬에서 실행 중인 웹 서버에 프록..

개발/기타

VSCode 자동완성 단축키 초간단 설정방법

맥북에서 VSCode를 사용하다보면 자동완성되는 단축키를 커스터마이징하거나 명령어를 확인하고 싶은 경우가 있습니다. 이번 포스팅에서는 VSCode에서 자동완성 단축키를 간단하게 설정하고, 확인하는 방법에 대해서 소개하도록 하겠습니다. Keyboard Shortcuts 설정방법 VSCode에서 키보드 자동완성(Keyboard Shortcuts)를 확인할 때 상단 Code > Preferences 메뉴를 사용하거나 검색을 통해 Open Keyboard Shortcuts를 통해 Keyboard Shortcuts 설정 페이지로 접근합니다. 아래 Keyboard Shortcuts 페이지에서 사용하고 있는 커맨드를 확인하고, 원하는 단축키로 변경할 수 있습니다. VSCode에서 "Trigger Suggest" 커맨..

개발/기타

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

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

개발/기타

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

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

개발/기타

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

개발/기타

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

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

개발/기타

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

개발/기타

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

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

개발/기타

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

개발/기타

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

개발/기타

웹 브라우저 별 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..

개발/기타

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를 사용할 때가 있..

개발/기타

스토리북(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..

개발/기타

스토리북(Storybook) v5.3 시작하기 - 기본적인 사용법

스토리북이란 스토리북(Storybook)은 UI 컴포넌트를 위한 유저 인터페이스 개발 환경 및 자유롭게 컴포넌트를 테스트할 수 있는 도구입니다. 스토리북을 활용하면 개발자는 독립적인 환경에서 컴포넌트를 개발할 수 있고, 개발환경에서 컴포넌트들을 인터랙티브하게 보여줄 수 있습니다. 스토리북(Storybook)은 기본적으로 애플리케이션 외부(독립적인 개발환경)에서 실행되므로 사용자는 애플리케이션별 종속성 및 요구 사항에 대해서 걱정할 필요 없이 UI 컴포넌트를 독립적으로 개발할 수 있습니다. 스토리북은 다양한 부가기능(addons)를 지원하며 커스터마이징하기 쉽게 굉장히 유연한 API를 제공합니다. 스토리북의 정적 버전(a Static version of Storybook)은 빌드하여 HTTP 서버에 배포할..

개발/기타

소스코드를 깔끔하게 이미지로 추출하는 방법 (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..

개발/기타

[안드로이드] 갤럭시 개발자옵션 아주 쉽게 활성화 시키는 방법 (안드로이드 디버깅, 크롬 웹뷰 디버깅)

개발자 옵션 활성화하기 안드로이드 개발을 하기 위해서 안드로이드 스마트폰 개발자 옵션을 활성화 해주는 것은 필수적입니다. 물론 안드로이드 개발 뿐만 아니라 웹 개발자가 모바일웹을 확인하거나 애플리케이션 안에 웹뷰로 들어가 있는 웹을 확인하기 위해서 사용하곤 합니다. 기본적으로 USB 디버거모드를 켜기 위해서 사용하곤 하는데요. 개발자옵션을 활성화하는 방법은 아래와 같습니다. 1. 우선 스마트폰의 설정에 들어가서 휴대전화 정보 탭을 누릅니다. 2. 휴대전화 정보 탭에서 소프트웨어 정보를 들어갑니다. 3. 소프트웨어 정보에서 빌드번호가 있는데 이 빌드번호를 여러번 연타로 터치하면 개발자 옵션이 활성화 되었다는 메시지가 뜹니다. 다시 설정으로 돌아가면 아래와 같이 개발자 옵션 탭이 활성화 되었음을 확인할 수 ..