🌙

☀️

이력서 홈페이지 💎 ▻ 1탄

September 18, 2019

나만의 이력서 홈페이지

💎 목차

서론 (Introduction)
본론 (Main)
결론 (Conclusion)

🌱 서론

여러분은 문서화로 된 이력서를 작성해 본 적이 있나요 ? 🤔

네! 입학원서, 회사 및 아르바이트 이력서를 작성한 경험이 있습니다.

때는 2017년 학교에서 주최한 포트폴리오 경진대회에서 진행할 당시

많은 학생들이 워드, 파워포인트, prezi를 통해 자신만의 포트폴리오를 제작하였습니다.

그러나 저는 Wix라는 홈페이지 제작 서비스를 사용하여 포트폴리오를 제작하였고,

그 결과 내용에 차이점도 존재하지만 뛰어난 실력으로 최우수상을 수상하였습니다.

이처럼 보는 사람의 이목을 집중시켜야 하며 나를 정확하게 표현해야 한다고 생각합니다. 👀

그러므로 투박한 문서로 된 포트폴리오 보다는 시각화에 특출난 웹 환경 이력서가 적합하다고 판단하였고

시간을 흘러 2️⃣0️⃣1️⃣9️⃣,

타 업체 서비스를 이용하지 않고 나만의 이력서 홈페이지를 제작하게 되었습니다.

⬆ 목차

🌹 본론

▸ 기술 스택

개발에 앞서 먼저 어떻게 개발을 해야하는지 생각을 해보았다.

웹 페이지를 구성할려면 기본적으로 프론트엔드, 호스팅 서버가 필요합니다.

▸ 프론트엔드

프론트 엔드란,

간단하게 사용자들이 보이는 웹 화면을 의미합니다.

해당 이미지는 웹 개발자들 사이에서 유명한 원피스 3대장 패러디 이미지이다.

좌측 부터 Vue (뷰), Angular (앵귤러), React (리액트)라 불리며

그 중에서 나는 React (리액트)로 개발을 진행하였습니다.

▸ 호스팅 서버

웹 사이트를 구축하기 위해서는 웹 서버가 필요합니다.

예를들어, 만들어지 홈페이지를 (www.domain.com) 입력하여 볼수 있도록 해주는 네임 서버입니다.

그러나, 소규모 웹 사이트 구축에 비용을 지불하기에는 부적합하다고 판단

무료 호스팅 서버인 ZEIT를 사용하였습니다.

▸ ZEIT

웹 사이트를 배포 지원해주는 서비스입니다.

사용 방법에 대해 차근차근 살펴보도록 하겠습니다.

1. npm now 설치

$ npm install -g now

now 글로벌 패키지를 통해서 편하게 cli를 통해서 접근이 가능합니다.

2. ZEIT 회원가입

ZEIT 홈페이지에 접속하여 회원가입을 진행하였습니다.

저는 Continue With GitHub를 선택하였다.

3. now cli 연동

$ now login
> UPDATE AVAILABLE The latest version of Now CLI is 16.2.0
> Please run `npm install -g now@latest` to update Now CLI.
> Changelog: https://github.com/zeit/now-cli/releases/tag/16.2.0
> Enter your email: [Your email Address]

now login cli를 통해서 회원가입한 email을 연동해 주었습니다.

해당 email에서 메일을 수신하면 정상적으로 접근이 가능해집니다.

메일이 도착하면 VERIFY를 클릭

성공적으로 이메일 인증이 되었다.

$ now login
> UPDATE AVAILABLE The latest version of Now CLI is 16.2.0
> Please run `npm install -g now@latest` to update Now CLI.
> Changelog: https://github.com/zeit/now-cli/releases/tag/16.2.0
> We sent an email to 'ljlm0402@naver.com' Please follow the steps provided
inside it and make sure the security code matches Eager Jaguar.
✔ Email confirmed
> Ready! Authentication token and personal details saved in "~/.now"

터미널에서도 이메일 인증을 확인할 수 있다.

4. 프로젝트 선택

$ now init
> UPDATE AVAILABLE The latest version of Now CLI is 16.2.0
> Please run `npm install -g now@latest` to update Now CLI.
> Changelog: https://github.com/zeit/now-cli/releases/tag/16.2.0
> Select example: (Use arrow keys)
amp
apollo
bash
charge
create-elm-app
❯ create-react-app
docz
express
express-twitter-dreamify
flaskex-postgresql
gatsby
go-image-to-ascii
gridsome
html-minifier
(Move up and down to reveal more choices)

now init 를 통해 다양한 프로젝트에서 원하시는 프로젝트를 선택합니다.

저는 리액트로 개발하기 위해서 create-react-app을 선택하였습니다.

프로젝트가 성공적으로 생성되었고 실행 해보겠습니다.

$ npm install

$ npm start

성공적으로 실행이 되었으며 웹 호스팅을 진행해보겠습니다.

5. 프로젝트 빌드

$ now
> UPDATE AVAILABLE The latest version of Now CLI is 16.2.0
> Please run `npm install -g now@latest` to update Now CLI.
> Changelog: https://github.com/zeit/now-cli/releases/tag/16.2.0
> Deploying ~/Desktop/create-react-app under ljlm0402
> Using project my-react-app
> Synced 1 file (506.69KB) [2s]
> https://my-react-app-gksvou2um.now.sh [v2] [2s]
⠏ Building...

> Ready! Aliased to https://my-react-app.ljlm0402.now.sh [in clipboard] [49s]