[221107] 오늘의 배움(TIL) - React / React Testing Library

💛 nalsae·2022년 11월 7일
1

📚 오늘의 배움(TIL)

목록 보기
76/84
post-thumbnail

🔸 React

  • CRA(Create React App)은 무엇이고, 왜 사용하는가?

: React 환경에서 개발하고 싶을 때 툴 체인을 직접 구성하지 않아도 쉽고 빠르게 개발할 수 있음

  • CRA를 사용하여 개발하는 경우 장단점은 무엇인가?

: 프리셋을 바탕으로 바로 시작할 수 있음
: 패키지의 종속성이 하나이기 때문에 유지보수가 쉬움
: 사용자가 커스터마이징하여 원하는 툴 체인을 추가하려면 eject하여 직접 리액트 스크립트를 분해해야 하는데, 일단 한 번 분해하면 이전의 상태로 돌아갈 수 없다는 단점이 있음

  • 직접 설정한 React 환경 설정을 GitHub에 업로드하여 사용하려면 어떻게 해야 하는가?

: npx degit 명령어를 사용하여 구성한 파일을 업로드할 수 있음

  • CRA 설치 시 public, src 디렉토리의 구조가 정해져 있지 않은 이유는 무엇인가?

: 팀, 프로젝트마다 작업 방식과 디렉토리 구조가 상이하기 때문에 따로 정해져 있지 않음

  • CRA 설치 시 기본으로 public 디렉토리에 존재하는 manifest.json 파일은 무엇인가?

: 웹 앱, 웹 익스텐션이 포함하고 있는 정보를 담고 있는 파일

  • CRA와 Vite의 차이점은 무엇인가?

: CRA에서는 jsjsx 확장자명을 가진 파일을 구분하지 않고 처리하지만, Vite에서는 jsjsx 확장자명을 가진 파일을 구분하여 처리함

  • CRA에서 패키지를 따로 설치하지 않고 절대 경로를 사용할 수 있는 방법은 무엇인가?

: jsconfig.jsoncompilerOptions를 작성해야 함, baseUrl 프로퍼티 값을 원하는 절대 경로로 설정하면 됨

  • react, react-dom 패키지를 --save-peer 옵션으로 설치한다면 그 이유는 무엇인가?

: --save-peer 옵션으로 설치하면 peerDependency로 설치되고, 따로 import하지 않아도 프로젝트 디렉토리 내에서 패키지를 사용할 수 있음

  • CRA 사용 시 클라이언트 환경에서 환경 변수를 참조할 수 있는 방법은 무엇인가?

: .env 파일 작성시 환경 변수 이름에 접두사로 REACT_APP_을 붙여준 것만 클라이언트 환경에서 참조할 수 있음

  • CRA 기본 디렉토리 구조 중 publicsrc의 차이는 무엇인가?

: public은 정적 디렉토리로서 Webpack이 관리해주지 않지만, src는 동적 디렉토리로서 Webpack의 관리 대상임

  • CRA에서 normalize CSS를 적용할 수 있는 방법은 무엇인가?

: CRA는 postcss-normalize 플러그인이 설치되어 있기 때문에 이를 CSS 파일에 import 하여 normalize CSS를 적용할 수 있음
ex) @import-normalize;

  • CRA 구성을 덮어쓰고 싶은 경우 어떤 툴을 사용할 수 있는가?

: react-app-rewind 패키지나 CRACO를 사용할 수 있음

  • React의 컴포넌트는 어떻게 분류할 수 있는가?

: 상태를 가지지 않는 Stateless Component와 상태를 가지는 Stateful Component
: Stateless Component와 Stateful Component는 상위, 하위 개념 없이 서로 맞물린 형태로 구현됨
: Hook이 존재하지 않았던 과거에 Stateless Component는 시각적으로 표현하는 데 중점을 두는 Presentational Component라고 불리기도 했고, 함수 컴포넌트로 구현되었음
: 그러나 Hook 등장 이후 어떤 컴포넌트든 구현 방식에 있어 제약이 사라지게 됨


🔸 React Testing Library

  • getBy ..., queryBy ..., findBy ... 메서드들의 차이점은 무엇인가?

: getBy ..., queryBy ... 메서드는 조건에 맞는 요소를 찾았을 때 공통적으로 query에 일치하는 노드를 반환, 그러나 조건에 맞는 요소를 찾지 못한 경우 getBy ... 메서드는 에러를 반환하고, queryBy ... 메서드는 null을 반환하는 차이점이 있음
: findBy ... 메서드는 비동기 처리 테스트에 사용함, 조건에 맞는 요소를 찾은 경우 resolved Promise를, 조건에 맞는 요소를 찾지 못한 경우 rejected Promise를 반환

profile
𝙸'𝚖 𝚊 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚝𝚛𝚢𝚒𝚗𝚐 𝚝𝚘 𝚜𝚝𝚞𝚍𝚢 𝚊𝚕𝚠𝚊𝚢𝚜. 🤔

0개의 댓글