Hiio.com

Centos Version 7.9

sudo yum install -y yum-utils
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

sudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

sudo systemctl start docker

sudo docker run hello-world

Centos Version 7.9

vi /etc/sysconfig/selinux 

SELINUX=disabled

reboot

이전까지 헤더를 만들어 보았습니다.

이제 우측에 배치시킨 버튼을 누르면 사이드바가 나오게끔 만들어 보려고 합니다.

1. 버튼 클릭시 useState의 set을 통해 toggle 을 변경시켜 줍니다.

2. 변경된 toggle을 통해 현재 버튼 상태를 가져오고, True, False 일때 각가의 상태에 맞춰 사이드바를 노출시키고 사라지게 하면 될거 같습니다.

먼저 toggle 초기 상태를 false 로 해서 hooks을 만들어 줍니다.

// components/Header/index.js
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import logo from "../../resources/svg/logo.svg";
import "./header.css";

export default function Header() {
  const [toggle, setToggle] = useState(false);
  return (
    <header>
      <div id="logo">
        <img src={logo} alt="logo" />
      </div>
      <div id="gnb">
        <FontAwesomeIcon icon={faBars} />
      </div>
    </header>
  );
}

이제 이 FontAwesomIcon 컴포넌트를 클릭하면 toggle 의 상태를 바쭤 주고 이 상태를 바탕으로 icon property를 faBars와 faClose로 바꿔 줍니다.

// components/Header/index.js
import { faBars, faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useCallback, useState } from "react";
import logo from "../../resources/svg/logo.svg";
import "./header.css";

export default function Header() {
  const [toggle, setToggle] = useState(false);

  const onIconClick = useCallback(() => {
    setToggle((p) => !p);
  }, []);
  return (
    <header>
      <div id="logo">
        <img src={logo} alt="logo" />
      </div>
      <div id="gnb">
        <FontAwesomeIcon
          icon={toggle ? faClose : faBars}
          onClick={onIconClick}
        />
      </div>
    </header>
  );
}

이제 사이드바에 대한 태그 구조를 작성해 줍니다.

// components/Header/index.js
import { faBars, faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useCallback, useState } from "react";
import logo from "../../resources/svg/logo.svg";
import "./header.css";

export default function Header() {
  const [toggle, setToggle] = useState(false);

  const onIconClick = useCallback(() => {
    setToggle((p) => !p);
  }, []);
  return (
    <header>
      <div id="logo">
        <img src={logo} alt="logo" />
      </div>
      <div id="gnb">
        <FontAwesomeIcon
          icon={toggle ? faClose : faBars}
          onClick={onIconClick}
        />
      </div>
      <nav>
        <ul>
          <li>
            <span>Introduction</span>
          </li>
          <li>
            <span>Work</span>
          </li>
          <li>
            <span>Demo</span>
          </li>
          <li>
            <span>Component</span>
          </li>
          <li>
            <span>Blog</span>
          </li>
        </ul>
      </nav>
    </header>
  );
}

로고옆에 붙어 있어 버리네요 

Style을 입혀 줍니다.

1. nav에 relative position 값을 주고 , ul에는 absolute 값을 줘서 오른쪽에 붙여 줍니다.

2. toggle 상태에 따라 className을 변경시켜 sidebar를 나타냈다 없앴다 해줍니다.

먼저 nav 태그의 스타일 부터 입혀줍니다.

nav {
  margin-top: var(--headerHeight);
  width: 100%;
  position: relative;
  background-color: rgba(180, 180, 180, 0.5);
  height: calc(100vh - var(--headerHeight));
  z-index: 998;
}

nav > ul {
  position: absolute;
  right: 0;
  height: calc(100% - 16px);
  width: 60vw;
  max-width: 300px;
  background-color: white;
  z-index: 999;
  float: right;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
}

nav 의 className에 2번에 해당하는 코드를 작성해 줍니다.

// components/Header/index.js
import { faBars, faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useCallback, useState } from "react";
import logo from "../../resources/svg/logo.svg";
import "./header.css";

export default function Header() {
  const [toggle, setToggle] = useState(false);

  const onIconClick = useCallback(() => {
    setToggle((p) => !p);
  }, []);
  return (
    <header>
      <div id="logo">
        <img src={logo} alt="logo" />
      </div>
      <div id="gnb">
        <FontAwesomeIcon
          icon={toggle ? faClose : faBars}
          onClick={onIconClick}
        />
      </div>
      <nav className={toggle ? "show" : "hide"}>
        <ul>
          <li>
            <span>Introduction</span>
          </li>
          <li>
            <span>Work</span>
          </li>
          <li>
            <span>Demo</span>
          </li>
          <li>
            <span>Component</span>
          </li>
          <li>
            <span>Blog</span>
          </li>
        </ul>
      </nav>
    </header>
  );
}

show , hide class에 display block,none 값을 각각 작성해 만들어 줍니다.

이제 ul 안에 있는 li를 원하는데로 스타일을 입혀 주면 됩니다.

nav > ul > li {
  border-bottom: 8px solid #d9d9d9;
  width: calc(100% - 60px);
  cursor: pointer;
}
nav > ul > li > span {
  display: inline-block;
  margin: 8px;
  font-size: 22px;
}
nav > ul > li:hover {
  padding-bottom: 8px;
  background-color: #3eebad;
  border: none;
  font-weight: 600;
}

끝!!!

PortFolio : https://hiio420.com  

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

포트폴이로 사이트를 만들면서 그냥 보여주는 것만 하면 재미가 없을거 같기때문에 Cloud 서버를 이용해 데이터를 받아와 보여 주는 방식을 취해 보면 어떨까 해서 시도해 보려고 합니다.

Cloud 서비스를 이용할 수 있는 곳은 아마존, MS,구글,오라클 등등 있지만, AWS나 GCP는 기존에 사용을 해본 경험이 있어, 아직 사용해 보지 못한 MS Azure를 이용해 Cloud VM 인스턴스를 생성해 이곳에 서버 어플리케이션을 배포해 보면 어떨까 싶어 도전!

Azure의 경우 한달기간동안 사용 가능한 크레딧을 제공하고, 이 기간이 끝나고 나면, 12개월 동안 사용가능한 서비스들이 있습니다. 12개월동안 사용해보고 나서 어떻게 하면 좋을지는 그때 가서 결정을 해봐야 겠네요.

https://azure.microsoft.com/ko-kr/free

위 사이트로 이동하면 무료 서비스 내용에 대해 확인이 가능합니다.

저는 이미 MS 계정이 있기때문에 따로 회원가입은 하지 않고 진행했습니다.

로그인을 하게 되면 Azure 체험 계정 만들기 페이지가 나오게 되고, 카드 검증을 하게 됩니다.

계정이 생성되면, Azure Portal로 이동합니다.

이동한 Portal에서 가상머신 만들기를 선택해 줍니다.

처음에 프로젝트 내용을 입력해야합니다. 그냥 우선은 제가 쓰고 싶은데로 썼습니다.

OS 이미지는 Ubuntu를 사용했습니다.

이후 관리자 계정을 선택할 수 있습니다. 인증형식은 SSH와 암호 방식이 있는데, 저는 암호방식이 더 평해서 암호방식으로 선택을 했습니다. 인바운드에는 80,443,22를 기본적으로 선택했습니다.

디스크에서 많이 고민을 했던거 같습니다. 무료로 사용하고 싶은데 어떻게 선택하면 좋을까 많이 고민을 하다 그냥 64GB 프리미엄 SSD로 선택을 하고, 데이터 디스크도 64GIB 로 2개 추가해 줬습니다.

네트워크는 공용 ip 를 새로 만들어 주고 보안그룹도 새로만들어 줬습니다.

port 는 22 ,80,443,3306,21,3000,5000 번대를 열어 줬습니다.

관리의 경우 기본 설정 그대로 했습니다.

모니터링을 선택할까 하다가 하지는 않고 그냥 넘어 갔습니다.

고급 - 태그 는 그냥 넘어가고 만들기를 클릭해주면 VM 이 만들어 지고 배포 진행 단계로 넘어 갑니다.

배포가 완료 되었네요.

생성된 고정 ip 의 22번 port로 putty를 이용해 접속합니다.

관리자 계정을 입력하고 접속!!!

끝!

만드는 건 어렵지 않은데, Cloud는 항상 가격 걱정과 어떤 설정을 하는게 좋을지에 대한 고민이 많아 지내요 이 부분에 대한 공부를 더 진행해서 따로 포스팅을 올리는게 좋을 겉 같기도 합니다.

PortFolio : https://hiio420.com  

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

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

먼저 화면을 구현하기위해 작성한 화면 구성은 크게 로고 + 상단 텍스트 + 하단 텍스트 +페이지 링크 네비게이션 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