전체 글

AAA 패턴(Arrange / Act / Assert)1. Arrange: 테스트 전 준비사항들을 구성한다. state, service를 준비하고 라이브러리들을 Mocking하는 단계이다. 테스트할 element를 렌더링하는 과정이 포함된다. 앞서 설정과 해지 패턴에서 알아본 beforeEach와 afterEach를 작성한다.  2. Act: User의 액션에 따른 테스트 코드를 실행한다.  3. Assert: Act로 인해 변경되거나 구성되는 값들을 검증하는 과정이다. element의 값을 검증, element의 생성과 소멸 상태값의 변경 시간에 따라 변화하는 값을 감지한다. 사용자의 의도적인 인터랙션에 의해 변화되는 모든 값을 검증하는 과정이다. AAA 패턴 예describe(' component',..

설정과 해지를 통한 환경의 격리테스트하고자 하는 컴포넌트를 순수하게 외부환경으로 부터 격리할 수 있다환경변수, 글로벌 변수, import, 다른 리액트 컴포넌트로 부터언제 어디서나 테스트가 실행되더라도 같은 결과를 낼 수 있도록 통제할 수 있다. 테스트 전에 데이터 세팅, 특정 모듈 모킹 등 동작을 통해 테스트 시작환경이 동일하도록 조성하고같은 방식으로 테스트 수행 이후에 테스트 동안에 변경되었던 값을 초기화 하여 차후 테스트에 주는 영향을 방지한다.  설정 (Setup)과 해지 (Teardown) 예시Timer를 이용하는 경우 (setTimeout, setInterval, clearTimeout, clearInterval) 테스트는 예측이 어려워지고 느려진다.이런 경우에는 fake timer를 이용하는..

📌 알고리즘 기초 이론시간 복잡도알고리즘의 성능을 나타내는 척도특정한 크기의 입력에 대하여 알고리즘 수행 시간 분석동일한 기능에 시간 복잡도가 낮을수록 우수    2. 빅오 표기법가장 빠르게 증가하는 항만을 고려하는 표기법차수가 가장 큰 항에서 계수를 제외하여 표현ex) 연산 횟수가 아래와 같은 알고리즘의 빅오로 표시하면? 3N^3 + 5N^2 + 1000000 → O(N^3)      3. 예시 ( N=5의 케이스) let arr = [3, 5, 1, 2, 4];let sum = 0;for (let i=0; i수행 시간은 데이터 개수 N에 비례, 시간 복잡도: O(N)Q1. N개의 데이터 합을 계산하는 프로그램Q2. 이중 반복문 예제let arr = [3, 5, 1, 2, 4];for (let i=0..

📌 알고리즘 기초 이론자료구조다수의 자료를 담기 위한 구조로, 데이터의 수가 많아질 수록 효율적인 자료 구조가 필요하다.예를 들어, 삽입과 추출이 모두 적당히 빠른 자료 구조가 있을 수 있고, 삽입은 느리지만 추출을 빠른 자료 구조가 있을 수 있다.데이터를 효과적으로 저장하고, 처리하는 방법에 대해 이해하여, 불필요하게 메모리 낭비나 계산을 하지 않도록 해야 한다.   2. 선형 구조와 비선형 구조선형 구조하나의 데이터 뒤에 다른 데이터가 하나 존재하는 자료 구조데이터가 일렬로 연속적으로 연결되어 있다.배열, 연결 리스트, 스택, 큐비선형 구조하나의 데이터 뒤에 다른 데이터가 여러 개 올 수 있는 자료 구조데이터가 일직선상으로 연결되어 있지 않아도 된다.트리, 그래프   3. 자료 구조와 알고리즘효율적..

코드 테스트1. 코드의 신뢰성을 보장하는 도구우리가 작성한 코드가 의도한 대로 동작하는지 확인하는 것은 매우 중요합니다. 그러나 수동적인 방법으로 input/output을 확인하는 것은 비효율적입니다. 테스트 코드를 작성하면 작성한 코드가 의도한 대로 작동하는지 빠르게 확인할 수 있습니다.2. 코드 리팩토링의 안전망코드를 리팩토링할 때, 테스트 코드가 있다면 코드를 변경한 후에도 소프트웨어가 여전히 기능을 제공하는지 확인할 수 있습니다. 이는 소프트웨어의 안정성을 유지하는 데 중요한 역할을 합니다.3. 명세서로서의 테스트 코드잘 작성된 테스트 코드는 소프트웨어의 명세서가 될 수 있습니다. 코드를 직접 읽는 대신 테스트 케이스를 통해 소프트웨어의 기능과 예외 상황을 이해할 수 있습니다.TDD(Test-Dr..

npm 특징npm은 프로젝트의 의존성이 늘어날수록 node_modules 폴더가 거대해지고 복잡해지는 문제를 안고 있습니다. 이는 의존성을 검색하거나 설치할 때 효율성을 떨어뜨립니다. 또한, 다른 버전의 패키지가 중복으로 설치되는 문제와 유령 의존성이 발생할 수 있습니다. yarn berryYarn Berry는 Yarn의 두 번째 버전으로, 2.x부터 시작하여 현재 4.x까지 이어져왔습니다. 이번 글에서는 Yarn Berry의 주요 특징과 혁신에 대해 알아보겠습니다. 먼저, Yarn Berry를 사용하기 위해서는 기본적으로 명시적인 의존 관계를 나타내야 합니다. 이는 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다. Yarn Berry의 가장 주목할 만한 특징 중 하나는 패키지를 node_modul..

개인 프로젝트 레이아웃을 잡다가 Flex를 잘 쓰고 싶어서 인프런 강의를 수강하였다.강의 들으면서 정리한 내용을 작성해보았다. 1. container에 display: flex; vs display: inline-flex; ... AAAAAAAAAAAA BBB CCCCCCC  2. responsive와 flex-item: 1브라우저 너비 601px 일 때 flex-item에 flex:1브라우저 너비 601px 일 때 flex-item에 flex:1 주석브라우저 너비 594px 일 때 3. align-items는 기본 값이 stretch 4. align-content는 wrap으로 넘어갔을 때, cross축 정렬을 어떻게 할 것인지 결정5. flex-item에 적용하는 속성인 flex-grow는 남는..

this의 개념은 다소 복잡하다. 어려운 이유는 this가 참조하는 대상이 실행 컨텍스트에 따라 달라지기 때문이다. 이러한 변동성은 this가 호출되는 다양한 시나리오에 대해 이해를 해야한다. 프로그래밍을 할때 혼란이 되기도 하고 오류의 원인이 될 수도 있다. 이러한 개념을 명확히 하고 적용을 직관적으로 이해하기 위해 this의 사용법을 3가지의 주요 범주로 구분을 해보자.암시적 바인딩명시적 바인딩정적 바인딩이러한 분류를 통해 다양한 환경에서 this를 예측하고 이해할 수 있는 구조적인 틀을 만드는 데에 도움이 될 수 있다.this는 왜 상황에 따라 달라질까? 모든 변수는 정적으로 바인딩한다. 오직 this만이 동적으로 바인딩 된다. 바로 이런 점이 혼란을 야기한다. 함수를 만든 쪽이 아닌 함수를 호출하..