이 글은 Introducing Sass Module)를 참고하여 정리하였다. 최근, SCSS(사스, Sass)에 모듈 시스템(Module System)을 지원하기 위한 새로운 feature들이 몇가지 승인(accepted)되었다. 그 중에 at-ru…
27 October, 2019
요즘 프론트엔드 개발자들은 (Visual Studio Code)를 가장 많이 사용한다. 그렇다보니 버그 수정이나 기능추가가 상당히 빠르다. 또한 Typescript와의 호환성도 훌륭하다. 아마도 MS에서 둘다 만들었기 때문이라 생각한다. 그리고 VS…
29 September, 2019
그 동안 로 작업하면서 배운것들에 대해 알아보자. flexbox의 기초 flexbox의 기초를 다룬 좋은 글이 많기 때문에 여기서 다시 다룰 필요는 없을것 같다. 만약 flexbox에 대해 잘모르거나 잘 생각나지 않는분들이라면 아래 링크를 한번씩 …
28 July, 2019
공지사항이나 FAQ 페이지에는 가 많이 사용된다. 이라고도 하는데, 기본적인 리스트에서 각 항목을 터치(클릭)하면 세부 내용이 확장되는 형태의 UI다. 비교적 간단한 UI기 때문에 css와 javscript를 적절히 조합하면 누구나 손쉽게(feat.…
07 June, 2019
react에서 modal 뷰 구현을 위해 react-modal 패키지를 사용한다. 근데 이 react-modal을 쓰다보면 한가지 문제에 부딪힌다. 바로 모달 외부의 dimmed 영역이 스크롤되는 문제다. 예제를 살펴보자 (모바일이라면 반드시 새창으…
25 April, 2019
최근 몇년간의 웹 생태계는 마치 전쟁터와 같았다. 아니, 지금도 전쟁중이다. 각종 도구들부터 시작해서 웹 프레임워크까지, 한시라도 눈을 떼면 뒤쳐져버리기 일쑤다. 요즘, 국내에서도 프론트엔드 개발자라면 리액트(react)나 뷰(vue) 둘 중 하나는…
26 November, 2018
한동안 hexo 로 운영하던 github page 블로그에 글을 올리지 않았다. 최근 하나 올렸지만 거의 5 개월만이었다. 그 사이, 개발과는 무관한 블로그를 새로 시작했다. 예전부터 사용하던 블로그 플랫폼인 에 둥지를 틀었고, 6 월부터 대략 세달…
07 October, 2018
의문은 아래와 같은 코드에서 시작되었습니다. 객체를 매개변수로 받는 함수에 새롭게 만든 객체를 인자로 전달하였습니다. 그리고 함수에서 obj 변수에 새로운 객체를 할당하였습니다. 과연 는 어떤 값이 출력될까요? Call By Value 가끔 일하…
15 September, 2018
이벤트 버블링 / 캡쳐링 특정 DOM 노드에서 발생한 이벤트는 부모 또는 자식으로 전파됩니다. 자기자신(currentTarget)에서 부모로 전파되면 이벤트 버블링(event bubbling)이라 하고, 부모에서 자기 자신으로 전파되면 이벤트 캡쳐링…
23 April, 2018
nextjs 로 프로젝트를 진행한지도 반년 가까이 흘렀습니다. nextjs는 서버사이드렌더링(SSR)과 code splitting 등을 지원하는 reactjs 전용 프레임워크입니다. 2 년도 채 안되는 시간에 벌써 5.x(곧 버전 6 도 나올것 같네…
15 April, 2018
react v16.3.0 이 릴리즈 되었습니다. 개인적인 생각으로는 가장 큰 변화는 두가지 정도입니다. 첫번째는 몇몇 lifecycle method 가 deprecated 되었습니다. 그리고 새로운 Context API 가 추가되었습니다. 그 외에 …
05 April, 2018
CSS 는 일련의 가중치에 따라서 어떤 속성을 우선적으로 적용할 것인지 결정합니다. 우선순위에 대한 정보는 조금만 검색해보면 나오므로 간단히 링크로 대체합니다. 현재 회사에서는 nextjs((https://github.com/zeit/next.js/…
25 March, 2018
React 프로젝트에서 가장 많이 사용되는 테스트 모듈로 Jest가 있습니다. react 와 Jest 둘 다 페이스북이 만든 오픈소스 프로젝트입니다. 같은 회사에서 만든 오픈소스기 때문에 서로 호환이 잘 될거라는 믿음으로 사용하고 있습니다. 호환성과…
21 March, 2018
this 는 어렵지 않습니다. this 를 어렴풋이 알고는 있지만, 누가 물어봤을때 제대로 대답해 줄수 있도록 정리해보겠습니다. 많은 개발자들이 javascript 의 this 를 혼란스러워합니다. 사실 개념 자체가 어렵진 않습니다. 다만, 다른 프…
12 March, 2018
async, await 는 ES8(ECMAScript2017)의 공식 스펙(링크)으로 비교적 최근에 정의된 문법입니다. 를 사용하면 비동기 코드를 작성할 때 비교적 쉽고 명확하게 코드를 작성할 수 있습니다. 자바스크립트는 싱글 스레드 프로그래밍언어기…
27 February, 2018
원본: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ 의역, 오역이 가득합니다. 개인적으로 정확한 개념을 잡기 위한 번역입니다. 불필요하다 생각한 내용은 과감히 제거했습니…
28 January, 2018
리액트를 개발하다보면 이런 코드를 본적 있을것입니다. this(아마도 react 클래스 객체)에 속한 어떤 메서드를 다시 this 에 bind 한다라?? 굳이 왜 이런짓을 해야하는지 의문이 들만합니다. 리액트에서 이러한 코드가 빈번하게 작성되는 이유…
01 July, 2017
원본 : https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 2 년이나 지난 글이지만, 컴포넌트를 어떻게 구현해야 하는 문제에 있어서는 이만한 가이드가 없다고 생각해서 번역해…
26 June, 2017
react-router v4 가 릴리즈 되면서 라우팅 적용 방식이 바뀌었습니다. 이전버전(v3)까지는 일반적으로 사용하는 정적 라우팅(Static Routing)이였다면, 동적 라우팅(Dynamic Routing)이 적용되었는데요. 여기서 말하는 정…
22 June, 2017
리액트를 본격적으로 사용하기 시작하면서 각종 라이브러리의 테스트 및 실험을 해볼 필요가 생겼습니다. 몇 가지 boilerplate 프로젝트를 찾아보다가 동료로부터 create-react-app이라는 프로젝트에 대해 듣게 되었습니다(이제서야 알게되다니…
20 June, 2017
CommonJs, AMD, ES6 Module require 와 import 에 대해서 비교해 보기 위해서는 우선 CommonJs와 AMD(Asynchronous Module Definition), ES6 내장모듈과 같은 자바스크립트의 모듈 시스템에…
16 May, 2017
자바스크립트 문법 중에 가장 어려운 부분을 꼽으라면 단연 클로저(closure)일것입니다. 저 또한 클로저 개념은 어느정도는 이해하고 있었지만, 정확한 용도와 개념을 설명하라고 하면 명쾌하게 말하기 쉽지 않습니다. 아마도 많은 사람들이 저 처럼 대충…
12 April, 2017
ES6(ECMA Script 2015, 줄여서 ES6)로 넘어오면서 기존 ES5 까지 사용하던 변수 선언 키워드인 var에다 const와 let이라는 키워드가 추가되었습니다. 물론 var 없이도 변수를 선언할 수 있습니다만, 그렇게 되면 전역객체(브…
28 March, 2017
SublimeText 3 환경 설정 공유하기 서브라임 텍스트 사용 중에 가장 아쉬운 점은 바로 환경설정 부분입니다. 아톰 등의 몇몇 텍스트에디터들은 계정과 연동되어 어느 기기에서 설치하더라도 동일한 환경으로 작업할 수 있는 장점이 있는데, 서브라임은…
23 March, 2017
ionic 개발에 필요한 것들 기본적으로 ionic, nodejs, cordova 등만 있어도 개발은 가능하겠지만, 안드로이드 에뮬레이터 실행을 위해서는 jdk 설치가 필요하겠고, ios 에뮬레이터 실행을 위해서는 xcode 설치도 필수가 되겠다(아…
16 November, 2016