분류 전체보기
[JS] 단어 변환
DFS를 활용하여 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/43163 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 보통은 DFS/BFS를 통한 완전탐색 시에 배열을 많이 활용하는데 해당 문제의 경우 문자자체가 key가 되기 때문에 visited배열을 Map자료형을 사용하였다. dfs를 활용해서 모든 경우의수를 탐색하며 최소값을 갱신시키면 된다. function solution(begin, target, words) { //변할 수 있는 단어인지 체크 const isCanChang..
[JS] 여행 경로
graph + 백트래킹을 활용하여 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/43164 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 먼저 그래프에 티켓들을 담는다. 이때 dfs를 활용해서 티켓의 정보를 가져오는 경우에 정렬이 되어있어야 하므로 마지막에 그래프를 정렬해준다. 이후 dfs를 활용하여 티켓을 탐색한다. dfs의 종료조건이 해당나라의 방문이 아닌 티켓의 사용 유무인 점을 알아두자. 따라서 티켓을 찢고 -> DFS 검색하고 -> 만약 해당 경로가 답이라면 그게 제일 빠르므로..
![[React] Deep Dive 모던 리액트(14) Next.js](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRHbQL%2FbtsCQ26RUDI%2Fklk4G7jKrEgaeKLz3yhM31%2Fimg.png)
[React] Deep Dive 모던 리액트(14) Next.js
Next.js는 Vercel이라는 미국 스타트업에서 만든 리액트 기반 서버 사이드 렌더링 프레임워크이다. Next.js가 대세가 되기전 페이스북 팀에서 서버 사이드 렌더링을 위해 고려했던 프로젝트가 있는데 이게 바로 react-page이다. react-page는 페이지를 서버 또는 클라이언트에서 리액트를 손쉽게 사용할 수 있는 것을 목표로 만들어졌다. 물론 이 프로젝트는 현재 개발이 중지되었지만 여기서 구현해 둔 방향성에 Next.js가 영감을 받았다. 특히 Next.js의 페이지 구조가 이를 닮았다. 리액트 기반 프로젝트에서 서버 사이드 렌더링을 고려한다면 현재로는 Next.js를 선택하는 것이 가장 합리적인 선택일 수 있다. Next.js 시작하기 CRA와 유사하게 next.js 에서는 명령어를 제공..
[JS] 입국심사
이분탐색을 활용하여 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/43238 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이렇게 케이스가 10억명이 넘어가는 특수한 문제들은 대부분 이분탐색을 활용해서 푸는 방법을 생각해야 한다. 시간이라는 데이터는 이미 오름차순이 되어있는 데이터라고 생각할 수 있으므로 시간을 도출해 내는것이 아닌 시간을 하나씩 대입하여 해당 시간안에 사람을 모두 통과시킬 수 있는지 체크하는 방식으로 접근하면 쉽게 해결할 수 있다. 조금 주의할점으로는 한 사람이 검사할..
[JS] 가장 먼 노드
BFS + DP 를 조합하여 해결할 수 있는 문제였다. (3단계 치곤 쉬운것 같기도?) https://school.programmers.co.kr/learn/courses/30/lessons/49189 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 단순하게 가장 먼 노드들을 저장하면 되기 때문에 1번 노드부터 큐를 활용한 BFS를 구현하여 해결하였다. 이때 노드의 개수와 간선의 개수가 각각 20000,50000개이므로 DP를 활용해서 방문 했는지 안했는지 체크해주면 되는데 나는 문제를 해결하기 위해서 방문한 김에 거리를 기록해줘서 후에 정답을 도출할 수 ..
![[React] Deep Dive 모던 리액트(13) 리액트와 서버사이드](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcmGSHk%2FbtsCzHQ5o2u%2FgMlRA40u5EfrnIgxbQXuZ1%2Fimg.png)
[React] Deep Dive 모던 리액트(13) 리액트와 서버사이드
기본적으로 리액트는 프론트엔드 라이브러리이다. 하지만 리액트 애플리케이션을 서버에서 렌더링 할 수 있게 해주는 API 또한 제공하고 있다. 당연히 해당 API는 window환경이 아닌 Node.js와 같은 서버 환경에서만 실행할 수 있다. 현재 리액트 18이 릴리스되며 react-dom/server 에 renderToPipeableStream이 추가되었고 나머지는 대부분 지원중단 되는등 큰 변화가 있었다. 이 내용들도 따로 다루기로 하고 기존에 있던 함수들에 대해 알아보자. renderToString 인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML문자열로 반환하는 함수 import React, { useEffect } from "react"; function ChildrenComponent({ fru..