[JS] 최고의 집합

그리디를 활용해서 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/12938 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 언뜻 보면 조합으로 탐색을 해야할 것 같지만 그리디로 해결할 수 있다. S란 수를 N개로 나누면 우선 S를 N으로 나누어 준다. 9를 5개로 나눠보자. 9/5 -> 1.xxxx {1,1,1,1,1} 여기서 9%5 는 4이다. 따라서 뒤에서부터 4개의 값에 1씩 더해주면 된다. {1,2,2,2,2} 이 방법이 가능한 이유는 합을 만들 수 있는 조합중에서 곱이 크려면 모..

→2024.02.21

FrontEnd/React

[NextJs] Next.js14에 styled components 적용하기

Next.js 에 styled components를 적용하는 것 자체는 그렇게 어렵지 않았지만 어느정도 알고 있어야할 사전 지식이 있다. 아래 문서는 Next.js에서 제공하는 공식문서 중 css-in-js를 설정하는 방법들에 대해 다룬다. https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components Styling: CSS-in-JS | Next.js Use CSS-in-JS libraries with Next.js nextjs.org 문서 처음부터 아래와 같이 경고를 해주고 있다. 요약하자면, NextJS 13버전 이후로 react18의 서버컴포넌트와 같은 서버사이드렌더링 기법들이 많이 추가되었는데 그중..

→2024.02.20

FrontEnd/프로그래머스

[JS] 가장 긴 팰린드롬

3단계 치고는 간단(?) 한 문제였다. https://school.programmers.co.kr/learn/courses/30/lessons/12904 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 사실 특별한 알고리즘 기법이 들어가진 않았다. 펠린드롬은 짝수인 경우와 홀수인 경우 두가지가 존재한다. 문자열을 처음부터 순회하며 해당 점을 꼭지점으로 삼아 만들 수 있는 홀수인 펠린드롬과 짝수인 펠린드롬의 개수를 갱신해나가면 된다. function solution(s) { const getPalindromeCnt = (start,end) => { let l..

→2024.02.20

FrontEnd/Deep Dive

[React] Deep Dive 모던 리액트(31) 핵심 웹사이트 지표

사용자가 웹사이트에 접속하였을때 웹사이트의 성능을 나타내기 위한 핵심 웹지표란 개념이 있다. 핵심 웹지표? 구글에서 만든 지표로 웹사이트에서 뛰어난 사용자 경험을 제공하는데 필수적인 지표를 일컫는 용어이다. 1. LCP (최대 콘텐츠풀 페인트) 2. FOD (최초 입력 지연) 3. CLS (누적 레이아웃 이동) LCP? 최대 콘텐츠풀 페인트란 페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지나 텍스트를 렌더링하는데 걸리는시간 을 의미한다. 큰 이미지와 텍스트는 아래와 같이 정의되어 있다. 내부 poster 속성을 사용하는 url()을 통해 불러온 배경이미지가 있는 요소 텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소 (,) 즉, 콘텐츠풀 페인트란 사용자의 기기가 ..

→2024.02.19

FrontEnd/Deep Dive

[React] Deep Dive 모던 리액트(30) Next.js 13 & 리액트 18

터보팩(Turbopack) 요즘 새롭게 뜨는 라이브러리인 Rome,SWC,esbuild의 공통점은 기존에 JS로 만들어지고 제공되던 기능을 Rust,Go와 같은 언어를 사용하여 뛰어난 성능을 보여준다는 공통점이 있다. 특히 SWC의 경우 Next.js를 만든 Vercel에서 제공하는 도구로 많은 프로젝트에서 바벨을 대신하여 사용되고 있다. Next.js13에서는 웹팩의 뒤를 자처하는 터보팩이 출시되었다. 웹팩대비 700배빠른데 이는 Rust를 기반으로 작성되었기 때문이라고 한다. 물론 현재는 개발 모드에서만 제한적으로 사용되기에 아직은 시간이 조금 걸릴것으로 보인다. 서버 액션(alpha) 이 기능은 API를 굳이 생성하지 않더라도 함수 수준에서 서버에 직접 접근하여 데이터 요청을 수행하는 기능이다. 서..

→2024.02.18

FrontEnd/프로그래머스

[JS] 거스름돈 (자세한 설명)

까다로운 dp문제였다. https://school.programmers.co.kr/learn/courses/30/lessons/12907 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제에서 보여지는게 dp문제였기 때문에 고민을 많이 해봤다. dp[n]을 n원을 만들기 위한 경우의 수라고 생각을 해보자. 단순하게 생각한다면 5라는 놈을 만들기 위해서 dp[1]*dp[4] + dp[2]*do[3] 과 같은 조합으로 만들수 있지 않나? 라는 생각을 했다. dp[n] = dp[n-1]*dp[n] + dp[n-2] + dp[n-3] + ... [dp[n-n/2..