말하는 컴공감자의 텃밭

Redux ? JavaScript 앱에서 상태 관리를 위한 자바스크립트 라이브러리이다. UI 라이브러리/프레임워크와 함께 사용될 때 매우 유용하며, 애플리케이션의 상태(state)를 예측 가능한 방식으로 관리할 수 있다. 여기서 "상태"란 앱에서 관리해야 하는 모든 데이터를 말한다. 자바 스크립트는 Props랑 State로 컴포넌트 안에서 데이터를 교환하고, 통신하는 두 용어를 정리해보자. Props (속성): 부모 컴포넌트로부터 자식 컴포넌트에게 전달되는 데이터이다. Props는 컴포넌트가 받는 입력과 같으며, 컴포넌트 내에서 변경할 수 없다. 컴포넌트를 재사용하고 구성할 수 있는 방식이다. 값을 변경하고자해도 자식에서 변경은 불가능하며 부모의 내부를 변경해야 한다. State (상태): 컴포넌트가 관..

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 이 해당. 불변성을 가지고 있다는 것은 이 타입들의 값을 변경하면 실제 메모리에서 새 값이 생성됨을 말한다. 그렇기에 원래 값은 변경되지 않아 불변한다. 라고 표현한다. 참조 타입 객체, 배열, 함수가 해당 힙에 저장되며, 복잡한 데이터에 사용되는 더 큰 메모리 공간입다. 호출 스택은 실제 데이터가 저장되는 힙 위치에 대한 참조(또는 포인터)를 저장한다..

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