FrontEnd
![[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],..
![[React] Deep Dive 모던 리액트(27) 리액트 18 변경점](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAQTe6%2FbtsEKGHCr5G%2Ftoazf6eFM3774eijXofF30%2Fimg.png)
[React] Deep Dive 모던 리액트(27) 리액트 18 변경점
지난 글에 이어서 리액트 18의 변경점을 알아보자. 리액트 18에서 클라이언트에서 리액트 트리를 만들때 사용되는 API가 변경되었다. createRoot 기존 react-dom의 render를 대체할 메서드이다. 리액트 18 기능 사용을 위해서는 createRoot와 render를 함께 사용해야 한다. //before import ReactDOM fro 'react-dom' import App from 'App' const container = document.getElementById('root') ReactDOM.render(,container) //after import ReactDOM fro 'react-dom' import App from 'App' const container = documen..
[JS] 스티커모으기(2)
dp를 활용하여 해결하였다. https://school.programmers.co.kr/learn/courses/30/lessons/12971 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음에 dp를 활용하여 해결하려 했다. 2차원 배열의 dp를 활용하여 dp[i] = [a,b] 라는 꼴을 두었을때 i번째 스티커까지의 최고합 = [ i번째 스티커를 찢은경우 , i번째 스티커를 찢지 않은경우 ] 이런식으로 스티커를 찢은 경우와 안찢은 경우를 기록해나가며 문제를 해결하였다. 이때 dp[i][0] = dp[i-1][1] + sticker[i] 라는 점화식이..
[JS] 기지국 설치
그리디를 활용하여 해결하였다! https://school.programmers.co.kr/learn/courses/30/lessons/12979# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 먼저 stations 배열을 정렬을 해준다. 이후 기지국을 넣어줘야하는 구간을 구해준 후 해당 구간에 설치해야 하는 기지국 수를 더해주면서 구해줬다. 여기까진 크게 어렵지 않은데 신경써야할 부분이 2가지 정도가 있다. 1. 구간이 음수로 나오는 경우 기지국 설치가 필요없는 경우이므로 패스해준다. 2. 마지막 기지국부터 마지막 아파트까지의 부분을 생각해줘야 한다. f..