[React] React로 만든 이력서 Github Pages로 배포 및 후기

서론

학교를 졸업하고 취업을 준비한 지도 8개월이 지났습니다.

 

부족했던 자료구조와 알고리즘 실력을 키우기 위해 백준과 같은 온라인 저지에서 문제도 많이 풀어보고,

 

종만북이라 불리는 알고리즘 문제 해결 전략 도서도 구매하여 읽고 따라 해보았습니다.

 

코딩 테스트라는 기본적인 관문을 통과하기 위해 어느 정도는 준비가 되었다고 판단하여

 

세부 진로에 대해 계속 고민하던 중 웹 개발 쪽으로 취업하기로 마음먹었습니다.

 

학부 시절에 했던 프로젝트들을 쭉 살펴보니 웹 프로젝트가 두세개정도 있었지만,

 

라이브러리나 프레임워크가 없는 간단한 html, css, js의 조합으로 프론트엔드를 개발하였고,

 

서버 사이드 언어로 php를 선택해 개발하였었습니다.

 

어느 것하나 깊게 파보지 못한 초짜의 입장에서 어느 언어와 개발 환경이 좋다 안 좋다 평가할 순 없지만,

 

React나 Spring과 같은 라이브러리나 프레임워크를 한 번도 경험해보지 못한 게 마음에 걸려

 

프론트엔드 라이브러리인 React를 먼저 공부해보기로 마음 먹었습니다.

 

서버가 필요 없는 정적 페이지를 먼저 만들어보려 하다

 

예전부터 생각했던 웹 이력서를 리액트로 만들어보면 어떨까 하는 생각이 들었습니다.

 

Github 저장소안의 README.md 파일을 이용해 Markdown으로 이력서를 만들거나,

 

Notion과 같은 플랫폼을 이용하는 법, 워드 프로세서 같은 프로그램을 이용해 만드는법도 있지만,

 

React를 공부하는 김에 Github Pages를 이용해 웹 이력서를 호스팅하는 방법이 제일 나은 것 같다고 판단되었습니다.

 

React의 기본 문법을 공부한 뒤, React 프로젝트를 바로 Github Pages에 호스팅했고 이력서 개발에 돌입했습니다.

 

공부를 끝마친 뒤 개발을 시작하는 방법도 있지만,

 

저는 개인적으로 개발하며 모르는 부분을 바로 공부하는 방법이 여태까지 좀 더 잘 맞았던 것 같습니다.

 

React 프로젝트를 Github Pages에 호스팅하는 방법은 다른 개발자 선배님들의 글들을 여럿 참고하여 성공했고

 

별로 어렵지 않은 과정임에도 여러 번의 시행착오가 있었기에 까먹지 않기 위해 블로그에 포스팅도 해두었습니다.

 

https://hackids.tistory.com/126

[React] Github Pages를 이용해 React 프로젝트 배포하기

 

개발 과정 및 후기

처음 개발을 시작할 때에는, React에 익숙하지 않아 필요한 큰 주제만을 컴포넌트로 분리하여 개발하였습니다.

 

초기 컴포넌트들

 

이력서에 들어갈 데이터도 분리가 안 돼 있거니와, 각 컴포넌트(Header, Skill, Content, Footer)들도

 

중복되는 부분이 존재함에도 하위 컴포넌트로 쪼개져 있지 않았습니다.

 

며칠간 고군분투한 끝에 주제별 컴포넌트들을 아래와 같은 형태로 분리하였습니다.

 

 

주제별 컴포넌트를 폴더로 만들어 그 안에 분리된 컴포넌트들을 넣었죠.

 

Subject 컴포넌트는 모든 컴포넌트에서 공통으로 가져다 쓰기 때문에 외부에 두었습니다.

 

컴포넌트 구조

 

기본적인 틀

 

기본적인 틀을 완성한 후 제가 원했던 기능들을 추가하려 하니 쉽지 않을 것 같은 작업이 몇 개 남아있었습니다.

 

바로 이미지 모달 기능과 PDF Viewer 기능 그리고 반응형 웹페이지 구현에 필요한 작업입니다.

 

생각과 달리 모달 기능을 구현하는 게 쉽지 않았는데,

 

여러 소스를 참고하고 배우면서 틀을 잡는 데만 몇 시간이 걸렸던 것 같습니다.

 

간단한 함수만으로 다이얼로그 창 같은 것을 띄울 수 있는 다른 개발환경과는 달리

 

css만으로 모달 기능을 구현하려니 막막했고 가뜩이나 익숙지 않은 React 코드들과 접목하려니 더더욱 그랬습니다.

 

relative와 absolute 같은 헷갈리는 position 속성의 값들도 한몫한 것 같습니다.

 

이미지 모달 기능

 

PDF Viewer를 구현하는 것은 생각보다 간단했습니다.

 

라이브러리 같은 것을 써서 구현해야 하나 싶어 여러 라이브러리를 다운받고 여러 시도를 했습니다.

 

로컬에 있는 PDF 파일을 크롬에서 열면 열리듯 개발하고 싶었는데 크롬에서 PDF 파일을 열었을 때

 

뜨는 웹 페이지의 소스를 볼 생각은 안 하고 무언가 있겠지 하며 며칠을 소요했는데,

 

알고 보니 embed 태그만을 사용해도 제가 원하는 뷰어를 완성할 수 있었습니다..

 

새로운 페이지에 embed 태그만을 두고

 

embed {
    position: absolute;
    width: 100%;
    height: 100%;
}

 

해당 css 속성을 적용하기만 하면 됩니다.

 

PDF Viewer 기능

 

반응형 웹페이지 구현의 경우 개념을 이해하기가 너무 어려웠습니다.

 

viewport, media query, flex 등 많은 개념을 접했을 때 조금 난감했는데

 

이해를 어느 정도 하고 나니 작업이 굉장히 수월했고, 재미가 있었습니다.

 

신기하기도 했구요.

 

지금에야 이력서 배포를 끝낸 지 얼마 되지 않아 기억이 생생한데,

 

어려웠던 과정들은 블로그에 자세히 포스팅할 생각입니다.

 

반응형 웹페이지

 

완성된 모습

소개글과 Skills 부분

 

Projects 부분

 

이력서를 완성하고 이후 이력서 템플릿을 만들어 배포하였습니다.

 

https://github.com/Lee-Minhoon/simple-react-resume-template

GitHub - Lee-Minhoon/simple-react-resume-template: A simple React + Github Pages powered resume template for developers