사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React

프로젝트로 예제 알아보는 NextJS 기능

NextJS Practice Project

웹팩 최적화의 필요성, 최적화 방법

Webpack Optimized

웹팩 개발 서버의 API 연동 방법

Webpack Connect API

웹팩 개발 서버의 배경 및 설치 사용

Webpack Dev Server

Magic Number, 네이밍 컨벤션, DOM API 접근 추상화

추상화하기

함수, 메서드, 생성자, argument & parameter, 복잡한 인자 관리하기, Default Value, Rest Parameters, void & return, 화살표 함수, Callback Function, 순수 함수

함수 다루기

Shorthand Properties, Computed Property Name, Lookup Table, Object Destructuring, Object.freeze, Prototype 조작 지양하기, hasOwnProperty, 직접 접근 지양하기, Optional Chaning

객체 다루기

Javascript의 배열은 객체다, Array.length, 배열 요소에 접근하기, 유사 배열 객체, 불변성, for 문 배열 고차 함수로 리팩터링, 배열 메서드 체이닝 활용하기

배열 다루기

값식문, 삼항 연산자 다루기, Truthy & Falsy, 단축평가, else if 피하기, else 피하기, Early Return, 부정 조건문 지양하기, Default Case 고려하기

분기 다루기

Mock Service Worker를 포함한 테스트 설정, 테스트에서의 쿼리 클라이언트와 제공자, 렌더링된 쿼리 데이터 테스트하기, 쿼리 에러 테스트하기, 변이(Mutation) 테스트하기, 예약 필터 테스트

React Query 테스트

변이(Mutation)와 변이 전역 설정, 커스텀 변이 훅, mutate 함수를 위한 Typescript, 변이 후의 쿼리 무효화하기, 쿼리 키 접두사, 변이로 예약 취소하기, 변이 응답으로 사용자와 쿼리 캐시 업데이트하기, 쿼리 취소 가능하게 만들기, 낙관적 업데이트 작성하기

변이(Mutation) - React Query로 서버 데이터 업데이트하기

Redux Toolkit과 Redux의 관계 및 개요, 간단한 예제

RTK(Redux Toolkit) Overview

useAuth, useUser와 useQuery, React Query와 Auth 통합하기, localStorage에서 사용자 데이터 유지하기, 의존적 쿼리 - userAppointments, 쿼리 클라이언트 removeQueries 메서드

React Query와 인증

useQuery의 select 옵션으로 데이터 필터링하기, 리페치(Re-fetch)의 정의 및 코드 구현, 전역 리페치 옵션, 리페치 기본값 오버라이드와 폴링, 폴링 - 간격에 따른 자동 리페칭

쿼리 특성 2. 프리페칭(Pre-fetching)과 페이지 매김

캐시에 데이터 추가하기, 프리페칭(Pre-fetching) 처리 - 개념, 프리페칭(Pre-fetching) 처리 - 구문, useAppointments를 위한 useQuery - 실습 코드, 의존성 배열로서의 쿼리 키

쿼리 특성 1. 프리페칭(Pre-fetching)과 페이지 매김

allowJS로 타입스크립트와 자바스크립트 같이 사용하기, 의존성 관계에 따라 모듈 단위로 전환하기, 마이그레이션의 완성을 위해 noImplicitAny 설정하기

타입스크립트로 마이그레이션하기  - Item 60 ~ 62

소스맵을 사용하여 타입스크립트 디버깅하기, 모던 자바스크립트로 작성하기, 타입스크립트 도입 전에 @ts-check와 JSDoc으로 시험해 보기

코드를 작성하고 실행하기 ~ 타입스크립트로 마이그레이션하기  - Item 57 ~ 59

커스텀 쿼리 훅 - useTreatments, 폴백 데이터, useIsFetching을 사용하는 중앙 집중식 페칭 표시기, useQuery에 대한 onError 핸들러, 쿼리 클라이언트에 대한 onError 기본 값

더 큰 앱에서의 React Query - 설정, 집중화, 커스텀 후크

객체를 순회하는 노하우, DOM 계층 구조 이해하기, 정보를 감추는 목적으로 private 사용하지 않기

코드를 작성하고 실행하기 - Item 54 ~ 56

useInfiniteQuery 호출 작성하기, InfiniteScroll 컴포넌트, useInfiniteQuery 페칭과 에러 상태

동적(JIT) 데이터 로드를 위한 무한 쿼리

의존성 분리를 위해 미러 타입 사용하기, 테스팅 타입의 함정 주의하기, 타입스크립트 기능보다는 ECMAScript 기능을 사용하기

타입 선언과 @types - Item 51 ~ 코드를 작성하고 실행하기 - Item 53

블로그 댓글을 위한 쿼리 생성하기, 쿼리 키, Pagination, Pre-fatching, Mutation

페이지 매김, 프리페칭과 변이

useQuery로 쿼리 생성하기, 로딩 상태와 에러 상태 처리하기, React Query 개발자 도구, staleTime vs cacheTime

쿼리 생성 및 로딩/에러 상태

최종 실습 테스트 코드

API 주석에 TSDoc 사용하기, 콜백에서 this에 대한 타입 제공하기, 오버로딩 타입보다는 조건부 타입을 사용하기

타입 선언과 @types - Item 48 ~ 50

devDependencies에 typescript와 @types 추가하기, 타입 선언과 관련된 세 가지 버전 이해하기, 공개 API에 등장하는 모든 타입을 export 하기

타입 선언과 @types - Item 45 ~ 47

Node.js로 TypeScript 코드 실행하기, 프로젝트 설정하기, 설정 완료 및 타입 작업하기(Node + Express), 미들웨어 및 타입 추가하기, 컨트롤러 작업 및 요청 본문 구문 분석하기, 더 많은 CRUD 작업

Node.js + Express 및 Typescript

React + TypeScript 프로젝트 설정하기, React와 TypeScript는 어떻게 함께 작동하는가, Props으로 작업하기 & Props의 타입, ref로 사용자 입력 받기, Cross-Component 커뮤니케이션, 상태 및 타입 작업하기, 더 나은 상태 관리하기, 더 많은 Props 및 상태 작업

React.js 및 Typescript

프로젝트 설정, 구글 API 키 설정, 지도 렌더링

연습 프로젝트 - 장소 선택 및 공유 앱

TypeScript와 함께 JavaScript(!) 라이브러리 사용하기, declare를 Last Resort로 사용하기, 클래스 변환자 - class-transformer, 클래스 검증자 - class-validation

타사 라이브러리 및 TypeScript

모르는 타입의 값에는 any 대신 unknown을 사용하기, 몽키 패치보다는 안전한 타입을 사용하기, 타입 커버리지를 추적하여 타입 안전성 유지하기

any 다루기 - Item 42 ~ 44

Webpack이란 무엇이며 왜 필요한가, Webpack 설치하기 & 중요 종속성, 입력 & 출력 구성 추가하기, ts-loader 패키지로 TypeScript 지원 추가하기, 설정 완료하기 & webpack-dev-server 추가하기, production mode로 빌드하기

Typescript와 함께 Webpack 사용하기

any를 구체적으로 변형해서 사용하기, 함수 안으로 타입 단언문 감추기, any의 진화를 이해하기

any 다루기 - Item 39 ~ 41

해당 분야의 용어로 타입 이름 짓기, 공식 명칭에는 상표를 붙이기, any 타입은 가능한 한 좁은 범위에서만 사용하기

타입 설계 & any 다루기 - Item 36 ~ 38

min - max, begin - end, first - last, prefix - suffix, 매개변수의 순서가 경계다

경계 다루기

여러개의 코드 쪼개기, 네임스페이스 작업하기, 파일 및 폴더 정리하기, 네임스페이스 가져오기 문제, ES 모듈 사용하기, 다양한 import, export 구문 이해하기

모듈 및 네임스페이스

Drag & Drop 토이 프로젝트 part 3

string 타입보다 더 구체적인 타입 사용하기, 부정확한 타입보다는 미완성 타입을 사용하기, 데이터가 아닌, API와 명세를 보고 타입 만들기

타입 설계 - Item 33 ~ 35

타입 검사, undefined와 null, eqeq 줄이기, 형변환 주의하기

타입 다루기

문서에 타입 정보를 쓰지 않기, 타입 주변에 null 값 배치하기, 유니온의 인터페이스보다는 인터페이스의 유니온을 사용하기

타입 설계 - Item 30 ~ 32

클린 코드

var를 지양하자, function scope & block scope, 전역 공간 사용 최소화, 임시변수 제거하기

변수 다루기

함수형 기법과 라이브러리로 타입 흐름 유지하기, 유효한 상태만 표현하는 타입을 지향하기, 사용할 때는 너그럽게, 생성할 때는 엄격하게

타입 설계 - Item 27 ~ 29

기본 개념 이해

일관성 있는 별칭 사용하기, 비동기 코드에는 콜백 대신 async 함수 사용하기, 타입 추론에 문맥이 어떻게 사용되는지 이해하기

타입 추론 - Item 24 ~ 26

NodeJS Overview

Drag & Drop 토이 프로젝트 part 2

타입 넓히기, 타입 좁히기, 한꺼번에 객체 생성하기

타입 추론 - Item 21 ~ 23

매핑된 타입을 사용하여 값을 동기화하기, 추론 가능한 타입을 사용해 장황한 코드 방지하기, 다른 타입에는 다른 변수 사용하기

타입 추론 - Item 18 ~ 20

Drag & Drop 토이 프로젝트 part 1

동적 데이터에 인덱스 시그니처 사용하기, number 인덱스 시그니처보다는 Array, 튜플, ArrayLike를 사용하기, 변경 관련된 오류 방지를 위해 readonly 사용하기

타입스크립트의 타입 시스템 - Item 15 ~ 17

함수 표현식에 타입 적용하기, 타입과 인터페이스의 차이점 알기, 타입 연산과 제너릭 사용으로 반복 줄이기

타입스크립트의 타입 시스템 - Item 12 ~ 14

타입 단언보다는 타입 선언을 사용하기, 객체 래퍼 타입 피하기, 잉여 속성 체크의 한계 인지하기

타입스크립트의 타입 시스템 - Item 9 ~ 11

Context API Wrapping Component Test Example

제공자에 래핑된 컴포넌트 테스트하기

타입스크립트 컴파일러를 실행하는 것이 주된 목적이나, 타입스크립트 서버 또한 언어 서비스를 제공함

타입스크립트의 타입 시스템 - Item 6 ~ 8

Mock Service Worker 설정 방법과 사용 예시

Mock Service Worker(MSW)로 서버 응답 시뮬레이션

Popover 테스트 실습 예제 및 쿼리 메서드 설명

Form 복습과 팝오버 테스트

데코레이터 팩토리 작업 및 다양한 데코레이터 예시

데코레이터

타입스크립트에 내장된 기본 타입이며 다른 타입과 연결 관계를 가지고 있음

제네릭

타입스크립트에서 다루는 고급 타입에 대한 소개

고급 타입

Javascript에서 흔히 사용되는 린터로서 정적 텍스트를 분석하고 린터 규칙을 위반하는 구문을 마킹하는 도구

테스팅 라이브러리가 포함된 ESLint와 Prettier

버튼 색상은 빨간색, 텍스트는 “Change to blue”를 가진 요소가 정상적으로 동작하는지 테스트 하는 예제

Color Button 테스트

타입스크립트에서의 인터페이스는 객체의 구조나 형태를 설명하는데 사용

인터페이스

앱이나 애플리케이션 로직의 일부를 관리하는 상태와 행위를 가진 객체로 분할하고 클래스라는 개념을 이용해 객체의 청사진(이론적 개념)을 만듦

클래스

단지 라이브러리에서 그치는 것이 아니라, 작성 방식에 있어 특정한 관행을 권장하는 테스트 라이브러리

Jest, TDD

최신 자바스크립트의 기능 소개와 타입스크립트에서의 사용 예제

차세대 자바스크립트와 TypeScript

타입스크립트 컴파일러와 컴파일러를 구성하는 옵션에 대한 내용

TypeScript 컴파일러 및 구성

타입스크립트는 자바스크립트의 슈퍼셋으로서, 코드를 실행하여 타입스크립트 코드를 자바스크립트로 컴파일하는 컴파일러

TypeScript 기본 & 기본 타입

에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료되므로 try…catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있음

에러 처리

ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수

제너레이터와 async/await

전통적인 콜백 패턴의 단점(콜백 헬)으로 인해 ES6에서 도입된 비동기 처리 패턴

프로미스

타이머 함수인 setTimeout과 setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작함

비동기 프로그래밍

함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용하는데 이를 호출 스케줄링이라 함

타이머

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됨

Event - 이벤트 전파

이벤트 타입의 종류와 이벤트 객체

Event - 이벤트 타입과 핸들러 조작

HTML 어트리뷰트와 DOM 프로퍼티, 스타일 조작

DOM - 어트리뷰트

DOM의 요소 노드의 텍스트 조작과 DOM 조작

DOM - DOM 조작

HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 프로퍼티와 메서드를 제공하는 트리 자료구조

DOM - 노드 탐색과 노드 정보 취득

브라우저의 렌더링 과정

ES6에서는 순회 가능한 자료구조를 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for…of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화함

이터러블(Iterable)

Set과 Map

태스크가 들어오길 기다렸다가 태스크가 들어오면 처리하고, 없을 경우에는 끊임없이 돌아가는 자바스크립트 내 루프

이벤트 루프

HTML 문서의 생성 주기, DOMContentLoaded, onload Event

load event와 DOMContentLoaded event

ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값

Symbol Type

자바스크립트 언어의 문법을 좀 더 엄격하게 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킴

strict mode

버블링과 캡처링

캡처링과 버블링을 활용해 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현

이벤트 위임(event delegation)

Redux는 React, Angular, Vue, Ember 및 바닐라 JS를 포함한 모든 UI 계층 또는 프레임워크와 함께 사용할 수 있는 독립 실행형 라이브러리

Redux

String 래퍼 객체는 읽기 전용 객체로 제공되며 String 객체의 메서드는 언제나 새로운 문자열을 반환함

String

고차 함수(Higher-Order Function)는 함수를 인수로 전달받거나 함수를 반환하는 함수

배열 고차 함수

여러 개의 값을 순차적으로 나열한 사용 빈도가 매우 높은 가장 기본적인 자료 구조

배열

ES6 이전의 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용됨

ES6 함수의 추가 기능

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다

클로저

실행 컨텍스트의 개념과 소스코드의 평가와 실행 및 블록 레벨 스코프 정리

실행 컨텍스트

this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있음

this

빌트인 객체

프로토타입 교체, 존재 확인, 상속과 열거

프로토타입 교체와 메서드

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체 지향 프로그래밍이 가능한 `멀티 패러다임 프로그래밍 언어`

프로토타입 객체와 생성

명세한 Query Types에 대한 로직을 작성해야 하는데, `resolvers`라고 불리우는 객체를 Apollo server에 전달

GraphQL Resolvers

GraphQL의 프로젝트 설정과 types, nullable field의 개념

GraphQL Types

함수는 값을 사용할 수 있는 곳(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문)이라면 어디서든지 리터럴로 정의할 수 있으며 런타임에 함수 객체로 평가됨

함수와 일급 객체

Apollo GraphQL의 등장과 사용 이점

GraphQL Overview

객체 리터럴에 의한 객체 생성 방식과 달리 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환함

생성자 함수에 의한 객체 생성

var 키워드로 선언한 변수의 문제점, let, const 키워드와 비교

All Posts

React

NextJS Practice Project

Webpack Optimized

Webpack Connect API

Webpack Dev Server