분류 전체보기

    [NextJs14] 글꼴 설정방법 ( google font )

    NextJs에서 구글 폰트를 사용하기 위한 방법으로는 크게 두가지 정도가 있었다. 예를들어 배달의 민족의 JUA체를 사용한다고 생각해보자. 1. global.css 사용 처음에는 구글 폰트에서 제공하는 대로 HTML태그나 CSS를 넣어주는 방법이다. //global.css body { margin: 0; font-family: "Jua", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } // import "styles/globals.css"..

    [JS] 올바른 괄호의 개수

    DFS를 활용하여 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/12929 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음에는 조합적으로 접근을 해서 '()()()()()' 와같은 형태가 아닌 경우에 각 틈마다 ()를 삽입한 후, set 자료형을 활용해서 중복을 없애는 방식으로 찾아보려 했다. function solution(n) { const setAry = [...Array(n + 1)].map((_) => new Set()); setAry[1].add("()"); for (le..

    [React] Deep Dive 모던 리액트(32) 웹페이지 성능측정

    이전 글에서 웹페이지의 성능을 판단하기 위해 확인해야 하는 지표들에 대해 알아봤다. 이번 글에서는 지표를 확인하는 서로 다른 방법을 통해 웹페이지의 성능을 객관적으로 파악하는 방법을 알아보자. 1. 애플리케이션에서 확인하기 1. create-react-app cra를 통해 프로젝트를 생성하면 아래와 같은 파일이 생성된다. (src 파일 안에 있다) import { ReportHandler } from 'web-vitals'; const reportWebVitals = (onPerfEntry?: ReportHandler) => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, ..

    [JS] 무지의 먹방 라이브

    https://school.programmers.co.kr/learn/courses/30/lessons/42891 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 시간 효율성을 생각하기 위해서 따져야 할게 조금 있는 문제였다. 최솟값을 전체 배열에서 빼준다면 아래와 같이 효율적으로 진행을 하는 것이 가능하다. [3,1,2] -> [2,0,1] -> [1,0,0] 이를 반복해 주면서 k > (현재 배열의 최솟값) * (현재 배열의 길이) 를 충족하면 계속 반복해주면 된다. 1. 먼저 정답이 -1인 경우는 전체의 합이 k보다 작은 경우다. 2. 이후 밥먹는 순..

    [JS] 호텔 방 배정

    union-find 알고리즘을 활용해서 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/64063 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 자체는 이해하기 어렵지 않은 문제다. 일종의 체이닝을 만들어 주면 되는데, 유니온파인드를 통해서 부모를 큰 값으로 넣는다면 숫자를 넣을 다음 번호를 알 수 있을 것 같다. 다만 해당 문제는 K의 값이 10의 12승까지로 매우 큰 수가 나오므로 배열이 아닌 map자료형을 활용해서 구현해주었다! function solution(k, room_n..

    [JS] 도둑질

    DP를 활용한 문제였다. https://school.programmers.co.kr/learn/courses/30/lessons/42897 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 직선형인 집이었다면 조금더 쉬웠겠지만 원형이기때문에 조금 생각을 해줘야 하는 DP문제였다. 1. 첫집을 터는 경우 -> 마지막 집과 두번째 집을 털면 안된다. 2. 첫집을 털지 않는 경우 -> 두번째 집 ~ 마지막집까지만 계산하면 된다. dp를 이차원 배열로 두고 dp[i][0] -> i번째 집을 털었다고 가정했을 때의 최댓값 dp[i][1] -> i번째 집을 털지 않았다..