Overview
단순한 데이터를 넘어 배열과 객체를 활용한 복잡한 데이터 구조를 다뤄봅니다. 실제 업무에 활용 가능한 고객 관리 기능을 구현합니다.
학습 목표
배열에 여러 고객의 정보 저장하기
이름/부서로 검색하는 필터 기능 구현
카드 형태의 UI 컴포넌트 제작
데이터 구조(Array/Object)의 이해
사용 기술
HTML
검색창과 목록 컨테이너 구성
CSS
카드 UI 디자인 및 반응형 그리드
JavaScript
JSON 데이터 구조화 및 필터링 로직
Step-by-Step 가이드
STEP 1
📁 폴더 준비
바탕화면에 phonebook 폴더 생성 Cursor 실행 → File → Open Folder
KeyCtrl+K
STEP 2
🤖 첫 번째 프롬프트 (데이터)
JSON 데이터 생성
AI Prompt
직원 10명의 정보를 담은 JSON 배열을 만들어줘. 이름, 부서, 전화번호, 이메일, 프로필사진URL(랜덤)을 포함해줘.
STEP 3
🤖 두 번째 프롬프트 (UI)
목록 표시
AI Prompt
이 데이터를 이용해서 명함 디자인의 카드로 화면에 리스트를 보여줘. 사진은 원형으로, 이름은 굵게 표시해.
STEP 4
🤖 세 번째 프롬프트 (기능)
검색 필터 구현
AI Prompt
상단에 검색창을 만들고, 이름을 입력하면 실시간으로 해당되는 카드만 남기고 나머지는 숨겨줘. 대소문자 구분 없이 검색되게 해줘.
준비물
- Session 3 완료
- 가상의 연락처 데이터 (엑셀 등) 준비
프롬프팅 핵심 원칙
- A. 데이터 구조 명확히: "정보 좀 넣어줘" (X) → "이름, 부서, 전화번호 필드가 있는 JSON 배열" (O)
- B. 예외 처리 요청: "검색 결과가 없을 때 '검색 결과가 없습니다'라고 표시해줘"
강사 노트 (Tip)
⏰ 시간 배분
데이터 구조 설명 10분, 구현 10분. 배열(Array)과 객체(Object)의 차이를 설명할 때, 엑셀의 행(Row)과 열(Column)에 비유하면 이해하기 쉽습니다.
🎯 핵심 메시지
모든 앱은 "데이터"를 보여주고, 수정하고, 저장하는 것입니다. 데이터 구조가 앱의 품질을 결정합니다.
Next Session
웹서비스 구조 이해
바로가기