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

문제 하나의 집합을 의미하는 문자열을 입력받아 각 문자를 가지고 만들 수 있는 모든 부분집합을 리턴해야 합니다. 입력 let output1 = powerSet('abc'); console.log(output1); // ['', 'a', 'ab', 'abc', 'ac', 'b', 'bc', 'c'] let output2 = powerSet('jjump'); console.log(output2); // ['', 'j', 'jm', 'jmp', 'jmpu', 'jmu', 'jp', 'jpu', 'ju', 'm', 'mp', 'mpu', 'mu', 'p', 'pu', 'u'] const powerSet = function (str) { // 정렬 const sorted = str.split('').sort();..

largestProductOfThree 문제 정수를 요소로 갖는 배열을 입력받아 3개의 요소를 곱해 나올 수 있는 최대값을 리턴해야 합니다. 입력 let output = largestProductOfThree([2, 1, 3, 7]); console.log(output); // --> 42 (= 2 * 3 * 7) output = largestProductOfThree([-1, 2, -5, 7]); console.log(output); // --> 35 (= -1 * -5 * 7) const largestProductOfThree = function (arr) { // TODO: 여기에 코드를 작성합니다. // 첫번째수가 양수 두번째부터는 음수 0 && arr[arr.length-2] < 0 && Mat..

treeDFS 문제 임의의 tree를 구성하는 노드 중 하나의 Node 객체를 입력받아, 해당 노드를 시작으로 깊이 우선 탐색(DFS, Depth First Search)을 합니다. 이 때, 탐색되는 순서대로 노드의 값이 저장된 배열을 리턴해야 합니다. 입력 let root = new Node(1); let rootChild1 = root.addChild(new Node(2)); let rootChild2 = root.addChild(new Node(3)); let leaf1 = rootChild1.addChild(new Node(4)); let leaf2 = rootChild1.addChild(new Node(5)); let output = dfs(root); console.log(output); //..

sudoku 문제 스도쿠는 숫자 퍼즐로, 가로 9칸, 세로 9칸으로 이루어져 있는 표에 1부터 9까지의 숫자를 채워 넣는 퍼즐입니다. 퍼즐을 푸는 방법은 아홉 가로줄, 세로줄, 3X3 칸에 1에서 9까지의 숫자를 중복되지 않게 한 번씩만 넣으면 됩니다. 일부 칸이 비어있는 상태인 스도쿠 보드를 입력받아 스도쿠 퍼즐이 완성된 보드를 리턴해야 합니다. 입력 let board = [ [0, 3, 0, 2, 6, 0, 7, 0, 1], [6, 8, 0, 0, 7, 0, 0, 9, 0], [1, 9, 0, 0, 0, 4, 5, 0, 0], [8, 2, 0, 1, 0, 0, 0, 4, 0], [0, 0, 4, 6, 0, 2, 9, 0, 0], [0, 5, 0, 0, 0, 3, 0, 2, 8], [0, 0, 9, 3..

tiling 문제 세로 길이 2, 가로 길이 n인 2 x n 보드가 있습니다. 2 x 1 크기의 타일을 가지고 이 보드를 채우는 모든 경우의 수를 리턴해야 합니다. 입력 let output = tiling(2); console.log(output); // --> 2 output = tiling(4); console.log(output); // --> 5 /* 2 x 4 보드에 타일을 놓는 방법은 5가지 각 타일을 a, b, c, d로 구분 2 | a b c d 1 | a b c d let tiling = function (n) { // 인덱스를 직관적으로 관리하기 위해 // 앞 부분을 의미없는 데이터(dummy)로 채운다. const memo = [0, 1, 2]; // 재귀를 위한 보조 함수(auxil..

UI 컴포넌트의 필요성 화면이 아무리 복잡하고 다양해도 기본적인 레이아웃 구성 내부에서 사용되는 UI들은 반복적으로 재사용되는 경우가 많습니다. UI 컴포넌트를 도입함으로서 절대적인 코드량을 줄일 수 있었습니다. 더불어 화면이 절대적으로 많고 복잡도가 있는 프로젝트에서는 개발기간 단축에 절대적으로 기여할 수 있는 장점이 있습니다. 디자인 시스템이란? 디자인 시스템이란 서비스를 만드는 데 사용한 공통 컬러, 서체, 인터랙션, 각종 정책 및 규정에 관한 모든 컴포넌트를 정리해놓은 것이며 불필요한 커뮤니케이션을 없애기 위해 체계적으로 정리한 시스템을 말합니다. 디자인 시스템은 재사용이 가능한 UI 컴포넌트들로 이루어져, 복잡하고 견고하며 사용자가 접근하기에 용이한 사용자 인터페이스를 구축할 수 있습니다.

보호되어 있는 글입니다.

DOM 엘리먼트의 주소값을 활용 focus text selection media playback 에니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 React는 이런 예외적인 상황에서 useRef으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있습니다. const 주소값을_담는_그릇 = useRef(참조자료형) // 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다. return ( {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/} {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */} {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습..

CSS 전처리기(CSS Preprocessor)란 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구입니다. 우리가 흔히 CSS문서를 작성할 때는 많은 반복적인 작업을 요구하고 Color 값을 찾는 일, tag를 닫는 일 등 번거로운 작업 역시 포함이 되어 있습니다. 그 뿐만 아니라 클래스의 상속과 같은 사항으로 점점 CSS 문서는 양이 많아지고 이로 인해 이후 유지관리에 많은 영향을 끼칩니다. 이런 CSS의 문제점들을 프로그래밍 개념(변수, 함수, 상속 등)을 활용하여 해결해 나갈 수 있습니다. Styled-Component Styled Component 는 React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생하였습니다. Styled Component 를 사용하면..

Storybook은 UI 개발 즉, Component Driven Development를 하기 위한 도구입니다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있습니다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있습니다. Storybook에서 지원하는 주요 기능은 다음과 같습니다. UI 컴포넌트들을 카탈로그 화하기 컴포넌트 변화를 Stories로 저장하기 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기 리액트를 포함한 다양한 뷰 레이어 지원하기