문제https://leetcode.com/problems/valid-palindrome/?envType=study-plan-v2&envId=top-interview-150 풀이이번 문제는 투 포인터 알고리즘을 이용한 팬린드롬 확인 문제이다.펜린드롬이란?거꾸로 읽어도 원문과 똑같은 문자열이나 수열을 의미한다.EX) 기러기 0123210 등등 정규 표현식을 활용해 두 가지 방법으로 풀이를 진행해 봤다.정규 표현을 이용해 입력된 문자열에서 숫자와 영문자(소대문자)를 제외한 나머지를 제거하고 소문자로 변환. 이후에 두 개의 포인터 변수를 활용해 각 문자를 비교하며 풀이두 개의 포인터를 선언하고 문자열의 맨 앞과 맨 뒤에서 부터 영문자나 숫자가 나올때 까지 포인터를 이동.이후, 문자열을 소문자로 변환한 뒤 두 개..
분류 전체보기
문제https://leetcode.com/problems/merge-sorted-array/submissions/1658165264/?envType=study-plan-v2&envId=top-interview-150풀이이번 문제는 두 개의 배열을 정렬하여 합치는 문제이다. 이 문제를 두 가지 방법으로 풀어봤다.spread 연산자를 이용해 하나의 배열로 만든다음 정렬두 개의 배열에 두 개의 포인터를 적용해(투 포인터 알고리즘) 크기를 비교하며 정렬 코드 1/** * @param {number[]} nums1 * @param {number} m * @param {number[]} nums2 * @param {number} n * @return {void} Do not return anything, modif..
Next.js는 Vercel이라는 미국 스타트업에서 만든 풀스택 웹 애플리케이션을 구축하기 위한 리액트 기반 프레임워크다. Next.js가 웹 프론트에서 대세가 되기에 앞서 페이스북 팀에서 SSR을 위해 진행한 react-page 프로젝트가 있었다. 해당 프로젝트는 페이지를 서버 또는 클라이언트에서 리액트를 쉽게 사용할 수 있는 것을 목표로 만들어졌다. 물론 해당 프로젝트는 개발 중단되었지만, 구현된 방향성에 Next.js가 영감을 받았다. 특히 Next.js의 페이지 구조가 이를 닮았다. 만약 이 글을 읽고 있고 리액트 기반의 프로젝트에서 SSR을 고려하고 있다면 현재로서는 Next.js을 선택하는 것이 가장 합리적인 선택일 수 있다. Next.js 시작하기Next.js는 CRA와 비슷한 creact-..
기본적으로 리액트는 브라우저 JS 환경에서 렌더링할 수 있는 방법을 제공하는 프론트엔드 라이브러리이다. 하지만 리액트 애플리케이션을 서버에서 렌더링할 수 있는 API 또한 제공하고 있다. 해당 API는 당연히 Node.js와 같은 서버 환경에서만 실행할 수 있다. 현재 리액트 18이 릴리스되며 react-dom/server에 renderTopipeableStream이 추가됐고, 나머지는 대부분 지원 중단되는 등 큰 변화가 있다. 이 내용은 추후에 다루기로 하고 기존의 함수들에 대해 알아보자. renderToStringrenderToString은 인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML 문자열로 반환하는 함수이다.SSR을 구현하는 데 가장 기초적인 API이다.import React, { useE..
정적 페이지정의사용자가 페이지에 접속 요청을 보낼때 마다 동일한 HTML 파일을 반환하는 페이지이며, 페이지에 렌더링되는 내용이 서버나 사용자 상태에 따라 바뀌지 않고 정적인 페이지이다. 특징빌드 시점에서 HTML, CSS, JS 파일들이 생성되며 서버에 저장되고, 서버는 해당 파일을 그대로 전송한다. 예시회사의 소개 페이지, 아티클, FAQ 등 자주 바뀌지 않는 콘텐츠를 다룸 동적 페이지정의사용자의 요청, 상태, DB 값 등에 따라 서버 또는 클라이언트에서 페이지가 동적으로 생성되는 페이지 특징SSR 또는 CSR 방식으로 HTML이 런타임에 생성되며, 사용자별 맞춤형 콘텐츠 제공이 가능하다.상용자별 맞춤형 콘텐츠 제공이 가능하다. 사용자의 로그인 상태, 지역 정보, 실시간 데이터를 통한 정보 제공 예..
문제https://leetcode.com/problems/generate-parentheses/?envType=problem-list-v2&envId=dynamic-programming풀이해당 문제는 백트레킹 알고리즘을 적용해 풀 수 있다.sol 함수에서 여는 괄호의 갯수가 n보다 작다면 여는 괄호를 추가한 문자열을 재귀 동작으로 함수를 호출하고, 다른 if문에서는 여는 괄호의 갯수가 닫는 괄호의 갯수보다 많을 경우 닫는 경우의 조합을 구하기 위해 닫는 괄호를 추가한 문자열을 함수 호출해준다.코드/** * @param {number} n * @return {string[]} */const generateParenthesis = (n) => { const result = []; const sol..
