Jaddong's Lab

Throttle 과 Debounce 의 필요성이 나온 이유 1. 검색창에서 "떡볶이"를 검색할 때 타이핑을 할 때마다 텍스트 필드 하단에 입력한 검색어와 맞을 만한 추천 검색어를 하단에 보여주게된다. 이런 경우 매번 입력할 때마다 api를 호출해본다고 생각해보자. 사용자 경험으로는 추천 검색어를 바로 볼 수 있기 때문에 좋을 수는 있으나, 사용자의 의도와 무관한 요청이 계속 된다면 이것은 성능적으로 매우 좋지 않은 결과가 있을 수 있다. 또한 api의 호출이 잦아 로딩이 길어진다면 사용자의 경험에도 안 좋은 영향을 줄 수 있다. 2. Infinite scrolling page(무한 스크롤 페이지) 사용자가 스크롤을 할 때마다 새로운 컨텐츠가 하단에 무한으로 보여지는 되는 UX는 요즘 어디서나 쉽게 찾아볼..

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

비동기 키워드 알아보기 아래 코드는 정상적으로 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..

1. 문자열끼리 비교 (유니코드) - 문자열 중에서 앞에서 부터 순서대로 비교하게된다.(사전순) - 소문자의 유니코드 값이 기본적으로 크다. alert( 'Z' > 'A' ); // true, 'Z'가 'A'보다 유니코드 값이 큼 alert( 'Glow' > 'Glee' ); // true, 'o'는 'e'보다 유니코드 값이 큼 alert( 'Bee' > 'Be' ); // true, 'e'는 빈 값 보다 유니코드 값이 큼 2. 다른 형을 가진 값 간의 비교 - 비교하려는 값의 자료형이 다르면, 값 들을 숫자형으로 바꿔 비교하게된다. alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다. alert( '01' == 1 ); // true, 문자열 '01'..

Object와 Array의 경우 레퍼런스 타입이어서 아래와 같이 값이 복사되는 것 같지만 그렇지 않다. // 변수 person과 person의 value는 각각 저장됨. const person = { name: 'Max' } const secondPerson = person; // 값을 그대로 복사하는 것 같지만, secondPerson이 person의 value를 가르키게 됨(포인터 값) person.name= 'Ginny'; console.log(secondPerson); // { name : 'Ginny' } // secondPerson는 동일하게 person의 value의 값을 가르키고 있으므로 영향을 받아 위와 같이 찍힘 별도의 person과 별개의 secondPerson을 만들기 위해서는 아래..