웹 포트폴리오 리뉴얼 제작일지

지난 3월에 구조만 만들어뒀던 웹 포트폴리오 제작을 7월에 끝냈었다.

그런데 이게 아무래도 코딩 공부 초기에 구조를 만든거라 순수 JS만 사용해서 만든 사이트였고, HTML 파일에서 여러 태그를 중첩해가며 코딩하다보니 구조가 복잡하다는 단점이 있었다. HTML만 복잡한게 아니고 CSS도 모든 영역에 같은 margin이 들어가는데 똑같은걸 여러 번 입력해야하니까 귀찮았다. 수정사항 생길 때마다 vscode 켜서 포트폴리오 사이트에 반영하면서, 'React로 갈아엎을까?' 라는 생각이 매우 많이 들었다. SASS를 쓰면 root.scss에 mixin으로 margin 입력해놓고 각 컴포넌트마다 include만 하면 되는데!😆

React와 SASS로 '리모델링'하면 수정사항 생길 때에도 반영하기 쉽고, 코드도 훨씬 간결해진다. 그래서 인터넷에 올라와있는 웹 포트폴리오 예시를 보다가, 기존에 만들어둔걸 React로 리뉴얼하기로 했다.

'리모델링'에 시간이 얼마나 걸릴지는 모르겠지만, 최대한 빨리 끝낼 수 있도록 해봐야지!🙂

---

8월 6일 화요일

• VS Code에서 React 프로젝트를 오픈하고, SASS와 React Router를 설치했다.
• GitHub에서 레포 만들고 내 컴퓨터의 폴더랑 연결시켰다.
• 'About' 페이지에서 intro의 타이핑 애니메이션 효과 구현을 위해, React Typewriter Effect 설치
• Header/Footer를 위해 MUI 아이콘을 설치했고, 인터렉티브한 효과를 위해 GSAP, Lodash, Swiper를 설치했다.

$ npx create-react-app portfolio
$ npm install sass
$ npm install react-router-dom

$ git config --global user.name 'hjinn0813'
$ git config --global user.email 'hjc3790@gmail.com'

$ git remote add origin https://github.com/hjinn0813/portfolio.git

$ npm install @mui/material @emotion/react @emotion/styled
$ npm install @mui/icons-material

$ npm install react-typewriter-effect

$ npm install gsap
$ npm install lodash
$ npm install swiper

• 새로운 React 프로젝트가 오픈되고, 초기 설정으로 src와 public 디렉토리에서 불필요한 파일들 전부 삭제
• src의 app.js랑 index.js 내부의 코드에서 불필요한 부분들 삭제, public/index.html에서 <title> 태그와 파비콘 등 수정
• README.md를 간단하게 정리했다. 나중에 완성되면 다시 수정할 예정이다!😝
• 디렉토리 기본 구조 만들고, app.js에서 라우팅 연결
• Header, Footer 컴포넌트와 About 페이지 제작 및 디자인 완료 (root.scss에서 기본 폰트와 컬러 설정도 했음)
• About 페이지에서 GSAP으로 '스크롤 트리거' 효과 구현, 미디어쿼리 설정 → 디자인은 아직 조금 더 수정해야할 듯

스킬, 교육이수내역, 프로젝트, 연락처 영역만 남았다.

부지런히 한다면 다음주 종강 전에 끝낼 수 있을지도?👍

---

8월 7일 수요일

이걸 빨리 완성해야된다는 강박(?) 때문에 잠을 설쳐서 새벽 4시에 깨서 잠깐 작업을 했다. 역시 사람은 잠을 잘 자야한다.😂

• About 페이지의 타이핑 애니메이션 → 텍스트 입력이 끝나면 1.5초 정도 pause 됐다가 한 글자씩 삭제될 수 있도록 수정, 애니메이션 구현이 끝났는데 커서가 없어서 scss 파일로 커서를 만들었다.
• Contact 페이지 제작 및 디자인
  → 텍스트만 있으니 허전해서 Unsplash에서 전화기 사진을 다운로드해서 텍스트 옆에 넣었다. 사진은 웹에서만 보이고 모바일에서는 안 보이도록 설정했다.
• root.scss에서 mixin으로 넣었던 viewport size 수정

---

8월 8일 목요일

일단 어제 오후부터 컴퓨터 자체가 너무 느리다고 생각했다. vscode에서 터미널을 열었을 때, 현재 위치가 타이핑 애니메이션처럼 입력된다거나 add, commit, push 메시지 입력하는데 한 박자 늦게 입력되는 등의 문제가 있었다. 그래서 vscode의 문제인가 싶었는데, 화면캡쳐를 하려고 윈도우 단축키를 눌렀을 때도 동작이 느려서, 이건 윈도우 자체의 문제라는걸 인식했다. 그리고 작업관리자(Ctrl + Shift + Esc)를 열어봤더니, 백그라운드 프로세스로 돌아가고 있는게 많아서 CPU를 90%나 쓰고 있었다..!😱

웹 포폴 사이트 갈아엎고, 토이 프로젝트도 추가적으로 디자인을 수정하고, 이력서도 수정하고 등등 할 일이 많다보니 CPU를 확인한다는걸 생각을 못했다. 백그라운드로 돌아가는 것 중에 쓸모없는 것들을 전부 '작업 끝내기' 해서 CPU 사용량을 줄여서 원래 속도를 되찾았다.👍

그래서 다시 빨라진 컴퓨터로 진행한 오늘의 작업 내역은,

• 만들어놓은 토이 프로젝트에서 디자인을 수정해야하는 부분이 있어서 수정하느라 오전 시간을 전부 사용했다.
• '교육이수내역' 페이지 제작 및 디자인 완료
  
• '프로젝트' 페이지 제작 및 디자인 완료
  → 기존 버전이랑 똑같이 카드 컴포넌트 만들어서 플립 이벤트 추가하려다가, 개별 페이지로 나오는데 굳이 그럴 필요가 있을까 싶어서 그냥 모든 정보를 페이지 들어가자마자 보여주기로 했다. 저녁에 집에서 디자인 수정 끝내고 push했다.
• 모바일 Footer 디자인 수정
  → 모바일로 확인했을 때, footer에 '저작권 멘트'가 두 줄로 나오면서 레이아웃이 깨져서 수정했다. 웹 버전만 생각하고 line-height를 너무 두껍게 준게 문제였다. 그동안 핸드폰으로 확인해볼 생각은 못했다가 이날 처음 봤는데, 수정할 곳이 제법 있었다..😅

---

8월 9일 금요일

다음주가 발표이고 종강이어서 오늘 작업 많이 했다. 기본적인 구조와 디자인은 끝났고, 세부적인 기능을 수정해야하는 상태라서 주말에 배포부터 해도 될 것 같다.👏

• '교육', '프로젝트' 페이지에 들어가는 버튼 디자인 mixin 제작 및 적용
  → 두 페이지에 공통적으로 사용되는 GitHub 레포 연결 버튼의 디자인을 mixin으로 root.scss에 만들어서 include해서 사용했다. mixin 활용하면 코드도 간결해지고 효율적으로 작업할 수 있어서 좋다.
• '교육' 페이지에서 각 교육마다 관련된 GitHub 레포 연결
  → 해당 교육에서 어떤 것들을 배웠는지 상세설명을 적어뒀지만, 교육 당시에 작성했던 코드를 바로 확인할 수 있게 하고 싶어서 생각해낸 아이디어였다.😆
• 모바일 '교육' 페이지에서 레이아웃이 깨지는 부분 수정, GSAP 스크롤트리거 삭제
  → 전날 모바일 버전을 처음 확인하고서 수정해야 할 부분이 많다는걸 알았는데 이것도 그 중 하나였다. 원래 '교육' 페이지도 GSAP으로 스크롤 내리면 카드가 하나씩 등장하도록 했었는데, 모바일에서 제대로 안 보여서 GSAP 효과를 전부 삭제했다.
• 모바일 '메인' 페이지에서 GSAP 스크롤트리거 속도 조절
  → 모바일에서는 마지막 요소가 안 보여서 조절했는데, start와 end의 퍼센트를 어떻게 조절해야 모바일에서 천천히 스크롤을 내려도 마지막 요소까지 전부 제대로 등장하는지 헷갈려서 한참 연구했다.😅
• root.scss에서 전체 페이지 배경색을 아이보리 색으로 변경, Header와 Footer도 변경
  → default 흰색으로 놔두는건 디자인을 하지 않은 느낌이고, 너무 밝아서 계속 고민이었다. 컬러를 직접 적용해보니 베이지는 너무 어두워서 아이보리로 결정했다.
• '다음 페이지 이동' 버튼 컴포넌트 제작, 디자인, 적용
  → 총 4개의 페이지에 모두 들어가는 버튼이라 컴포넌트화 시키는게 편할거 같아서 만들었다. 이것도 GSAP 스크롤 트리거 걸어봤는데, 아무래도 페이지 최하단에 있는 요소여서 그런지 모바일에서 제대로 안 나와서 GSAP은 일단 삭제했다.
  → 지금까지 만난 문제 대부분이 웹에서는 잘 보이는데 모바일이 문제다..😭
• '기술' 페이지 구조 설정 및 디자인
  → 드디어 기본 구조가 없었던 마지막 페이지의 제작을 완료했다. 영역마다 들어갈 뱃지들을 개별적인 JSON으로 만들어서, 페이지 컴포넌트에서 map()으로 돌리고 있다. 뱃지가 20개가 넘어서 페이지 컴포넌트에 바로 import하는건 비효율적이라 이렇게 관리하기로 결정했다.
• '메인' 페이지 타이핑 애니메이션 배경사진 설정
  → 아무 것도 없어서 허전한 느낌이라 애니메이션 되는 부분만 배경사진이 있으면 좋겠다고 생각했다. Unsplash에서 코딩과 관련된 사진을 찾아서 배경으로 넣고, 글자가 잘 보이도록 반투명 레이어를 덮었다. 배경사진을 넣으니까 미디어쿼리가 깨져서 다시 조절했다.

여기까지가 오늘의 작업내역이다.

웹 포트폴리오 페이지를 React로 리뉴얼하기로 결정하고 오늘이 제일 commit을 많이 한 것 같았는데, GitHub를 확인해보니 리뉴얼 첫날(17개)이랑 개수가 같다. 포트폴리오 발표 준비도 해야하고, 이력서와 PPT 포트폴리오도 수정해야 하는데.. 일단 리뉴얼 작업이 제일 급하니까 주말에 부지런히 작업해보자!👍

---

8월 10일 토요일

주말이라서 쉬고 싶었지만 얼른 리뉴얼 작업을 마무리해야 마음 편하게 PPT 포트폴리오와 이력서를 수정하고 발표 준비를 할 수 있어서 아침부터 부지런히 코딩을 했다. 오늘의 작업 기록은,

• '프로젝트' 페이지 수정하다가 Root.scss에서 Viewport 미디어쿼리 사이즈 수정
  → 브라우저로 미디어쿼리 확인하려고 개발자도구 열어서 서서히 줄였을 때, 자연스럽게 줄어들어야 하는데 480px에서 사진이 버벅이는 느낌이 있었다. scss 파일 간의 미디어쿼리 사이즈가 안 맞은게 문제여서 Root.scss에서 사이즈를 768px로 수정했다.
• '프로젝트' 페이지 아이템 제목 수정, 설명 추가
  → 내 포트폴리오를 보는 사람은 이게 "무엇을 어떻게 진행한" 프로젝트인지 모르기 때문에, 한눈에 알기 쉽도록 제목을 변경했다. 또한 프로젝트를 왜 만들었고 무엇을 느꼈는지 간단한 설명을 추가했다. 팀플은 느낀 점을 까먹었는데 수정해야지!😆
• '다음 페이지 이동' 버튼에 화살표 효과 추가, 코드 정리
  → 원래 gif를 받아서 페이지에 넣고 싶었는데, 배경이 투명한 gif를 도저히 찾을 수 없었다. chatGPT한테 코드만 가지고 gif 같은 화살표 효과 만들 수 있냐고 물어봤더니, CSS-in-JS 방법으로 만들 수 있다길래 얼른 만들어서 적용시키고 코드를 가독성 좋게 정리했다. About을 빼고는 전부 GSAP 효과가 없어서 정적인 페이지인게 걱정이었는데, 이렇게라도 해놓으니 마음에 든다.👍
• '다음 페이지 이동' 버튼 클릭 시 화면 상단 보여주기
  → 어제 오후부터 이게 가장 큰 숙제였다. 해당 버튼을 클릭해서 다음 페이지로 넘어가면 페이지 최상단을 보여줘야하는데, 내가 만든 컴포넌트는 늘 페이지 정중앙을 보여줬다. 그래서 다음 페이지로 넘어가면서 현재 스크롤 위치를 확인하고 자동으로 페이지 최상단이 보여지게 하고 싶었다. 개발자도구에서 console.log(window.scrollY)부터 확인했더니 페이지 정중앙이 0이어서 당황했다.😅
  이걸 어떻게 해결할 수 있을지 고민하다가 Header가 생각났다. Header는 모든 페이지 최상단에 있으니까, 이동하면 바로 다음 페이지에서 Header를 찾아서 보여줄 수 있도록 만들면 되겠다고 생각했다. 그래서 Header에서 useRef로 DOM 요소를 찾을 수 있게 설정하고, App.js에서 useEffect로 페이지 이동할 때마다 Header로 스크롤 되도록 만들었다.
• Vercel을 이용해서 배포 완료, 점검 및 오류 대응
  → 환경변수도 없고 컴포넌트 개수도 많지 않아서 배포하는데 오래 걸리지 않았다. 모든 페이지를 둘러보며 정상적으로 렌더링이 되는지 확인했는데 '기술' 페이지에서 뱃지가 제대로 보이지 않아서 JSON 파일을 수정했다. 프로젝트 제작 초기에 뱃지 이름이 소문자였는데, 개발하면서 대문자로 수정한게 문제였다. Vercel은 대소문자를 구분한다. 잊지 말자!
• README 정리, 포트폴리오 사이트 링크 변경
  → 리뉴얼 작업이 끝나서 이번 프로젝트 GitHub의 README 파일을 정리했다. 그리고 내가 포트폴리오 사이트 링크를 남겨둔 곳을 전부 찾아서, 기존 버전에서 리뉴얼된 버전으로 링크를 변경했다.

---

8월 11일 일요일

어제 배포까지 끝내고 ver.1 포트폴리오 주소를 적어놨던 곳들을 돌아다니며 주소를 변경했다. 그리고 오늘 배포된 페이지를 천천히 둘러보며 제대로 구현되지 못한 부분들을 수정했다. 오늘의 작업은,

• '프로젝트' 페이지 설명과 링크 이동 버튼의 연결 수정
  → 기존 설명에는 프로젝트의 기획 과정만 적혀있어서, 해당 프로젝트를 하면서 느낀 점과 배운 점을 추가로 작성했다. 그리고 버튼을 확인했는데 클릭해도 오픈이 되지 않아서 당황했다. 알고보니 코드는 제대로 써놓고 마지막에 onClick이 연결되지 않은 상태였다..😅
• '교육' 페이지의 버튼에 '새 창에서 열기' 설정 추가
  → 해당 페이지에서 오픈되는 것보다 새 창에서 열리는게 UX적으로 좋으니까 수정했다.
• '프로젝트' 페이지에 Image Carousel 추가
  → 프로젝트와 관련된 사진이 전부 1장만 들어있었던 부분이 마음에 걸렸다. 각각의 메인 페이지와 내 담당파트를 carousel로 보여주는게 좋을거 같아서 캡쳐를 준비해서 swiper slide 사용했다. 페이지네이션, 내비게이션 버튼도 swiper의 자체 CSS 때문에 그냥 지정하면 적용이 안 되니까 !important 걸어서 내 포트폴리오 사이트 분위기에 맞게 커스텀했다.🎨

---

여기까지가 웹 포트폴리오 페이지 리뉴얼 작업일지였다.

8월 6일 오전부터 시작했으니 꼬박 엿새가 걸린 작업이었는데, 이 정도면 작업 속도가 빠른건가?

아무튼 주말 안에 끝나서 다행이고, 이제 나는 포트폴리오 발표 준비하러 가야지..