JS 기초 진단 & 현대 JS 전환

목적

jQuery로 화면을 조작해 본 경험을 바닐라 JavaScript, React, TypeScript 방식으로 전환합니다. 목표는 문법 암기가 아니라 UI를 만들 때 왜 이런 코드를 쓰는지 설명하고, 직접 구현하고, AI가 만든 코드를 검수하고, 실제 프로젝트에 적용하는 능력을 얻는 것입니다.

전환 관점

jQuery는 DOM을 직접 찾아 즉시 바꾸는 방식에 익숙합니다. 현대 프론트엔드는 상태를 기준으로 UI를 다시 그리는 흐름에 익숙해야 합니다.

• jQuery: 요소 선택 → 이벤트 연결 → DOM 직접 변경
• 바닐라 JS: DOM API와 이벤트 흐름을 명확히 이해
• React: 상태와 props를 기준으로 UI 표현
• TypeScript: 데이터 구조와 함수 입력/출력을 타입으로 제한

핵심 개념

• 변수: let/const의 차이와 변경 가능한 값의 범위를 설명합니다.
• 배열: map, filter, forEach로 목록 UI를 변환하거나 순회합니다.
• 객체: API 응답과 UI 카드 데이터를 구조화합니다.
• 함수: 이벤트 처리, 데이터 변환, 렌더링 보조 로직을 분리합니다.
• 이벤트: 클릭, 입력, submit의 기본 동작과 전파를 이해합니다.
• DOM: querySelector, classList, dataset으로 직접 조작의 원리를 파악합니다.
• 비동기: fetch, async/await, 로딩/에러 상태를 연결합니다.
• 모듈: 기능별 파일 분리와 import/export로 유지보수성을 높입니다.

UI 인터랙션과 연결하기

• 카드 목록 + 필터: 배열 filter, 상태 관리, 카테고리 버튼 UI를 연결합니다.
• 탭 메뉴 / 아코디언: 조건부 렌더링, 활성 상태, 정보 구조화를 연습합니다.
• 스크롤 reveal: DOM 관찰, IntersectionObserver, CSS transition을 연결합니다.

진단 기준

• 설명 가능: 왜 map 대신 forEach를 쓰면 결과 배열을 바로 만들 수 없는지 말할 수 있습니다.
• 구현 가능: 필터, 토글, 탭, 아코디언을 직접 만들 수 있습니다.
• AI 코드 검수 가능: any 남발, 위험한 타입 단언, 원본 배열 변경을 찾아낼 수 있습니다.
• 프로젝트 적용 가능: 작은 데모를 HS Lab의 문서, 퀴즈, 실습, 포트폴리오 후보로 연결할 수 있습니다.

우선 학습 순서

1. 배열 map/filter/forEach 차이를 카드 UI로 확인합니다. 2. 이벤트 위임과 classList를 jQuery toggleClass 감각과 비교합니다. 3. TypeScript에서 any와 unknown의 차이를 예제로 확인합니다. 4. API 응답을 바로 `as`로 단언하지 않고 검증하는 습관을 만듭니다. 5. React 상태 기반 UI로 같은 인터랙션을 다시 구현합니다.