1. 프로젝트 기획 이유
2. 프로젝트 일정
3. 기획자
4. 프로젝트 목표
5. 개발 환경 및 기술 스택
6. 파일 구성
7. 결과물
8. 프로젝트 시연
9. 프로젝트 소감
10. 프로젝트 사용법

• JavaScript와 TypeScript를 배우며 미숙한 부분을 클론코딩으로 확실하게 배우고 싶고, 내가 아는부분은 더 정확하고 확실하게 짚고 그것을 제것으로 만들고 싶었고, 클론코딩뿐만아니라 저의 실력은 어느정도인지 그리고 그것을 제가 확실하게 만들수 있는지, 강의로 클론코딩을 하는 것 뿐만아니라 제가 넣고싶은 부분을 넣어서 좀더 보기 편한 개인프로젝트처럼 만들고 싶어서 기획하게 되었습니다.

  
  
  

프로젝트 기간 : 2023년 10월 25일 ~ 2023년 10월 27일

• 25일

  1. 환경세팅 및 README 초안 적기
  2. UI구현

• 26일

  1. 이미지 갤러리 로직 구현하기
  2. 드래그 드롭 사용해여 ux 개선하기(바탕화면에서 드래그앤 드롭으로 사진 가져올수 있게 적용)
  3. title 적용

• 27일

  1. README 작성
  2. 코드 수정
  3. 불러놓은 사진 클릭시 모달창 생성 기능 추가
  4. 사진 삭제 버튼 생성 및 로직 구현
  
  
  

이규정

결과보단 과정!

• 완벽한 결과보단 클론코딩 프로젝트를 진행하는 과정에서 많은 지식과 경험을 얻어가는 것에 초점을 두기.
• 아는것은 더 완벽하게 알고 확실하게 내것으로 만들기.

📦src
 ┣ 📂components
 ┃ ┗ 📜ImageBox.tsx
 ┣ 📜App.css
 ┣ 📜App.test.tsx
 ┣ 📜App.tsx
 ┣ 📜index.css
 ┣ 📜index.tsx
 ┣ 📜logo.svg
 ┣ 📜react-app-env.d.ts
 ┣ 📜reportWebVitals.ts
 ┗ 📜setupTests.ts

이미지 추가 전

이미지 추가 후

모달창

• 패키지 설치

npm i

• 클라이언트 실행

yarn start