사용중인 VSCode(Visual Studio Code) 확장 플러그인 목록
Jan 19, 2018 (Updated: Mar 30, 2020)
·Jr. Web Front-end Developer. / javascript, react ...
Junho Baik
Korea
- Visual Studio Code 에서 사용중인 확장을 정리해둔 글입니다. Front-End 개발 환경에 맞게 되어있습니다. 는 강력 추천! VSCode 기본 플러그인 및 테마 Korean Language Pack for Visual Studio…
ECMAScript ES2016~ES2020 정리
2020년을 맞아 이미 많이 알고 있는 ES2015(ES6) 다음부터인 ES2016부터 ES202…GitHub에 GPG 서명 등록하기 (macOS)
설치 우선 Homebrew 를 통해 gpg 패키지를 설치한다, 추가로 gpg 키 관리 프로그램인 GPG-SUITE를 설치한다. key 생성 키 생성 방법은 두가지가 있다. gpg-suite를 통한 설치 터미널내에서 설치…React Hooks: useState, useEffect 알아보기
뒤늦은 Hooks 포스팅입니다. Hooks 기본을 정리해보고, 사용해오면서 알게 된 점도 정리해봅니다. 간단히 useState에 대해 설명하고, useEffect에 대해서는 조금 더 자세하게 알아봅니다. Hooks는 React 16.…Borderless 테마로 Gatsby 블로그 만들기
지금 이 글을 보고 있는 블로그는 Borderless 테마를 사용하고 있는 블로그입니다. Gatsby를 이용해 제작되었으며 Gatsby에 대한 간략한 설명은 이전 글(Gatsby로 블로그 만들기)에서 확인 할 수 있습니다. Borderless…Dec 30, 2019Borderless 블로그 - 소개
정적 사이트 제작 프레임워크 Gatsby를 이용해 만든 블로그, “Borderless” 테마입니다. 심플한 디자인 마크다운 지원 게시물 태그 기능 게시물 검색 기능 시리즈 게시물 기능 Google Analytics Google Adsense…Borderless 블로그 - 개발기
기존 블로그에서 새로 블로그를 구현했다. 테마 이름은 “Borderless”이다. 말그대로 블로그 디자인 요소에 선이 없어서 이렇게 지었다. 이번에도 동일하게 Gatsby…현재까지 개발한 결과물에 대한 이야기 2019
이 글은 개발해서 운영하고 있는 서비스에 대한 잡담과 같은 후기이다. 현재까지 개발해서 지속적으로 운영하고 있는 결과물은 5개 정도이다. Blog Netflix AutoSkip Tablo Tablo (version 2) WhatSubs Blog…Dec 29, 2019App Store Connect에 입력한 내용이 App Store에 어떻게 보일까?
App Store Connect에서 앱 정보를 입력하고 실제로 출시한다면 App Store에서 입력한 항목들은 어디에 어떻게 위치하게 될 지 정리해보았습니다. 아래는 App Store Connect에서 입력하고 App Store…Dec 06, 2019WhatSubs 앱 개발기 (React-Native, Expo)
Google Play Store Apple App Store WhatSubs라는 iOS, Android 플랫폼의 React Native…CSS 방법론 - BEM
CSS 방법론은 스타일을 정의하는데 있어 엘리먼트의 class와 id를 어떻게 다루는지, 네이밍을 어떻게 하는지의 방법을 정의해 더 직관적인 스타일 코드를 작성하고 팀 단위의 개발을 원할하게 하는데 사용된다. 대표적으로는 BEM, OOCSS…NVM, Node 설치 및 관리하기
해당 포스트는 macOS 환경을 기준으로 작성되었습니다 NVM(Node Version Manager) Node 버전을 쉽게 관리 할 수 있다. 예로 사용하던 패키지가 Node 버전이 업데이트를 함에 따라 호환이 되지 않을 경우가 생길 때 NVM…MongoDB 기초, CRUD 명령어
MongoDB 문서를 참고해, CheatSheet 개념으로 정리해본 기초 Mongo Shell CRUD 명령어. 이 포스트에서는 기초적인 것만 다루며 Option, Evaluation Query 등은 다루지 않습니다. Database Database…mac 터미널 환경 구성하기 (zsh, oh my zsh, zplug, hyper)
개발환경 구성에 앞서 제일 먼저 필요하다고 할 수 있는 터미널 환경 세팅. 여기서는 zsh 쉘을 사용하며, oh my zsh 설치 후 zsh 플러그인 매니저인 zplug를 설치하여 플러그인을 관리합니다. 또한 터미널 앱으로는 hyper…MongoDB 설치하기 (mac, homebrew)
MongoDB를 본격적으로 사용하기 앞서, 설치와 실행 그리고 추가적인 툴의 설치와 사용까지 기본적으로 알아보겠습니다. macOS / HomeBrew의 설치 환경에서 진행됩니다. Install MongoDB Tap the MongoDB Homebrew…사용중인 mac App 목록 및 앱 추천
현재 mac Catalina developer beta의 환경으로 사용하고 있었는데, 지금까지 설치한 앱들이 너무 많고 메뉴바 또한 넘처나기 직전이다. bartender, dozer와 같은 메뉴바 정리 앱으로 정리를 했는데도 말이다. 그래서 macOS…JavaScript 함수형 프로그래밍, go / pipe
a, b, c.. 라는 함수가 있다고 가정하자. 위와 같이 함수가 중첩되고 연속된다면 가독성도 좋지않고 작성하는데도 어려움이 있다. 함수들을 연속적으로 사용하는 함수, 함수들을 함축하는 함수인 go/pipe에 대해 알아보자 go go…이터러블 프로토콜, 이터러블/이터레이터
이터러블 프로토콜은 ES6에서 도입된 것으로 간단히 말하면 이터러블 프로토콜은 순회(반복) 가능한 객체를 나타내는 프로토콜이라 할 수 있다. 반복문, 전개 연산자(Spread Operator…AJAX, XMLHttpRequest와 Fetch 살펴보기
AJAX(AsynchronousJavaScriptAndXML)는 비동기 자바스크립트를 뜻하는 것으로, 이제는 비동기적 자바스크립트 동작을 하는 기술들을 통들어서도 AJAX라고 부릅니다. 최초로 Microsoft의 Internet Explorer…pyenv를 이용해 Python 설치하기 (macOS)
(macOS Mojave 환경에서의 포스팅입니다) pyenv는 nvm(Node Version Manager…크롬 확장프로그램 "Tablo" 소개 및 개발기
Tablo - Bookmark and manage tabs 다운로드 링크 : Chrome WebStore - Tablo 우선 Tablo…Jan 08, 20192018년의 JavaScript 동향, 그리고 전망
2018년의 Javascript 통계를 나타낸 사이트를 발견하고 간단히 정리해보았다. 약 2만명이 넘는 Javascript 개발자를 대상으로 설문조사를 한 결과이다. 자세한 통계는 아래 자료 출처 사이트에서 참고할 수 있다. 자료 출처 : 201…현재까지 개발한 결과물에 대한 이야기
…Dec 03, 2018meta 태그를 알아보자 (웹표준과 SEO)
처음 웹개발을 배울 때 웹표준을 배웠던 것 사실만 어렴풋이 기억난다. 그 이후 개발을 해오면서는 거의 신경쓰지 않고 개발했던 것 같다. 얼마 전, 이 블로그를 개발하면서 검색 엔진 노출을 위해 웹표준, SEO…Gatsby로 블로그 만들기
서론... 일단 Gatsby는 Jekyll과 같은 정적 페이지 생성 프레임워크이다. (본인이 생각하는) 장점은 React + Webpack 으로 되어있다는 점. Jekyll은 익숙치 않아 테마를 사용하고 개인화하는데 불편함이 있었는데 익숙한 React…git 특정한 파일 병합(merge) 하기
git에서 특정한 파일만 merge 하고 싶을 때가 있다. B 브랜치를 A 브랜치에 merge 하려하는데 특정 파일(./a.js)만 병합하고 싶을 상황일 때 쓸 수 있는 방법이다. 정확히는 merge…React 16, Returning null from setState
어떠한 이유로 컴포넌트의 업데이트를 하고 싶지 않을 때 사용 할 수 있다. 이전에는 을 하더라도 컴포넌트가 업데이트 되었으나 React 16 부터는 업데이트가 되지 않는다. 간단한 코드를 살펴보자 위의 코드는 state…react 16, Error handling with HOC
리액트 16 에서는 LifeCycle에 많은 변화가 있었고 1…react 16, Portals
Portals은 루트 리액트 컴포넌트가 아닌 외부의 DOM에 접근하여 변경할 수 있게 해준다. 쉽게 말하면 react…React 16, Fragments
React 16 이전에서는 return 시 하나의 컴포넌트 또는 null만 가능했다. 그래서 wrapper를 쓰는 방식으로 div로 감싸던가 아니면 span을 이용하던지, 그것도 아니면 array를 쓰는 등 여러 불편한 방법을 사용했었다. 하지만 1…GitHub 서버 오류, 시스템 이상할 때 상태를 확인하기
몇시간 전부터(현재 181023 04:41) github 가 이상하다, 5시간 전에는 로그인 부분이 이상이 있었다, 지금은 이부분은 해결되고 github page 를 업데이트해도 반영이 되지 않고 있다. 올해들어 세번정도 github…Radio Button의 색상 등 css를 바꾸기
라디오 버튼의 스타일 바꾸기 검색을 통해 쉽게 얻을 수 있는 라디오 버튼의 스타일 바꾸는 것은 대부분 :after, :before…블로그 개편 (Jekyll -> Gatsby)
블로그 개편, use Gatsby 기존 Jekyll을 이용 다른 사람의 테마를 사용하여 블로그를 운영해오고 있었습니다만 Jekyll로 제작된 블로그를 마음대로 수정하기에는 루비라던가 익숙하지 않은 것이 많아 고민이었는데 마침 Gatsby…mac의 한글키에서 원화(₩)가 아닌 백쿼트(`)가 입력되도록 하기
…Angular 시작하기 (개발 환경 구성)
Angular 개발을 시작하기 전, 개발에 앞서 개발 환경 구성과 간단한 사용을 먼저 해보자. TypeScript Augular를 본격적으로 하기 전 TypeScript…콘솔에 색상을 입혀주는 'Colors' 모듈 사용해보기
colors 모듈은 우리가 흔히 사용하는 의 출력문에 색상을 입힐 수 있다. 설치 사용하기 기본적인 사용. 아래와 같은 사용도 가능하다. 아래와 같은 방식으로 커스텀 테마를 지정해 사용할 수도 있다.May 06, 2018HTML에서 script태그는 어디에 위치해야 할까?
처음 html, javascript를 공부 할 때는 script 태그는 head 태그에 위치하게끔 하는 코드나, 또는 body 태그의 어디에 위치하건 그 위치에 대해 별 의미를 두지 않는 코드들이 많았다. 하지만 지금은 항상 스크립트는 body…Jekyll 블로그 테마 '쉽게' 적용하기 (minimal-mistakes)
기존 Jekyll을 이용한 블로그는 현재(2018.09) Gatsby를 이용한 블로그로 개편되었습니다. Jekyll의 minimal-mistakes테마를 이용한 블로그를 만들고 싶다면 아래 게시물은 아직 유효합니다. Jekyll…ES6, Hoisting으로 다시 보는 let, const
Javascript Hoisting에 대해 다시 살펴보던 도중, 예전에 공부할땐 var를 대상으로 공부했으니 깨닫지 못했는데 이번에 let, const…넷플릭스 정주행을 위한 인트로 자동 스킵 크롬 확장 프로그램 (Netflix AutoSkip)
Netflix AutoSkip…웹팩 대신 파셀(Parcel) 사용해보기 with React, Babel, SASS
주로 CRA(create-react-app)을 이용한 리액트 개발을 주로 해왔고 그로 인해 웹팩(Webpack) 번들러를 통해 간단한 설정 변경 등을 해왔는데 이번에 새로운 번들러인 파셀(Parcel…Vue.JS 및 Vue 개발 도구 설치하기
Vue.JS 설치 CDN으로 설치하기 간단히 index.html 내에 위 코드를 추가하는 것만으로 vue를 간단하게 사용할 수 있다. 다만 CDN을 기반으로 Vue를 개발하려면 .vue…MacOS, 심볼릭 링크 사용하기
Symbolic Link…Feb 20, 2018개발자 글꼴 Hack, 그리고 VSCode 글꼴 설정하기
코딩용 폰트는 여러가지가 있다. JAVA 사용자가 많이들 선호하는 Consolas나 요즘 뜨고 있는 fira code라던가 말이다. 많은 폰트를 써봤지만 현재는 Hack…HTML 데이터 속성 사용하기 (data-, dataset)
HTML 태그안에 데이터 속성(data-)을 두어 그 데이터를 JS나 CSS에서 불러 쓸 수 있다. HTML 뒤에 데이터 속성의 이름을 입력한다. , , , 와 영문 소문자가 입력 가능하다. (대문자는 불가능) 위의 예제에서는 test…Visual Studio Code 설정 기기 간 동기화하기
Visual Studio Code를 쓰기 시작하면서 데스크탑과 랩탑간 설정 동기화가 필요해 방법을 찾다가 확장 플러그인 Settings Sync를 사용하여 하는 방법을 발견했다. 1. 확장 플러그인 'Settings Sync' 설치 https…VSCode(Visual Studio Code)에서 React JSX 자동완성 기능 활성화하기
WebStorm을 쓰다가 Visual Studio Code를 사용하니 React를 쓰기에 불편함이 한두가지가 아니다. 제일 처음 맞은 불편함이 JSX에서 emmet…간단하게 MySQL 설치하기 (Mac, HomeBrew)
MacOS 재설치 후 기본적인 설정을 하면서 간단히 정리해본 MySQL 설치 과정 MySQL 설치 brew 명령어를 위한 HomeBrew 패키지 관리자 미설치시 아래 명령어를 통해 설치 필요 MySQL 설정 아래 명령어로 mysql…간단하게 Node.js, npm, yarn 설치하기
MacOS 재설치 후 기본적인 설정을 하면서 간단히 정리해본 Node.js, npm, yarn 설치 과정 Node, NPM 설치 Node를 설치하기에 가장 간단하고 좋은 방법이라 생각하는 HomeBrew…Mac Terminal 설정 (zsh, oh my zsh, plugin)
새로운 포스트로 업데이트 되었습니다. 아래 링크를 통해 확인할 수 있습니다. mac 터미널 환경 구성하기 (zsh, oh my zsh, zplug, hyper) MacOS 재설치 후 기본적인 설정을 하면서 간단히 정리해본 Mac…Jan 29, 2018Jekyll 블로그 테마 적용하기 (minimal-mistakes)
기존 Jekyll을 이용한 블로그는 현재(2018.09) Gatsby를 이용한 블로그로 개편되었습니다. "Gatsby를 이용한 블로그 만들기" 바로가기 Jekyll의 minimal-mistakes…Jekyll 블로그 시작하기 (MacOS, GitHub Page)
참고: 지금 계신 블로그는 기존 Jekyll을 이용한 블로그에서 현재(2018.09) Gatsby를 이용한 블로그로 개편되었습니다. 원래는 Hexo 블로그 프레임워크를 사용하여 블로그를 시작하려했었다. Hexo를 사용하려던 이유는 Node.js…Javascript 함수선언문과 함수표현식
자바스크립트에서 함수선언문과 함수표현식의 차이점을 인식해두는 것은 중요한 점이다. 큰 차이점이라 하면 호이스팅(Hoisting…Git, Alias(별칭)를 이용하여 편리하게 명령어 사용하기
처럼 명령어를 입력하면 Log를 보기 좋게 출력할 수 있는데, 매번 이 명령어를 치기도 곤혹이다. Linux의 alias…자바스크립트 호이스팅(Hoisting)
Hoist…React 프로젝트에 SASS 적용하기
환경 Create-react-app (CRA) SCSS 로 적용 적용법 react 설정 eject & sass…PHP Cookie, Session
Cookie 클라이언트(브라우저)에 데이터를 저장한다. 위 코드의 문제점 위 코드가 HTML 코드 안에 포함되어있다면 위와 같은 Warning을 만나게 되는데 HTML 코드 바깥으로 setCookie…자바스크립트에서 세미콜론(;)을 안써도 될까?
…자바스크립트의 숫자 타입(Number Type)
Javascript는 Java와 달리 int, double 같은 숫자 타입이 나눠져있지 않다. number 하나로 정수(Integer)와 부동 소수점 수를 모두 표현한다. 숫자 리터럴 .12, 1…자바스크립트 ES6 Set, WeakSet / Map, WeakMap
Set 중복없이 유일한 값을 저장하기 위한 타입, 이미 존재하는지 체크할때 유용하다 WeakSet 참조를 가지고 있는 객체만 저장이 가능하다. 참조를 가지고 있던 객체가 참조를 잃게 되면 (null…자바스크립트의 배열(Array)
자바스크립트의 배열은 어떤 타입이던 담을 수 있고, 배열 크기도 미리 정하지 않는다. 배열에서 빈 슬롯의 주의점 배열에서 주의 해야할 점은 중간에 빈 구멍이 있는 배열을 조심해야 한다. 위와 같은 코드가 있을때 배열의…자바스크립트의 타입들
Javascript Variable Types…자바스크립트 ES6 프록시(Proxy)
Proxy : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy 권장되는 패턴 reference 모던 자바스크립트(javascript…자바스크립트 ES6 module(export&import)
ES6에서 출현한 module 기능은 브라우저 호환성이 아직은 완전하지 않다. devOps로 webpack, babel 등을 활용해 사용해 서비스 코드를 만드는 것이 좋다. 기본 사용법 app.js foo.js 심화, 서비스 코드 구현 app.js…자바스크립트 ES6 Object setPrototypeOf
setPrototypeOf 로 프로토타입 객체를 추가 할 수 있다. object에 prototype을 추가한다. setPrototypeOf 로 개체간 prototype Chain 만들기 reference 모던 자바스크립트(javascript…자바스크립트 ES6 클래스(Class)
자바스크립트에도 이번 ES6에서 Class라는 키워드가 생겼다. 아래는 기존 자바스크립트의 코드이다. 아래는 Class…자바스크립트 ES6 Object.assign
아래 코드는 Object create를 사용한 코드이다. 아래 코드는 위의 코드에 Object assign을 사용한 코드이다. 와 같이 계속해서 추가해야하는 수고를 덜어줄 수 있다. Object assign 으로 Immutable…자바스크립트 ES6 Arrow Function
ES6 에 출현한 새로운 형태의 함수 표현 방법 Arrow Function, this context 위의 코드는 아무런 문제 없이 작동하는 코드이다, runTimeout은 settimeout때문에 이벤트큐에 등록 된뒤 실행되는 것이라 this…자바스크립트 ES6 from
Javascript에서는 배열로 보이지만 정작 배열이 아닌 형태의 것들이 존재한다. 예로 메소드로 전달되는 인자들을 활용하는 arguments 객체같은 경우에도 배열같아보이지만 실제 배열은 아니다. 따라서, map…자바스크립트 ES6 Spread operator, 펼침 연산자
쉽게 말해 배열을 펼쳐주는 역할이다. '' ''를 떼어낸다고 생각하면 쉽다. 배열을 바꾸지 않고 새로운 값을 복사, 배열을 합치거나 배열을 펼쳐진 상태로 파라메터로 전달 등의 활용이 가능하다.자바스크립트 ES6 String Methods
String.prototype.startsWith() 문자열이 특정 문자로 시작하는지 확인, 결과를 true, false로 반환. String.prototype.endsWith() 문자열이 특정 문자로 끝나는지 확인, 결과를 true, false…자바스크립트 for문들의 유형과 차이점
Javascript 'For Loop' 자바스크립트에서 사용하는 for 반복문의 유형에 대해 알아보자. for for in for of (ES6) - for - for in variable object 일때 variable = object…자바스크립트 ES6 const, let
ES6 (ES2015) 에서는 새로운 선언 방법이 생겼는데, 그것이 const와 let이다. 기존에 다른 프로그래밍 언어를 사용하고 왔다면 처음 var 를 접할때 당황스러운 점을 느껴본 적이 있을 것이다. var…리액트 생명주기 (React LifeCycle)
출처 : https://velopert.com/1130 - Mount 컴포넌트가 실행 될 때, 'Mount 된다' 라고 표현. 컴포넌트가 시작되면 제일 초기의 작업은 context, defaultProps, state…자바스크립트의 스코프(Scope)
스코프 = 현재 접근 할 수 있는 변수들의 범위 예제 1 버튼 3개를 각각 클릭했을때 결과값은 모두 "Click btn…리액트 라우터 V4 사용하기 (React-Router v4)
SPA(Single page application) 에서는 새로운 페이지 전체를 렌더링하지 않고, 부분적인 UI…자바스크립트 this
call(), apply() 두 함수는 function 객체의 기본 내장 함수이다. 일반적으로 함수가 호출될 때는 내부적으로 call() 함수로 변형되어서 처리된다. call과 apply 함수는 this를 자동적으로 만들어진 this…자바스크립트 클로저(Closure)
함수, 함수가 선언될 때의 environment로 구성 함수가 정의 될 때의 environment가 함께 closure로 결합되면서, 다양한 활용이 가능 counter1의 closure 함수 : function Increase…자바스크립트 프로토타입(Prototype)
자바스크립트에서 모든 객체는 자신의 부모 객체와 연결 되어있다. 이것을 이용하여 객체지향에서 자식이 부모 객체의 요소를 가져다 쓸 수 있는 상속 개념을 사용할 수 있다. 모든 객체는 자신을 생성한 생성자 함수의 prototype…