1. 문제0과 1로 이루어진 배열이 주어질 때, 연속된 1이 가장 많이 나오는 횟수는?2. 해결type AccType = {max: number; value :number; prev: number | null}function findMaxConsecutiveOnes(nums: number[]): number { const result = nums.reduce((acc: AccType, current) => { acc.value += current; if(current === 0 && acc.value !== 0) { acc.max = Math.max(acc.max, acc.value); acc.value = 0; ..

1. 문제ransomeNote, magazine 두 문자열이 주어질 때, magazine의 각 문자로 ransomeNote 문자열을 만들 수 있으면 true, 아니면 false를 반환.magazine의 각 문자는 1 번만 쓰일 수 있다.두 문자열에는 오로지 알파벳 소문자로 제한된다.2. 해결function canConstruct(ransomNote: string, magazine: string): boolean { // 1. a~z의 아스키코드 범위는 97 ~ 122이므로, 97을 뺀 0 ~ 25 인덱스 배열 생성. const countingArr = new Array(26).fill(0) // 2. magazine 각 문자의 아스키코드 계산 후 해당 인덱스 값 증가. for(let i..

5. Edge and Node.js RuntimesNext.js의 Context에서 Runtime은 코드의 실행 중 사용할 수 있는 라이브러리, API, 일반적인 함수 기능을 의미.Server에서는 2가지 runtime이 있다.Node.js Runtime : 기본 실행환경으로 모든 Node.js API와 호환 패키지에 접근할 수 있다.Edge Runtime : Web API를 기반으로하는 실행환경. 5-1. Runtime DifferencesRuntime을 선택할 때, 많은 부분을 고려해야 한다. 주요 차이점은 아래와 같다.1.Edge RuntimeNode.js API의 하위집합인 경량화된 실행 환경.동적이거나 개인화된 컨텐츠를 낮은 지연 시간으로 제공하는 간단한 함수에 적합하다.리소스를 최소한으로 사용..

4. Composition PatternsReact 애플리케이션을 만들 때, 어떻게 구분하여 Server 혹은 Client에 렌더링할 지 고려해야 한다.Server Components와 Client Components의 여러 조합 패턴을 소개한다. 4-1. When to use Server and Client ComponentsServer Components: Data Fetch, backend 리소스 접근, 민감한 정보 숨기기, 서버에 종속이 되어 있고 Client의 Javascript 번들 크기를 줄이고 싶을 때.Client Components: 상호작용성과 Event listener가 있을 때, state와 effect 등 hook을 사용할 때, browser API가 필요할 때, state와 ef..

1. 문제단일 연결 리스트 head가 주어질 때, 연결 리스트의 중간 노드를 반환하라.만약, 중간 노드가 2개(전체 길이가 짝수인 경우) 2번 째 노드를 반환하라.2. 해결/** * Definition for singly-linked list. * class ListNode { * val: number * next: ListNode | null * constructor(val?: number, next?: ListNode | null) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next) * } * } */function middleNode(..

3. Client ComponentsClient Components는 Server에서 사전에 렌더링되고 브라우저에서 Javascript를 실행 시킬 수 있는 상호 작용 가능한 UI를 만들 수 있게 한다. 3-1. Benefits of Client Rendering상호 작용성 : Client Components는 state, effects, event listener 등을 사용할 수 있다. 이는 사용자에게 즉각적인 피드백과 UI 제공이 가능하다는 의미.Browser API : Client Components는 Browser API에 접근이 가능하다. (localStorage, geolocation 등..) 3-2. Using Client Components in Next.js"use client" 지시어를..

2. Server ComponentsReact Server Components는 렌더링할 수 있고 선택적으로 Server에서 캐싱할 수 있는 UI를 만들 수 있게 한다.Next.js에서는 route segnets로 분할 되어 Streaming, 부분 렌더링을 지원한다.Server 렌더링 전략으로 3가지가 있다.Static RenderingDynamic RenderingStreaming 2-1. Benifits of Server RenderingData FetchingServer Components는 Data fetching을 서버에서 data source와 가깝게 수행할 수 있다.이는, 렌더링에 필요한 데이터를 fetching하는 데 있어서 시간과 Client의 요청 수를 줄이고 성능을 향상 시킬 수 있..

1. RenderingRendering은 작성한 코드가 UI로 변환되는 과정을 의미.React와 Next.js는 코드가 Server 혹은 Client에서 렌더링될 수 있는 하이브리드 웹 애플리케이션을 지원.1-1. Fundamentals시작하기에 앞서, 익숙해지면 좋은 web의 기본적인 컨셉.코드가 실행될 수 있는 환경은 Server와 Client이다.사용자가 방문하거나 상호작용을 통해 요청과 응답 생명주기가 시작된다.네트워크 경계를 통해 Server와 Client 코드를 구분한다.1. Rendering Environments웹 애플리케이션에서 Client와 Server에서 렌더링이 가능하다.Client는 애플리케이션 코드에 대한 요청을 서버로 보내고 UI를 받는 사용자 장치의 브라우저를 의미.Serve..

3. Data Fetching Patterns and Best PracticesReact와 Next.js에서 추천할 만한 Data Fetching 방법을 소개한다.아주 일반적인 패턴을 어떻게 사용하는 지 소개한다.3-1. Fetching data on the Server가능하면, Server Componente와 함께 Server에서 Data fetching 하는 것을 추천한다.database와 같이 backend resources에 직접 접근이 가능.Client에 민감한 정보를 노출시키지 않아 보안 향상.data fetch와 render를 Server에서 함께 수행하면, client와 server 사이의 이동이 줄어들기 때문에 성능 우수.Client에서 요청마다 data fetch하는 대신 Server..

1. 문제정수 num이 주어질 때, num이 짝수면 2로 나누고 홀수면 1을 빼준다.이 과정을 0이 될 때 까지 반복해서 몇 번 수행하는지 결과값을 반환한다.2. 해결function numberOfSteps(num: number): number { let step = 0; while(num > 0) { if(num % 2 === 0) { num /=2; } else { num -=1; } step++; } return step;};그냥 반복 돌면서 조건에 맞게 연산 수행 후, step을 증가시키면 된다.