🔸 React
- CRA(Create React App)은 무엇이고, 왜 사용하는가?
: React 환경에서 개발하고 싶을 때 툴 체인을 직접 구성하지 않아도 쉽고 빠르게 개발할 수 있음
- CRA를 사용하여 개발하는 경우 장단점은 무엇인가?
: 프리셋을 바탕으로 바로 시작할 수 있음
: 패키지의 종속성이 하나이기 때문에 유지보수가 쉬움
: 사용자가 커스터마이징하여 원하는 툴 체인을 추가하려면eject하여 직접 리액트 스크립트를 분해해야 하는데, 일단 한 번 분해하면 이전의 상태로 돌아갈 수 없다는 단점이 있음
- 직접 설정한 React 환경 설정을 GitHub에 업로드하여 사용하려면 어떻게 해야 하는가?
:
npx degit명령어를 사용하여 구성한 파일을 업로드할 수 있음
- CRA 설치 시
public,src디렉토리의 구조가 정해져 있지 않은 이유는 무엇인가?: 팀, 프로젝트마다 작업 방식과 디렉토리 구조가 상이하기 때문에 따로 정해져 있지 않음
- CRA 설치 시 기본으로
public디렉토리에 존재하는manifest.json파일은 무엇인가?: 웹 앱, 웹 익스텐션이 포함하고 있는 정보를 담고 있는 파일
- CRA와 Vite의 차이점은 무엇인가?
: CRA에서는
js와jsx확장자명을 가진 파일을 구분하지 않고 처리하지만, Vite에서는js와jsx확장자명을 가진 파일을 구분하여 처리함
- CRA에서 패키지를 따로 설치하지 않고 절대 경로를 사용할 수 있는 방법은 무엇인가?
:
jsconfig.json에compilerOptions를 작성해야 함,baseUrl프로퍼티 값을 원하는 절대 경로로 설정하면 됨
react,react-dom패키지를--save-peer옵션으로 설치한다면 그 이유는 무엇인가?:
--save-peer옵션으로 설치하면peerDependency로 설치되고, 따로import하지 않아도 프로젝트 디렉토리 내에서 패키지를 사용할 수 있음
- CRA 사용 시 클라이언트 환경에서 환경 변수를 참조할 수 있는 방법은 무엇인가?
:
.env파일 작성시 환경 변수 이름에 접두사로REACT_APP_을 붙여준 것만 클라이언트 환경에서 참조할 수 있음
- CRA 기본 디렉토리 구조 중
public과src의 차이는 무엇인가?:
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를 반환
