목록전체 글 (74)
why not
보호되어 있는 글입니다.
보호되어 있는 글입니다.
의미 있는 테스트 작성하기(30일차)
1. 테스트의 4가지 종류 1-1. 단위 테스팅(Unit testing) 하나의 모듈/컴포넌트/클래스가 기대한대로 동작하는지, 제공하는 기능들을 테스트하는 것 대상 컴포넌트에서 의존하는 일부 대상은 목(mock) 객체를 이용하여 테스트 하기 편한 환경을 구축할 수 있다. 개발자가 작성 자동화된 테스팅 1-2. 통합 테스팅(Integration testing) 두 개 이상의 모듈이 잘 연동/연결이 되었는지 테스팅. 모듈 간에 발생하는 메시지나 에러를 검증하는 단계 e.g. 3rd party API를 호출하면 어떤 응답을 기대하는지 테스팅 개발자가 작성 자동화된 테스팅 1-3. E2E 테스팅(End-to-end testing) 실제 사용자가 이용하는 환경과 최대한 유사하게 만들어 사용자의 경험을 전반적으로 ..
TDD(Test-Driven Development) 활용 (29일차)
1. TDD? 'Test-Driven Development'의 약자 한국어로는 '테스트 주도 개발' '디자인 → 로직 구현 → 테스트 코드 작성' (일반적인 프로세스) '디자인 → 테스트 코드 → 로직 구현' (TDD 프로세스) 소프트웨어를 동작시키기 위한 로직을 구현하기 전에 테스트 코드를 먼저 구현하는 것을 프로세스화 한 개발 방법 테스트 주도 개발 주기 2. 테스트 코드가 중요한 이유? 작성한 코드가 의도적으로 동작하는지 수시로 빠르게 검증할 수 있다. 매번 서버를 돌려서 수동적으로 input/output을 검증하는 비효율적인 방법에서 벗어날 수 있음 리팩토링을 할 때 → 리팩토링 후에도 소프트웨어가 여전히 같은 기능을 제공할 수 있도록 안정망 역할을 함 잘 작성된 테스트 코드는 소프트웨어의 명세서..
Dutch pay 서비스에서 이용할 기술셋 7 (28일차)
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), 코..
Dutch pay 서비스에서 이용할 기술셋 6 (27일차)
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 - ..
Dutch pay 서비스에서 이용할 기술셋 5 (26일차)
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! 여기를 클..
Dutch pay 서비스에서 이용할 기술셋 4 (25일차)
1. Recoil React를 위한 상태 관리 라이브러리 Facebook에서 유지보수 하는 오픈소스 프로젝트 1-1. 상태 관리가 별도로 필요한 이유? 컴포넌트 간 데이터를 공유하고 전달해야 할 때, React의 단방향 데이터 특성 상, 부모→자식으로 밖에 전달할 수가 없다. 자식↔자식 간의 공유를 하려면 부모 컴포넌트에 지저분한 로직들을 넣어야 하고, 결과적으로는 유지보수성, 가독성이 떨어짐. 부모에서 증손자 컴포넌트로 데이터를 전달해야 할 경우, 부모 → 자식 → 손자 → 증손자로 props를 전달하며 데이터를 공유해야 하는 경우도 많음 (전문 용어로는 props drilling이라고 부름) 자식, 손자 컴포넌트 입장에서는 불필요한 데이터를 받아야 하고, 상태 관리가 점점 복잡해진다. 전역 상태 저장..