자동완성 import { useState, useEffect } from 'react'; import styled from 'styled-components'; const deselectedOptions = [ 'rustic', 'antique', 'vinyl', 'vintage', 'refurbished', '신품', '빈티지', '중고A급', '중고B급', '골동품' ]; /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)'; const activeBorderRadius = '1rem 1rem 0 0'; const inactiveBorderRadius = '1rem 1rem 1rem 1rem'; export..
메모이제이션은 변수로 미리 배열의 값을 저장해두고 다음 인덱스의 배열을 만들때 사용할 수 있는 방법이다. 동일한 계산을 반복할때 이전에 계산한 값을 메모리에 저장해두어 불필요한 계산을 없애고 실행속도를 빠르게 한다. 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다. 출처 - 위키피디아 가장 흔히 사용되는 피보나치 수열을 구하는 함수를 살펴보자. let memo = [0,1] function fibonacci(n) { if(memo[n] === undefined){ memo[n] = fibonacci(n-2)+f..
set객체는 중복되지 않는 유일한 값들의 집합이다. 배열과 유사하지만 중복된요소를 가질 수 없다는점, 순서에 의미가 없다는 점, 인덱스로 접근이 불가능하다는 점이 다르다. Set은 수학적 집합을 구현하기위한 자료구조이다. 여집합, 차집합, 교집합, 합집합 등을 구현할 수 있다. Set 객체 생성 set 생성자 함수로 생성한다. 함수에 전달된 인수가 없다면 빈 Set객체가 생성된다. 중복된 배열을 인수로 준다면 저장되지 않는다. Set의 프로토타입을 살펴보면 다양한 메서드들이 있는데 이번 코플릿 문제에서 Set.has을 활용한 문제가 있었다 🏋🏽문제 두 개의 배열(base,sample)을 입력받아 sample이 base의 부분집합인지 여부를 리턴 Set.has는 Set객체에 특정 요소 존재 여부를 확인하고..
버블정렬은 배열의 한 요소와 그 다음요소의 대소를 비교한뒤 순서를 바꿔주는 정렬알고리즘이다. [1,3,2,4] [4,3,2,1] 배열의 첫번째 요소를 두번째 요소와 비교한뒤 첫번째 요소가 크다면 서로 순서를 바꾼다. 첫번째 요소: 4 두번째 요소 :3 [3,4,2,1] 두번째 요소가 크다면 바꾸지 않는다. 첫번째 요소 : 1 두번째 요소 : 3 [1,3,2,4] 두번째 요소는 세번째 요소와 크기를 비교한다. 세번째 요소가 크다면 두번째 요소와 순서를 바꾼다. 두번째요소: 3 세번째요소: 2 [1,2,3,4] 두번째요소: 4 세번째요소: 2 [3,2,4,1] 세번째 요소가 크다면 바꾸지 않는다. 세번째 요소는 네번째 요소와 크기를 비교한다. 네번째 요소가 크다면 세번째 요소와 순서를 바꾼다. 세번째요소: ..
모달 export const Modal = () => { const [isOpen, setIsOpen] = useState(false); const openModalHandler = () => { // TODO : isOpen의 상태를 변경하는 메소드를 구현합니다. setIsOpen(!isOpen) }; return ( {isOpen ? "Opened!" :"Open Modal"} {/* TODO : 조건부 렌더링을 활용해서 Modal이 열린 상태(isOpen이 true인 상태)일 때는 ModalBtn의 내부 텍스트가 'Opened!' 로 Modal이 닫힌 상태(isOpen이 false인 상태)일 때는 ModalBtn 의 내부 텍스트가 'Open Modal'이 되도록 구현해야 합니다. */} {/* TO..
문제 피보나치수열을 메모이제이션을 이용해 구현 나의 풀이 let memo = [0,1] function fibonacci(n) { // TODO: 여기에 코드를 작성합니다. if(memo[n] === undefined){ memo[n] = fibonacci(n-2)+fibonacci(n-1) }return memo[n] } 알게된 점 메모이제이션이란 계산된 값을 이전에 계산된 결과를 저장하는것 let memo 배열은 인덱스 값과 같이 피보나치 수열의 n=0, n=1의 값을 기억하고 n번째 값이 없을때 피보나치 수열의 값을 만들어 나갔다. 재귀는 어려워!
1. UI UX가 무엇일까? UI(User Interface) 사람들이 컴퓨터와 상호 작용하는 시스템 화면상의 그래픽 요소들 외에도 컴퓨터와 상호작용을 위한 시스템인 키보드, 마우스등의 물리적 요소도 포함 핸드폰을 예시로 들었을때 과거에는 번호키 등 물리적 요소가 중요했지만 터치폰이 대중화되면서 화면 터치를 통한 상호작용이 중요해짐 👉🏻 그래픽 UI 중요도 높아짐 컴퓨터 마우스의 등장 이후로 👉🏻 그래픽 UI 중요 CLI와 키보드를 이용해 텍스트로 상호작용하는것보다 화면에서의 상호작용이 더 직관적, 간편함 이 둘 뿐만 아니라 스마트워치, 키오스트, 터치스크린 안내판 등 상호작용하는 기기들 👉🏻 GUI 굉장히 중요함 UX(User Experience) 사용자가 어떤 시스템, 제품, 서비스를 직 간접적으로 ..
function stringifyJSON(obj) { // your code goes here if(typeof obj === 'number'){ return String(obj); } else if(obj === null ){ return `${obj}` }else if(typeof obj === 'string'){ return `"${obj}"` } let result = "" if(Array.isArray(obj)){ result += "["; for(let el of obj){ result += `${stringifyJSON(el)},`; } if(result === "["){ return result+"]" }else{ return result = result.slice(0, result.len..
JavaScript Promise의 기능과 필요한 이유에 대해서 설명해주세요. 프로미스는 네트워크요청, 파일로드 같은 시간이 오래걸리는 작업을 비동기처리하기 위한 객체입니다. 성공적으로 작업이 완료된 경우와 실패한 경우 모두에 대한 처리 방법을 제공합니다. 비동기작업이 성공한경우 resolve 메서드를 호출하여 결과를, 실패하면 reject메서드를 호출하여 에러를 전달합니다. 프로미스를 사용하면 비동기 작업이 완료될 때까지 코드의 실행을 차단하지 않으면서 결과를 다룰 수 있습니다. 이를 통해 비동기 작업의 결과를 쉽게 처리할 수 있으며 콜백함수를 이용한 비동기 처리보다 코드 가독성이 좋고 유지보수하기 쉽게 만들 수 있습니다. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요. 순수 함..
🏋🏽문제 암호화된 문자열과 암호화 키를 입력받아 복호화된 문자열 리턴 🔍나의 풀이1. 알파벳순서를 주어진 secret만큼 찾아가야 하므로 알파벳 문자열 선언 2. 반복문으로 입력받은 str 에서 빈 공백일시 빈공백 그대로 추가 3. 빈배열이 아니라면 1에서 선언한 알파벳에서 2를 찾는다. 4. 3에서 같은 알파벳을 찾았다면 그 자리보다 secret만큼 왼쪽으로 평행한 글자를 리턴해야하는데 5. 그 값이 음수일 경우 1에서 선언한 문자열의 뒤에서 세어야 하므로 slice메소드 사용 6. 양수일경우 secret만큼 왼쪽으로 평행한 글자 리턴 💡깨달은 점
