A. 부품단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다. B. React 환경에서 CDD를 지원하기 위한 툴 중 하나는 Storybook이 있다. D. 재사용할 수 있는 컴포넌트를 개발할 수 있다.
위의 설명들이 모두 CDD(Component Driven Development)에 대한 옳은 설명입니다.
CDD는 UI 컴포넌트를 부품 단위로 개발하고, 재사용 가능한 컴포넌트를 만들어 나가는 개발 방법론입니다. React 환경에서는 Storybook과 같은 툴을 사용하여 CDD를 지원합니다. 하향식 개발이 아니라, 상향식 개발 방법론인 Agile과도 잘 어울리며, 컴포넌트별 개발 및 테스트가 가능하여 개발 생산성을 높일 수 있습니다.
02.CSS in JS에 대한 설명으로 옳은 것을 모두 고르세요.
A. CSS-in-JS에는 대표적으로 Styled-Components가 있다. B. 빠른 페이지 로드에 유리하다. C. 모든 스타일이 전역으로 선언되어, 복잡한 class 명명 규칙을 적용해야 하는 문제가 있다. D. CSS 작성을 위해 여러 라이브러리를 사용하게 되므로, 번들의 크기가 커진다.
A. CSS-in-JS에는 대표적으로 Styled-Components가 있다. D. CSS 작성을 위해 여러 라이브러리를 사용하게 되므로, 번들의 크기가 커진다.
CSS in JS는 CSS를 JavaScript 파일 안에 작성하는 방법으로, 대표적으로 Styled-Components가 있습니다. 페이지 로드 속도는 기존의 CSS와 크게 다르지 않으며, 코드를 작성할 때 CSS와 JavaScript가 함께 작성되기 때문에, CSS의 재사용성이 높아집니다.
하지만, 모든 스타일이 전역으로 선언되어 class 명명 규칙을 적용해야 하는 문제가 있습니다. 또한, CSS 작성을 위해 여러 라이브러리를 사용해야 하므로, 번들의 크기가 커질 수 있습니다.
A. CDD(Component Driven Development)를 하기위한 도구다. C. 컴포넌트 재사용성, 테스트, 개발 속도를 향상시킬 수 있다. D. 컴포넌트를 문서화 및 시각화할 수 있다.
Storybook은 CDD(Component Driven Development)를 위한 도구 중 하나로, 컴포넌트 재사용성, 테스트, 개발 속도를 향상시킬 수 있습니다. 또한, 컴포넌트를 문서화하고 시각화할 수 있어, 프로젝트에 참여하는 모든 인원이 컴포넌트의 동작과 사용 방법을 이해하기 쉽습니다.
특정 프로젝트에 종속되는 라이브러리는 아니며, React, Vue, Angular 등 다양한 프론트엔드 프레임워크와 호환됩니다.
05. 아래와 같이 Storybook에서 이미지를 불러오려고 합니다. 다음 중 빈칸에 들어가야 할 코드를 고르세요.
(1) import React, { useRef } from 'react'; 을 통해 useRef 를 불러옵니다. (2) useRef(초기값); 자리에는 { current: 초기값 } 이 남고, input 요소에 사용할 수 있는 메서드 중 하나인 focus 를 사용해 포커싱을 구현합니다. (3) 원하는요소의속성으로 ref={inputRef} 설정하여요소를가져옵니다.
(1) 메인축이 row일 때, 가로 중앙 정렬시 justify-content: center; 를 사용합니다. (2) Styled Components로 만든 컴포넌트를 재사용 하려면 styled(가져올 컴포넌트 이름) 으로 작성하면 됩니다. (3) 매 클릭마다 기존 state의 반대 값을 반복적으로 설정하려면 !isOpen 로 작성하면 됩니다. (4) 삼항연산자의조건식에 isOpen 을넣어구현할수있습니다.
08.다음 중 useRef 에 대한 설명으로 옳은 것을 모두 고르세요.
A. DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다. B. useRef 를 통해 DOM을 직접 조작시 리렌더링이 된다. C. useRef 를 통해 값을 저장시 리렌더링 후 값이 초기화가 된다. D. useRef 를 남용하는 것은 부적절하고, React의 선언형 프로그래밍 원칙과 배치된다.
(1) map 메서드는 배열에 사용하기 때문에 menuArr 가 사용 되어야 합니다. (2) 현재 누른 탭의 인덱스와 배열의 요소의 인덱스와 일치했을 때를 가정해야 하므로 currentTab === index 가 맞습니다. (3) 탭을 클릭시 해당 탭의 인덱스를 클릭 이벤트 함수에 전달해주어야 하므로 () => selectMenuHandler(index) 이 맞습니다.