HEROPY.Git 핵심 명령어 모음
버전 관리 시스템(VCS) Git에서 주로 사용하는 명령을 빠르게 정리합니다.
Auth.js(NextAuth.js) 핵심 정리
Auth.js(NextAuth.js)는 Next.js 프로젝트의 사용자 인증 및 세션 관리를 위한 라이브러리로 Google, GitHub 등의 다양한 인증 공급자를 지원하며, Next.js의 서버와 클라이언트 측 모두에서 인증 및 세션 관리를 손쉽게 처리할 수 있습니다.
Next.js 핵심 정리
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를 시동하기 위해 기존 포트를 찾아 종료하는 방법을 알아봅니다.
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) 사용법 총정리
자바스크립트 함수에 대한 기본적인 사용 방법부터 관련 용어, 고급 기법 등의 관련된 다양한 함수 패턴과 여러 개념을 살펴봅니다.