객체 타입(Object Types) TypeScript에서 Object Types는 다양한 형태의 객체를 나타내기 위한 타입이다. 다음은 TypeScript에서 제공하는 Object Types의 종류다. Object Array Tuple Function Class Void Never Enum Union Intersection 이러한 Object Types를 적절히 조합하여 다양한 데이터 타입을 정의할 수 있다. Object TypeScript에서 object 타입은 JavaScript 객체를 나타내는 타입이다. object 타입은 다른 객체 타입을 포함하여 모든 객체 유형에 대한 상위 유형이다. 예를 들어, 다음 코드에서는 object 타입의 변수 person을 선언하고 객체 리터럴을 할당한다. let ..
원시 타입(Primitive Types) TypeScript에서는 다양한 원시 타입(primitive types)을 제공한다. 원시 타입은 JavaScript와 유사하며, 변수에 단순한 데이터 값을 저장하는 데 사용된다. Number String Boolean Null & Undefined Symbol Bigint 이러한 원시 타입들은 변수에 할당되는 값의 타입을 명시하는 데 사용된다. TypeScript는 이러한 원시 타입에 대한 타입 추론을 자동으로 수행하므로, 변수에 값을 할당하면 해당 변수의 타입이 자동으로 결정된다. String String은 문자열을 나타내는 자료형으로, TypeScript에서 기본 자료형 중 하나다. String 변수는 문자열을 저장하고 처리할 수 있다. 아래는 TypeScr..
타입스크립트란? JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org 타입스크립트(TypeScript)는 마이크로소프트(Microsoft)에서 개발한 오픈소스 프로그래밍 언어로, 자바스크립트(JavaScript)의 상위 집합 언어이다. 자바스크립트와 마찬가지로, 타입스크립트는 웹 브라우저와 노드(Node.js) 환경에서 실행되며, 객체 ..
아래 메소드들은 원본 배열을 변경하지 않고 새로운 배열을 반환하는 불변성을 지키는 메소드들이다. Array.prototype.concat() 배열을 병합하여 새 배열을 반환한다. const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const newArray = array1.concat(array2); console.log(newArray); // [1, 2, 3, 4, 5, 6] Array.prototype.filter() 주어진 함수의 테스트를 통과한 요소로 이루어진 새로운 배열을 반환한다. const array = [1, 2, 3, 4, 5]; const filteredArray = array.filter(num => num % 2 === 0); console..
아래 메소드들은 원본 배열을 변경하는 메소드들이다. Array.prototype.pop() 배열에서 마지막 요소를 제거하고 해당 요소를 반환한다. const array = [1, 2, 3]; const poppedElement = array.pop(); // 3 console.log(array); // [1, 2] Array.prototype.push() 배열 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환한다. const array = [1, 2]; const newLength = array.push(3, 4); // 4 console.log(array); // [1, 2, 3, 4] Array.prototype.reverse() 배열의 순서를 뒤집는다. const array = [1, 2..
스코프 스코프는 자바스크립트에서 스코프(scope)는 변수와 함수의 유효 범위를 결정한다. 즉, 변수나 함수가 어디에서부터 접근 가능한지를 결정하는 것이다. 전역 스코프(Global Scope) 전역 스코프는 어떤 함수나 블록에도 속하지 않는 최상위 스코프다. 전역 스코프에서 선언된 변수와 함수는 어디서든 접근이 가능하다. const globalVar = 'global variable'; // 전역 스코프에서 선언된 변수 function globalFunction() { // 전역 스코프에서 선언된 함수 console.log(globalVar); // 'global variable' 출력 } globalFunction(); 지역 스코프(Local Scope) 지역 스코프는 특정 함수나 블록 내부에서 선언..
공통 제외 예정이거나(deprecated) 제외된(obsolute) 기능, 비표준 구문은 사용하지 않는다. 항상 적용할 순 없지만 가능하면 SOLID 규칙을 따르는 것을 권장한다. SOLID (객체 지향 설계) - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. --> ko.wikipedia.org 쓰나 안 쓰나 결과에 영향을 미치지 않는 코드는 최대한 제거한다. 작성된 코드엔 항상 작성된 이유가 있는 것이 좋다. JavaScript 주석 짧은 1줄 주석(// ...)은 가능하면 변수, 함수 등의 이름에 반영하는 것을 권장한다. 다른 사람의 이해를 돕기 위해 주석을 다는 것을 권장한다. 주석엔 복잡한 로직에 대한 설명 등을 담을 수 있다. 네이밍 PascalCase : type, int..
React Query의 라이프 사이클 A 쿼리 인스턴스가 mount 된다. 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱한다. 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경된다. A 쿼리 인스턴스가 unmount 된다. 캐시는 cacheTime(기본값 5min) 만큼 유지되다가 가비지 콜렉터로 수집된다. - v4부터는 기본값이 Infinity로 변경될 예정이라고 한다. 만일 cacheTime이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오는 동안 캐시 데이터를 보여준다. staleTime 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간 fresh 상태일때는 쿼리 인스..
Sass(Syntactically Awesome StyleSheets) Sass Sass(Syntactically Awesome StyleSheets) 는 CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin..
Debouncing & Throttling 자바스크립트에서는 짧은 시간에 유저 입력 등의 이벤트가 많이 일어나는 경우 화면이 끊길 수 있다. 그래서 이런 경우 특별한 최적화가 필요하다. 대표적인 예가 바로 자동완성이다. 구글에 검색어를 입력하면 한 글자가 바뀔 때마다 실시간으로 업데이트하면서 추천 검색어를 띄워줘야 한다. 만약 유저 입력 한 번에 추천 검색어 업데이트 한 번이 일어난다면 불필요한 리렌더링이 초당 수 번씩 필요할 것이다. 그래서 정작 필요한 진짜 검색어 에 대한 자동완성이 느려질 수 있다. 이런 걸 방지하기 위해 Debouncing 처리를 한다. Debouncing은 특정 함수의 호출이 너무 자주 일어나지 않도록 일정 시간 동안 함수 실행을 지연시키는 것을 말한다. const useDebo..
