Dev

Github Repository에 올라가 있는 소스 코드를 Github Pages를 사용하여 간단한 설정을 통해 무료로 배포할 수 있는 방법에 대해 정리하는 글이다. 우선적으로 Github 계정과 배포할 repository(원격저장소)가 본인의 로컬 저장소와 연결이 되어있다는 가정하에 진행한다. 1. gh-pages 모듈 설치 npm install gh-pages --save-dev 배포할 프로젝트의 경로로 이동하여 위 명령어로 gh-pages 모듈을 설치한다. 2. url 작성 프로젝트 접속을 위한 url을 작성하기 위해 package.json 파일로 이동하여 homepage에 아래와 같이 작성한다. https://{깃허브유저이름}.github.io/{저장소 이름} 3. Script 추가 package..

Open Graph 에 대해 간략히 정리하는 글이다. 카카오톡으로 링크를 공유하다보면 해당 링크의 미리보기 이미지와 사이트의 설명이 간략하게 나오는 것을 본 적이 있는데 meta 태그를 사용하여 Open Graph를 설정해주면 가능하다. 1. index.html 설정하는 방법은 정말 간단한데 index.html 에 아래와 같이 meta 정보를 입력해주면 된다. // 썸네일로 표출될 이미지의 경로를 넣어준다. // 사이트 네임 입력 //사이트 타이틀 입력(카카오톡 미리보기는 site_name 아니라 title이 미리보기로 표출됨) //사이트 설명 입력 간단한 설정으로 위와 같이 링크 미리보기가 표출되는 것을 확인할 수 있다. 2. 캐시 초기화 썸네일 이미지를 수정하거나 타이틀을 수정한 뒤에 카카오톡에서 바..

Firebase로 웹호스팅을 생성하고 배포하는 방법에 대해 간략히 정리하는 글이다. 프로젝트를 배포하는 방법에는 여러가지가 있는데 서버를 직접 구축하고 호스팅을 직접 설정하여 배포하는 방법도 있겠지만 Firebase를 사용하면 클릭 몇 번으로 웹서버 구축이 가능하다. 1. Firebase 접속 및 프로젝트 생성 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 우선 위 Firebase 공식 홈페이지로 접속하여 시작하기 버튼을 클릭한다. 시작하기 버튼을 누루고 프로젝트 추가 버튼을 클릭한다. 프로젝트 이름을 만들고 계속 클릭 후 Goo..

웹 스토리지(Web Storage) 중 로컬 스토리지(Local Storage)에 대해 간략하게 정리하는 글이다. 로컬 스토리지는 클라이언트의 브라우저에서 관리하는 저장소인데 세션 스토리지(Session Storage)와 차이점이 있다면 웹 페이지의 세션이 만료되면 데이터가 지워지는 세션 스토리지와 다르게 로컬 스토리지는 세션과 관계없이 만료일이 따로 없어 직접 삭제하지 않으면 영속성이 보장된다. 물론 동일한 PC에서 동일한 브라우저일때 보장이 되고 같은 웹사이트를 여러 창으로 띄웠을 때 창 별로 데이터를 관리하는 세션 스토리지와 다르게 로컬 스토리지는 창 간에 데이터가 공유되는 차이점도 있다. ✔︎ Local Storage 사용방법 1. 데이터 저장 로컬 스토리지에 저장되는 데이터는 기본적으로 key..

저번 글에 이어서 React Router 의 응용방법에 대해 간략히 정리하는 글이다. React Router 를 이용해 페이지 이동을 할 때 파라미터를 보내는 방법과 강제로 페이지를 이동하는 방법에 대해 정리하려 한다. ✔︎ Path Variable 첫번째로 path Variable 이다. 사용방법은 아래와 같다. Route에서 path에 ":" 을 붙이고 이어서 파라미터명을 넣어주면 된다. import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Ed..

React Router를 사용하여 page를 이동하는 방법에 대해 간략히 정리하는 글이다. React는 SPA방식으로 구성되어 있는데 Router 사용방법전에 MPA 와 SPA에 대해 짚고 넘어갈 필요가 있다. ✔︎ MPA(Multiple Page Application) 와 SPA(Single Page Application) MPA란 여러개의 페이지로 구성되어 있는 어플리케이션을 말한다. 클라이언트(브라우저)가 서버로 URL을 통해 페이지 요청을 보내면 서버는 클라이언트에게 요청 url에 맞는 페이지를 반환하여 표출한다. 페이지 이동을 할 때 화면이 깜빡이면서 페이지가 이동되는 것이 MPA의 특징이다. 반면 SPA의 경우 단일 페이지로 구성되어 있기 때문에 클라이언트가 서버로 URL을 통해 페이지 요청을..

Props Drilling 을 개선하기 위한 Context 사용법에 대해 간략히 정리한 글이다. ✔︎ Props Drilling 이란 ? PropsDrilling이란 하위 컴포넌트가 상위 컴포넌트로부터 받은 props를 따로 사용하는게 아니라 자신의 다른 하위 컴포넌트에게 오로지 넘겨주기만 하는 데이터 전달 과정을 말한다. 위 화면은 React를 공부하면서 인프런 강의를 듣고 만들고 있는 간단한 react app 이다. App 컴포넌트에 하위 컴포넌트로 DiaryEditor 와 DiaryList 가 있고 DiaryList는 게시글 list를 props로 받아 하위컴포넌트인 DiaryItem으로 구성되어 있다. 위 구조를 도식화 해보면 아래와 같다. 위 그림에서 App 컴포넌트가 게시글 list(diary..

useReducer 를 공부하면서 간략히 정리하는 글이다. ✓ useReducer 언제 사용할까 컴포넌트 내에서 하나의 state를 여기저기서 setState를 호출하여 다른 값으로 상태를 바꿔주고 있다면 추후 state를 업데이트중 장애/오류가 있을 시 유지/보수 및 관리하기에 어려움이 있다. 이런 경우에는 컴포넌트 밖으로 따로 빼서 한 곳에서 관리하는 것이 가독성도 좋고 유지/보수 측면에서도 용이할 것이다. useReducer 는 위와 같은 상황에서 state별로 관리할 때 유용하게 사용할 수 있는 React Hook이다. ✓ useReducer 사용방법 useReducer를 적용하기 전 아래의 예시코드를 확인해보자. import "./App.css"; import DiaryEdtior from "...