Next.js Fast Refresh는 React 컴포넌트 편집에 대한 즉각적인 피드백을 제공하는 기능이다. Next.js 9.4 이상에서 기본적으로 활성화된다. 이는 편집 내용이 컴포넌트의 상태를 유지한채로 1초내에 표시된다.

Next.js Fast Refresh

Next.js는 환경 변수에 대한 기본 지원을 제공한다.

Next.js Environment Variables

Next.js Image Component and Image Optimization Next.js 버전 10.0.0 부터 이미지 컴포넌트 제공되어 이미지 최적화가 가능하다.

Next.js Image Component and Image Optimization

Next.js Built-In CSS Support 사용하면 Javascript 파일에서 CSS파일을 import 해서 가져올 수 있다.

Next.js Build-In CSS Support

Docker란? 실행에 필요한 모든 파일을 포함하여 전체 런타임 환경에서 애플리케이션을 패키지화하고 분리하는 기술을 가지고 있다.

Docker란?

interface vs type alias rematch

React Error Boundary

시니어 개발자의 중요한 3가지 (번역)

테크블로그 작성기 회고

React 서버사이드 렌더링 가이드 (번역)

RIOT API를 활용한 프로젝트 만들기 회고

create-react-app 절대 경로 설정

Change Array by Copy (JS)

모든 개발자가 배워야 할 3가지 디자인 패턴

Typescript enum 최적화

Moment to dayjs

Next.js 번들 사이즈 최적화

Next.js 12

Next.js에서 SWR 사용해보기

New Suspense SSR Architecture in React 18

Next.js에서 API Routes와 Server Express 사용해보기

React startTransition

Introducing React 18

React 공식 문서 리뉴얼 번역 참여기

ifkakao 2021 회고

Storybook Get Started

Cypress Get Started

Link to cross-origin destinations are unsafe

ReactNode & ReactElement & JSX.Element

React Query: Important Defaults

Next.js 11

Next.js next/router useRouter 앱의 함수 구성 요소 내부에 있는 라우터 개체는 `useRouter` Hook을 사용하여 접근 할 수 있다.

Nextjs next/router

React Query Overview React Query는 React 애플리케이션에서 서버 데이터를 가져와 캐싱하고, 동기화하고, 업데이트하는작업을 쉽게 도와준다.

React Query Overview

reduceReducers 프로젝트에서 사용중인 reduceReducers에 대해서 정리하고자한다. 해당 모듈은 reduce-reducers 모듈로 중첩없이 reducer를 간단하게 병합시켜주는 역할을 한다.

Reduce-Reducers

Next.js Routing Next.js에는 파일시스템 기반의 페이지 라우터가 있다.

Next.js Routing

Next.js Data Fetching 사전랜더링을 위해 데이터를 가져올 수 있는 세가지 함수가 있다.

Next.js Data Fetching

Next.js Pages 페이지는 pages 디렉터리 하위의 .js .jsx .ts .tsx 파일에서 내보낸 React 컴포넌트이다. 각 페이지는 파일이름에 따라 경로로 구성된다.

Next.js Pages

type alias 타입 별칭이라고도 하며 인터페이스와 비슷하게 보이기도 하다.

type alias & interface

tsconfig.json 파일을 기점으로 Typescript 프로젝트가 설정된 옵션들로 컴파일된다. tsc 커멘드 입력시 상위 디렉토리 체인으로 tsconfig.json 파일을 탐색해 나간다.

tsconfig

Redux Thunk 리덕에서는 비동기처리를 위해 여러 미들웨어를 사용한다.

Redux Thunk

React PropTypes 개발하는 앱이 커질수록 타입 확인을 통하여 미리 많은 버그들을 잡아낼 수 있다.

React PropTypes

React에서 State는 컴포넌트의 상태 값을 가리킨다. setState 를 통해 상태 값 변경이 가능하고 상태 값이 변경되면 컴포넌트는 리랜더링 된다.

React Component State

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.

Ref 와 DOM

React 에서 Redux를 사용할 수 있도록 도와주는 라이브러리로 Redux의 상태를 React View로 전달해주는 역할을 한다.

React-redux

React에서 리스트 랜더링시 key 값을 지정하지 않을 경우 key값 지정에 대한 경고문이 노출된다.

React List Ke

HTML에서 input, textarea, select와 같은 폼 엘리머트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다.

Controlled Component

requestAnimationFrame은 브라우저에게 다음에 수행할 애니메이션을 알려 브라우저 리페인트가 좀 더 원활하게 동작할 수 있게 한다.

requestAnimationFrame

Intersection Observer API는 타겟 요소와 상위 요소 또는 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다.

Intersection Observer API

webpack-dev-server는 애플리케이션을 빠르게 개발하는데 사용할 수 있다. 이는 간단한 웹 서버와 라이브 리로딩이 가능한 기능을 제공한다.

Webpack-dev-server

getElementsByClassName, querySelectorAll 두 WebAPI의 간단한 차이점을 정리해 보자면 반환값이 서로 다르다는점과 querySelector의 경우 selector를 사용하여 여러 조건으로 탐색이 가능하다는 차이가 있겠다.

getElementsByClassName querySelectorAll

Redux는 자바스크립트 앱을 위한 예측 가능한 컨테이너이다. 싱글 페이지 앱이 점점 복잡해지고 그에 따른 많은 상태를 관리하는데 어려움이 생긴다.

Redux structure

이전에 브라우저 랜더링에 관련하여 Reflow, Repaint로 정리하여 글을 썼었다. 이번엔 developers google에 정리된 Critical Rendering Path를 간단하게 정리해보고자 한다.

Critical Rendering Path

javascript에서 비동기 작업의 처리를 위해 ES6에서의 Promise를 사용한다. Promise는 비동기 연산이 종료된 이후 결과값이나 실패를 처리하기 위한 처리기를 연결 할 수 있도록 한다.

Javascript Promise all & allSettled & race

ECMAScript 6 (es6)에는 생성자 및 코루틴을 구현하기위해 yield 키워드가 도입되었습니다.

Coroutine Event Loops in Javascript

브랜드 배너 이미지 리스트를 Animation을 사용하여 좌우로 랜더링하는 작업을 하였습니다.

CSS Animation Optimization

Javascript에서는 for 루프, map() filter() 등 컬렉션을 반복할 수 있는 많은 방법들을 제공합니다.

Javascript Iterator Generator

async function 선언은 Async Function객체를 반환하는 하나의 비동기 함수를 정의합니다.

Javascript Async Function

에디터 구현시 사용했던 Element 구조의 형태가 Composite Pattern이였다는 것을 알고 구현에 사용했던 design pattern이 어떤 패턴에 해당하는 것인지 알고 구현했다면...

Composite Pattern

Javascript에서 숨기고 싶은 Private Properties를 가지고 싶을 때가 있습니다.

Private Properties in Javascript

네트워크 보안 공격중 이름이 비슷한 sniffing snooping spoofing에 대한 용어 정리를 해볼까합니다.

Sniffing Snooping spoofing

사용자에게 주기적으로 Push 알람을 노출시켜 광고성 효과를 노리는 작업이 필요하여 Service Worker에 대해 공부하게 되었고 정리하게 되었습니다.

Service Worker

Javascript App에서 Drag and Drop 기능을 추가하기위한 많은 Library들이 존재합니다.

Javascript Drag Drop Elements

존재하지 않는 값에 대해 접근할 경우 발생하는 에러 Uncaught ReferenceError

Javascript Optional Chaining

Javascript 코딩중 깊은 복사를 하지 않아 의도치 않은 객체 속성 변경을 겪은적이 있을 것입니다.

Javascript Shallow Copy & Deep Copy

Javascript Object의 속성 값을 변경하는 것은 너무 쉽습니다.

Javascript Object Protecting

속성 접근자는 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해줍니다.

Javascript Object Accessor Properties

모든 Object는 단순하게 Key, Value 쌍만 존재하는 것이 아니라 속성을 보거나 지정하는데 도움을 주는 속성 설명자가 있습니다.

Javascript Object Property Descriptors

ES2015부터 class 키워드를 지원하기 시작했으나, 문법적인 양념일 뿐이며 자바스크립트는 여전히 프로토타입 기반의 언어다.

Javascript Prototype

데이터베이스에서 크게 두가지로 나뉘는 관계형 데이터베이스와 No SQL에 대해 간략히 정리해봅니다.

RDBMS NOSQL 차이

HTTPS는 HTTP를 보안적으로 강화한 것으로 S는 Over Secure Socket Layer의 약자라고 합니다.

HTTPS SSL

HTTP 통신에서 Content-Type의 multipart/form-data에서 multipart가 무엇일까에 대해 정리해봅니다.

Multipart Form Data

브라우저 랜더링 성능 개선을 위해서 중요한 Repaint와 Reflow에 관한 개념 정리를 해본다.

Reflow Repaint

UI 테스트가 필요해, UI 테스를 위한 도구들을 검토하기로 하였다.

Selenium Test Example

Javascript에서 전파되는 이벤트를 간단히 정리해 볼까한다.

Javascript Event Bubbling Capturing Delegation

얼마전 GDG Campus Korea에서 주최하였던 Front EndGame에서 DI에 대해 간략히 설명해주신 분들이 많아 DI에 대해 간단히 정리해보았다.

DI Dependencies Injection

프론트엔드 개발자 관련된 행사 진행을 보게되었다. 한번도 프론트엔드에 초점을 맞춰 진행한 행사에 참가해본적이 없어 굉장히 끌렸다.

GDG FRONT-ENDGAME

React를 사용할때 많이들 사용한다는 Redux. React는 view를 담당하는 라이브러리이며 각 컴포넌트에서 상태를 관리할 수 있지만 좀 더 효율적인 상태 관리를 위하여 Redux를 사용.

Redux란, 왜 사용?

배열이나 그와 유사한 자료구조의 내부의요소를 순회하는 객체, 시퀀스를 정의하고 종료시 잠재적으로 반환값을 정의하는 객체라고 한다.

Iterator Generator

ajax로 전송된 multipart/form-data에서 전송시 form data에 담아서 보낸 path 정보를 jsp에서 꺼낼 수 없냐는 문의가 있었다.

jsp form data

Webpack3에서 Webpack4로 진화... 성능향상, 설정방법 변경 등이 있어 간단히 정리해 보았다.

Webpack 4

최근 개발자 커뮤니티 등에 관심을 가지던중, festa에 올라온 PWA 코드랩 세션을 보고 참가 신청을 하였다.

PWA 코드랩 참가까지

폴리필(polyfill)은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.

Polyfill이란?

브라우저 엔진(browser engine)은 주된 모든 웹 브라우저의 핵심이 되는 소프트웨어 구성 요소이다.

Browser Engine

node js는 이벤트 기반의 플랫폼. libuv라는 라이브러리가 이벤트 루프 기능을 제공

Node.js Event loop

Javascript 선언식인 var let const를 정리해본다.

Javascript var let const

script를 HTML 파싱중 만난다면, HTML 파싱이 중단되고 스크립트를 가져와 실행한다.

script async defer

브라우저에는 조그마한 저장소가 있다. cookie, sessionStorage, localStorage

cookie, LocalStorage, SessionStorage

DOCTYPE은 DTD(Document Type Definition) 여러 의미로 문서 타입 정의, 웹페이지 해석, 문서 형식을 정의해 주는 것이다.

Document Type Definition (DTD)

PWA 코드랩에 참석하기전 PWA가 무엇인지 간단히 알아보기.

Progressive Web Apps(PWA)

Cross Origin Resource Sharing(CORS)

Javascript에서는 다른 도메인으로의 요청을 보안상의 이유로 제한하고 있다.

JSONP

React Life Cycle 컴포넌트가 브라우저에 나타나고, 사라지고, 업데이트 될때의 과정을 알아보자.

React Life Cycle

클로저란? 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다

Javascript Closure

Javascript라는 언어의 특색중 하나이며, 현재 ES6 문법에서 제공되는 let, const 사용에 의해 크게 신경쓰지 않고 있지만 중요한 요소중 하나 인 것 같다.

Javascript Hoisting

Javascript Event Loop는 Javascript Engine의 Task Queue의 task들을 관리해주는 역활을 한다.

Javascript Event Loop

canvas toDataURL canvas의 이미지 표현을 포함하는 data url을 가져옴

The canvas toDataURL

npm-run-all 병렬 또는 순차적으로 여러 npm 스크립트를 실행하는 CLI 도구.

All Posts

Next.js Fast Refresh

Next.js Environment Variables

Next.js Image Component and Image Optimization

Next.js Build-In CSS Support

Docker란?