Nextjs 13 / 3. Revalidating Data

Next.js를 사용하면 전체 사이트를 다시 빌드할 필요 없이 특정 정적 경로를 업데이트할 수 있다. 재검증( Incremental Static Regeneration이라고도 함)을 사용하면 수 백만 페이지로 확장하면서도 정적의 이점을 유지할 수 있다.

Next.js 13 / 2. Caching Data

Next.js는 per-request basis(권장) 또는 전체 route segment.에 대한 데이터 캐싱을 기본적으로 지원한다.

Next.js 13 / 1. Data Fetching

Next.js에서 App Router를 사용하면, `async`, `await`를 사용하여 비동기적으로 React Components에서 직접 데이터를 가져올 수 있다.

야 너두 ESLint 규칙 만들 수 있어

프로젝트를 구성하고 개발하다보면 문법 오류, 오타를 개발하는 시점에 잡고 싶을 때가 있다. 또는 회사만의 코드 컨벤션을 정하고 적용하면 좋겠다는 생각을 할 수 있다.

내가 왜 모노레포를 적용했었나?

내가 왜 개발하면서 모노레포에 관심을 가지고 적용하였는지 기억 더듬어보기

모바일 viewport 힘들지 않으세요?

평소에 사용하던 `vh`, `vw`를 사용하게 되면 원하던 방식으로 사이즈가 잡히지 않는 것을 알 수 있다. 이와 관련하여 많은 이슈가 발생하여 새로운 CSS 단위가 생겼다.

CDN이란 무엇인가?

CDN은 Content Delivery Network의 약자로, 이미지, 비디오, HTML 파일, JavaScript 및 CSS 파일과 같은 웹 콘텐츠를 위치에 따라 사용자에게 전달하기 위해 지리적으로 분산된 서버 네트워크입니다.

혹시 Cascade Layers 아시나요?

CSS의 새로운(?) 스펙 Cascade Layers에 대해 알아보자.

늦었지만 반응형으로 @media 말고 @container 사용하자

간혹 글이나 유튜브에서 반응형으로 `@media query`를 사용하는 것이 아니라 `@container query`를 사용하면 좋다고 보았다.

Next.js 13 / 11. Route Handlers

Route Handlers를 사용하면 웹 요청 및 응답 API를 사용하여 지정된 라우트에 대한 사용자 지정 요청 핸들러를 만들 수 있다.

Next.js 13 / 10. Intercepting Routes

경로를 가로채면 현재 페이지의 Context를 유지하면서 현재 layout 내에서 경로를 로드할 수 있다.

Next.js 13 / 09. Parallel Routes

Parallel Routes을 사용하면 동일한 layout에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있다.

Next.js 13 / 08. Error Hadling

error.js 파일 규칙을 사용하면 중첩된 경로에서 런타임 오류(runtime errors)를 우아하게 처리할 수 있s다.

Next.js 13 / 07. Loading UI and Streaming

loading.js는 React Suspense를 이용해서 Loading UI를 만든다.

Next.js 13 / 06. Dynamic Routes

Next.js 13 / 05. Route Groups

Next.js 13 / 04. Linking and Navigating

Link Component와 useRouter()를 알아보자

Next.js 13 / 03. Pages and Layouts

Next.js 애플리케이션에서 특수 파일을 사용하는 방법을 알아보자.

Next.js 13 / 02. Define Routes

Next.js 애플리케이션에서 경로를 정의하고 구성하는 방법을 알아보자

Next.js 13 / 01. Routing

13 버전으로 오면서 React Server Components로 만들 수 있는 새로운 App Router가 추가되었다.

SWR | 어떻게 사용하시나요?

PlayStore(플레이스토어) + AppStore(앱스토어) 배포

React-Native Webview 기능 개발

앱 개발에 유용한 Firebase 기능

IOS Signing(인증서) 제대로 알고 사용하기

SWR | react-query useMutation처럼 사용하기

React Custom Hook | 카카오 로그인 훅

웹 보안, 웹 취약점 막기

Gzip 아시나요? 그러면 Brotli는요?

Redux 말고 SWR

JAMstack

Preact, Vite 일주일 사용후기?

네트워크 기초 / 7. HTTP3

HTTP/3는 HTTP(Hypertext Transfer Protocol)의 세 번째 Major 버전으로, 기존의 HTTP/1, HTTP/2와는 다르게 UDP 기반의 프로토콜인 QUIC을 사용하여 통신하는 프로토콜이다.

네트워크 기초 / 6. DHCP & DNS

DHCP이란 네트워크상에서 동적으로 IP주소 및 기타 구성정보 등을 부여/관리하는 프로토콜로 해당 호스트에게 IP 주소, 서브넷마스크, 기본 게이트웨이 IP 주소, DNS 서버 IP주소를 자동으로 일정 시간 할당 해주는 인터넷 프로토콜이다.

네트워크 기초 / 5. TCP & UDP

네트워크 기초 / 4. OSI 7 계층과 TCP/IP 계층

OSI 7계층은 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것을 말한다.

네트워크 기초 / 3. Types Of IP

IP의 종류에 대해서 알아보자

네트워크 기초 / 2. 서브넷마스크(Subnetmask)

서브넷마스크는 기본적으로 1과 0으로 구성되어 있으며, IP 크기와 동일하게 32자리 2진수로 표현된다.

네트워크 기초 / 1. IP

네트워크란 두 대 이상의 컴퓨터가 논리적 또는 물리적으로 연결되어 통신이 가능한 상태를 말한다.

[JS] Map, Filter, Reduce

Javascript 이해하기 / 5. Closure

마지막으로 Javascript의 중요한 개념인 Closure에 대해서 알아보자

Javascript 이해하기 / 4. Function

함수가 컨텍스트의 변수 객체(VO)에 어떠한 영향을 미치며, 각 함수의 스코프 체인에는 무엇이 들어가는지도 알아보자.

Javascript 이해하기 / 3.Scope Chain

Excution Context와 직접 연관된 Scope Chain에 대해서 알아보자.

Javascript 이해하기 / 2.This

Variable Object에 이어서 세번째 주제인 `this`에 대해서 알아보자.

Javascript 이해하기 / 1.Execution Context

ECMAScript의 Execution Context와 이와 관련된 코드 유형에 대해 알아보자.

Javascript Module

Javascript에서도 scope를 활용해서 캡슐화를 구현할 수 있다.

[Browser] 웹 브라우저 작동 원리

CSS Transition 알아보기

애니메이션은 생각보다 간단하게 구현할 수 있다.

Callstack

Javascript의 근간이 되는 Callstack

CSS / BEM(Block Element Modifier)

어떤 CSS 방법론을 사용하는지에 따라 프로젝트의 형태와 규칙이 달라진다. 많은 방법론 중 BEM에 대해서 알아보자.

OS / Process(프로세스), Thread(스레드)

사용자 인터페이스와 자원관리를 위한 프로그램 집합

OS / Interrupt(인터럽트)

사용자 인터페이스와 자원관리를 위한 프로그램 집합

OS / OS에 대해서

사용자 인터페이스와 자원관리를 위한 프로그램 집합

헝가리안 표기법

헝가리안 표기법이란 변수 선언시 접두어를 붙여 변수의 의미를 명확하게 하기 위한 규칙이다.

최적화 코드 작성법

V8을 사용한다면 최적화 코드 작성법은 알고 있어야하지 않을까