심플 CRM 앱

완성 앱 미리보기

배열과 객체를 활용한 데이터 관리

"데이터를 다루는 것이 프로그래밍의 핵심입니다. 효율적인 데이터 관리 방법을 배워봅시다."

세션 개요

단순한 데이터를 넘어 배열과 객체를 활용한 복잡한 데이터 구조를 다뤄봅니다. 실제 업무에 활용 가능한 고객 관리 기능을 구현합니다.

학습 목표

배열에 여러 고객의 정보 저장하기

이름/부서로 검색하는 필터 기능 구현

카드 형태의 UI 컴포넌트 제작

데이터 구조(Array/Object)의 이해

동작 원리

JSON(JavaScript Object Notation) 형식으로 데이터를 구조화하여 저장하고, filter 함수를 사용하여 원하는 조건의 데이터만 추출하여 화면에 보여줍니다.

실습 단계

📁 폴더 준비

바탕화면에 phonebook 폴더 생성 Cursor 실행 → File → Open Folder

단축키Ctrl+K

🤖 첫 번째 프롬프트 (데이터)

JSON 데이터 생성

PROMPT

직원 10명의 정보를 담은 JSON 배열을 만들어줘. 이름, 부서, 전화번호, 이메일, 프로필사진URL(랜덤)을 포함해줘.

🤖 두 번째 프롬프트 (UI)

목록 표시

PROMPT

이 데이터를 이용해서 명함 디자인의 카드로 화면에 리스트를 보여줘. 사진은 원형으로, 이름은 굵게 표시해.

🤖 세 번째 프롬프트 (기능)

검색 필터 구현

PROMPT

상단에 검색창을 만들고, 이름을 입력하면 실시간으로 해당되는 카드만 남기고 나머지는 숨겨줘. 대소문자 구분 없이 검색되게 해줘.

완성 체크리스트

데이터가 카드 형태로 예쁘게 나열됨
검색어 입력 시 즉시 필터링됨
검색 결과가 없을 때 안내 메시지가 뜸
반응형 디자인 (모바일에서도 잘 보임)

자주 묻는 질문 (FAQ)

Q.이미지가 안 나와요.

A.무료 이미지 사이트(Unsplash 등)의 URL을 사용하거나, 로컬 이미지를 images 폴더에 넣고 경로를 정확히 지정해야 합니다.

준비사항

•Session 3 완료
•가상의 연락처 데이터 (엑셀 등) 준비

사용 기술

HTML

검색창과 목록 컨테이너 구성

CSS

카드 UI 디자인 및 반응형 그리드

JavaScript

JSON 데이터 구조화 및 필터링 로직

💎 프롬프팅 핵심 원칙

•A. 데이터 구조 명확히: "정보 좀 넣어줘" (X) → "이름, 부서, 전화번호 필드가 있는 JSON 배열" (O)
•B. 예외 처리 요청: "검색 결과가 없을 때 '검색 결과가 없습니다'라고 표시해줘"

Next Session

웹서비스 구조 이해

다음 단계로 넘어가기

Instructor Notes (강사 노트)

⏰

시간 배분

데이터 구조 설명 10분, 구현 10분. 배열(Array)과 객체(Object)의 차이를 설명할 때, 엑셀의 행(Row)과 열(Column)에 비유하면 이해하기 쉽습니다.

🎯

핵심 메시지

모든 앱은 "데이터"를 보여주고, 수정하고, 저장하는 것입니다. 데이터 구조가 앱의 품질을 결정합니다.