React Tab 클릭 시 버튼이 이동하는 Tab버튼 만들기 컴포넌트 짜기 컴포넌트를 나눈다. 우리가 작성해야 하는 것은 탭 버튼을 감싸고 있는 박스 하나. 아래 보여줄 텍스트 박스 하나. return ( <TabContainer> <li></li> </T...

React Toggle 클릭 시 버튼이 이동하는 Toggle버튼 만들기 컴포넌트 짜기 컴포넌트를 나눈다. 우리가 작성해야 하는 것은 토글버튼을 감싸고 있는 박스 하나. 그 안에 이동할 작은 동그라미 버튼 하나. 토글의 상태에 따라 텍스트를 출력할 컴포넌트 하나이다. return ( <ToggleContai...

React Modal 클릭 시 알림창을 생성하는 Modal 버튼 만들기 컴포넌트 짜기 컴포넌트를 나눈다. ModalContainer : 전체를 포함하고 있는 컴포넌트 하나 ModalBtn : 모달 기능을 구현할 버튼 하나 ModalBackDrop : 검은색 배경을 구현할 컴포넌트 하나 ModalView : 알림창을 나...

bubbleSort 문제 정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴해야 합니다. 버블 정렬(bubble sort)은 여러 정렬 알고리즘(삽입 정렬, 퀵 정렬, 병합 정렬, 기수 정렬 등) 중 가장 기본적인 알고리즘입니다. 첫 번째 요소가 두 번째 요소보다 크면, 두 요소의 위치를 바꿉니다. (swap) ...

React useRef useState,useEffet 등을 통해 거의 대부분의 프론트엔드 요구사항을 구현할 수 있었지만, 모든 기능을 구현할 순 없다. DOM 엘리먼트의 주솟값을 활용해야 하는 경우 useRef로 DOM노드, 엘리먼트, React 컴포넌트의 주솟값을 참조하여야 한다. focus text sele...

Storybook CDD(Component Driven Development)를 하기 위한 도구로, 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 ...

CDD Component Driven Development 컴포넌트 주도 개발의 약자로, 사용자 인터페이스 (UI) 구축에 도달하는 개발 방법론이다. 기본적인 컴포넌트 단위부터 시작하여 UI 뷰(view)를 구성하기 위해 점진적으로 결합(조립)해가는 상향적(bottom-up) 성향을 띈다. 레고처럼 조립해 나갈 수 있는 부품 단위의 컴포넌...

Styled Component 기존 DOM을 만드는 방식인, css나 scss 파일을 따로 생성하고 이를 불러와 사용하는 것이 아닌 컴포넌트 내부에 style을 작성하는 것을 말한다. style을 따로 불러와 사용하지 않기 때문에 css의 속성이 전역으로 중첩되어 적용되는 것을 방지한다는 장점이 있다. npm install Styled-Com...

fibonacci 문제 아래와 같이 정의된 피보나치 수열 중 n번째 항의 수를 리턴해야 합니다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1입니다. 그 다음 2번째 피보나치 수부터는 바로 직전의 두 피보나치 수의 합으로 정의합니다. 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, … ...

largestProductOfThree 문제 정수를 요소로 갖는 배열을 입력받아 3개의 요소를 곱해 나올 수 있는 최대값을 리턴해야 합니다. const largestProductOfThree = function (arr) { } 입력 arr number 타입을 요소로 갖는 배열 출력 ...