portfolio site / 23.07.09 - 23.07.18 (update in progress)
🚨 trouble shooting
1️⃣ 반응형-모바일에서의 scrollview가 동작되지않음
h-full로 작성 후, 작성 직후 local에서는 동작되었으나 배포 후 동작되지않는 현상 확인
⭐️ SOLVE?
반응형 디자인을 아이콘으로 간결하게 수정
🤷♀️ WHY?
sm size에서 맞춤 반응형을 위해 flex-direction이 flex-row에서 flex-col로 변경되는 부분이 원인
sm size에서 flex-direction: column으로 변경되면서 내부의 요소들이 수직으로 쌓이고, 이때 높이 설정이 따로 되어있지않아 scrollIntoView가 동작할 공간이 없어져서 작동되지않음
따라서 수직으로 정렬되어있을때도 동작시키기 위해선 상위 요소의 height를 설정해주어야 함
2️⃣ DB불러오는 방법 오류
초기 작성시 프로젝트에 대한 데이터를 db.json에 저장하고, local port로 배포하며 GET을 확인하였으나, 배포를 하게 되면서 해당 데이터를 GET할 수 없게 됨.
json만 따로 배포를 하였으나 제대로 해당 데이터를 GET 해오지 못함.
⭐️ SOLVE?
일반적으로 작성하는 위치인 src/db.json 에 작성했던 파일을 src/file/db.json의 위치로 이동
이동 후 배포 서버 -> GET으로 불러오던 db.json을 다음과 같이 import하여 사용
import MyData from "../database/ProjectDB.json";
...
const { Projects } = MyData;🤷♀️ WHY?
다른 사람들의 방식을 살펴보니 Vercel의 경우 patch, post와 같이 데이터를 변경하는 행동은 지원하지 않고, get만 가능하다고 함
그래서 JSON서버(API)의 경우 Glitch나 EC2와 같은 배포서버를 많이 이용하는데,
내 db.json의 경우 데이터가 자주 patch되는 경우가 많지않을 것으로 예상하고, 데이터의 양이 크지도, 많지도 않아 위와 같이 간단한 방식으로 사용하는 것이 더 효율적이라 생각되어 db.json을 구조분해할당으로 호출하여 사용하는 방식을 택하게 됨
회고
1차 완성 및 1차 프로젝트 내용 추가는 이전(7월)에 완료하였으나, 반응형을 추가하고 디자인을 수정하고, DB를 수정하는 등과 같은 수정을 최근 1-2주간(9월) 진행
반응형 css를 진행하느라 ResponsivelyApp이라는 desktop app을 사용해보았는데, 모바일~노트북 사이의 크기 내에서 한번에 확인이 가능해서 매우 편리한 app이었다고 생각
dark mode를 설정해보고 싶었으나 알려진 방법으로는 잘 되지않았고, tailwindcss의 경우 많이 축약되어있어 추후 프로젝트를 진행할때 html+css/ Scss와 같은 방법을 사용해서 익혀보고 수정해보고자 함
추가하고자 하는 내용
- Portfolio - Modal
- Portfolio - More button
- Portfolio - Darkmode
+디자인을 선 구상 후 만들었다기보단 메뉴, 페이지 구상만 만든 후 진행한 프로젝트라 디자인적인 부분이 많이 부족해서 아쉬움
