2021-07

source: categories/daily-issue/issue2.md

7월 16일

react storybook 사용 - UI 정리

react storybook 사용 - UI 정리.
typescript는 처음 사용해보는거라 어려움이 많다.
typescript Array type 정의하는 법.
아래와 같이 정리하니까 되긴하는데, 새로고침할 때마다 자꾸 속성을 찾을 수 없다는 에러가 뜬다.
새로고침할 때마다 데이터가 날라가서 그런지.. 배열, 오브젝트로되어있어서.. 그냥 프리미티브값으로 되어있으면 새로고침해도 속성을 찾을 수 없다는 에러가 안뜨는데..
그래서 deepcopy를 해줘야하나 라는 생각에 그쪽으로해봤는데 typescript를 아직 잘 몰라서 제대로 안된다. 흠..

import React from 'react';
import classnames from 'classnames';

export interface tabItemArray {
    [index: number]: tabItem;
}

export interface tabItem {
    text: string;
    isActive?: boolean;
    isDisabled?: boolean;
    number?: number;
}

export interface TabProps {
    tabInfo: Array<tabItemArray>
}

const Tab = (tabItemArray: TabProps) => {
    return (
        <>
            <div className='tab-header'>
                {
                    Object.values(tabItemArray).map((value) => {
                        return (
                            <div className={classnames(
                                'tab-btn',
                                value.isActive === undefined ? null : value.isActive === true ? 'tab-btn--active' : null,
                                value.isDisabled === undefined ? null : value.isDisabled === true ? 'tab-btn--disabled' : null,
                            )}>
                                {
                                    value.number !== null ? <a className='tab-btn__name'>{value.text} <em>{value.number}</em></a> : <a className='tab-btn__name'>{value.text} </a>
                                }
                            </div>
                        )
                    })
                }
            </div>
            <div className='tab-contents tab-contents--round'>
                콘텐츠
            </div>
        </>
    );
};

export default Tab;

겨우 발견한 해결책.
아래와 같이 Array 지정 interface를 주석처리하고 tabItemArray를 직접 인자값으로 전달했다.
새로고침시 속성을 못찾는 에러는 해결됐다.
주석처리한 부분이 정확히 어떤건지, 무슨 기능을하는지 아직 typescript를 모르기 때문에 잘 모른다. 그냥 이런 기능이겠거니 정도?
즉, typescript에 대한 이해도가 있어야 스토리북도 능숙하게 작성할 수 있을 것 같다..

Ps. + 스토리북의 controls 기능도 아래 tab 컴포넌트에선 일단 뺐다. controls는 옵션들 다 빼고 아주 기본적인 상태로만 나오도록했다.

import React from 'react';
import classnames from 'classnames';

export interface tabItemArray {
  [index: number]: tabItem;
}

export interface tabItem {
  text: string;
  active?: boolean;
  disabled?: boolean;
  number?: number;
}

// export interface TabProps {
//   tabInfo: Array<tabItemArray>
// }

const Tab = ({ ...tabItemArray }: tabItemArray) => {
  const tabArr = Object.values(tabItemArray);

  return (
    <>
      <div className='tab-header'>
        {
          tabArr.map((val) => {
            return (
              <div className={classnames(
                'tab-btn',
                val.active === undefined ? null : val.active ? 'tab-btn--active' : null,
                val.disabled === undefined ? null : val.disabled ? 'tab-btn--disabled' : null,
              )}>
                {
                  val.number !== null ? <a className='tab-btn__name'>{val.text} <em>{val.number}</em></a> : <a className='tab-btn__name'>{val.text} </a>
                }
              </div>
            )
          })
        }
      </div>
      <div className='tab-contents tab-contents--round'>
        콘텐츠
      </div>
    </>
  );
};

export default Tab

7월 19일

객체 해체할당

const obj = {
    a: 1,
    b: 2,
    c: {
        d: 'aaa',
        e: 'ccc',
    }
}

let {a, b, c: {d, e}} = obj;

타입스크립트 Array

jsx 안에 조건문

import React from 'react';

export default function App {
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
}

anchor, button 태그 aria-selected 속성

anchor, button 태그에 aria-selected='true'를 넣으면 a11y 검사에 걸리게된다.
role='tab' 속성도 같이 넣어줘야 안 걸린다.

<a href='/#'  role='tab' aria-selected='true'></a>

7월 23일

드롭다운 컴포넌트 여러개 적용시 이벤트 버블링 활용해 자연스러운 UI 구현하기

7월 26일

코테정리

오브젝트의 단점 1. 이터러블하지 않다.

// Object의 단점
// 1. 이터러블하지 않다. - 이터러블하지 않아도 for in 문이 있지 않음?
// for in 문은 이터러블한 것처럼 동작하게끔 속임수 구현을 한 것이지 얘는 실제론 모든 요소를 하나하나 순차적으로 순회한다고 볼 수 없다.
// for in 문이 속임수인지, 이게 무슨 말인지 다음 예시를 통해 알아보도록 하겠다.

const o = {a: 1, b: 2, c: 3};

// ---------------------------------------------------------------------------------------------------
// (1) 아래와 같이 for in 문을 돌릴 수 있다.
for (let key in o) {
    console.log(key, o[key])
}
// a 1
// b 2
// c 3

// ---------------------------------------------------------------------------------------------------
// (2) 이번엔 prototype에다 method를 추가했다.
// for in 문을 돌리면 아래와 같이 own property가 아닌 것들까지 다 나와버린다.
// prototype까지 검사를 하는 것이다. - 이런 문제점이 있는 것이다. for in문 자체가 완벽하게 구현되어있는 것이아니다.
// 객체에있는 모든 요소들을 가져와서 걔네들을 key라는 변수에 할당해서 for문을 돌려라 - 이런식으로 구현을 했지만 
// 걔네가 객체의 고유의 프로퍼티인지 아니면 프로토타입 체인에 있는 더 상위에 있는 프로퍼티인지까지 판단하지않고 모두 출력해버린다.

// 어 그런데 Object의 prototype에 toString이니 toValues니 그런 것들도 있는데 왜 걔네들은 출력이 안되냐.
// 걔넨 또 enumerable하지 않기 때문이다.

Object.prototype.method = function () {}
for (let key in o) {
    console.log(key, o[key])
}
// a 1
// b 2
// c 3
// method ƒ () {}

// ---------------------------------------------------------------------------------------------------
// (3) 위의 문제를 해결하기 위해서 또 아래와 같은 처리를 해야된다.
for (let key in o) {
    // key가 o의 고유한 key가 맞는지 확인을 하고 맞다면 출력을 한다.
    if (o.hasOwnProperty(key)) {
        console.log(key, o[key])
    }
}
// a 1
// b 2
// c 3

// ---------------------------------------------------------------------------------------------------
// (4) 그렇기 때문에 객체를 배열로 변환하려면 아래와 같이 hasOwnProperty를 사용해 고유 프로퍼티만을 골라내 반환해야될 것이다.
// key와 value를 전체 통으로 묶은걸 하나의 요소로하는 배열을 만들고 싶다고 할 때, 아래와 같은식으로 하면 된다.
// ---------------------------------------------------------------------------------------------------------
// 객체를 배열로 변환하고 싶을 때 가장 먼저 떠올릴 수 있는 방법은 아래 방법이다.
// ---------------------------------------------------------------------------------------------------------
const obj2Arr = obj => {
    const arr = []
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            arr.push([key, obj[key]]);
        }
    }
    return arr;
}
const oArr = obj2Arr(o); // [["a", 1], ["b", 2], ["c", 3]]
oArr.forEach(v => console.log(v));
// ["a", 1]
// ["b", 2]
// ["c", 3]

// ---------------------------------------------------------------------------------------------------------
// 객체를 배열로 변환하고 싶은 Needs, 배열을 객체로 변환하고 싶은 Needs, 실무에서 많이 등장한다.
// 그럴 때 위와 같은 방식을 택하면 손이 많이 갈 수밖에 없다는 것이다.
// ---------------------------------------------------------------------------------------------------------

// (5) 아래와 같은 식으로도 할 수 있다.
// Object.keys()를 통해 key값을 배열로 반환받고 map 메소드를 통해 배열로 반환하는 방법
const oArr2 = Object.keys(o).map(k => [k, o[k]]);
oArr2.forEach(v => console.log(v));
// ["a", 1]
// ["b", 2]
// ["c", 3]

// ---------------------------------------------------------------------------------------------------------
// 이러한 방법들이 있다.
// 여튼 객체의 단점으론
// 1. 이터러블하지 않다.
// 2. hasOwnProperty 메서드로 고유 프로퍼티인지 판단이 필요하다.

오브젝트의 단점 2. 키를 문자열로 취급한다.

또 문제가 키를 문자열로만 취급을 한다는 것이다.
오브젝트는 키에 0, 1을 넣어도 문자열로 취급을한다.

const obj = {
    1: 10,
    2: 20,
    3: 30
}
let res = 0;
for (let key in obj) {
    res += key
}
console.log(res); // 0123

3. 따라서 키값의 unique함을 완벽히 보장하지 못함.

모든 key를 문자열로 인식하기 때문에 unique함을 보장하지 못한다는 것이다.

const obj = {
    1: 10,
    01: 20,
    '01': 30
}
console.log(obj); // {1: 20, 01: 30} // 이런식으로 01이 덮어씌워졌다. 01과 '01'은 분명 다른데 같은걸로 취급한다는 것이다.

4. 프로퍼티 개수를 직접 파악할 수 없다.

const obj = {a: 1, b: 2, c: 3};
obj.length; // undefined // 이런 length 프로퍼티는 없다.
console.log(Object.keys(obj).length); // 3 // 이렇게 변환을 해야만 갯수를 파악할 수 있다.

이런 객체의 단점들을 보완하는 새로운 데이터 타입이 나왔다.
물론 객체가 나쁘다는 것이 아니다. 용도가 다르다고 생각하는 것이 좋다.
객체가 가진 단점들을 보완한 새로운 타입을 만들어 낸 것이다.

7월 27일

프론트앤드 기본지식 QnA

  1. 버츄얼 돔이란?

    • 대답못함

  2. 브라우저의 동작원리에 대해 설명하시오.

    • 브라우저 서버 데이터베이스 관계에 대해 설명함. 아래와 같은 식으로..
    • 서버에서 데이터를 받아 HTML, CSS, JS를 통해 렌더링한 페이지를 브라우저로 전송하면 깜빡거림과 같은 현상 발생
    • 그것을 보완해 HTML, CSS, JS는 미리 브라우저로 전송하고 데이터만 데이터베이스에서 받고 브라우저로 전송하고. 페이지 그리는 것은 브라우저에서 알아서.. 이것이 SPA

  3. Single Page Application VS. Multi Page Application 차이점은?

    • 빌드해서 내보낼 때 페이지 한개로 빌드해 내보내면 SPA
    • 여러개로 쪼개서 내보내면, 즉, 요청에 따라 페이지 응답하는게 달라지도록 한다면 그것이 MPA라고 대답함.. 잘 모르는데 이런식으로 대답함..

  4. 비동기 통신을 만들 때 어떤 라이브러리를 사용했는지.

    • axios 써봤다고 대답함
    • Promise 객체 기반으로 되어있어서 사용하기 편하다고 대답함.

  5. 비동기 통신할 때 cors 정책에 위반되어서 에러가 뜬 경험이 있는지, 있다면 어떤 방식으로 해결했는지

    • 작년에 토이플젝했을 때 겪었는데 어떤식으로 해결했는지는 잘 기억안난다고 대답함

  6. 리액트 상태관리할 때 어떤 라이브러리를 썼는지 또는 어떤 식으로 관리했는지

    • Redux같은 라이브러리는 안씀, 어찌됐건 마크업개발단계이기 때문에
    • useState, 더미 데이터를 통해 상태관리를 함

  7. 코딩 테스트 봤을 때 기술적으로 아쉬웠던 부분이 무엇인지

    • 첫번째 문제 풀었을 때 Map객체를 활용했는데, Object보다 장점이 뚜렷하기에 사용했지만 실제 업무에선 어떨 때 활용되는지 궁금하다
    • 그 부분을 알지못한채 사용해서 아쉽다.

  8. 코테 첫번째 문제 풀었을 때 어떤 생각가지고 풀었는지

    • 사실 플레이어의 수를 입력받는게아니고 플레이어의 배열?을 입력받는게 맞는거아닌가? 생각은 했지만 요구사항대로 접근
    • 처음엔 플레이어의 수를 입력받고 그 다음엔 카드갯수를 입력받는다고 했으므로 처음엔 플레이어의 수만 입력받는.. 즉 인자값을 하나만 입력받아도 되는 상황이어야하므로.. 그렇게 이해했다
      여튼 그래서 커링 펑션 활용했다고 대답.
      그런 생각 가지고 했다고 대답함.

  9. UI 개발을 많이 했는데, 이벤트 버블링 관련 문제를 발견해서 해결해본적 있는지, 해결해봤다면 어떤 방식으로 해결해봤는지

    • one page scroll 인터렉션 개발할 때 경험했다고 대답.
    • 특정 요소에서 발생한 버블링은 안막고, 특정 요소에서 발생하는 이벤트는 막는 방식으로 버블링을 활용해본적 있음.
    • 2중 스와이퍼에서 발생한 캡쳐링 이슈를 해결한 적은 있다고 답함.

  10. 웹팩 써봤는지. 웹팩 같은 거 사용해서 개발하다가 크로스브라우징 이슈 생겼을 때 어떤식으로 해결했는지

    • JS는 폴리필을 통해 해결, core js 부분 옵션값 조절
    • CSS는 공식문서 MDN 참고

  11. 크로스 브라우징 신경안쓰고 개발했다고 고생한경험있는지

    • 스크롤 인터렉션 라이브러리 개발할 때 이터러블 객체를 많이 활용했었는데 babel로 컴파일해도 IE에서 돌아가질 않아서 고생.

  12. 코드 형상관리(버전관리)는 주로 어떤식으로하는지

    • ESLINT, TSLINT 활용 1차 형상관리
    • 2차 git hook 활용
    • 3차 pull request 통해 관리

Virtual DOM이란?

Note

virtual DOM

textContent, childNodes, firstChild, lastChild, parentNode, cloneNode, appendChild, insertBefore, removeChild 이런 것들이 다 사실 node의 기능들인 겁니다.
그리고 이 node는 또 EventTarget으로부터 상속받기 때문에, 즉, Node는 클릭 등의 이벤트가 가해지는 EventTarget이기 때문에 이 요소들은 모두 addEventListener 등의 기능 또한 갖고있는 겁니다.

이 CSSOM도 포함 관계로 나타내지는만큼 트리 형식으로 출력이 됩니다.
브라우저는 DOM 트리랑 CSSOM 트리를 융합해서 우리가 보는 화면들을 만들어내는거죠.

그리고 Browser Object Model이라고, BOM이란 것도 있어요.
이거는 브라우저 자체를 다루기 위한 API인데 location, navigator, screen 이것들이 다 BOM에서 제공되는 것들입니다.
window. 뒤에 붙이거나 그냥 호출하는 alert나 setTimeout, location의 replace 이런 것들은 다 BOM으로 하는 겁니다.
다 브라우저가 실행주체인 기능들이니깐.

Virtual DOM

가상 돔을 다루려면 React나 Vue 같은 것들에 대한 기본적인 이해가 필요합니다.
이른 Single Page Application이 왜 만들어졌죠?

예전엔 웹사이트에서 뭐가 변경이 되려면 페이지를 새로 로딩을 해야됐습니다.
예를 들어 인스타그램에서 어떤 사진에 좋아요 버튼을 누르면, 그 버튼 하나 눌렀다고 페이지 전체가 리로딩이 되었습니다.
웹 사이트 전체가 깜빡하고 하얘졌다가 다시 나타나는 현상이 바로 그래서 있었던 것이죠.
다른 페이지로 접속할 때처럼요.
예전 웹페이지들은 뭘 하던간에 이런 현상이 있었습니다.
사용자 경험으로는 썩 좋지 않은 모습이었습니다.

이를 보완하기 위해 자바스크립트를 사용해서 그 좋아요 버튼만 바꿔줄 수 있게 HTML 요소들을 선택해서 필요한데만 바꾸기 시작했습니다.
페이지를 다 다시 불러오는 것이 아니라 자바스크립트로 딱 필요한 부분만 바꿔주는 것, 이것이 바로 SPA이고, 이것이 바로 DOM을 조작하는 것입니다.

그래서 불과 몇년 전까지 jQuery가 많이 쓰였습니다.
간결한 문법으로 DOM을 편리하게 다룰 수 있었고 무엇보다, 어느 브라우저에서나 코드가 제대로 동작하도록 크로스 브라우징이 잘 되어있는게 강점이었습니다.

하지만 요즘엔 jQuery를 잘 안씁니다.
과거에비해 크로스 브라우징의 필요성이 많이 줄어들었고 순수 자바스크립트도 발전해 충분히 간결하고 강력해졌습니다.
DOM을 조작하는 방식도 React 같은 것들이 생겨나면서 불필요하게 무겁고, 옛날 자바스크립트 방식에 맞춰진 jQuery는 점점 밀려나게 되었습니다.

jQuery는 직접 특정 div 요소들을 선택해서 그 요소의 내용을 바꾸던 클래스를 조작하던 다른 요소를 안에 더하거나 빼든 해가지고 이런식으로 직접 코드로 이 DOM을 갖다가 조작을 하는 거였습니다.

그런데 React나 Vue는 템플릿으로 HTML 요소를 코딩해두고 그것들을 어떤 변수 등에 들어간 데이터에 연결만 해놓으면 그 데이터들에 맞춰서 알아서 화면이 다 바뀌게 되는겁니다.

이 과정에서 사용되는 것이 바로 가상 DOM입니다.

Angular는 또 달라서 이 내용에서 빼겠습니다.
가상 DOM, 즉, 말 그대로 진짜 DOM이 아닙니다.
DOM의 구조만 간결히 흉내낸 자바스크립트 객체라고 보시면 됩니다.

이런 가상 DOM을 왜 사용하는 것일까?
HTML이란 주문서를 가지고 브라우저란 공장들이 그 설계를 실체로 만들어낸게 DOM이라고 했었죠?
이게 각 HTML 요소들을 가구처럼 물리적인걸로 찍어내서 주문서에 맞게 배치하는거라고 상상을 해보겠습니다.
DIV는 딱딱한 상자, 테이블은 선반 형태 이런식이겠죠.
이런 요소들을 다 제작해다가 HTML 주문서의 구조대로 각각 적합한 위치에 가져다놨어요.
그런데 자바스크립트로 지시가 들어와서 중간에 DIV 몇 개를 빼거나 다른걸로 바꿔야돼요.
DOM의 HTML 요소들에 조작이 가해지는거죠.
그러면 전반적인 배치에도 좀 바뀌는 것들이 생기겠죠?
특정한 걸 빼면 그 자리로 다른걸 옮겨야돼고 그럼 또 다른거 밀려나고..
이거 뭐 뭐가 어떻게 될지를 모르니까 일꾼들이 그 근처를 싹 치우고 다시 하나하나 놔가면서 배치를 또 해야되는 겁니다.
브라우저 입장에선 정말 골치아픈 일이죠.
이런 과정을 가구들을 직접 옮겨나가면서 즉, 실제 DOM을 조작해서 하려면 컴퓨터에 부담도되고 속도도 느려집니다.

가상돔을 쓴다는 건, 이 가구들을 종이같은걸로 모양만 똑같이 나타낸 미니어쳐들로 만든 다음에 이 미니어쳐들을 움직여가면서 어떤 가구들이 실제로 위치가 바뀌는지 먼저 파악을 한 다음에 딱 그 실제 가구들만 움직이는겁니다.
그렇게되면 실제 DOM은 이것저것 든게 많고 무거우니까 그것들을 간략한 자바스크립트 오브젝트로 바꾼 다음에 이걸로 먼저 시뮬레이션을 돌려가지고 가장 경제적으로 DOM에 변화를 가하는 방법을 찾아내는 것입니다.

즉, 미니어처를 만들어놓고 그 미니어처들을 기존 모습대로 배치를 합니다.
그리고 다른 미니어쳐들을 출력해서 바뀔 모습으로 배치를 하고 이 둘을 합리적인 알고리즘으로 비교해서 차이가 생기는 부분만 파악한 다음에, (이를 diffing이라 합니다.)
그 부분만 실제 DOM에 반영하는 겁니다.
그래서 어떤 ul 내에 li들만 변경할거라치면 다른 것들 안 건드리고 딱 필요한 그것들만 조작을 하는 겁니다.
이 가상돔을 쓰기 때문에 React나 Vue 같은 것들이 빠르게 화면들을 조작할 수 있는 겁니다.

하지만 이렇게 알려져있기는 한데.. 이 Virtual DOM 때문에 빠르다고 하는 건 사실 정확한 표현은 아닙니다.

Svelte

얼마전부터 급부상하는 Svelte는 이 가상 DOM을 안 쓰기 때문에 더 빠르다고 하거든요.

이건 또 무슨 소릴까?
미니어처들을 출력해서 그것들로 미리 배치를 해본다음에 제일 효율적인 방식으로 실제 가구들을 움직이는거라고 위에서 그러지 않았었나?
그래서 빠른거 아니에요?

하지만 위 과정에서 미니어처 시뮬레이션 과정조차 빼버리면 더 빨라지겠죠?
그것들 없이도 효율적으로 DOM을 조작한다면요.
가상 돔을 쓴다는 것도 결국 어떤 과정을 추가하는거니까 말이죠.

그런데 그것들 없이도 효율적으로 DOM을 조작할 수 있으면 React나 Vue는 왜 가상돔을 쓰는걸까?

React랑 Vue는 라이브러리 또는 프레임워크 형태고 Svelte는 컴파일러라는데 차이가 있습니다.

React로 만든 사이트들은 React의 기능들을 담은 자바스크립트 파일들을 사용해서 동작합니다.
Node.js없이 리액트 사용할 때 보면 script 태그에다가 react 어쩌구 .js 파일을 로드하잖아요? Vue도 마찬가지구요.
그 로드된 React나 Vue의 라이브러리 내지 프레임워크가 사이트가 실행될 때 코드에 있는 템플릿이랑 데이터들을 읽어가지고 화면에 그것들을 나타내주는 겁니다.

가상 돔은 사실 그 과정을 브라우저단에서 효율적으로 해내기 위해 만들어진거라고 보면됩니다.
사용자가 작성한 React 전용 코드를 브라우저가 가상 돔으로 해석해서 메모리에서 먼저 구현한 다음 최종적으로 실제 DOM에 적용을 하는겁니다.
DOM 변경을, 웹사이트에 로드된 React나 Vue 라이브러리가 ‘가장 빠르게’는 아니지만 사용자가 불편하지 않을 만큼 ‘충분히 빠르게’ 설계한 결과물이 이 가상 돔 방식인거죠.

  • 위의 React 등이 거치는 과정은 사이트가 실행되는 시점, 즉 런타임에서 일어나는 것.
    브라우저가 자바스크립트 파일 받아서 하는 작업이라는 겁니다.
    가상돔은 이 런타임이란 제약조건 하에서 브라우저에 로드된 라이브러리로서
    DOM에 가해지는 변화들을 최소한의 변경으로 구현할 방법을 찾는 방식인겁니다.

  • Svelte는 위 과정을 사이트가 배포되기 전에 미리 다 해두도록 한 겁니다.
    그래서 컴파일인겁니다.
    어떤 데이터가 바뀌면 어떤 가구만 움직이면 될지를 미리 다 계산을 해놓은 다음에 그걸 빌드해서 내놓는다는 겁니다.
    그래서 Svelte로 만든 사이트를 소스보기해서 js 파일들을 살펴보면 Svelte 라이브러리에 관련된 코드가 없다는 걸 확인할 수 있을 겁니다.
    Svelte가 하는 일은 브라우저로 결과물을 갖다주기전에 컴퓨터에서 Node.js로 컴파일하는 과정에서 다 이뤄지는거니까 브라우저는 그런 것들을 알 필요가 없다는 겁니다.

    Svelte 형식에 맞게 코드를 짜고 이걸 빌드하면 Svelte는 사이트에서 딱 실제로 일어날 일들, 즉, 이 이벤트가 들어오면 이 가구를 어디로 옮기고 이것들만 컴팩트한 자바스크립트 파일로 컴파일해서 내놓는거에요.
    브라우저에서 따로 뭘 돌릴 필요가 없어지는겁니다.

React나 Vue로 만든 페이지에 사용자가 사이트 접속했을 때 자기네 라이브러리를 로드해가지고 브라우저에서 가상 DOM을 써서 하는 최적화 작업을
Svelte는 코딩하고 나서 빌드할 때 미리 해둬가지고 딱 필요한 부분만 자바스크립트 코드로 내놓는다는 것!!
때문에 Svelte로 만든 사이트들은 용량 면에서도 더 가볍고 DOM의 조작도 더 빠른 것!!

  • Svelte 상대적으로 덜 오래되었기 때문에 아직 기능이나 커뮤니티가 덜 쌓인 부분들이 있다.
  • 코드를 미리 컴파일을 해서 내보내야한다는 것도 특정 형태의 사이트에서는 한계가 될 수 있다.
  • 이에비해 아직 React, Vue는 강력한 기능들도 많고 안정성도 많이 다져진 상태.
  • 물론 Svelte가 빠르게 성장하고 있고 React나 Vue도 앞으로 어떤 변화가 있을지 모르니까 위에서 얘기한 특징들을 기억하고, 추이를 지켜보면서 각자의 필요에 적합한 걸 선택하면 된다.

7월 28일

safari technology preview

Mac - 시뮬레이터, 아이폰, 아이패드 개발자창

7월 30일

리액트 스토리북 dropdown 컴포넌트에서 control 옵션 먼저 선택하면 랜더링이 2번되는 이슈

리액트 스토리북 dropdown 컴포넌트에서 control 옵션 먼저 선택하면 랜더링이 2번되는 이슈?

function App() {
    useEffect(() => {
        window.addEventListener('click', handleClickOutside);
        return () => {
            window.removeEventListener('click', handleClickOutside);
        }
    }, []); // [] 처음 한번만 실행 - 스토리북에선 이 때문에 두번 랜더링 발생하는 에러가 발생한 것 같다.
    
    return (
        <></>
    )
}

function App() {
    useEffect(() => {
        window.addEventListener('click', handleClickOutside);
        return () => {
            window.removeEventListener('click', handleClickOutside);
        }
    }); // 그래서 이 부분 이렇게 수정.
    
    return (
        <></>
    )
}