why not

1. 테스트의 4가지 종류 1-1. 단위 테스팅(Unit testing) 하나의 모듈/컴포넌트/클래스가 기대한대로 동작하는지, 제공하는 기능들을 테스트하는 것 대상 컴포넌트에서 의존하는 일부 대상은 목(mock) 객체를 이용하여 테스트 하기 편한 환경을 구축할 수 있다. 개발자가 작성 자동화된 테스팅 1-2. 통합 테스팅(Integration testing) 두 개 이상의 모듈이 잘 연동/연결이 되었는지 테스팅. 모듈 간에 발생하는 메시지나 에러를 검증하는 단계 e.g. 3rd party API를 호출하면 어떤 응답을 기대하는지 테스팅 개발자가 작성 자동화된 테스팅 1-3. E2E 테스팅(End-to-end testing) 실제 사용자가 이용하는 환경과 최대한 유사하게 만들어 사용자의 경험을 전반적으로 ..

1. TDD? 'Test-Driven Development'의 약자 한국어로는 '테스트 주도 개발' '디자인 → 로직 구현 → 테스트 코드 작성' (일반적인 프로세스) '디자인 → 테스트 코드 → 로직 구현' (TDD 프로세스) 소프트웨어를 동작시키기 위한 로직을 구현하기 전에 테스트 코드를 먼저 구현하는 것을 프로세스화 한 개발 방법 테스트 주도 개발 주기 2. 테스트 코드가 중요한 이유? 작성한 코드가 의도적으로 동작하는지 수시로 빠르게 검증할 수 있다. 매번 서버를 돌려서 수동적으로 input/output을 검증하는 비효율적인 방법에서 벗어날 수 있음 리팩토링을 할 때 → 리팩토링 후에도 소프트웨어가 여전히 같은 기능을 제공할 수 있도록 안정망 역할을 함 잘 작성된 테스트 코드는 소프트웨어의 명세서..

1. Jest? 프론트엔드 어플리케이션을 쉽게 테스팅 할 수 있도록 다양한 인터페이스를 제공하는 Javsacript용 테스팅 프레임워크 메타(전 Facebook)에서 만들고, 오픈소스로 배포 문서화가 아주 잘 되어 있다. 직관적이다. 2. Jest가 주고자 하는 가치와 철학 Jest is a delightful JavaScript Testing Framework with a focus on simplicity 3. 특징 3-1. 고립됨(isolated) 각 테스트 케이스는 고립된 환경에서 돌아감 고립되었기 때문에, 테스트 성능을 최대화 시키기 위해 여러 테스트 케이스들을 병렬적으로 돌리는 것도 가능하다. 3-2. 쉬운 설치 및 시작 Jest 내에 테스트 러너(runner), 확인(assertion), 코..

1. RTL? React 컴포넌트들을 테스팅 하기 위해 필요한 utility성 function들을 제공하는 라이브러리 https://testing-library.com/ 2. 특징? DOM 노드들을 찾거나, DOM 노드들과 소통하기 위한 솔루션 제공 3. React 컴포넌트 렌더링? render 메서드 이용 // 테스트 케이스 test('it renders the component', () => { render() }) 4. DOM 노드 검색? DOM 노드 검색 = 형태 + 쿼리 방식 4-1. 노드를 검색하는 6가지 형태 getByXXX - 현재 DOM 트리 내에서 한 노드를 찾는 것. 못찾으면 에러 발생시킴 getAllByXXX - 현재 DOM 트리 내에서 모든 노드를 찾는 것. findByXXX - ..

1. Styled-components? 파일 단위의 CSS(public/index.css)가 아닌, 리액트처럼 컴포넌트화 된 스타일링 기법 소개 Lyft, Coinbase, Atlassian, Doordash, Jane 등 다양한 테크 회사에서 사용 중인 라이브러리 2. Styled-components를 사용해야 하는 이유? 리액트 컴포넌트를 CSS로 쉽게 styling 하기 위한 방법을 제공한다. const StyledButton = styled(Button)` background-color: blue; color: white: padding: 20px 10px; &:hover { background-color: darkblue; } const App = () => ( Hello world! 여기를 클..

1. Recoil React를 위한 상태 관리 라이브러리 Facebook에서 유지보수 하는 오픈소스 프로젝트 1-1. 상태 관리가 별도로 필요한 이유? 컴포넌트 간 데이터를 공유하고 전달해야 할 때, React의 단방향 데이터 특성 상, 부모→자식으로 밖에 전달할 수가 없다. 자식↔자식 간의 공유를 하려면 부모 컴포넌트에 지저분한 로직들을 넣어야 하고, 결과적으로는 유지보수성, 가독성이 떨어짐. 부모에서 증손자 컴포넌트로 데이터를 전달해야 할 경우, 부모 → 자식 → 손자 → 증손자로 props를 전달하며 데이터를 공유해야 하는 경우도 많음 (전문 용어로는 props drilling이라고 부름) 자식, 손자 컴포넌트 입장에서는 불필요한 데이터를 받아야 하고, 상태 관리가 점점 복잡해진다. 전역 상태 저장..

1. React Router React 어플리케이션에서 페이지/컴포넌트 내비게이션 (i.e. 페이지 라우팅; page routing)을 위해 쓰이는 표준 라이브러리이다. URL에 따른 UI (User Interface)를 동기화하여 일정한 경험을 제공한다. 페이지 라우팅(Page routing)? 주어진 요청(URL)에 따라 해당 URL을 어떤 handler에서 처리하고 어떤 페이지를 렌더링 할 지 결정하는 과정 공식 document 참고: https://reactrouter.com/en/main 공식 문서를 통해 모르는 개념을 배워나가는 연습이 필요하다. Home v6.9.0 I'm on v5 The migration guide will help you migrate incrementally and k..

1. React란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 2. 특징 2-1. 선언형 어플리케이션의 각 상태에 따라서 어떤 뷰(view)를 보여주면 될지, 뷰(view)만 설계하면 됨 상태가 달라짐에 따라 React가 알아서 필요한 컴포넌트만 업데이트하여 렌더링 2-2. 컴포넌트 기반 스스로 상태를 관리하는 캡슐화된 컴포넌트이다. 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나눌 수 있다. 컴포넌트 간 재사용 및 조합이 가능하다 → 복잡한 UI도 조금 더 쉽게 구현이 가능 외부에서 주어지는 인풋인 props와 내부에서만 관리하는 상태인 state로 이루어졌다. 3. 꼭 짚고 가야 할 핵심 개념 3-1. 가상 DOM(virtual DOM) 노드 트리를 메모리 상에 ..