Next.js 번들 사이즈 줄이기
Next.js 애플리케이션의 번들 사이즈를 최적화하는 방법을 알아봅니다. 번들 사이즈를 분석하고 코드 스플리팅, 트리 쉐이킹 등의 기법을 통해 번들 크기를 효과적으로 줄이는 방법을 설명합니다.
React 테스트 자동화 w. Vitest & Testing Library & MSW & Cypress
React 프로젝트에서 Vitest와 Testing Library를 사용한 단위 테스트, MSW를 활용한 API 모킹, 그리고 Cypress를 이용한 E2E 테스트 방법을 이해합니다.
React Router 핵심 정리
React Router 라이브러리를 통해 React 애플리케이션에서 여러 페이지를 쉽게 관리하고 내비게이션을 구현할 수 있습니다. 동적 라우팅, 중첩 라우팅, 여러 방식의 내비게이션 등 다양한 기능을 지원하는 React Router의 핵심 개념과 사용법을 살펴봅니다.
React Context API
React Context API는 프로젝트의 상위/하위 컴포넌트 간 데이터 공유 방식으로, 예제를 통해 개념과 사용법을 이해합니다.
CSS before, after 선택자
CSS의 ::before와 ::after 가상 요소 선택자는 HTML의 특정 요소 안에 CSS로 내용을 추가할 수 있는 강력한 도구입니다. 이를 통해 HTML 구조를 변경하지 않고도 시각적 요소를 추가하거나 변경할 수 있어, 더욱 동적이고 세련된 웹 페이지를 만들 수 있습니다.
JSON Server 핵심 정리
JSON Server는 JSON 파일을 이용해 모의용 REST API 서버 및 DB를 구축할 수 있는 도구입니다. 이를 통해 백엔드 API 서버나 DB가 준비되지 않은 상황에서도 프로토타입을 개발하거나 테스트할 수 있습니다.
사례로 이해하는 GitHub Flow
GitHub Flow는 GitHub을 활용하는 브랜치 전략으로, 브랜치를 어떻게 생성하고 병합하는지에 대한 개념입니다. GitHub Flow의 간단한 사용 사례를 통해 브랜치 전략을 이해해 봅시다.
CSS Multi Column 완벽 가이드
CSS 다단(Multi-Column)은 요소의 내용(텍스트 등)을 신문이나 잡지처럼 여러 단으로 나누어, 보다 많은 내용을 한눈에 볼 수 있어 가독성을 높이는 레이아웃 기능입니다.
TanStack Query(React Query) 핵심 정리
TanStack Query는 서버로부터 데이터 가져오기, 데이터 캐싱, 캐시 제어 등 데이터를 쉽고 효율적으로 관리할 수 있는 라이브러리로, React Query라는 이름으로 시작했지만, v4부터 Vue나 Svelte 등의 다른 프레임워크에서도 활용할 수 있도록 기능이 확장되며 TanStack Query라는 이름으로 변경되었습니다.
(초안) SvelteKit
SvelteKit은 Svelte 프레임워크로, 서버 사이드 렌더링(SSR) 기반의 빠른 빌드 속도와 간편한 라우팅 시스템을 제공하며, SEO 최적화 등 성능 향상을 위한 여러 기능을 제공합니다.
Zustand 핵심 정리
Zustand(주스탠드)는 작고 빠르며 확장 가능한 React 프로젝트에서 사용하는 상태 관리(Store) 라이브러리입니다.
CSS Animation 완벽 가이드
CSS Animation(애니메이션)은 여러 CSS 스타일 속성으로 요소의 크기, 색상, 모양 등을 제어해 애니메이션 효과를 부여하는 기술로 자바스크립트 없이도 요소에 동적 효과를 부여할 수 있어, 보다 좋은 성능으로 애니메이션을 구현할 수 있습니다.
Git 핵심 명령어 모음
버전 관리 시스템(VCS) Git에서 주로 사용하는 명령을 빠르게 정리합니다.
Auth.js(NextAuth.js) 핵심 정리
Auth.js(NextAuth.js)는 Next.js 프로젝트의 사용자 인증 및 세션 관리를 위한 라이브러리로 Google, GitHub 등의 다양한 인증 공급자를 지원하며, Next.js의 서버와 클라이언트 측 모두에서 인증 및 세션 관리를 손쉽게 처리할 수 있습니다.
Next.js 15 핵심 정리
Next.js는 Vercel에서 개발한 React 프레임워크로, 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR), API 라우팅 등의 다양한 최적화 기능을 제공합니다. Next.js를 사용하면, React의 기본 기능을 확장해, 보다 빠르고 안정적으로 웹 애플리케이션을 개발할 수 있습니다.
GA4 Query Explorer와 Google Analytics Data API 활용하기
GA4 Query Explorer와 Google Analytics Data API를 활용해, Google Analytics에서 웹사이트의 트래픽 정보를 가져오는 방법을 알아봅니다.(GA4 쿼리 익스플로러, 구글 애널리틱스 데이터 API)
Supabase Database, Prisma로 빠르게 시작하기 w. Next.js
오픈소스 백엔드 서비스인 Supabase의 PostgreSQL 데이터베이스와 Prisma를 사용해 Next.js 프로젝트를 빠르고 쉽게 구성하고 다루는 방법을 알아봅니다.
지연 응답 API
지연 응답이 필요할 때 사용할 수 있는 API를 제공합니다. 최대 5초까지 지연 응답이 가능합니다.
사용자 정보 API
가짜 사용자 정보(Mock Data)가 필요할 때 사용할 수 있는 REST API를 제공합니다. JSON 형식으로 사용자 정보를 조회, 생성, 수정, 삭제(CRUD / Create, Read, Update, Delete)할 수 있습니다.
데이터 통신을 위한, Fetch 함수와 Axios 라이브러리
서버와 클라이언트 간의 데이터 통신은 웹 개발의 핵심 개념 중 하나로, 자바스크립트에서의 데이터 통신을 위한 fetch 함수와 axios 라이브러리의 사용법을 알아봅니다.
JS 비동기 핵심 패턴
동기적으로 동작하는 코드와 비동기적으로 동작하는 코드의 차이점을 알아보고, 비동기 코드를 작성할 때 사용하는 여러 핵심 패턴을 알아봅니다.
React 핵심 패턴
React 기본 문법의 다양한 사용 패턴을 살펴봅니다.
번들러와 빌드 도구의 이해
Webpack이나 Parcel, Rollup 등의 번들러(Bundler)는 현대적인 웹 개발의 필수적인 도구로, 번들러의 기본 개념, 동작 원리, 간단한 예제 등을 살펴보고, 추가로 빌드 도구의 개념과 예제도 같이 살펴봅니다.
JS 클래스 핵심 패턴
자바스크립트는 객체 지향 프로그래밍에서의 프로토타입(Prototype) 기반 언어로 프로토타입 무엇인지 이해하고, ES2015부터 추가된 클래스(Class) 문법의 핵심적인 패턴을 살펴봅니다.
JS 함수 핵심 패턴
자바스크립트 함수에 대한 기본적인 사용 방법부터 관련 용어, 고급 기법 등의 관련된 다양한 함수 패턴과 여러 개념을 살펴봅니다.
React 프로젝트 시작하기 w. Vite
Vite.js 빌드 도구를 사용해 React 프로젝트를 시작하는 방법을 살펴보며, 자바스크립트와 타입스크립트 프로젝트에서의 구성을 구분해 설명합니다.
한눈에 보는 타입스크립트
타입스크립트는 Microsoft에서 개발하고 유지/관리하는 Apache 라이센스가 부여된 오픈 소스로, 자바스크립트에 강한 타입 시스템을 적용해 대부분의 에러를 컴파일 환경에서 코드를 입력하는 동안 체크할 수 있습니다.
Vue 프로젝트 시작하기 w. Vite
Vite.js 빌드 도구를 사용해 Vue 프로젝트를 시작하는 방법을 살펴보며, 자바스크립트와 타입스크립트 프로젝트에서의 구성을 구분해 설명합니다.
Vue Composition API 핵심 패턴 w. 타입스크립트
Vue 3버전의 기초 문법 학습이 끝났다면, Composition API와 타입스크립트를 사용한 핵심 패턴을 빠르게 탐색해 보세요!
구글 크롬 원격 데스크톱 설치 및 사용 가이드
구글 크롬(Google Chrome) 원격 데스크톱을 통해 멘티(학생)의 화면을 멘토(강사)에게 공유하고 그 화면을 제어하는 과정을 설명합니다.
이미 사용 중인 MongoDB 인스턴스 종료하기
시동 중이던 MongoDB가 비정상적으로 종료된 후 다시 MongoDB를 시동하기 위해 기존 포트를 찾아 종료하는 방법을 알아봅니다.
JS Resize Observer, 요소의 크기 변화 관찰
Resize Observer는 요소(Element)의 크기를 관찰하며, 요소의 크기가 변화할 때 실행할 최적화 콜백(callback)을 제공할 수 있습니다.
JS Intersection Observer, 요소의 가시성 관찰
Intersection observer는 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공합니다.
Svelte 완벽 가이드
Svelte 기본 문법을 이해했다면, 핵심 Core API를 이해하고 다양한 활용 패턴을 알아보세요!
Svelte 개요 및 기본 문법
Svelte는 '프레임워크가 없는 프레임워크' 혹은 '컴파일러'라고 소개하는 새로운 방식의 프레임워크로, 가상 DOM이 없고 런타임에 로드할 프레임워크가 없습니다.
HTML IMG의 srcset과 sizes 속성
일반적으로 반응형 웹에서 이미지를 지원하기 위해 '미디어쿼리'라고 부르는 CSS Media Rule(`@media`)을 사용할 수 있으며, 반응형 이미지를 처리하기 위해 뷰포트(Viewport)의 크기부터 사용자 화면의 해상도 등 많은 환경을 고려해야 하지만, 우리는 HTML IMG의 `srcset`과 `sizes`를 통해 쉽게는 이미지의 크기를 설정하는 것만으로 대부분의 고려 사항을 사용자 브라우저에 맡길 수 있습니다.
HTML 주요 요소와 속성, 한눈에 보기
웹 개발 프로젝트에 필요한 HTML 요소(Elements)와 속성(Attributes)에 대해 간단한 개요와 설명을 통해 웹 페이지를 설계하고 구현하는 데 필요한 정보를 알아봅니다. 이를 통해 웹 표준을 준수하는 동시에, 효과적이고 의미론적(Semantic) 마크업 구조를 구현할 수 있도록 돕습니다.
HTML, CSS 첫걸음
웹 개발을 시작하기 위한, HTML과 CSS의 기초를 학습합니다. 처음 시작하는 분들을 위한 최적의 가이드입니다.
JS Blob(블랍) 이해하기
Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있습니다. 이 글에서는 Blob의 생성과 읽고 쓰는 방법들에 대해서 알아보겠습니다.
CSS Grid 완벽 가이드
CSS Grid는 2차원 레이아웃 시스템을 제공하는 CSS 기술로, 웹페이지의 요소를 행과 열로 구성된 그리드 형태로 배치할 수 있게 해줍니다. 복잡한 레이아웃도 쉽게 구현할 수 있어, 정밀한 디자인 작업에 적합합니다.
SCSS/Sass 완벽 가이드
Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) SCSS/Sass에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다.
CSS Flex 완벽 가이드
CSS Flex는 효율적인 레이아웃 설계를 위한 기술로, 컨테이너 내 항목의 공간 배분과 정렬을 유연하게 관리합니다. 이를 통해 반응형 디자인 레이아웃이 쉬워지고 복잡한 계산 없이도 요소를 원하는 대로 배치할 수 있습니다.
Yarn 설치 및 사용법
Meta(Facebook)에서 만든 자바스크립트 패키지 매니저인 Yarn을 사용해 봅시다.
마크다운(MarkDown) 사용법 총정리
자바스크립트 함수에 대한 기본적인 사용 방법부터 관련 용어, 고급 기법 등의 관련된 다양한 함수 패턴과 여러 개념을 살펴봅니다.