104%

https://evan-moon.github.io/2019/09/23/how-to-overcome-burnout/

이 글을 제대로 이해하려면 브라우저의 로딩 과정에 대해서 알아야 합니다. Virtual DOM? 가상 돔? 위 포스팅을 읽고 오셨다면 이제 리플로우가 뭔지 정확히 아셨을겁니다. 똑같은 Single Page Application을 자바스크립트나 제이쿼리로 구현한것과 리액트로 구현한것은 성능상의 큰 차이가 생깁니다. 우리가 바닐라 자바스크립트로 SPA를 구성하면 다음 프로세스를 거쳐야 합니다. 1. 변경하고자 하는 컴포넌트에 접근(querySelector, document.getElementById, document.getElementByClass 등..) 2. 컴포넌트를 조작 (show, hide, coloring 등등..) 3. 브라우저가 변화된 컴포넌트를 반영하기 위해서 리플로우 발생. 문제는 컴포넌트..

그동안 어렴풋하게만 알고 있던 함수형 프로그래밍이란 무엇인지 정리하기 위해 남깁니다. 함수형 프로그래밍의 컨셉 1. 사이드 이펙트(side effect)를 없애라. 사이드 이펙트라는건 부작용이라는 뜻인데, 우리가 함수를 호출 하는 이유는 인풋에 따른 결과값을 얻어내기 위해서 입니다. 근데 함수가 함수 외부의 어떤것을 변경하게 되면 우리가 의도치 않은 동작을 하는 것입니다. 이런 현상을 함수형 프로그래밍에선 사이드 이펙트 라고 합니다. 프로젝트에 사이드 이펙트를 가진 함수가 많아지면 디버깅 하기 굉장히 어려워지게 됩니다. (각 함수 내부를 뒤져서 이게 어디에 영향을 주는지 일일이 파악해야함) 간단한 예시를 하나 살펴 보겠습니다. public Program getCurrentProgram(TVGuide gu..

스토리북은 스토리의 집합이다. 각각의 스토리는 컴포넌트의 하나의 시각적 상태를 나타낸다. 기술적으로 얘기하면 스토리는 스크린에 렌더링될 수 있는 어떤것을 리턴하는 함수이다. 기본 스토리 버튼 컴포넌트의 스토리에 대한 기본 예제이다. import React from 'react'; import { action } from '@storybook/addon-actions'; import Button from './Button'; export default { component: Button, title: 'Button', }; export const text = () => Hello Button; export const emoji = () => ( 😀 😎 👍 💯 ); named export(text, emoj..

CSF란 스토리북에서 사용하는 포맷이라고 생각하면 된다. 스토리북 5.2버전 이후로 추천하는 스토리 작성 포맷이다. 스토리들은 ES6 모듈 형태로 정의된다. 모든 스토리북 파일(보통 .stories.js) default export와 named export를 섞어서 사용한다. 리액트 네이티브 제외한 모든 프레임워크에서 CSF를 지원하며 리액트 네이티브에서는 기존 버전의 storiesOf API를 사용해야 한다. Default export *.stories.js에서 default export로 메타데이터가 담긴 객체를 내보내면 그 정보를 활용해서 스토리북을 구성한다. 이렇게 생겼다. import MyComponent from './MyComponent'; export default { title: 'Pat..

웹팩의 컴파일러는 엔트리부터 시작해서 모든 모듈을 재귀적으로 파싱하면서 require(), require.context(), import(), import 구문을 해석하여 의존성 그래프를 만든다. 보통 웹팩에서 context는 "모듈의 경로를 해석하기 위한 기준이 되는 base 디렉토리"를 의미한다. 예를들어, 현재 working directory가 default context로 사용된다면 require.resolve('../../../foo.js')요청에 대한 컨텍스트는 __dirname이 된다. 웹팩이 어떤 디렉토리를 기준으로 모듈들의 경로를 찾게 할것인지 결정하는것이다. require.context는 기준 디렉토리로부터 정규표현식에 해당하는 모든 모듈을 불러올 수 있는 웹팩 컴파일러의 특별한 기능이..

아토믹 디자인은 컴포넌트를 5개의 단계로 나눈다. Atoms(원자) button, icon, input등과 같이 컴포넌트의 최소단위를 의미한다. (보통 HTML 태그가 원자의 단위가 된다.) 원자는 컬러, 폰트, 애니메이션등을 포함한다. MoleCules(분자) 원자를 결합하여 분자를 만든다. INPUT 원자와 BUTTON 원자를 합쳐 검색창 분자를 만들수있다. Organisms(유기체) 분자들을 결합하면 유기체가 된다. 검색창 분자와 메뉴 분자 두개가 합쳐서 헤더라는 유기체를 만들었다. 유저는 유기체 단위로 사이트를 인식하기 시작한다. 유기체는 독립적이어야 하며(standalone), 쉽게 여기저기 옮길수 있어야하고(portable), 재사용(reusable)이 가능해야한다. Template(템플릿) ..

스토리북으로 UI 컴포넌트들을 정리하려고 하는데 어떤식으로 컴포넌트들을 분리해야하고 관리해야하는지에 궁금해서 정리하게 되었습니다. 본인이 알고 있는 좋은 구조가 있다면 댓글로 알려주시면 감사하겠습니다. 서론 나는 스토리북을 3년간 사용해왔다. 잘 구조화 하지 않으면 스토리북이 별로 유용하지 않다고 느껴 효율적인 구조를 찾아왔다. 내가 생각하는 스토리북의 best practice를 공유하겠다. 이 스토리북을 누가 쓸건가? 스토리북을 팀내에서만 쓸건지, 디자인 시스템 구축용으로 사용하여 외부에서도 같이 사용할건지에 따라서 프로젝트 구성이 달라진다. 외부에서도 사용해야 하는 경우 컴포넌트의 API를 상세히 작성해야 한다. https://github.com/intuit/storybook-addon-sketch ..