오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

Toggle UI 컴포넌트는 두 가지 상태만을 가지고 있는 스위치입니다. 예를 들어, 한번 누르면 불이 들어오고 한번 누르면 불이 나가는 스위치를 Toggle Switch 라고 할 수 있습니다. import { useRef, useState } from 'react' import styled from 'styled-components' // TODO: Styled-Component 라이브러리를 활용해 여러분만의 tag 를 자유롭게 꾸며 보세요! export const TagsInput = styled.div` margin: 8rem auto; display: flex; align-items: flex-start; flex-wrap: wrap; min-height: 48px; width: 480px; pa..

Tab UI 컴포넌트는 동일한 메뉴 라인에서 뷰를 전환할 때 사용합니다. import { useState } from 'react' import styled from 'styled-components' // TODO: Styled-Component 라이브러리를 활용해 TabMenu 와 Desc 컴포넌트의 CSS를 구현합니다. const TabMenu = styled.ul` background-color: #dcdcdc; color: rgba(73, 73, 73, 0.5); font-weight: bold; display: flex; flex-direction: row; justify-items: center; align-items: center; list-style: none; margin-bottom:..

Modal UI 컴포넌트는 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말합니다. import { useEffect, useRef, useState } from 'react' import styled from 'styled-components' export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 100%; position: relative; ` export const ModalBackdrop = styled.div` // TODO : Modal이 떴을..

문제 수(num)와 배열을 입력받아 차례대로 num개의 요소가 제거된 새로운 배열을 리턴해야 합니다. 입력 let output = drop(2, [1, -2, 1, 3]); console.log(output); // --> [1, 3] output = drop(5, [1, -2, 1, 3]); console.log(output); // --> [ ] function drop(num, arr) { // TODO: 여기에 코드를 작성합니다. // num이 arr.length보다 길면 빈배열 리턴 // 그렇지 않으면 재귀함수로 num-1씩 배열은 첫번째 값을 빼고 나머지 값을 배열로 넣어준다. if(num === 0){ return arr } if(num > arr.length){ return [] } ret..

문제 수(num)와 배열을 입력받아 차례대로 num개의 요소만 포함된 새로운 배열을 리턴해야 합니다. 입력 let output = take(2, [1, -2, 1, 3]); console.log(output); // --> [1, -2] output = take(5, [1, -2, 1, 3]); console.log(output); // --> [1, -2, 1, 3] function take(num, arr) { // TODO: 여기에 코드를 작성합니다. if(num === 0){ return [] } if(num > arr.length){ return arr } return arr.slice(0,1).concat(take(num-1, arr.slice(1))) // num =4, arr = [-1,-..

문제 배열을 입력받아 모든 요소의 논리합(or)을 리턴해야 합니다. 입력 let output = or([true, true, false]); console.log(output); // --> true output = or([false, false, false]); console.log(output); // --> false function or(arr) { // TODO: 여기에 코드를 작성합니다. let result = false; if(arr.length === 0){ return false } if(arr[arr.length-1]){ result= true; } if(arr.length ===1){ return result; } return or(arr.slice(0, arr.length-1)) }..

문제 배열을 입력받아 순서가 뒤집힌 배열을 리턴해야 합니다. 입력 let output = reverseArr([1, 2, 3]); console.log(output); // --> [3, 2, 1] function reverseArr(arr) { // TODO: 여기에 코드를 작성합니다. if(arr.length === 0){ return [] } // arr.slice(-1) 마지막 값을 배열로 return arr.slice(-1).concat(reverseArr(arr.slice(0,-1))) } function reverseArr(arr) { if (arr.length === 0) { return []; } // const [head, ...tail] = arr; const head = arr[0]..

문제 러시아 전통인형 마트료시카에 대한 정보를 담은 객체와 수를 입력받아 조건에 맞는 인형이 있는지 여부를 리턴해야 합니다. 입력 const matryoshka = { size: 10, matryoshka: { size: 9, matryoshka: null, }, }; let output = findMatryoshka(matryoshka, 10); console.log(output); // --> true output = findMatryoshka(matryoshka, 8); console.log(output); // --> false function findMatryoshka(matryoshka, size) { // TODO: 여기에 코드를 작성합니다. // 가장 밖에 있는 마트료시카가 가장크다 if(..

보호되어 있는 글입니다.

문제 다차원 배열을 입력받아 1차원 배열로 변환하여 리턴해야 합니다. 입력 let output = flattenArr([[1], 2, [3, 4], 5]); console.log(output); // --> [1, 2, 3, 4, 5] output = flattenArr([[2, [[3]]], 4, [[[5]]]); console.log(output); // --> [2, 3, 4, 5] function flattenArr(arr) { // TODO: 여기에 코드를 작성합니다. const result = []; for (let i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) { // 요소가 배열이라면 const press = flattenArr(arr..