Array.from() 메서드Array.from() 은 유사배열객체나 iterable 객체인 경우, 해당 객체의 Symbol.iterator를 호출하여 얻은 iterator를 .next()로 순회하면서, 그 값을 배열에 하나씩 담는 메서드입니다. [부연설명]iterable 한객체의 종류 : 배열, 문자열, Map, Set 이 있습니다.문자열도 Symbol.iterator 를 구현하고 있기때문에 iterable한 객체입니다.기본문법Array.from(arrayLike, mapFn, thisArg)arrayLike : 배열로 변환할 대상 (유사배열 또는 반복 가능한객체)mapFn (선택) : 각요소를 가공할 함수thisArg (선택) : mapFn 내부에서 this로 사용할 값사용해보기console.log(..

너비 우선탐색 (Breadth-First Search) 너비 우선탐색이란?각 노드를 레벨별로 차례대로 탐색합니다. 즉 시작 노드에서 출발해 인접한 노드들을 먼저 탐색하고, 그 후 두 번째 레벨의 노드들을 탐색하는 방식입니다. 사용하는 경우주로 최단 경로를 찾을때 사용합니다.왜 최단 경로에 적절한 알고리즘일까요? 큐를 사용하여 먼저 도착지점에 도달한 경로를 구해냅니다.간단한 그래프와 함께 BFS가 어떻게 최단 경로를 찾는지 설명하겠습니다. 특징 A / \B C| |D---E여기서 시작 노드는 A, 목표 노드는 EA에서 E로 가는 최단 경로를 찾기입니다.BFS 탐색 과정시작은 A에서 출발!처음에 A에서 갈 수 있는 곳은 B와 C예요.큐에 B와 C를 넣어요.큐에서 B를 먼저 확인!B에서 갈 수 ..

클로저를 한마디로 정의하면 내부함수가 자신이 선언된 환경, 외부 함수의 변수나 매개변수에 접근할 수 있도록 해주는 것이다. 그렇다면 클로저를 이용하여 구현을하면 좋은 이유가 뭘까요? 클로저를 이용하여 구현하면 좋은 이유는 상태를 감싸고 안전하게 보호하는 기능을 제공하기 때문입니다.선물 포장의 이미지처럼, 클로저는 데이터를 감싸서 외부로부터 보호하고, 필요한 부분만 노출시킬 수 있게 해줍니다.이렇게 함으로써 프로그램의 캡슐화와 데이터 은닉을 효과적으로 구현할 수 있습니다.구체적으로, 클로저를 이용하여 구현하는 장점은 다음과 같습니다:클로저의 장점을 다섯 가지 유형으로 나누어 예시와 함께 살펴보겠습니다.각 장점은 실용적이고 구체적인 상황에서 클로저를 사용할 이유를 설명하는 데 도움이 될 것입니다. 1. ..

numberk (제거하려는수)return"1924"2"94""1231234"3"3234""4177252841"4"775841"다음문제는 k개를 제거후 가장큰숫자를 구해야하는 문제입니다. 제가 생각한 알고리즘은 작은 수를 제거하는 방식이 잘못되었었습니다. const small = new Array(k).fill(Infinity); // 삭제하려는 값을 배열로 관리for (const num of nums) { for (let i = 0; i num) { // 삭제값 > 숫자 small[i] = num; // 값 치환 break; } }} k개의 가장 작은 숫자를 골라 small 배열에 저장한 후 제거하려는 방식.문제는 숫자의 위치(순서)가 중요..

리액트 생명주기(life cycle)에 대해 설명해 주세요.함수형 컴포넌트에서는 클래스 컴포넌트와 달리 생명주기 메서드가 명시적으로 나뉘어 있지 않고, useEffect 훅 하나로 마운트, 업데이트, 언마운트를 모두 제어합니다. 의존성 배열을 통해 원하는 타이밍에만 실행되도록 제어할 수 있기 때문에, 생명주기를 더 명확하게 다룰 수 있다는 장점이 있습니다. 꼬리질문useEffect가 언제 실행되나요? useEffect는 컴포넌트가 렌더링되어 실제 DOM에 반영(commit)된 후에 실행되는 비동기 함수입니다.구체적으로 말하면, React가 가상 DOM과 실제 DOM을 동기화한 뒤, 브라우저가 화면을 그린 다음에 실행됩니다.이 때문에 useEffect 내에서 DOM 조작이나 데이터 요청 같은 부수 효과(s..

JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. JavaScript는 동적 타입 언어 입니다. 앞서 살펴본 동적 타입 언어의 특징을 JavaScript도 가지고 있어서 배우기 쉽고 타입을 미리 설정하지 않아도 된다는 유연한 장점이 있지만, 실행 도중에 예상치 못한 타입이 들어와 타입 에러를 발생하는 경우가 있습니다. 또한 추가적인 설명이 없다면 함수의 파라미터에 어떤 타입의 값이 들어가야 하고 리턴되는 값은 어떤 타입이어야 하는지 구체적인 코드를 봐야 이해할 수 있습니다. TypeScript는 점진적 타입 언어 입니다. 점진적 타입 언어란 동적 타입 시스템과 정적 타입 시스템을 혼합한 것 같은 타입 시스템을 사용합니다. 정적 타입 시스템처럼 변수의 타..

TypeScript의 동작 원리에 대해 설명해 주세요.TypeScript는 JavaScript의 상위 집합으로, 개발자가 작성한 코드에 타입 시스템을 추가하여 코드의 안전성을 높여주는 언어입니다.TypeScript 컴파일 과정은 크게 두 단계로 나눌 수 있습니다.첫 번째는 정적 타입 검사 단계입니다. 이 과정에서 TypeScript 컴파일러는 우리가 작성한 코드를 실행하지 않고, 코드 내부의 타입이 올바르게 사용됐는지 검사합니다. 이를 정적 검사라고 하며, 타입 오류가 발견되면 컴파일이 중단되고 오류가 개발자에게 알려집니다.두 번째 단계는 타입 검사가 성공했을 때 진행되며, TypeScript 컴파일러는 내부적으로 생성한 추상 문법 트리(AST)를 바탕으로 타입 정보를 제거하고, 순수한 JavaScrip..

리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.리액트의 한계클라이언트 사이드렌더링으로 웹사이트를 요청할때 초기로딩시 React에서 번들링한 Javascript 파일을 html로 렌더링하는 작업을하여 초기 로딩 시간이 오래 걸려 유저 경험을 헤치고, SEO에 취약하다는 단점이 있습니다. Next.js가 제공하는 이점첫번째로는 프리렌더링이 있겠습니다.Next.js는 기본적으로 페이지를 사전에 렌더링하는 전략을 취합니다.페이지를 요청하기 전에 HTML을 미리 생성해놓는 방식으로,getStaticProps를 활용한 SSG(Static Site Generation),또는 getServerSideProps를 활용한 SSR(Server Side Rendering)을 통해초기 로딩 속..

Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.프론트 서버단에서 필요한 데이터를 백엔드 서버에 요청해 가져옵니다.그후 받은 데이터를 활용해 프론트 서버에서 HTML을 렌더링합니다. 프론트 서버에서 요청한 페이지에 필요한 HTML, CSS, JavaScript 코드를 브라우저에게 보냅니다. 사용자는 인터랙션 할 수 없는 HTML, CSS 코드로 그려진 화면을 보게 됩니다. 리액트 hydrate 이후 사용자는 인터랙션 가능하게 됩니다. hydration은 서버에서 렌더링된 HTML에 기반하여 클라이언트 측에서 JavaScript 이벤트와 상태를 연결하는 과정을 말합니다. 꼬리질문그럼 CSR과 SSR의 차이점은 뭐고, 언제 SSR을 선택하시겠어요? CSR은 브라우저가 초기..