🔸 Typescript
- Typescript에서 객체를 매개변수로 전달할 때 프로퍼티별로 타입을 어떻게 설정할 수 있는가?
:
type키워드를 사용하여 프로퍼티별로 타입을 지정해줄 수 있음, 지정한 타입은 객체 리터럴의 형식을 취하지만 엄밀히 말하면 객체가 아니라 Typescript의 문법
ex)type ToggleButtonProps = { onText?: string; offText?: string; on?: boolean; };
🔸 Jest
- Jest로 React의 컴포넌트를 어떻게 테스트할 수 있고, 한계점은 무엇인가?
: 컴포넌트가 가지고 있는 어트리뷰트, 자식 노드 등은 테스트할 수 있지만 실제 화면에 렌더링되는 CSS, 이미지 파일 등을 Jest로 확인할 수는 없음
: 이를 확인하기 위해서는 목업을 생성하여 테스트를 진행할 필요가 있음
cleanup메서드는 무엇이고, 왜 사용하는가?:
cleanup메서드를 사용하면 테스트 시작 전에 테스트 환경을 초기화한 후 진행할 수 있음
screen.debug는 무엇이고, 왜 사용하는가?:
screen.debug를 사용하면 테스트를 진행할 때 생성되는 테스트 환경을 출력하여 확인할 수 있음
🔸 Webpack
- Webpack의 Plugin은 무엇이고, 왜 사용하는가?
: Webpack으로 변환한 파일에 추가적인 기능을 사용하고 싶을 때 Plugin 사용
: 빌드 과정을 자동화하기 위해서 다양한 Plugin의 도움을 받을 수 있음
- Webpack 환경 설정을 할 때 환경 변수는 어떻게 사용할 수 있는가?
:
dotenv-webpack패키지를 설치해야 클라이언트 환경에서 환경 변수를 참조할 수 있음
:dotenv-webpack패키지 안에는 환경 변수를 사용할 수 있도록 하는DefinePlugin등의 플러그인이 포함되어 있음
: 설치한 플러그인 파일을 따로 생성하여 설정하고export하면, Webpack 구성 파일의plugins옵션에 추가하여 사용할 수 있음
- HTML Webpack Plugin은 무엇이고 왜 사용하는가?
: HTML 템플릿을 구성하기 위한 목적으로 사용하며, 공식 문서를 보고 필요한 옵션을 설정하여 사용할 수 있음
- Image Minimizer Webpack Plugin은 무엇이고 왜 사용하는가?
: 빌드할 때 자동으로 이미지를 최적화하기 위해 사용, Create-React-App에서는 따로 이미지 최적화 작업을 수행해주지 않기 때문에 별도의 작업이 필요함
- Mini CSS Extract Plugin은 무엇이고 왜 사용하는가?
: Javascript 파일에 CSS 파일을
import하여 사용하는 경우 Javascript 파일 자체의 용량이 커지기 때문에 빌드 과정에서 CSS 파일을 따로 추출하는 과정이 필요한데, 이때 사용할 수 있음
: 다만 CSS 파일은 Webpack 기본 구성 파일이 아니라style-loader파일에서 관리하기 때문에style-loader파일에 Plugin을import하여 사용해야 함
- Clean Webpack Plugin은 무엇이고 왜 사용하는가?
: Webpack의 기능 중 트리 쉐이킹과 관련된 Plugin, 빌드 결과물의 용량을 줄이기 위해서 필요 없는 파일을 정리 및 최적화하는 역할을 수행함
- Webpack Bundle Analyzer Plugin은 무엇이고 왜 사용하는가?
: 사용하면 번들링 후 용량이 너무 큰 나머지 초기 렌더링 속도가 느리다면 그 원인을 분석할 수 있음
: 분석한 원인을 토대로 Webpack 기본 구성 파일의entry포인트를 수정하여 코드 분할을 수행하면 렌더링 속도를 보완할 수 있음
- esbuild loader를 사용하면 어떤 장단점이 있는가?
: Webpack의 느린 속도를 보완할 수 있고, Babel과 Typescript loader를 각각 설치할 필요가 없다는 장점이 있음
: 다만 이미지나 CSS 등 모든 정적 리소스 파일을 번들링하지 못하기 때문에 따로 Plugin을 설치하여 사용하는 경우가 많음
🔸 React
- 조건부 표시와 조건부 렌더링의 차이는 무엇인가?
: 조건부 표시는 CSS의
display: none등을 이용하여 아예 표시하지 않는 방식
: 조건부 렌더링은 조건문이나 삼항 연산자를 사용하여 JSX를 반환하는 방식
- 조건부 렌더링은 어떤 경우에 사용을 지양해야 하는가?
: 조건부 렌더링이 조건부 표시보다 성능 상 좋지 않기 때문에 수시로 사용자의 상호작용에 따라 리렌더링해야 하는 경우 조건부 렌더링을 사용하는 것은 바람직하지 않음
- JSX의 중괄호에
null을 사용하면 어떻게 되는가?: 아무 요소도 렌더링되지 않음, 말 그대로 없는 것처럼 처리됨
- React에서 조건부 렌더링을 구현할 수 있는 방법에는 무엇이 있는가?
: 가장 대표적으로
if ... else문을 사용하여 조건에 따라 JSX를 반환하도록 할 수 있음
: 그러나if ... else문을 사용하면 코드 중복을 처리하기 까다롭기 때문에 중괄호 안에 식을 사용하여 조건부 렌더링을 구현할 수 있음
: 삼항 연산자, 논리 연산자,null병합 연산자, 옵셔널 체이닝 연산자와 같은 조건 관련 연산자를 중괄호 안에 식처럼 사용하면 코드 중복을 줄이는 방향으로 조건부 렌더링을 구현할 수 있음
- React에서 자식 요소로 객체를 전달하는 경우 권고 사항에는 무엇이 있는가?
: React에서 렌더링 시 요소를 쉽게 파악할 수 있도록 요소의 props로
key를 설정해줘야 함
: 여기서의key는 따로 설정해주지 않으면 암시적으로 설정되지만, 웬만하면 고유한 값을 명시적으로 설정해주는 것이 바람직함
- React에서 자식 요소로 여러 개의 props를 전달하는 경우 어떤 방법을 사용할 수 있는가?
: 중괄호 안에 배열에 담아서 전달하거나,
React.Fragment를 사용할 수 있음
React.Fragment는 왜 사용하는가?: 자식 요소로 여러 개의 props를 전달할 때 배열을 사용하면 가독성이 좋지 않고
key를 설정하기 번거롭다는 단점을 보완하기 위해React.Fragment사용
- JSX 문법에서
<> ... </>와 같이 빈 태그는 무엇을 의미하는가?:
React.Fragment를 축약하여 빈 태그처럼 작성한 것
React.Fragment를 단축하여 작성한<> ... </>에key값을 설정하고 싶은 경우 어떻게 해야 하는가?: 비어 있는 태그에는
key값을 설정할 수 없기 때문에React.Fragment를 사용하거나,import시{ Fragment }와 같은 방식으로 가져오면<Fragment key={키 값}>처럼key값을 설정할 수 있음
