Hiio.com

이제 화면을 구현해 보는 단계입니다.

먼저 화면을 구현하기위해 작성한 화면 구성은 크게 로고 + 상단 텍스트 + 하단 텍스트 +페이지 링크 네비게이션 4부분으로 나눌 수 있습니다.

양옆으로 70px 정도로 padding이 있고 각 세로로 가운데 정렬이 필요합니다.

div id="main" 태그안에 id="intro" 태그를 추가하고 총 4개의 div 태그를 추가해 줍니다. 

1. 첫번째 div 안에 3개 div 를 추가해 주고 각각 FOR, FULL STACK , DEVELOPER 텍스트를 넣어 주었습니다.

2. 두번째 div 안에는 img 태그를 사용해 로고 이미지를 넣어 줬습니다.

2-1. 로고 이미지는 svg 파일로 resources 디렉토리에 저장 되어있어 import logo form ~~ 로 svg 파일을 불러와 

<img src={logo} alt="logo" /> 로 넣어 줍니다.

3. 3번째 div 안에는 1개의 div 를 추가하고 각각 EXPERIENCE 를 입력해 줍니다.

4. 4번째 div 안에는 4개의 div 를 추가하고 각각 INTRODUCTION , WORK, DEMO ,BLOG 를 입력해 줍니다.

// src/pages/Main/main.js

import logo from "../../resources/image/svg/logo.svg";

export default function Main() {
  return (
    <div id="main">
      <div id="intro">
        <div>
          <div>For</div>
          <div>FULL STACK</div>
          <div>DEVELOPER</div>
        </div>
        <div>
          <img src={logo} alt="logo" />
        </div>
        <div>
          <div>EXPERIENCE</div>
        </div>
        <div>
          <div>INTRODUCTION</div>
          <div>WORK</div>
          <div>DEMO</div>
          <div>BLOG</div>
        </div>
      </div>
    </div>
  );
}

CSS Style 입히기

이제 style을 입혀 볼 차례입니다. style은 css를 사용하려고 합니다. 

Main.js 와 같은 디렉토리에 main.css를 만들고 import 해 줍니다.

import "./main.css";

id="main" 의  스타일을 먼저 정의해 줍니다. 

너비는 100%로 하고, 높이는 현재 브라우저 높이의 크기만큼 주었습니다. flex 속성을 통해서 가로+세로 가운데로 정렬 시켜 줍니다.

/* src/pages/Main/main.css */

#main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

id = "intro" 의 스타일을 넣어줍니다.

intro의 경우에는 main과 똑같이 flex 속성을 가지지만, flex-direction 값으로 column 을 주어 세로로 flex 속성 값들을 반영해 줍니다. 각 태그들의 사이를 8px 정도로 띄어줍니다. width는 100% 이지만, 400px은 넘어가지 않게 max-width 값을 주었고, 양옆으로 padding 70px 씩 입력해 줍니다.

/* src/pages/Main/main.css */

#main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
#intro {
  width: 100%;
  max-width: 400px;
  padding: 0 70px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

이미지 로고가 너무 크기 때문에 화면에서 넘쳐 스크롤이 생깁니다.

img 의 max-width 값을 100% 로 해서 intro의 너비에 맞게 맞춰 줍니다.

/* src/pages/Main/main.css */

#main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#intro {
  width: 100%;
  max-width: 400px;
  padding: 0 70px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#intro img {
  max-width: 100%;
}

이제 이미지 로고를 기준으로 위 아래에 위치한 텍스트들의 스타일을 입혀야 합니다. 

이때는 따로 className이나 id 값을 부여 하지는 않고 nth-child 를 이용해 스타일을 입혀 보려고 합니다.

먼저 

1. intro의 첫번째 div를 선택해 주고, font-weigh,font-size ,display,gap 속성의 값들을 입력해 줍니다.

font-size의 경우에는 clamp 를 이용해서 모바일 - 데스크탑 화면 / 해상도 너비 별로 크게 벗어 나지 않게 입력해 주었습니다.

#intro > div:nth-child(1) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  font-size: clamp(10px, 6vw, 32px);
}

3. 3번째 div 도 1번째 div와 마찬가지로 clamp를 활용해 font-size를 설정해 주고 text-align으로 오르쪽으로 정렬 시켜 주었습니다.

/* src/pages/Main/main.css */

#main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#intro {
  width: 100%;
  max-width: 400px;
  padding: 0 70px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#intro img {
  max-width: 100%;
}

#intro > div:nth-child(1) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  font-size: clamp(10px, 6vw, 32px);
}


#intro > div:nth-child(3) {
  text-align: right;
  gap: 8px;
  font-size: clamp(10px, 5vw, 30px);
}

이제 마지막 4번째 div 입니다.

4. 4번째 div의 경우 3번째 div와 간격이 더 있기 째문에 margin-top 속성의 값을 설정해 주었습니다. flex, column,gap 으로 각 div들의 간격을 맞춰 주었습니다.

5. 4번째 div 안에 속해 있는  자식 div elements들의 height를 임의로 맞춰 주고 border-bottom으로 밑에 라인을 생성해 주었습니다. box-sizing 을 통해서 테두리를 기준으로 크기를 정해 줍니다.

/* src/pages/Main/main.css */

#main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#intro {
  width: 100%;
  max-width: 400px;
  padding: 0 70px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#intro img {
  max-width: 100%;
}

#intro > div:nth-child(1) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  font-size: clamp(10px, 6vw, 32px);
}

#intro > div:nth-child(3) {
  text-align: right;
  gap: 8px;
  font-size: clamp(10px, 5vw, 30px);
}

#intro > div:nth-child(4) {
  margin-top: 27px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: clamp(10px, 5vw, 22px);
}

#intro > div:nth-child(4) > div {
  box-sizing: border-box;
  border-bottom: 8px solid #d9d9d9;
  height: 36px;
}

어느정도 제가 기획한 화면에 가깝게 나온거 같아 괜찮은거 같습니다.

이제 각 아래에 위치한 INTRODUCTION,WORK,DEMO,BLOG 부분에 effect 와 링크를 걸어보는 포스트를 다음에 작성해 보겠습니다. 

PortFolio : https://hiio420.com  

Figma: https://www.figma.com/file/WJVwsW99LwZ2B1W3PKDASM/Hiio420?node-id=0%3A1&t=W1IV0P9M12hXOVpp-1

이번 포트폴리오는 모바일 환경에 맞춰 만들어 보려고 합니다. 

먼저 포트폴리오 사이트 접속시 제일 처음 보이게 되는 Main Page를 만들어 보려고 합니다.

원하는 모양으로 화면 계획을 잡기 위해서 Figma를 이용해 하나씩 그려나가볼 생각입니다.

Figma 작업은 하단의 링크로도 확인을 할 수 있습니다.

먼저 기존에 있던 코드들을 수정해 주겠습니다.

- index.css 에는 기존에 있던 코드들을 지우고 reset css style을 입력해 줍니다.

https://hiio.tistory.com/101

/* index.css */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

App.js 는 <div className="App"> 안에 있는 태그들을 모두 삭제 해 줍니다.

// App.js

import React from "react";
import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;

App.css 는 내용을 아예 삭제해 줍니다.

패키지 설치

페이지 route를 위해서 react-router-dom 을 설치해 주겠습니다.

npm install --save react-router-dom

디렉토리 만들기 

src 디렉토리 안에 pages 디렉토리를 만들고 그 안에 Main 디렉토리를 만들어 줍니다.

Main.js 코드 작성

React 에서 컴포넌트는 대문자로 시작!

id 가 main 인 div 태그를 하나 생성하고 그안에 텍스트를 넣어 주었습니다.

// src/pages/Main/main.js

export default function Main() {
  return <div id="main">메인페이지입니다.</div>;
}

App.js -> Route 추가

이제 Main 페이지로 접속할 주소를 / 로 routing 하는 코드를 App.js에 추가 해 주겠습니다.

Routing 은 react-router-dom을 사용합니다. 

BrowserRouter-> Routes -> Route 로 계층을 만들어 줍니다.

Route 컴포넌트의 속성값으로 path = "/" element 는 위에서 만들어 둔 Main 컴포넌트를 넣어줍니다.

// App.js

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.css";
import Main from "./pages/Main/Main";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Main />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

npm run start로 실행하면 

변경된 화면을 볼 수 있습니다.

PortFolio : https://hiio420.com  

Figma: https://www.figma.com/file/WJVwsW99LwZ2B1W3PKDASM/Hiio420?node-id=0%3A1&t=W1IV0P9M12hXOVpp-1

github pages를 사용하기위해 만들었던, repository 이름 그대로 도메인을 사용해도 되지만, 저는 제가 구입한 도메인을 연결해서 사용하고 싶었습니다.

도메인은 hiio420.com 으로 가비아에서 구입했습니다. https://www.gabia.com/

가비아에 로그인 후 My가비아에 들어가면 현재 이용중인 도메인 1개가 있습니다.클릭!

관리로 들어가 줍니다.

관리페이지에 있는 DNS 정보에서 도메인 연결 설정 > 수정으로 들어가 줍니다.

github에서는 CNAME으로 현재 github page 주소를 적어 줍니다. 뒤에 .을 붙여줍니다.

또는

A 에 아이피를 입력해 줍니다.

저는 그냥 다 했습니다.

저장!

가비아에서 설정이 끝나면

Gihub repository에서 settings > pages 에 있는 Custom domain에 구입한 도메인을 입력하고 저장해 줍니다.

Repository 세팅이 끝나면 gh-pages 브랜치에 반영되는 파일에 CNAME 파일이 필요합니다.

public > CNAME 파일에도 도메인을 작성하고 deploy 해줍니다.

반영!!

https://hiio420.com 

https://docs.github.com/ko/pages/getting-started-with-github-pages/creating-a-github-pages-site

github pages를 사용하기 위해서는 3가지가 필요합니다.

1. git

2. github repo

3. gh-pages

먼저 https://git-scm.com/downloads 에서 파일을 다운로드 받아 설치해 줍니다.

github에 회원가입 후 접속하면 repository를 만들 수 있습니다.

New 버튼을 클릭하면 repository 생성 페이지로 이동하게 되고, 필요한 내용을 작성합니다.

github pages를 사용하기 위해서 repository는 <username>.github.io 의 이름을 가져야하고, public으로 만들어줘야 합니다.

git 초기화 후 원격 레포지토리를 등록해 줍니다.

git init
git remote add origin "https://github.com/hongsamhc2/hongsamhc2.github.io.git"

gh-pages 를 이용해 배포를 진행하기위해서 설치해 줍니다.

npm install gh-pages --save-dev

package.json 의 scripts 부분에 명령어를 추가해 줍니다.

    "deploy": "gh-pages -d build",
    "predeploy": "npm run build"​

이제 npm run deploy를 실행하면 build 후에 생성된 파일들이 원격 레포지토리 gh-pages 브랜치에 반영되게 됩니다.

npm run deploy

github의 settings 탭에서 pages로 들어갑니다.

Branch 섹션에서 gh-pages를 선택하고 save해 줍니다.

원격 레포지토리에 코드를 올리고 실제 사이트에 반영되기 위해서는  조금 시간이 필요합니다.

이제 https://hongsamhc2.github.io/ 에 접속하면 build된 코드가 반영된것을 볼 수 있습니다.

React 개발환경을 구성하는 방법은 webpack + babel 부터 하나씩 하나씩 하는 방법도 있으나, 그냥 CRA ( create-react-app) 을 해서 리액트 프로젝트에 필요한 부분을 만들어 주자

npx create-react-app <프로젝트명>

https://create-react-app.dev/

공식 사이트로 접속을 하면 필요한 Document들을 보고 따라해 볼 수 있다. 

추가적으로 --template 인자를 통해서 원하는 template 프로젝트를 만들수 있는데, typescript,pwa등등 나는 이번에는 pwa로 한번 포트폴리오 프로젝트를 시작해 보려고 한다.

npx create-react-app <프로젝트명> --template cra-template-pwa

PWA (Progressive Web App) 프로그레시브 웹 앱
웹 앱과 네이티브 앱의 장점을 모두 제공하는 진보된 형태의 웹 애플리케이션 개발
Google I/O 2016에서 처음 소개
오프라인에서 동작설치가 가능쉬운 동기화푸시 알림, 등을 만족해야한다.
출처 - https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Introduction

설치가 쭉쭉쭉 되고, 완료되면

위와 같이 디렉토리와 파일들이 생성된 걸 볼 수 있다.

--template cra-template-pwa로 생성된 프로젝트와 기본 cra와 다른점 중 하나는 service-worker 의 유무이다.

pwa에 관련된 포스팅이 아니므로 우선 넘어가기로 하고, 정상적으로 실행이 되는지 npm run start를 해보자.

npm run start

정상적으로 잘 실행이 된다 !!! 야호