개인프로젝트/개인 포트폴리오 웹앱

포트폴리오 앱 성능최적화 작업기 1편

0. Intro 기존에는 Three.js를 사용해서 외부 소스의 gltf 모델링 파일을 컴포넌트로 변환하여 웹에서 3d를 구현했었다. 하지만 이번에 꼭 사용해보고 싶은 게 있어 3d 모델링 툴인 Spline을 사용해서 구현한 3d 모델링 파일을 코드로 export 하여 포트폴리오 앱에서 받아와 사용했다. 이 과정에서 모델링 파일을 받아오는 방식이 빌드 파일 내에 저장된 걸 사용하는 게 아니라 네트워크를 사용해서 받아오게끔 되어있어, 모바일에서는 정상적인 열람이 힘들 정도의 심각한 성능 저하가 발생하였다. 구글 라이트하우스를 돌려보면 데스크탑 환경에서 해당 3d 파일을 불러오는 코드만 삭제해도 퍼포먼스 점수가 28점에서 64점이 될 정도이다. 이를 해결하려면 모델링 파일 자체를 더 적은 폴리곤을 사용하거나..

리액트 포트폴리오 사이트 제작기 5편

로컬 스토리지 - 테마 변경시 로컬스토리지로 값 저장해두어 새로고침 시에도 유지하기 조건부 렌더링 - 모바일과 데스크톱 환경에 따라 다른 홈 화면 렌더링하기 Framer-motion - 스크롤 시 컴포넌트에 애니메이션 추가 코드 성능 개선 - 함수 중복실행되는 것들 확인하고 줄이기, 컴포넌트 성능 최적화 CRUD - Firebase Cloud FireStore 연동 CRUD - 게시글 수정, 삭제는 작성되어 화면에 반영된 개별 게시글에서 호버 시 수정, 삭제 아이콘이 나오고 클릭시 동작하도록 하기 → 본인이 작성한 글만 수정/삭제가 가능하도록 하려면 로그인시 받은 정보로 비교해서 필터링. uid로 비교해야 할까? nodemailer 붙이기 1. 추천사 CRUD 고칠 부분 [x] 데이터 추가 시 정렬의 어..

리액트 포트폴리오 사이트 제작기 4편

1. 기능구현 - 추천사 컴포넌트 firebase 소셜로그인, crud 1.1 배포 버젼의 주소를 firebase에 인증 제공업체 도메인 추가하기 - 해결 로컬에선 깃허브 소셜 로그인이 잘 동작하다가 임시 배포 버젼에서 로그인을 시도할 경우 배포된 내 앱의 주소가 firebase에 인증 제공 업체의 도메인으로 추가되어 있지 않아 이를 추가해주어야만 로그인 관련 작성한 코드를 실행시킬 수 있다. 파이어베이스 콘솔 → 내 앱 → 인증 → Settings → 승인된 도메인 (이 곳에 내 앱의 주소를 추가해주면 된다.) 1.2 새로고침 시 로그인 유지하기 - 임시 해결 참고자료: https://prohannah.tistory.com/139 (해결)현재 로그인 여부의 state 값의 변경되는 경우의 로직 보완 필..

리액트 포트폴리오 사이트 제작기 3편

1. 할 일 [x] 반응형 레이아웃 전면 수정 - 현재 모바일 화면에서 body가 왼쪽으로 밀리고 있다. PC/타블렛/모바일 미디어쿼리 px 기준점 명확히 정의하고 css 수정 GlobalStyle 파일 안쓰는 css 코드 제거 또는 참고할 코드 주석처리 공통적으로 쓰이고 있는 Container 컴포넌트를 지금처럼 GlobalStyle 파일에서 export 할 지 common 폴더에서 export 할지 각 컴포넌트에서 새로 정의할지 컨벤션 정하기 모바일 레이아웃에서 화면이 위아래로 늘려져서 나오는 부분 수정하기 모바일 레이아웃에서 사라지거나 형태가 바뀔 부분 생각하고 반영하기 navbar: 햄버거 메뉴로 모양 변경. 클릭 시 전체화면으로 nav item들이 중앙정렬되어 보여지게 수정 [ ] testimo..

리액트 포트폴리오 사이트 제작기 2편

1. 디자인 수정 [x] 레이아웃 배치 구상 및 반영 [ ] 스크롤 시 레이아웃에 애니메이션 적용 (framer-motion 라이브러리 사용) [x] 라이트/다크 모드 구현 [x] 반응형 구현 1.1 처음 접속시 로딩화면에서 로고 및 애니메이션 구현하기 모든 컴포넌트를 최상위에서 Suspense로 감싸고 fallback으로 Loading 컴포넌트가 보여지도록 작성하였는데 로딩 화면이 보이지 않는다. 로딩이 너무 빨라서 안보이는 걸까? → 그렇다. 로딩이 너무 빨라서 나오긴 나왔는데 너무 빨리 지나간 것이었다. 로딩시에 보여줄 화면에서 임팩트를 주기 보다 useEffect를 의존성 배열을 빈배열로 줘서 최초 렌더링시에만 setTimeout같이 특정 시간만큼만 어떤 컴포넌트를 화면에 보여주는 식으로 하는 식..

리액트 포트폴리오 사이트 제작기 1편

리액트 포트폴리오 사이트 제작기 1편 1. 기획 1.1 디자인 https://www.figma.com/file/hOatdjWjsX78MH6HzD7dQT/my-portfolio-app?node-id=0%3A1 1.2 기능 최초 렌더링시 로고 애니메이션 반응형 Home 컴포넌트에 three.js 이쁜거 넣기 단일 페이지에서의 스크롤 시 페이지네이션 구현하기 parallax animation firebase 사용해서 깃허브 로그인으로 추천사 crud 동적으로 받기 메일링 api( nodemailer ) 사용하여 contact 기능 구현 1.3 파일 구조 client public src components common : 모든 페이지에서 공통으로 사용할 컴포넌트들 그 외 페이지별로 사용할 컴포넌트 폴더들 pag..