Jaddong's Lab

reflow와 repaint가 많을수록 성능저하를 유발한다고 알고있는데, 이론으로 말고 실제로 구현과 측정을 통해서 어떤 차이가 있는지 알아보고 싶어서 테스트를 작성해봤다. 1. DevTool에서 성능(performance)탭에서 알아본다. 2. 레이아웃이 다시 되는지 확인한다. -> reflow를 확인한다. relfow 생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업입니다. repaint reflow 과정이 끝난 후, 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 background-color, visibility, outline 등의 스타일 변경시에는 reflow 과정이 생략 된 repaint ..

현재 회사에서 디자인시스템을 모노레포로 만드는 작업을 하고 있다. 모노레포에 있는 각각의 라이브러리들을 rollup을 통해 번들링이되는데, 지금 모노레포와 rollup 관련해서 꽤나 삽질을 하고 있다. 그래도 배우는 것이 있어서 정리해보고자 한다. 현재 rollup.config.js파일이다. 여기선 결과물의 경로나 format을 정할 수 있다 cjs로 선택되어 있는 상태이다. // rollup.config.js output: { dir: "lib", format: "cjs", exports: "named", }, 이렇게 나온 번들 결과물을 package.json에서 사용하겠다고 지정을 한다. main은 이 라이브러리를 사용할 때 참조할 파일이고, types는 타입스크립트 파일이 되겠다. 그러면 modul..

문제 Implement a function called countUniqueValues, which accepts a sorted array, and counts the unique values in the array. There can be negative numbers in the array, but it will always be sorted. 정렬이 되어있는 배열에서 고유의 값들의 갯수를 세는 함수를 실행하라. 배열에는 음수가 있을 수 있으나 항상 정렬이 되어있다. Examples: countUniqueValues([1,1,1,1,1,2]) // 2 countUniqueValues([1,2,3,4,4,4,7,7,12,12,13]) // 7 countUniqueValues([]) // 0 count..

문제 Given two strings, write a function to determine if the second string is an anagram of the first. An anagram is a word, phrase, or name formed by rearranging the letters of another, such as cinema, formed from iceman. 두 개의 문자열이 주어지고, 두번째 문자열이 첫번째 문자열의 애너그램인지 결정하는 함수를 만들어라. 애너그램은 iceman에서 만들어진 cinema처럼 문자을 재배열한 단어 혹은 구문입니다. Examples: validAnagram('', '') // true validAnagram('aaz', 'zza') // f..

비동기 키워드 알아보기 아래 코드는 정상적으로 Hello를 출력한다. hello 함수 앞에 async를 붙이면 어떤 결과가 나올까? function hello() { return "Hello" }; hello(); // 결과 : Hello 간단히 브라우저 콘솔창에서 실행해보면 아래와 같은 결과를 볼 수 있다. 고로 async 기능의 특징 중 하나로 async 키워드를 사용하면 Promise 객체가 반환된다는 걸 알 수 있다. 그럼 이렇게 되는 경우, 첫번째 코드처럼 "Hello"를 찍히게 하려면 어떻게 해야할까 async function hello() { return "Hello" }; hello(); 아래와 같이 Promise의 결과를 then을 통해 가져올 수 있다. async function hel..

데이터의 기본적인 처리기능인 CRUD(Create, Read, Update, Delete)기준으로 만들어봤다! 정답은 없고, 그냥 개인적으로 고민될 때 참고하면 좋을 것 같아서 작성했다. 1. 보여주기 - 읽기 showName() displayName() renderName() paintName() readName() 2. 입력하기 - 생성 createName() registerName() addName() 3. 수정하기 - 갱신 updateName() modifyName() changeName() editName() 4. 삭제하기 - 삭제 deleteName() removeName() destroyName() 5. 단순 확인용 findName() checkName() isName()

var는 함수 레벨 스코프(Function-level scope) 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다. let과 const는 블록 레벨 스코프(Block-level scope) 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다. 1. var 아래와 같이 블록 내에 선언해도 foo는 전역변수여서 값이 재할당된다. var foo = 123; // 전역 변수 console.log(foo)..

함수 선언문 (Function Declaration) 어디서든 함수에 접근 가능(스크립트 실행 준비단계에서 전역에 선언된 함수 선언문을 찾아 해당 함수를 생성하기 때문) 그래서 코드 구성이 더 자유로움 sum(2, 3); function sum(a, b) { return a + b; } 엄격 모드에서 함수가 선언된 코드 블록 안에서만 유효 let age = 16; if (age < 18) { welcome(); // \ (실행) // | function welcome() { // | alert("안녕!"); // | 함수 선언문은 함수가 선언된 블록 내 } // | 어디에서든 유효합니다 // | welcome(); // / (실행) } else { function welcome() { alert("안녕하..

함수의 인수로 함수를 전달하고, 이 인수로 전달한 함수를 "나중에 호출(called back)" 하는 것 말로 풀면 이해가 안 될 수 있으니, 예시를 보도록 하자. function quest(question, yes, no) { if (confirm(question)) yes()동의 else no();//미동의 } function showAgree() { alert( "동의하셨습니다." ); } function showDisagree() { alert( "미동의 버튼을 누르셨습니다." ); } // 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨 quest("동의하십니까?", showAgree, showDisagree); 함수 quest의 인수로, 함수 showAgree와 ..

* 2021.05.20 스펙에 추가된 지 얼마되지 않아 폴리필이 필요함! ' || '는 첫번째 truthy 값을 리턴한다. a가 참이면 a 리턴, 아니면 b 리턴한다. null || '1'// '1' undefined || '1'// '1' '1' || null// '1' 0 || '1'// '1' ' ?? '는 첫번재 정의된(defined) 값을 리턴한다. a가 null이나 undefined 이면 b리턴, 아니면 a 리턴 null ?? '1'// '1' undefined ?? '1'// '1' '1' ?? null// '1' 0 ?? '1'// 0 // 0은 falsy하기때문에 '1'이 리턴될 것 같지만, null도 undefined 도 아니기 때문에 0을 리턴한다. '??' 는 truthy/falsy..