분류 전체보기
![[React] Deep Dive 모던 리액트(31) 핵심 웹사이트 지표](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcf3wqg%2FbtsE6SVd1uW%2FAKmfnctUKeWrujxu0ibVok%2Fimg.png)
[React] Deep Dive 모던 리액트(31) 핵심 웹사이트 지표
사용자가 웹사이트에 접속하였을때 웹사이트의 성능을 나타내기 위한 핵심 웹지표란 개념이 있다. 핵심 웹지표? 구글에서 만든 지표로 웹사이트에서 뛰어난 사용자 경험을 제공하는데 필수적인 지표를 일컫는 용어이다. 1. LCP (최대 콘텐츠풀 페인트) 2. FOD (최초 입력 지연) 3. CLS (누적 레이아웃 이동) LCP? 최대 콘텐츠풀 페인트란 페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지나 텍스트를 렌더링하는데 걸리는시간 을 의미한다. 큰 이미지와 텍스트는 아래와 같이 정의되어 있다. 내부 poster 속성을 사용하는 url()을 통해 불러온 배경이미지가 있는 요소 텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소 (,) 즉, 콘텐츠풀 페인트란 사용자의 기기가 ..
![[React] Deep Dive 모던 리액트(30) Next.js 13 & 리액트 18](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbQtJGu%2FbtsEYMPpE4W%2F7qXSFBOP7Nwa56iC3NHc70%2Fimg.png)
[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를 굳이 생성하지 않더라도 함수 수준에서 서버에 직접 접근하여 데이터 요청을 수행하는 기능이다. 서..
[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..
![[React] Deep Dive 모던 리액트(29) Next.js 서버 컴포넌트](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb5g3iJ%2FbtsEY9pKMej%2FVk18qnm4S3ea0CK4ZrfXpK%2Fimg.png)
[React] Deep Dive 모던 리액트(29) Next.js 서버 컴포넌트
리액트 서버 컴포넌트 리액트 18에서 도입된 리액트 서버 컴포넌트는 서버 사이드 렌더링과는 완전히 다른 개념이다. 둘다 '서버'라는 단어가 들어있는데 어떤게 다른 것인지 알아보자! 리액트의 컴포넌트라는 개념에 대해 한번 더 생각해보자. 리액트의 모든 컴포넌트는 클라이언트에서 작동하며, 브라우저에서 JS 코드 처리가 이루어진다. 웹사이트를 방문하면 리액트 실행항 코드를 다운로드하고 리액트 컴포넌트 트리를 만든 후 DOM에 렌더링한다. 서버 사이드 렌더링의 경우 서버에서 DOM을 만들어오고, 클라이언트에서 만들어진 DOM을 기준으로 하이드레이션을 진행한다. 이런 구조는 지금까지 Next.js,리액트에서 제공하는 서버사이드 렌더링 흐름이었다. 해당 구조의 한계점은 무엇일까? 1. JS번들크기가 0인 컴포넌트를..
![[React] Deep Dive 모던 리액트(28) Next.js13 라우팅](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4Gu2f%2FbtsEYB7Ks4z%2FO2vui0JWsABSxXDmfZtBDk%2Fimg.png)
[React] Deep Dive 모던 리액트(28) Next.js13 라우팅
Next.js 13버전은 Next.js의 역사를 통틀어서 가장 큰 변화가 있었다. 서버사이드 렌더링의 구조에 변화가 많은 리액트 18을 채용하였으며 레이아웃 지원또한 본격적으로 지원하기 시작했다. 또한 바벨을 대체할 러스트기반 SWC를 뒤이어 웹팩을 대체할 Turbopack까지 출시했다! app 디렉터리 Next.js의 아쉬운 점으로 평가받던 것 중 하나로 레이아웃의 존재가 항상 지목되어 왔었다. 공통 헤더와 공통 사이드바가 대부분의 페이지에 필요한 웹사이트를 만든다고 생각해보자. 만약 react-router-dom을 사용한다면 아래와 같은 방식으로 라우팅을 만들어 볼 수 있다. import { Route, Routes } from 'react-router-dom'; const App = () => { ..
[JS] 선입선출 스케줄링
이분탐색으로 해결할 수 있는 문제였다. https://school.programmers.co.kr/learn/courses/30/lessons/12920# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제는 단순한데 비해서 시간은 굉장히 오래걸린 문제였다. 효율성 부분이 굉장히 악독했다... 처음에는 우선순위 큐를 활용하여 선입선출 과정을 직접 구현하여 해결하려 했다. class minQue { constructor() { this.ary = [0]; } swap(a, b) { [this.ary[a], this.ary[b]] = [this.ary[b],..