Github page로 포트폴리오 웹페이지 만들기

몇 줄 안되는 코드에서 부터 큰 프로젝트까지 이제까지 해온 것들을 정리하고, 데모로 실행시키기 위한 포트폴리오 용 웹 페이지를 만들어 볼까?

이러한 생각을 하고 나서 가장 먼저 떠올렸던 생각은 github의 page를 이용하는 것이였다.

구글링하면 React로 만들어 github에 page를 올리는 것까지 많은 글들이 있지만, 실제로 정리해 보면서 기록하고자 한다.

가장 먼저 개발환경 세팅을 해보자!

개발환경 세팅

가장 먼저 개발 환경을 세팅해 보겠습니다.

웹페이지는 react 를 사용하고, 빌드 된 파일을 gitpage repository에 올리는 방식으로 구성됩니다.

React 는 CRA를 많이 사용하고 있지만, 이번에는 webpack 과 babel을 사용해 react를 구성해 보고, 필요에 따라 loader 와 plugin을 사용해 보겠습니다.

항상 무언가를 시작할때 그것에 대하 이름을 지어야 하는데 이게 여간 신경쓰이는 일이 아닐수 없습니다.

저는 예전부터 사용해 왔던 닉네임 중에 hiio 라는 닉네임이 있습니다. 이 닉네임에 숫자 420붙여 hiio420이라는 프로젝트 명으로 사용해 보겠습니다.

먼저 React를 사용하기 위해서 node.js 를 설치해야합니다.

링크 : https://nodejs.org/ko/

OS에 맞춰 설치파일을 다운로드 받아 설치!!! 합니다.

설치가 완료되면 vscode를 실행합니다.

이제 로컬디렉토리를 만들어 줍니다.

프로젝트 관리를 위한 디렉토리이므로 저는 project → hiio420이라는 디렉토리를 만들고 이 디렉토리에서 VSCode를 실행시켰습니다.

ctrl - ` 또는 메뉴에서 터미널을 열러 줍니다.

node 와 npm 이 잘 설치 되었는지 보기위해

node --version
npm --version

각각 명령어를 입력해 봅니다.

잘 설치가 되었습니다.

패키지 관리를 위해 yarn 을 사용할 수도 있지만, 이번에는 npm만 사용하겠습니다.

이제 루트 디렉토리에 npm init 으로 초기화 시켜 줍니다.

npm init

터미널에 npm init 을 입력해주면, 아래와 같이 package.json을 구성하기 위한 설정 항목을 입력 받습니다.

엔터엔터엔터! 나중에 수정해 주기로 하고 그냥 엔터를 쳐 줍니다.

그러면 package.json 파일이 생겼습니다.

이제 이 package.json 파일을 통해서 dependency 라던지 script , homepage 등를 입력하고 관리하면 됩니다.

시작이 반이라고 반정도 완료 된것 같습니다만, 아직 많이 남은것도 같습니다.

이제 필요한 것들을 하나씩 설치해서 React 를 실행해 보도록 하겠습니다.

끝!