TwentyTwentyOne

Github page로 포트폴리오 웹페이지 만들기현재 프로젝트로 진행하는 React로 github page만들기에서 about과 work 페이지로 이동할수 있는 route설정과 header를 만들어 layout을 통해 페이지에 모두 반영하는 부분까지 해보았습니다.header로 다른 페이지로의 이동은 잘 되지만, 직접 url 을 입력하거나, 새로고침 시에는 404 에러가 나오는 문제가 있습니다.해당 url 로 직접 접속할 경우 도메인이 연결된 github repository의 branch에는 라우트에 해당하는 디렉토리와 index.html 페이지가 없기때문에 404에러를 발생시킵니다.이문제를 해결하기위해 404.html 을 만들어 중간에 소스코드를 redirect 시켜주는 방법이 있지만, 이것 보다 각각 ..

Github page로 포트폴리오 웹페이지 만들기페이지를 만들다 보면 같은 양식이 반복될 경우가 있습니다.이러한 양식을 Layout component로 만들어 사용하면, 편리하게 적용시킬수 있습니다.이전에 만든 header가 들어가 있는 Layout을 만들어 봅시다. 1. Layout 디렉토리 만들기먼저 src→components 디렉토리 안에 layout 디렉토리를 만들어 줍니다.이전과 마찬가지로 해당 디렉토리 안에 index.js 파일을 만들어 주고 Layout이라는 함수를 만들어 export 시켜 줍니다. // src/components/layout/index.js // modules import React from "react"; const Layout=()=>{ return } export de..

Github page로 포트폴리오 웹페이지 만들기Main 페이지를 제외한 About 과 Work 페이지에는 헤더를 넣어 nav를 통해 다른 페이지로 이동할수 있게끔 해줍니다.이때 사용하는 소스들은 Main에 사용된 svg들을 Nav 컴포넌트로 이동 → 변경 한뒤 스타일 및 코드를 통해 다른 스타일로 만들어 주려고 합니다. 시작!!! components 만들기먼저 src 디렉토리에 components 디렉토리를 생성하고 그안에 nav 와 header 디렉토리를 각각 생성해 줍니다. 이제 nav → index.js 에 main→index.js에 있는 소스코드를 옮겨 줍니다.스르륵 추가적으로 변경된 사항은 window.location.pathname을 통해 ‘/’가 아닐경우 HIIO420 텍스트를 다른 텍스트..

Github page로 포트폴리오 웹페이지 만들기이제 about과 work 페이지를 만들어 route 설정을 통해서 접속 할수 있게끔 해주어야 합니다.그전에 현재까지 진행된 사항 중 몇가지 설정을 변경 시켜 주겠습니다. 1. webpack resolve aliasnpm 으로 설치된 모듈이외에 css나 svg 또는 component 파일들을 import 시킬때 상대 경로를 이용해 불러오고 있습니다. // example import GITHUB from "./resources/images/common/GITHUB.svg"; 파일의 위치를 옮겨 줄때 만다. 경로를 변경 해줘야하는 번거로움이 생기므로 webpack의 resolve 설정에 alias를 추가 해 줍니다. // webpack.config.js .....

Github page로 포트폴리오 웹페이지 만들기이전 글에서까지 Main 페이지에 넣을 텍스트들을 svg로 만들어 styled-components를이용해 배치하였습니다.이번에는 반응형 페이지 작업을 위해서 svg에 viewBox를 추가하고, styled-components에 media query를 추가해 보겠습니다. 1. viewBox!반응형으로 만들어 주기위한 첫번째 작업으로 svg에 %를 먹이기 위해 viewBox 속성을 추가해 주어야 합니다.viewBox는 (x,y,w,h)로 되어 있습니다.여기서 x,y는 0으로 고정하고, w와 h는 svg의 width 와 height속성을 입력해 줍니다.useEffect를 사용해 마운트 시 viewBox를 속성을 처음에만 추가 해주도록 합니다.// Main.js ..

Github page로 포트폴리오 웹페이지 만들기기본적인 설정 및 세팅을 이전까지 해보았습니다.앞으로 진행하면서 변경되거나, 추가되는 세팅은 차차 하기로하고 먼저 접속했을때 보여지는 첫 페이지를 만들어 봅니다.첫 페이지를 Main 페이지라고 하고, 어떻게 만들지 고민을 해봤습니다.“Simple is the Best” 그리고“Less is More”라고 했던가요. 디자인적인 요소는 프로젝트가 채워 질때마다 변화할 수도 있을듯 합니다. 사실 아직 무작정 만들어보기 단계이므로 우선은 만들어 봅니다. 0. 어떻게 만들까?제가 가장 처음 웹사이트를 보고 한번 따라 해보고 싶다고 생각한 곳은 OMA 라는 회사의 사이트 입니다.https://www.oma.com/OMA 는 건축사무사이고, 이 건축사무에서 한 프로젝트..

Github page로 포트폴리오 웹페이지 만들기github page를 사용할때 기본적으로 접속가능한 url을 사용하여도 괜찮지만, 좀더 나만의 페이지를 가지기 위해 도메인을 구입해 연결해 보고 싶었습니다.https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site도메인은 가비아에서 구입하여 DNS를 등록 수정합니다.먼저 github에 가비아에서 구입한 domain을 등록해 줍니다. 1. custom domain 등록 page가 있는 repository에 settings→pages 부분을 보시면 custom domai..

Github page로 포트폴리오 웹페이지 만들기몇 줄 안되는 코드에서 부터 큰 프로젝트까지 이제까지 해온 것들을 정리하고, 데모로 실행시키기 위한 포트폴리오 용 웹 페이지를 만들어 볼까?이러한 생각을 하고 나서 가장 먼저 떠올렸던 생각은 github의 page를 이용하는 것이였습니다.구글링하면 React로 만들어 github에 page를 올리는 것까지 많은 글들이 있지만, 실제로 정리해 보면서 기록하고자 시작된 것인데 이번에는 github에 repository를 만들고 gh-pages를 통해서 빌드 파일을 배포해 보겠습니다.0. 이름은?항상 무언가를 시작할때 그것에 대하 이름을 지어야 하는데 이게 여간 신경쓰이는 일이 아닐수 없습니다.저는 예전부터 사용해 왔던 닉네임 중에 hiio 라는 닉네임이 있습니..

Github page로 포트폴리오 웹페이지 만들기이제 react로 페이지를 만들기 위해 필요한 것들을 설치하고, 기본적인 코드를 작성해 봅니다.필요한 것은 react , react-dom , react-router-dom 입니다. 1. 설치 및 코드 작성npm install --save react react-router-dom react-dom설치를 해줍니다. index.html 의 body 태그안에 id가 App 인 div 태그를 추가 해줍니다. index.js 에서 index.html에있는 #App 에 렌더링 해줄수 있도록 코드를 작성합니다. // index.js // modules import React from "react"; import { createRoot } from "react-dom/c..

Github page로 포트폴리오 웹페이지 만들기webpack 과 babel을 사용하기 위한 모듈들을 설치해 보고 테스트 해보았습니다.이제 이 둘을 이어 주기위한 babel-loader와 development 환경에서 react를 실행시키기위한 webpack-dev-server 그리고, plugin 등을 추가 설치및 설정해줍니다.설정등은 추후에 변경할 수도 있습니다. 설정이 되면은 react가 정상 작동 되는지 확인해 보도록 합니다. 이전에 만들어 주었던, index.js , test.js를 지우고 index.html, index.js를 새롭게 만들어 줍니다. 1. webpack-dev-server 먼저 webpack-dev-server를 설치해 줍니다.npm install --save-dev webpa..