MVP를 만들자!

MVP란 Minimum Viable Product의 약자 => 쓸 수 있는 최소한의 기능을 갖춘 제품을 만들자는 소리입니다. 지금까지는 메인페이지 만들고... 헤더 만들고... Nav 만들고... 만들어놓은거에 애니메이션도 적용해보고... 생김새도 이쁘게 꾸며보고... 하느라 프로젝트가 전혀 진행되질 않았습니다. 덕분에 일찌감치 배포도 해놓고 도메인도 사서 연결해놓았는데도 어디 공개하지를 못했습니다. 아무 내용이 없으니까요!

지금까지의 방식은 따지고 보면 워터폴입니다. 그때그때 생각나는 걸 추가하고, 수정하면서 머릿속에 있는 완성된 제품을 그대로 만들어내려고 했던 것이죠! 이대로면 아마 Framer-motion이니 테일윈드니 하는 것들을 계속 공부하고, 그때그때 생각나는 기능을 추가하느라 천년만년이 지나도 포트폴리오 완성이 안될 겁니다.

그래서! 일단 필요최소한의 기능부터 다 만들어두고, 꾸미는 건 나중에 하려고 합니다! 마크업 작업 안합니다! 반응형도 안해요! 그냥 쌩으로 화면에 다 띄우는거에서부터 시작할겁니다!

이따구로요!

프로젝트 페이지부터 시작합니다. 일단 Projects 페이지에서 데이터를 불러와서 리스트에 넣어줍니다. 리스트의 각 링크를 클릭하면 ProjectDetails 페이지로 이동합니다.
ProjectDetails에서는 useParams로 id를 불러와, useFetchDocument로 firestore db의 projects 경로에서 해당 id를 가진 문서를 가져와서 화면에 띄워줍니다.

여기서 생긴 고민은 다음과 같습니다.

• Projects에서 사용하는 데이터는 1. 프로젝트 id 2. 프로젝트 타이틀 3. 프로젝트 로고 이미지 4. 로고 이미지 뒤에 띄워줄 백그라운드 컬러 헥사코드 이렇게 총 4가지인데, 이거 쓰겠다고 모든 프로젝트 데이터를 다 불러올 필요가 있는가?
• ProjectDetails 페이지에서 정보를 불러오는게 맞나? 그러면 결국 프로젝트 데이터를 두 번 불러오는 게 아닌가?

제 생각은 이렇습니다.
1. 불러오는 게 맞다! ProjectList에서 프로젝트 정보의 일부분만 사용하는 건 사실이지만, 그렇다고 ProjectList에서 사용할 정보만 들어있는 별도의 프로젝트 문서를 만든다면, 나중에 프로젝트를 추가할 때 ProjectDetails에서 사용할 데이터와 ProjectList에서 사용할 데이터를 따로 작성해주어야하니 훨씬 귀찮아진다. 그리고 프로젝트 데이터의 문서의 크기가 큰 것도 아니고, 앞으로 여기에 엄청나게 많은 정보가 추가될 여지도 없으니 (아마도...) 괜찮을 거다!
2. ProjectDetails페이지에서 사용할 정보는 ProjectDetails페이지에서 불러오는 게 낫다! 사용되는 곳에서 불러온다! (=책임과 분리) 그래야 나중에 떼어낼 때도 편하다!

그리고 지금 시점에서 고민중인 건 다음과 같습니다...

• ProjectDetails페이지에는 띄워줄 이미지가 많아서 진입한 후에 렌더링이 다 될 때까지 0.4초정도의 딜레이가 있는데.. 이거 줄일 수 없을까?
• 데이터 캐싱이 필요하지 않을까?
• 활용할 모든 데이터를 App에서 불러와서 구동 시에 데이터를 싹 가져오게 하고, 이걸 전역 상태로 관리해서 필요할 때마다 꺼내 쓰기 vs 그냥 필요한 곳에서 불러오게 냅두기
• Skills 페이지는 그냥 About에다 합치는 게 나을 것 같다. 어차피 내가 쓸 수 있는 스킬이 한 페이지를 할애할 만큼 많은 것도 아니고... 근데 그렇다면 Contacts 페이지도 거의 기능이 없으니 날려야 하는 거 아닌가? 단일 페이지에 모든 정보 갖다박는 식으로 만들기보단 뎁스가 좀 있는 사이트로 만들고 싶은데... Contacts에다가 넣을 유의미한 정보나 기능이 더 있을까? 아니면 없애고 새로운 페이지를 기획해보는 게 나을까?