0. 들어가며 프로그래머스 후보키를 풀다가 배열이 다른 배열에 포함되는지 확인해야하는 상황이 발생했다. 생각보다 자주 사용되서 정리를 해보았다. 1. 사용 방식 [ 1, 2, 10, 30, 40 ]이란 배열이 있을 때, [ 2, 10, 30 ] 이란 배열이 포함되는지 확인할 때 사용한다. 2. 코드 구현 const answer = [ 1, 2, 10, 30, 40 ]; const key = [ 2, 10, 30 ]; let check = true; const set = new Set([...key, ...answer]); if (set.size === answer.length) { check = false; } key와 answer을 포함하는 set을 사용해서 구현하였다. set은 내부에 속성이 중복이 ..

Array Function? 화살표 함수는 ES6에서 새롭게 추가되었다. function fun () { // 일반 함수 // ... } const arrFun = () => { // 화살표 함수 // ... } 화살표 함수 vs 일반 함수 1. this 여기서 바인딩이란 말이 많이 나올텐데, 바인딩이란 함수 호출과 실제 함수를 연결하는 방법이다. 동적 바인딩과 정적 바인딩으로 구분이 가능한데, 동적 바인딩은 실행 시간에 이루어지거나 실행 시간에 변경된다. 정적 바인딩은 실행 시간 전에 일어난다. 실행 시간에는 변하지 않는 상태로 유지된다. 일반 함수 자바스크립트에서 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. 일반 함수에서 this가 바인딩 되는 상황이 3가지가 있는데, 1. 함수 ..

Next.js는 페이지에 공통으로 적용되는 _document와 _app이 존재한다. _app 서버에 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로 공통 레이아웃 역할을 한다. 애플리케이션이 실행되면 가장 먼저 호출되기 때문에 글로벌한 작업을 수행할 때 사용한다. function app({ Component, pageProps }) { return } app.getInitialProps = async (appContext) => { // ... return { ...appProps } } 사용 예. 페이지 전환 시에도 전체 레이아웃을 유지하고 싶은 경우 페이지 전환 후 state를 유지하고 싶은 경우 페이지에 추가적인 데이터를 삽입하고 싶은 경우 글로벌 CSS를 적용하고 싶은 경우 _document _..

Next.js는 SSR이 가능한 특징을 가진 React 프레임워크이다. Next의 ServerSide Cycle Server가 GET 요청을 받는다. 요청에 맞는 Page를 찾는다. _app.js에 getInitialProps가 있다면 실행한다. 하위 Component의 getInitialProps가 있다면 실행하고 pageProps를 받아온다. 모든 props를 구성하고, _app.js => Component 순서로 렌더링을 한다. Content를 구성하면 _document.js를 실행해 html 형태로 출력한다. 여기서, 모든 페이지에서 공통적인 데이터 패칭이 필요하면, _app.js에서 데이터 패칭을 하고, 페이지마다 다른 데이터가 필요하면 각 페이지에서 데이터 패칭을 해주면 된다. Next.js ..

object 자료에 타입을 미리 만들어주고 싶은데, 어떤 속성들이 들어올 수 있는지 모르거나, 타입 지정할 속성이 너무 많은 경우에는 index signatures를 사용하면 편하게 가능하다. index signatures interface stringOnly { [key :string] :string } let obj :stringOnly = { name :'kim', age :'20', location :'seoul' } StringOnly라는 interface를 만들었다. 특이한 점으로 속성으로 [ key :string] : string 이라고 정의가 되어있다. 이렇게 정의하면 " 모든 string으로 들어오는 key값에 할당되는 value는 string이어야 한다. " 라는 타입이 된다. 즉, {..

문제 설명 양의 정수 x에 대한 함수 f(x)를 다음과 같이 정의합니다. x보다 크고 x와 비트가 1~2개 다른 수들 중에서 제일 작은 수 예를 들어, f(2) = 3 입니다. 다음 표와 같이 2보다 큰 수들 중에서 비트가 다른 지점이 2개 이하이면서 제일 작은 수가 3이기 때문입니다. 수비트다른 비트의 개수 2 000...0010 3 000...0011 1 f(7) = 11 입니다. 다음 표와 같이 7보다 큰 수들 중에서 비트가 다른 지점이 2개 이하이면서 제일 작은 수가 11이기 때문입니다. 수비트다른 비트의 개수 7 000...0111 8 000...1000 4 9 000...1001 3 10 000...1010 3 11 000...1011 2 정수들이 담긴 배열 numbers가 매개변수로 주어집니..

문제 설명 블라인드 공채를 통과한 신입 사원 라이언은 신규 게임 개발 업무를 맡게 되었다. 이번에 출시할 게임 제목은 "프렌즈4블록". 같은 모양의 카카오프렌즈 블록이 2×2 형태로 4개가 붙어있을 경우 사라지면서 점수를 얻는 게임이다. 만약 판이 위와 같이 주어질 경우, 라이언이 2×2로 배치된 7개 블록과 콘이 2×2로 배치된 4개 블록이 지워진다. 같은 블록은 여러 2×2에 포함될 수 있으며, 지워지는 조건에 만족하는 2×2 모양이 여러 개 있다면 한꺼번에 지워진다. 블록이 지워진 후에 위에 있는 블록이 아래로 떨어져 빈 공간을 채우게 된다. 만약 빈 공간을 채운 후에 다시 2×2 형태로 같은 모양의 블록이 모이면 다시 지워지고 떨어지고를 반복하게 된다. 위 초기 배치를 문자로 표시하면 아래와 같..

문제 설명 XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다. 이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다. "최소 필요 피로도"는 해당 던전을 탐험하기 위해 가지고 있어야 하는 최소한의 피로도를 나타내며, "소모 피로도"는 던전을 탐험한 후 소모되는 피로도를 나타냅니다. 예를 들어 "최소 필요 피로도"가 80, "소모 피로도"가 20인 던전을 탐험하기 위해서는 유저의 현재 남은 피로도는 80 이상 이어야 하며, 던전을 탐험한 후에는 피로도 20이 소모됩니다. 이 게임에는 하루에 한 번씩 탐험할 수 있는 던전이 여러개 있는데, 한 유저가 오늘 이 던전들..