2021-11-09-TIL

2021-11-09-TIL

Today I Learned

React에서 Props란?

컴포넌트의 props 라는 개념이 있는데, 이는 properties 의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용한다고 한다.

부모 컴포넌트가 JSX 속성처럼 <Hello name="react" color="red" />로 값을 넘기면, 자식 컴포넌트는 함수의 인자로 props 객체를 받아 props.name처럼 쓴다. 구조 분해로 function Hello({ name, color })처럼 받는 경우가 많다. React 문서가 강조하듯 props는 읽기 전용이라 자식이 직접 바꾸면 안 된다. 자식이 값을 바꿔야 한다면 부모가 상태(state)와 그 상태를 바꾸는 함수를 함께 props로 내려 준다. 데이터가 위에서 아래로만 흐르기 때문에 어떤 값이 어디서 왔는지 추적하기 쉽다.

• https://react.vlpt.us/basic/05-props.html
• https://133hyun.tistory.com/14

React Testing

React 컴포넌트 테스트는 보통 Jest(테스트 실행기, 단언, 목)와 React Testing Library를 함께 쓴다. React Testing Library는 컴포넌트의 내부 상태나 구현 세부를 검사하지 않고, 사용자가 보는 것처럼 화면의 텍스트나 역할(role)로 요소를 찾아 클릭, 입력 같은 이벤트를 일으킨 뒤 결과 화면을 확인한다. 구현을 리팩터링해도 동작이 같으면 테스트가 깨지지 않는다는 것이 이 방식의 장점이다.

• https://learn-react-test.vlpt.us/#/
• https://jbee.io/react/testing-1-react-testing/

Next.js

Next.js는 React 기반 프레임워크로, 서버 사이드 렌더링과 정적 페이지 생성을 기본 제공한다. pages 디렉터리의 파일 구조가 그대로 URL 경로가 되는 파일 기반 라우팅을 쓰고, 페이지별로 서버에서 데이터를 미리 가져오는 함수(getServerSideProps, getStaticProps)를 정의할 수 있다. 순수 React(CSR)에서 따로 설정해야 하는 코드 분할, 라우팅, SEO 대응을 프레임워크가 맡는다.

• https://velopert.com/3293
• https://kyounghwan01.github.io/blog/React/next/basic/#next-js%E1%84%80%E1%85%A1-%E1%84%8C%E1%85%A6%E1%84%80%E1%85%A9%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8C%E1%85%AE%E1%84%8B%E1%85%AD-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC

Unit Test and Integration Test

단위 테스트는 클래스 하나의 로직을 의존성을 목 객체로 바꿔 격리한 채 검증한다. Spring 컨텍스트를 띄우지 않아 빠르다. 통합 테스트는 여러 구성 요소(컨트롤러, 서비스, 리포지토리, DB)를 실제로 엮어 함께 동작하는지 확인한다. Spring Boot에서는 순수 JUnit과 Mockito로 단위 테스트를, @SpringBootTest로 전체 컨텍스트를 띄운 통합 테스트를 쓰고, 그 사이에 @WebMvcTest(웹 계층), @DataJpaTest(JPA 계층)처럼 필요한 계층만 띄우는 슬라이스 테스트가 있다. 링크된 Stack Overflow 질문처럼 컨텍스트를 띄우는 순간 단위 테스트라기보다 통합 테스트에 가깝다고 보는 시각이 많다.

• https://dzone.com/articles/unit-and-integration-tests-in-spring-boot-2
• https://www.baeldung.com/spring-boot-testing
• https://stackoverflow.com/questions/54658563/unit-test-or-integration-test-in-spring-boot

Unit Test Naming Conventions

링크된 글들이 소개하는 대표적인 이름 규칙은 다음과 같다.

• MethodName_StateUnderTest_ExpectedBehavior: withdraw_insufficientBalance_throwsException
• Should_ExpectedBehavior_When_StateUnderTest: Should_ThrowException_When_BalanceIsInsufficient
• Given_Preconditions_When_StateUnderTest_Then_ExpectedBehavior: BDD 스타일

어느 규칙이든 테스트 이름만 읽고 무엇을 검증하는지 알 수 있어야 한다는 점이 공통이다. 메서드 이름을 넣는 규칙은 메서드 이름이 바뀌면 테스트 이름도 고쳐야 한다는 단점이 있다. JUnit 5에서는 @DisplayName("잔액이 부족하면 출금할 수 없다")처럼 한글 설명을 따로 붙일 수 있다.

• https://medium.com/@stefanovskyi/unit-test-naming-conventions-dd9208eadbea
• https://dzone.com/articles/7-popular-unit-test-naming
• https://stackoverflow.com/questions/155436/unit-test-naming-best-practices

---

Pros & Cons

너무 강의만 주구장창 들으니깐 질리는 감이 없지않다. 빨리 프로젝트를 무언가 해야한다는 생각이 든다.

---

Monthly Goal

• 스프링 MVC 1편 (37강/72강)
• 스프링 MVC 2편 (0강/129강)
• 개인 프로젝트 -> 기획중

참고한 자료외부 출처 3

외부 출처

• Passing Props to a ComponentReact
• Guiding PrinciplesTesting Library
• Testing Spring Boot Applications - Spring Boot ReferenceSpring Docs