말하는 컴공감자의 텃밭

TDD - Test-Driven Development : 테스트 주도 개발 원하는 테스트 코드를 작성하고 실행 여부를 확인하여 실제코드를 작성하는것을 말한다. TDD 장점 버그 감지: 테스트를 먼저 작성하면 개발 프로세스 초기에 기능 문제를 식별 가능. 디자인 : 개발자는 코드를 작성하기 전에 디자인을 충분히 생각해야 하기 때문에 더 모듈화되고 유연하며 확장 가능한 코드로 작성가능. 문서화: 테스트는 코드베이스에 대한 문서 형식으로 사용되며 시스템이 어떻게 작동하는지 확인 가능. 리팩토링: 테스트를 진행하면서 의도하지 않은 동작 변경 사항에 대한 코드를 리팩터링할 수 있다. React Testing Library : 행동 중심 테스트 React Testing Library 목적: React Testing..

Memoization 비용이 많이 드는 함수 호출의 결과를 저장하고, 동일한 입력이 발생할 때 캐시된 결과를 반환해서 효율을 높히는 방식이다. 알고리즘할때 DP[] 가 여기에 해당한다. useMemo 이 후크는 종속성 중 하나가 변경된 경우에만 메모된 값을 다시 계산하는 특징을 갖고 있어 최적화에 효과적이다. 모든 랜더링에서 비용이 많이 드는 계산을 방지하는데 사용된다. //사용법 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); a와 b가 변경되지 않는 한 후속 랜더링에서 함수를 호출하는 대신 메모된 값을 사용하게 된다. Props를 통해 많은 계산이 요구될때 useMemo를 사용하게 된다. import React, { ..

자바스크립트 타입에서 원시타입은 불변성을 가지고 있고, 참조 타입은 가지고 있지 않다. 이 둘을 비교하며 확인하고 예제를 통해 정리해보자 원시타입 호출 스택에 직접 저장되는 타입. 호출 스택은 코드가 실행될 때 변수와 해당 값을 저장하는 메모리의 일부이다. undefine, null, boolean, number, string, bigint, symbol 이 해당. 불변성을 가지고 있다는 것은 이 타입들의 값을 변경하면 실제 메모리에서 새 값이 생성됨을 말한다. 그렇기에 원래 값은 변경되지 않아 불변한다. 라고 표현한다. 참조 타입 객체, 배열, 함수가 해당 힙에 저장되며, 복잡한 데이터에 사용되는 더 큰 메모리 공간입다. 호출 스택은 실제 데이터가 저장되는 힙 위치에 대한 참조(또는 포인터)를 저장한다..

문제가 너무 간단해 보였는데.. 진짜 한참 한참 걸린 문제다. 열받으면서 풀었는데 까먹을까봐 까먹을랑 말랑할때 정리한다. 먼저 지름길 갯수와, 거리가 주어진다. 지름길은 시작점과 끝점, 소모되는 시간이 주어지고 지름길이 오히려 더 길게되는 경우도 존재한다. 또한 고속도로이므로 역주행은 불가능하다. 150이 도착지점이면 정확히 150이어야 한다. 일반 고속도로의 경우 1당 1의 거리를 지닌다. 최솟값을 찾아야 하므로 효율이 좋은 지름길을 활용해서 도착점에 도달하면 되겠다. 초기에 이차원 배열을 통해 DP로 해결하려 접근했었다. 지름길을 통하면 이전에 대한 값과 비교해서 업데이트하고, 다시 그 이후의 길을 업데이트 하는식으로 말이다. 예제는 전부 옳게되었으나 문제가 발생했다. 지름길이 겹치는 경우였다. 로직..

State와 Props ? - State 부모 컴포넌트에서 자녀 컴포터는로 데이터를 보내는게 아니라 해당 컴포넌트 내부에서 데이터를 전달하고자 할때 사용. ex) 검색창에서 글을 입력할때 글이 변하는것은 state를 변경시킨다. State는 변경가능하다. State가 변하면 re-render된다. state = { message : '', attachFile : undefined, openMenu : false, }; - Props 프로퍼티 Properties의 줄임말로 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법이다. 읽기 전용으로 자녀 컴포넌트에서는 변하지 않는다. 변경하고자 한다면 부모 컴포넌트에서 state를 변경시켜주어야 한다. A 부모 컴포넌트 state = { A ..

오버로딩 동일한 이름에 매개 변수만 다른 여러 함수를 만드는 것을 함수의 오버로딩이라고 한다. 바로 예제로 정리해보자 예제 1 add 라는 이름의 함수에 하나는 string, 하나는 number이다. function add(a: any, b: any): any 를 통해 오버라이딩 해보자. function add(a: string, b: string): string; function add(a: number, b: number): number; function add(a: any, b: any): any { return a + b; } add("hello", "world"); add(1, 1); 만약 오버로딩되지 않은 값을 넣는다면? 예제 2 날짜를 만드는 Date 객체를 만드는 두가지를 오버로딩 하려한다..

호출 시그니처 호출 시그니처란 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것이다. 장점은 아래와 같다. 오버로딩: TypeScript는 메서드 오버로딩을 지원하므로 각각 다른 매개 변수 유형을 사용하여 단일 함수에 대해 여러 호출 서명을 정의할 수 있다. 이를 통해 함수는 다양한 유형의 입력을 처리할 수 있어 함수 사용 방법에 유연성을 제공한다. 인터페이스 구현: 인터페이스를 사용하여 TypeScript에서 호출 시그니처를 정의하면 코드 전체에 특정 함수 형태를 적용할 수 있는 방법이다. 구조화되고 재사용 가능하며, 유연한 방법이 제공되어 유형 안전성, 가독성 및 유지 관리성이 향상된다. 또한 객체 지향 디자인 원칙에 잘 맞으며 외부 코드를 사용하여 테스트하고 작업하는 것이 보다..

타입 스크립트의 추가 제공 타입이 존재한다. 기존에 number, boolean, string, null 등등 익숙한 명칭의 타입은 알고있었으나 Tuple, Enum, Any, Void, Never, Union 같은 특수한 타입이 있어 정리한다. Tuple : 명시된 타입만 사용가능한 타입. 배열을 보다 특수한 형태로 사용할 수 있게해주고, 아이템 순서를 정해 명시된 타입만 사용 가능하게 한다. var empId: number = 1; var empName: string = "Steve"; // 튜플 타입의 변수 선언 var employee: [number, string] = [1, "Steve"]; var person: [number, string, boolean] = [1, "Steve", true]..