FrontEnd
![[React] Deep Dive 모던 리액트(22) Next.js 개발환경 구축](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FciaLTN%2FbtsEkC7sUfl%2FW0yfDTHSls3h7KrOr4G2A1%2Fimg.png)
[React] Deep Dive 모던 리액트(22) Next.js 개발환경 구축
create-react-app과 create-next-app은 리액트 애플리케이션과 Next.js 애플리케이션을 손쉽게 만들 수 있는 CLI도구이다. 이번에는 직접 프로젝트 파일들을 하나씩 설정해보며 개발환경에 대해 이해해보자. cra는 2023년 이후 유지보수되지 않을 가능성이 크다고 한다. CRA개발자 팀이 리액트 애플리케이션을 만드는 보일러플레이트가 아닌 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정이라고 한다. create-necxt-app 없이 하나씩 구축해보기 모든 Node.js프로젝트는 package.json을 만드는것으로부터 시작한다. 폴더를 하나 만들고 아래 명령어를 통해서 package.json을 만들어 보자. npm init (단순하게 프로젝트 이름만 설정해주고 나머지는 ..
[JS] 셔틀버스 (2018 카카오)
이분탐색을 활용해서 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/17678 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 사실 지금생각하면 굳이 이분탐색이 필요할 것 같지는 않고 시뮬레이션을 돌리며 답을 도출해도 될 것 같다. 하지만 시간을 구하는 문제가 나올때 이분탐색을 활용하면 훨신 구조적으로 프로그램을 짤 수 있다. 시간이란 데이터는 항상 정렬되어 있기 때문이다. 이분탐색을 활용하면 문제접근법 자체는 매우 단순해진다. 1. 이분탐색으로 시간 검색 2. 해당 시간에 셔틀을 탈 수 ..
[JEST,Recoil] jest에서 recoil사용하기
jest를 활용해서 컴포넌트 테스트를 할 때 recoil을 세팅하고 싶을 떄가 있다. 이럴때 initializeState 속성을 활용하면 해결할 수 있다. 아래 코드를 보자. Recoil을 사용하기 위해서 RecoilRoot를 씌워주고 initializeState 속성을 추가해줘서 시작할때 recoil값을 변경하는 것이 가능하다. import React from "react"; import { render, screen } from "@testing-library/react"; import { matchers } from "@emotion/jest"; expect.extend(matchers); import { RecoilRoot, useRecoilState } from "recoil"; import {..
[JS] 길 찾기 게임
트리구조에 대한 정확한 이해가 있어야 해결할 수 있는 문제였다. https://school.programmers.co.kr/learn/courses/30/lessons/42892# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제를 풀기 전에 가장 중점적으로 봐야할점은 2가지이다. 1. 한번 왼쪽으로 간 노드는 부모의 x좌표를 넘어 오른쪽으로 갈 수 없다. 2. 한번 오른쪽으로 간 노드는 부모의 x좌표를 넘어 왼쪽으로 갈 수 없다. 우선 JS의 sort함수를 활용하여 level을 기준으로 노드를 정렬해준 후 level별로 노드를 저장해주었다. [ [],..
![[JS] 디스크 컨트롤러](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvTWI6%2FbtsD4TCtZ4w%2Fo9XFwsMUaGDRRN4C4XICqK%2Fimg.png)
[JS] 디스크 컨트롤러
heap을 이용하여 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/42627 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 사실 문제 제한사항이 널널한 편이라 sort함수를 써도 통과가 될 것 같긴 하다. ( 실제로도 다른 풀이를 보면 그런듯 ) 문제에서 중요한 점은 , 일을 처리할 수 있는 최소한의 경우의 수를 찾는 문제가 아닌 실제 테스크 큐가 작동하는 것처럼 현재 디스크가 일을 안하고 있다면 작업을 바로 수행하는게 요점이다. 따라서 테스크 큐 역할을 하는 heap을 하나 만들어서 ..
[JS] 섬 연결하기
union-find + 그리디 알고리즘을 활용해서 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/42861 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 해당 문제는 그리디 알고리즘으로 해결할 수 있다. 우선 다리의 건설 비용을 오름차순으로 정렬을 해준다. 이후 정렬된 배열을 순회하며 두 다리가 연결이 안되어 있다면 연결해준다. 이 두 다리가 연결이 안되어 있는지를 확인하기 위해서 union-find 알고리즘을 활용하였다. 1. costs 배열을 비용을 기준으로 오름차순 정렬 2. co..