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