My-portfolio

>> 포트폴리오 바로가기

---

📗 프로젝트 개요

• React를 이용해 제작한 저를 소개하는 사이트입니다.

• 리액트를 학습한 후 응용해 보기 위해 시작한 프로젝트로 다양한 기능을 사용하는 것을 목표로 제작하였습니다.

---

📘 프로젝트 요약

• "나"를 소개하기 위해 싸이월드의 미니홈피를 모티브로 제작하였습니다.

• 미니홈피라는 주제에 맞게 페이지를 스타일링 하였으며 방문자수, 방명록, BGM등의 부가 기능을 추가하였습니다.

• SPA 구조를 사용하여 고정된 단일 페이지 내에서 특정 영역만 메뉴에 따라 정보가 변경됩니다.

• 전체화면모드, 다크모드, 모바일모드의 모드 변경이 가능합니다.

• 깃허브 페이지 서비스를 이용하여 빌드, 배포하였습니다.

• 방명록등의 데이터 작업이 필요한 경우 Firebase를 이용하여 구현하였습니다.

---

📙 프로젝트 소개

1. 페이지(메뉴)

1) 전체 페이지

---

2) About

미니홈피라는 주제에 걸맞은 자기소개 메뉴입니다.

• 말풍선에 타이핑 애니메이션을 넣은 텍스트를 넣어 캐릭터가 말하는 듯한 연출을 하였습니다.
• setInterval과 substring을 이용하여 텍스트가 하나씩 추가되게 구현하였습니다.

---

• 문 아이콘을 클릭하여 장면이 전환되게 연출하였습니다.
• clip-path: polygon()을 이용하여 장면 전환 애니메이션을 구현하였습니다.
  >> 장면 전환 애니메이션 구현 자세히 보기

---

3) Career, Social

간단한 경력 사항과 깃허브, Velog의 링크 카드가 있는 메뉴입니다.

---

4) Project

react-bootstrap의 Carousel과 react-markdown을 이용한 프로젝트 소개입니다.

• 프로젝트를 아이콘으로 표현하여 배치하였습니다.
• 아이콘을 클릭하여 팝업창으로 상세 화면이 오픈됩니다.

• 좌측에는 react-bootstrap의 Carousel을 이용하여 프로젝트의 이미지를 확인할 수 있습니다.
  >> react-bootstrap 사용법 자세히 보기
• 우측에는 프로젝트의 설명과 링크, 사용한 기술을 나타내었습니다.
• >> ReadMe 버튼을 클릭하여 리드미에 작성된 더욱 상세한 내용을 확인할 수 있습니다.

• 깃허브에 작성된 ReadMe 파일을 다운받아 프로젝트에 추가하고
  react-markdown을 이용하여 마크다운 문법에 맞게 html에 렌더링하여 나타냅니다.
  >> react-markdown 사용법 자세히 보기

---

5) Board

Firebase를 이용하여 구현한 게시판 메뉴입니다.

• 사용자는 아이디와 비밀번호를 입력하고 프로필 사진을 등록하여 방명록을 작성할 수 있습니다.
• npm install firebase 명령어를 이용해 Firebase를 설치하여
  데이터의 저장, 조회, 삭제를 구현하였습니다.
• 아이디, 비밀번호, 작성일자, 방명록은 Firestore에 저장되며
  프로필 사진 파일은 Storage에 저장됩니다.

---

2. 모드 변경

1) 다크모드

• 사용자의 버튼 클릭을 통해 Light/Dark 모드를 변경할 수 있습니다.
• ThemeProvider을 이용해 다크모드를 관리하여 styled-components 내에서 변수를 이용한 스타일링이 가능합니다.

---

2) 전체 화면 모드

• 데스크탑 모드에서 메인 영역의 크기가 작기 때문에 버튼을 통해 확대된 화면으로 전환하는 기능을 추가하였습니다.
• 확대될 때의 transition 효과를 위해 해당 영역을 감싸고 있는 컴포넌트의 position 값을 계산하여 하위 컴포넌트로 넘겨주고 하위 컴포넌트를 position: fixed로 설정하였습니다.
  ※ top, left의 초기 값이 없으면 transition이 적용되지 않습니다.

---

3) 데스크탑(가로) / 모바일(세로) 모드

• 단일 페이지 구조로 선택한 메뉴에 따라 특정 영역이 변경됩니다.

• 데스크탑 모드에서는 해당 영역의 컴포넌트가 변경되는 방식으로,
  모바일 모드에서는 화면이 스크롤되는 방식으로 구현하였습니다.

• 페이지의 가로 세로 비율을 계산하여 데스크탑(가로) / 모바일(세로) 모드로 변경됩니다.
  ※ 초기에는 아래와 같이 모드에 따라 컴포넌트 내에서 구조만 변경되는 방식으로 제작하였으나 모바일의 작은 화면에서 가독성이 좋지 않아 아얘 다른 컴포넌트가 렌더링되는 방식으로 변경하였습니다.

---

📕 사용기술

1. GitHub Pages

• 정적 웹사이트 호스팅 서비스중 하나인 깃허브 페이지를 이용하여 프로젝트를 배포하였습니다.

• gh-pages 패키지를 install하여 프로젝트의 빌드, 배포를 자동으로 도와줍니다.
  >> [React] gh-pages를 이용한 웹 페이지 빌드-배포

2. Firebase

• 정적 웹사이트 호스팅 서비스를 이용하면 프로젝트를 간편하게 빌드, 배포할 수 있으나 데이터를 저장, 조회하는 등의 백엔드 로직은 따로 구현하여 연결해야 합니다.

• 서버를 직접 개발하여 관리할 정도로 대규모 프로젝트가 아니기에 BaaS중 하나인 Firebase를 이용하여 방명록과 방문자 수를 구현하였습니다.
  >> [React] Firebase를 이용해 게시판 만들기
  >> [React] 페이지 방문자 수 구현하기

3. useState

• 변수의 저장, 변경을 위해 사용하였습니다.

4. useEffect

• Lifecycle을 관리하기 위해 사용하였습니다.
  의존성 배열을 적절히 사용하여 여러 생명주기를 간편하게 관리할 수 있습니다.

5. useLayoutEffect

• useEffect와 비슷하게 렌더링후 작동하지만 paint되기 전 동기적으로 먼저 실행됩니다.
• 프로젝트에서 컴포넌트의 크기를 측정할 때에 사용하였습니다.

6. requestAnimationFrame

• useLayoutEffect는 DOM이 변경되었지만 레이아웃이나 스타일 계산이 완료되기 전일 수 있습니다.
• requestAnimationFrame을 사용하면 계산이 완료되고 repaint되기 직전에 작동하여 컴포넌트의 크기를 측정하는 등의 작업에 적합하여 useLayoutEffect안에서 함께 사용하였습니다.

7.useRef

• 렌더링을 발생시키지 않는 변수의 사용이나 컴포넌트 내부 요소를 조작할 때 사용하였습니다.

8. forwardRef

• 부모 컴포넌트에게 컴포넌트 내부 요소의 참조를 전달하려고 할 때 사용하였습니다.

9. useImperativeHandle

• 컴포넌트의 내부 요소를 해당 컴포넌트와 부모 컴포넌트 모두 조작할 때 사용하였습니다.
• 부모 컴포넌트에 값이나 함수를 전달할 수 있습니다.

10. useContext

• 컴포넌트 내부에서 전역적인 상태관리를 위해 사용하였습니다.

11. useMemo

• 불필요한 재계산을 방지하고 결과값을 재사용하기 위해 사용합니다.

12. Styled-Component

• 계층적인 디자인 구조와 변수를 사용한 디자인을 위해 사용하였습니다.

13. ThemeProvider

• 다크 모드, 모바일 모드 등 전체적인 디자인 변화를 위해 사용하였습니다.

14. ReactMarkdown

• 마크다운 파일을 렌더링하기 위해 사용하였습니다.

15. YTPlayer

• react-youtube 라이브러리를 이용한 유튜브 플레이어입니다.
• 배경음악을 재생하기 위해 사용하였습니다.

16. react-bootstrap

• Bootstrap에서 제공하는 리액트 라이브러리로 Carousel 기능을 사용하였습니다.

17. ReactDOM.createPortal

• 컴포넌트의 내부 요소를 DOM계층 외부에서 렌더링하기 위해 사용합니다.
• position fixed된 팝업창의 index 문제로 인해 사용하였습니다.

React 학습 내용을 확인하시려면 아래 링크를 참고해주세요.
>> React 학습 정리 바로가기

---

📓 시행착오

1. 2개 이상의 프로젝트를 gh-pages로 배포시 오류 발생

새로 만든 프로젝트를 gh-pages를 연결하여 npm run deploy 했는데 이전에 만든 프로젝트의 사이트에 업로드되는 현상이 있었습니다.

>> 해결 방법 바로가기

2. 이미지 프리로딩

컴포넌트의 렌더링 후 이미지를 로딩하면 위 영상처럼 이미지 로딩 시간으로 인해 사용감이 떨어집니다.

이를 해결하기 위해 나중에 사용할 이미지를 미리 불러오는 작업이 가능합니다.

>> 해결 방법 바로가기

3. 모바일에서 스크롤 시 주소창, 하단 메뉴 UI 오류

네이버	진행중인 프로젝트

모바일 브라우저는 사용자의 스크롤 조작을 감지해서 주소창/하단메뉴 UI를 on/off 하는 기능을 지원합니다.

위 GIF를 확인하면 네이버에서는 스크롤할때 UI의 on/off가 잘 이루어지는데
우측의 사이트는 제대로 작동하지 않는것을 볼 수 있습니다.

이는 해당 기능이 root 영역에서 스크롤이 이루어질 때만 발생하기 때문으로 해당 프로젝트는 컴포넌트 내부에서 스크롤이 이루어지기에 원하는 동작이 이뤄지지 않았던 것입니다.

>> 해결 방법 바로가기

4. 팝업창의 z-index

팝업 화면의 뒤를 어둡게 나타내기 위해 z-index의 값을 올려주고 background영역을 불투명하게 설정하였는데 z-index가 설정된 다른 버튼이 뚫고 올라오는 현상이 있었습니다.

분명 z-index의 값을 팝업창에 더 높게 설정했는데도 해결되지 않았습니다.

>> 해결 방법 바로가기

5. 컴포넌트의 크기 측정

컴포넌트가 렌더링된 후 사이즈를 측정하기 위해 useEffect()를 이용해 setSize()를 실행하는 코드가 있었습니다.

당장은 보이는 오류 없이 작동하지만 해당 코드는 문제점이 많이 있습니다.

>> 수정된 코드 자세히 보기

---

💡 저작권

해당 프로젝트 내 이미지들은 개인 프로젝트에서 비상업용으로 제작, 사용한 이미지로 무단 도용을 금합니다.