1. 프로젝트 기획 이유
2. 프로젝트 일정
3. 기획자
4. 프로젝트 목표
5. 개발 환경 및 기술 스택
6. 파일 구성
7. 결과물
8. 프로젝트 시연
9. 프로젝트 소감
10. 프로젝트 사용법
-
JavaScript와 TypeScript를 배우며 미숙한 부분을 클론코딩으로 확실하게 배우고 싶고, 내가 아는부분은 더 정확하고 확실하게 짚고 그것을 제것으로 만들고 싶었고, 클론코딩뿐만아니라 저의 실력은 어느정도인지 그리고 그것을 제가 확실하게 만들수 있는지, 강의로 클론코딩을 하는 것 뿐만아니라 제가 넣고싶은 부분을 넣어서 좀더 보기 편한 개인프로젝트처럼 만들고 싶어서 기획하게 되었습니다.
프로젝트 기간 : 2023년 10월 25일 ~ 2023년 10월 27일
-
25일
- 환경세팅 및 README 초안 적기
- UI구현
-
26일
- 이미지 갤러리 로직 구현하기
- 드래그 드롭 사용해여 ux 개선하기(바탕화면에서 드래그앤 드롭으로 사진 가져올수 있게 적용)
- title 적용
-
27일
- README 작성
- 코드 수정
- 불러놓은 사진 클릭시 모달창 생성 기능 추가
- 사진 삭제 버튼 생성 및 로직 구현
이규정 |
---|
결과보단 과정!
- 완벽한 결과보단 클론코딩 프로젝트를 진행하는 과정에서 많은 지식과 경험을 얻어가는 것에 초점을 두기.
- 아는것은 더 완벽하게 알고 확실하게 내것으로 만들기.
📦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
이미지 추가 전
![](https://private-user-images.githubusercontent.com/115642699/278695006-fb954944-2005-46b0-a202-3dc1e4aa7385.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYwMDIzOTUsIm5iZiI6MTcyNjAwMjA5NSwicGF0aCI6Ii8xMTU2NDI2OTkvMjc4Njk1MDA2LWZiOTU0OTQ0LTIwMDUtNDZiMC1hMjAyLTNkYzFlNGFhNzM4NS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMFQyMTAxMzVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zMzMzMzA5Y2YyMWM0MjYzYTNlZTcyZmFmNjRmMWIwOGVhODI2YTk1YTliMjc1NzMyMGVkMTRmZmM1YTJiNGFlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.H215L4MzmQ6McgRpdNinfPTtoFogoDkowH6FAuO7TPg)
이미지 추가 후
![](https://private-user-images.githubusercontent.com/115642699/278695275-f2144158-c570-419d-a7af-98e047d89f1f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYwMDIzOTUsIm5iZiI6MTcyNjAwMjA5NSwicGF0aCI6Ii8xMTU2NDI2OTkvMjc4Njk1Mjc1LWYyMTQ0MTU4LWM1NzAtNDE5ZC1hN2FmLTk4ZTA0N2Q4OWYxZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMFQyMTAxMzVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iNWRmY2EzZGYxY2EwMjU1YTZiMWE3NDk4YWNmYmMzYjhhMGUxZDlkYWI0NDNmOTM2MGQ0YTFmZGQ3MTA2MGQyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.lwf39T7cHjmg6vhANZN07yJHu0d_9hlWlgwdSUU01Xc)
모달창
![](https://private-user-images.githubusercontent.com/115642699/278695494-280b64da-58b6-48cb-87c3-66c0895e9cdf.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYwMDIzOTUsIm5iZiI6MTcyNjAwMjA5NSwicGF0aCI6Ii8xMTU2NDI2OTkvMjc4Njk1NDk0LTI4MGI2NGRhLTU4YjYtNDhjYi04N2MzLTY2YzA4OTVlOWNkZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMFQyMTAxMzVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lYmIxOTA1NDY1ZjVhMGY0NzBiNGY3ZGIxNmFkNjEwNzI5YTkyNjBiNWY3NDk2MDQ4NjYwYzBmM2Q2M2IyZWNjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.OhAUcciJharWqTE_fasSpVAfhokf6ckCZ1yLRfqH5Vo)
이규정 | 처음 써보는 typescript라서 확실히 어렵고 이미지 사용을 위한 드래그앤 드롭이 이러한 방식으로 사용되는 것을 처음 경험해보고 사용해 봤습니다. 어렵지만 하나씩 천천히 배워나가면서 계속 성장하는 개발자가 되기위해 노력할 것입니다. |
---|
- 패키지 설치
npm i
- 클라이언트 실행
yarn start