728x90

리액트 포트폴리오 사이트 제작기 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 : 모든 페이지에서 공통으로 사용할 컴포넌트들
    - 그 외 페이지별로 사용할 컴포넌트 폴더들
  - pages
    - Home.js
    - About.js
    - Skills.js
    - Works.js
    - Contact.js
    - Testimonials.js

참고

리액트 프로젝트 폴더 구조와 컨벤션 규칙

2. 리뷰

2.1 민감정보 감추기

api key 등 민감정보는 환경변수 파일에 담고 원문이 아니라 환경변수로 넣고 gitignore 적용시켜서 github에 올릴 때 노출되지 않게 해야 한다. 이걸 깜박해서 올라간 커밋을 되돌리려고 revert 해보고 rebase 해보고 하다가 안되서 결국 레포지토리를 새로 만들고 기존껄 private으로 돌렸다..ㅠㅠ

2.2 페이지네이션, 라우팅

라우팅시 해당 컴포넌트만 보여지는게 아닌 하나의 페이지에 모든 내용이 담기고 화면 상단에 고정된 navbar를 통해 원하는 메뉴를 클릭할 때 해당 컴포넌트 위치로 스크롤을 이동시키고자 하였다. 하지만 추천사 컴포넌트에서 crud가 들어가기 때문에 거기에서도 라우팅이 들어가야 하는 데서부터 문제가 생겼다.

상단의 고정된 navbar는 react-router-hash-link 라이브러리를 통해 원하는 위치로의 스크롤 이동은 간편하게 구현하였으나 깃허브 소셜 로그인, 추천사 등록/수정/삭제 등의 기능이 들어가야 할 추천사 컴포넌트를 구현하면서 react-router-dom을 통한 라우팅을 넣으니 문제가 생겼다.

추천사 컴포넌트 내부에서 경로를 바꾼 상태에서 상단 고정된 react-router-hash-link 라이브러리를 사용한 navbar의 메뉴를 클릭하면 원하는 위치로 스크롤이 이동은 하는데 원래대로 부드럽게 스크롤이 이동하는게 아닌 화면이 잠시 멈추었다 한번에 이동하는 문제가 생겼다. 그리고 경로 또한 해시링크가 들어간 경우에 중첩 라우팅이 원하는 대로 잘 되지 않았다.

중첩 라우팅에 대해 다시 공부해야겠고, useRef를 통한 스크롤 위치 이동을 통해 단일 페이지 스크롤링을 구현하는 방법에 대해 공부해서 해결해볼 계획이다.

해결

참고 2번의 내용으로 주소를 변경하지 않기로 하고 라우터 대신 useRef를 사용하여 페이지네이션하였다.

추후 custom hook을 만드는 참고 1번 방식으로 리팩토링 하면 더 좋은 공부가 되겠다.

Navbar 컴포넌트 제거.
App.js에서 컴포넌트마다 div로 감싸고 ref 값을 담았다.
App.js에서 navbar를 구현하고 각 요소별로 들어가는 onClick 이벤트핸들러로 ref값으로 스크롤 이동.

참고 1

Scrollable Single-Page Site Navigation with React Custom Hooks

참고 2

https://www.youtube.com/watch?v=oszUqCqTGHo&t=207s

할 일

로그인 폼 제작
개별 게시글, 전체 게시글 컴포넌트 제작
firebase 연동
디자인 수정