프로필 리스트 만들기

프로젝트 개요

사용자 정보를 명함 카드 형식으로 보여주는 React 웹 앱을 구현합니다.

리스트 렌더링, 상태 관리, 컴포넌트 분리를 중심으로 구현합니다.

*2주차와 3주차에 배울 내용을 바탕으로 서버 API를 연결할 예정이므로, 현재는 필요한 데이터를 목 데이터(Mock Data)로 작성하세요.

기능

• [ ] 프로필 카드 리스트 조회 기능
• [ ] 새 프로필 추가 기능
• [ ] 프로필 삭제 기능
• [ ] 프로필 수정 기능

프로젝트 결과물 예시

Vite + Vue

폴더/컴포넌트 구조

src/
├── main.jsx
├── App.jsx
├── assets/
|   *├──* PARADOX_default.png
|   └── PARADOX_reverse.png
├── data/
|	  └── cardData.js
├── components/
|   *├──* Header.jsx
|   ├── ProfileForm.jsx
|   ├── ProfileList.jsx
|   ├── ProfileCard.jsx
|   └── ProfileModify.jsx
├── pages/
|  	*├──* Home.jsx
**| 	**└── ProfileLayout.jsx
└── styles/
		*├──* Home.css
		**└── ProfileLayout.css

main.jsx

• 역할: index.html과 App.jsx를 연결시켜줌