TypeScript 기본 타입: 객체와 함수까지 strict로 익히기
TypeScript 기본 타입부터 배열, 객체, 함수, 선택 속성, readonly까지 strict 컴파일과 실제 실행 결과를 터미널에서 직접 확인하며 익히는 초보자용 입문 실습입니다.
프론트엔드
HTML·CSS부터 JavaScript, React와 상태관리까지, 화면을 만들고 데이터를 다루는 기술을 배웁니다.
총 177개의 글
JavaScript fetch 오류 처리: Promise부터 404까지
Promise와 async await를 이해하고 로컬 HTTP 서버에서 fetch의 성공, 404, 잘못된 JSON, 네트워크 실패를 재현해 로딩과 오류 처리를 익힙니다.
JavaScript DOM 폼 만들기: 입력 검증과 접근성 처리
JavaScript submit 이벤트로 공백 입력을 막고 오류 메시지와 aria-invalid를 처리합니다. 두 파일의 독립 폼 실습으로 정상 제출 뒤 입력 초기화와 포커스 복귀를 확인합니다.
JavaScript 함수와 객체, import export로 모듈 나누기
함수의 입력·반환값과 객체를 익힌 뒤 named/default export로 파일을 나눕니다. 영수증 객체 생성 실습과 Node.js 검증 파일을 제공합니다.
JavaScript 조건문과 반복문: 변수 값의 흐름부터 추적하기
const·let, if·switch, for·while을 값의 변화로 읽고, 경계값 오류 두 곳을 직접 수정합니다. 실행 가능한 시작본·완성본과 결과 검증을 제공합니다.
Next.js 캐시 API 변화 useCache deprecation 대응
Next.js는 캐시와 렌더링 모델이 적극적으로 발전하는 프레임워크입니다. canary 버전 경고나 deprecation 메시지를 봤을 때 검색 결과 하나만 보고 코드를 바꾸면 stable 프로젝트에 맞지 않는 수정이 들어갈…
CSS Grid 실습: Flex 학습 카드로 열 맞추기와 auto-fit 비교
Flex에서 만든 학습 카드로 Grid의 행·열, minmax, auto-fit과 auto-fill을 비교합니다. 작은 코드에서 시작해 두 파일로 완성하고 긴 내용의 넘침까지 확인합니다.
Next.js next 폴더와 빌드 산출물 이해
Next.js 프로젝트를 실행하면 루트에 .next 폴더가 생깁니다. 이 폴더는 직접 작성하는 소스가 아니라 Next.js가 개발·빌드 과정에서 생성한 결과물입니다.
React Vite 사용법 Vite 8 프로젝트 생성 실행 빌드
React Vite 프로젝트를 생성하고 기본 파일 구조를 이해합니다. dev·build·preview 명령과 화면 수정 후 확인 방법을 독립 실습으로 살펴봅니다.
Next.js Proxy 마이그레이션 matcher Node.js Runtime
Next.js 16에서는 middleware 파일 규칙이 proxy 중심으로 바뀌었습니다. 기존 middleware 예제를 최신 프로젝트에 그대로 적용하면 파일명·Runtime·matcher 기준이 달라질 수 있습니다.