[#0] React Portfolio :: 리액트로 개발자 포트폴리오 만들기, template을 이용한 react portfolio 로컬에 띄우기

이번에 진행할 사이드프로젝트?는 리액트를 이용한 포트폴리오를 배포하는 것이다.

기업 면접을 보거나 서류를 제출할 때 개발자 포트폴리오를 요구하는 경우가 꽤 있다.

그럴 때 마다 ppt로 제작해서 내고는 했었는데(다른 분들은 노션도 자주 이용하시는 것 같다) 이렇게 제출하기가 싫었다.

뭔가 깔쌈한 포트폴리오를 딱 링크로 내고싶었다.

 

그래서 리액트를 공부하는 김에 포트폴리오를 리액트로 만들어서 배포해두고, 포트폴리오 제출이 필요할 때 마다 제출해서 사용하려고 한다.

 

---

처음에 이 생각을 하고 밑 그림부터 내가 다 그리려고했었는데, 디자인 감각도 없고 프론트 개발은 더더욱 할 줄 몰라서 애를 많이 먹었다.

그래서 찾아보니까 react로 만들어둔 멋진 template이 이미 많이 풀려있었다!

열심히 free template을 찾아 헤맸고, 내가 선택한 포트폴리오는 이거

https://gatsby-simplefolio.netlify.app/

Gatsby Simplefolio

 

리액트 template을 내 로컬에 띄워보자

1. 원하는 템플릿을 찾고, 그 소스코드를 내 로컬 레포에 fork를 한다.

2. fork한 레포지토리에서 코드를 clone해서 내 로컬 파일로 내린다.

그렇게 한 후에 visual code를 열고 해당 폴더를 오픈하면 준비 끝!

그 후헤는...

2. Read me 파일을 읽고 하라는대로 한다.

3. npm 또는 yarn을 설치한다.

나는 yarn을 사용했고, 설치 방법은 , https://heropy.blog/2017/11/25/yarn/

Yarn 설치 및 사용법

4. yarn develop을 실행한다.

이 명령어를 실행하면 localhost:8080에 현재 프로젝트를 띄워볼 수 있다.

이 상태애서 이제 개발을 하면 되고, 내가 원하는 맛대로 포트폴리오를 바꾸면 된다!

 

 

사실 이 간단한 단계를 커쳐오는 과정에서 node-sass가 버전이 안맞아서 개고생을 했다...

node-sass version 7.0.1 is incompatible with 4.0.0 

이 에러가 계속 떠서 해결법을 찾아 해맸는데 결국, 여기 나온 해결법이 가장 적합했다.

https://stackoverflow.com/questions/70281346/node-js-sass-version-7-0-0-is-incompatible-with-4-0-0-5-0-0-6-0-0

Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0

 

 

오늘은 이름만 우선 바꿔보았다.

 

오늘까지 한 결과물은 

 

흠..최종 배포를 netflify로 할지 github page로 할지 고민이 된당

멀로하징?!?!?