배경프리코스 미션을 구현하면서 클래스에서 다른 클래스의 인스턴스를 생성하고 사용하는 방법에 대해 고민하게 되었다. 우선 두 가지 방법으로 구현하게 되었는데, 둘 다 찝찝한 구석이 있어 좋은 방법이 없는지 궁금해졌다.생성자에서는 초기화만 하고, init 메서드에서 값을 넣어준다. (Calculator) → 이거 init 으로 계속 초기화되는데 사용할 일이 있나?클래스 내부에서 그냥 생성한다. (RacingGame) → run 실행될때마다 계속 인스턴스 만드는건데 비효율적인듯. 그런데 생성자에서는 아직 입력값을 받기 전이라 인스턴스를 만들 수 없다.class Calculator { customSeparator; numbers; constructor() { this.customSeparator = ..
BDD란?BDD는 행위 주도 개발 (Behavior Driven Development)로, TDD를 근간으로 파생된 개발 방법론이다.TDD에서 파생되어 테스트케이스 자체가 요구사항이 되도록 하는 개발방법이다. BDD 기본 패턴시나리오를 기반으로 테스트 케이스 작성함수 단위 테스트를 권장하지 않음일반인이 봐도 이해할 수 있을 정도로 작성Given-When-ThenFeature : 테스트 대상의 기능/책임을 명시Scenario : 테스트 목적에 대한 상황을 설명Given : 시나리오 진행에 필요한 값을 설정When : 시나리오를 진행하는데 필요한 조건을 명시Then : 시나리오를 완료했을 때 보장해야 하는 결과를 명시즉, 테스트 대상의 상태 변화를 테스트하는 것테스트 대상의 환경을 A 상태에 두고(Given..
공식문서를 보고 그때그때 필요한 문법을 찾아 예제를 적으며 공부합니다. Globals · JestIn your test files, Jest puts each of these methods and objects into the global environment. You don't have to require or import anything to use them. However, if you prefer explicit imports, you can do import {describe, expect, test} from '@jest/globals'.jestjs.io expect()expect(값).toBe(비교할 값)Object.is(값, 비교할 값) 과 같다Object.is() 란? Object.is..
배경TDD로 개발하다가, 기능 단위 커밋을 할 때 해당 커밋의 기능이 테스트를 통과하는지 확실하게 검증하기 위해 커밋 이전에 테스트를 돌리고 통과 시에만 커밋을 할 수 있도록 하고 싶었다.또한 커밋 메시지 컨벤션을 따르기 위해 커밋 메시지 검증이 필요했다. 구현git hooks 설정하기외부 라이브러리를 사용할 수 없었기에, 평소 사용했던 husky로 설정은 불가능해서 .git/hooks에서 설정을 해주기로 했다.1. cd .git/hooks 해서 지원하는 훅 확인2. 해당 위치에서 필요한 훅의 .sample 확장자를 지운 이름의 파일을 만들기vi pre-commit3. 실행하고 싶은 명령어 작성# .git/hooks/pre-commitnpm test4. 권한부여chmod ug+x .git/hooks/*..
리액트에서 "children"이란 무엇일까? children은 prop일 뿐이다. const Parent = ({ children }) => { return {children}; }; 즉 아래의 코드 (1), (2)는 같다. // (1) // (2) 그렇다면 Element를 prop으로 넘긴다는 것은 어떤 뜻일까? 아래의 두 코드는 같은 뜻이다. 모두 리액트 element를 생성, 할당하고 있다. const children = const children = React.createElement(Child, null, null); element가 변경되면 위와 같은 재생성 및 재할당과정이 일어난다. 그렇다면 리액트 element란 무엇인가? 바로 아래와 같은 객체일 뿐이다. { type: Child, pro..
3주차 주제 스터디를 진행하다가 이런 논란(?)이 있었다. 아래와 같은 코드에서, context가 바뀔 때 자식 컴포넌트가 모두 리렌더링 되는 것이 아니라, context가 쓰이는 컴포넌트만 리렌더링 되는 것이었다...! 그리고 정말 이상하게도 리렌더링 여부를 확인하기 위한 console.log()는 동작하지 않았지만, React devtools의 하이라이팅은 동작해서 혼란이 가중되었다. (리렌더링 된거다 vs 아니다) 스터디가 끝나고 이러한 현상(context가 쓰이는 컴포넌트만 리렌더링, but 하이라이팅은 모든 자식 컴포넌트)이 일어나는 이유를 이해하기 위해 아래 내용들을 다시 공부해 봐야겠다고 생각했다. 1. useContext 2. children Props 3. React devtools 이번..
성능 최적화를 위해 리렌더링을 줄이자! 라고 하면서, React.memo()나 useMemo()를 남발하고 있지는 않았나 되돌아보자. 리액트에서 "렌더링"이란 무엇인지 정확히 알고, 최적화를 어떻게 시킬 수 있는지 알아보자! 리액트의 렌더링이란? 아래 과정 중 Render phase를 리액트에서 렌더링이라고 부른다. Trigger phase 0️⃣ 최초 진입 시 0️⃣ state, 부모의 state 의 변경 각 컴포넌트에서 state의 변경 시 dirty check ➡️ batch 추가 Render phase 1️⃣ render() 호출 (클래스형 컴포넌트) 또는 함수 컴포넌트 호출 (함수형 컴포넌트) 2️⃣ 가상 DOM 재조정 이전 가상 DOM과 현재 가상 DOM을 비교 (Diffing Algorith..
가상화란? 하나의 하드웨어를 여러 개인 것처럼 가상으로 쪼개서 사용하거나, 여러 개의 하드웨어를 묶어서 하나의 자원인 것처럼 사용하는 것 가상화의 등장 배경 1960~70년대의 하드웨어, 소프트웨어 기술 상황은 어땠을까? 무어의 법칙에 의해 하드웨어의 발전은 가속화되고 있었다. 소프트웨어는 이러한 하드웨어의 발전을 따라가지 못했다. 남는 하드웨어 성능 아까운데 어떡하지... 가상화 개념으로 한 대의 서버를 나눠쓰자! 나만의 서비스를 만들었다. 이제 배포를 해야 하는데, 내 컴퓨터를 서버컴으로 계속 돌릴 수는 없다. 다른 환경을 빌려서 사용해야겠다. 그런데 새로운 환경에서 코드를 실행시키자니, 환경이 내 컴퓨터랑은 달라서 안되네... 가상화 개념으로 다양한 하나의 환경(Host OS)에서 여러 서비스들이 ..
