전체 글
[React] React에서 SVG 파일 사용하기
프로젝트를 진행하면서 front를 React를 사용하기로 하였다. 또한 create-react-app을 사용하여 초기설정을 건너뛰도록 하였다. html 파일에서 태그를 사용하여 sgv 파일을 렌더링하였던 경험이 있어서 React에서도 JSX 문법을 이용하여 태그를 이용하였다. 그러나 이러한 방법은 React의 Component라는 개념과는 거리가 멀었다. 재사용할 수 없었기 때문이다. 재사용하려면 어떻게 해야할까? 1. SVG 파일을 만들어 img태그의 src로 경로를 넣어주기 import React from 'react'; import logo from './logo.png'; console.log(logo); // /logo.84287d09.png export function Header() { re..
[Git] GUI를 통해 제거한 브랜치를 로컬에서도 삭제해보자.(prune)
로컬에서 작업후 다른 브랜치와 merge를 하고 기존에 작업했던 브랜치를 삭제할 일이 생겼다. 1. 로컬 브랜치 삭제하기 git branch -d 그러나 이것은 로컬 브랜치를 삭제한 것이지 원격 브랜치는 여전히 살아있었다. 2. 원격 브랜치 삭제하기 git push -d 모두 완료!!! But!!😱😱 CLI 가 아닌 GUI (깃랩, 깃헙 페이지)를 통해서 merge후 branch를 삭제한 경우에는 여전히 커맨드라인에서는 삭제한 branch가 살아있다고 알려주었다. 3. GUI를 통해 제거한 브랜치를 로컬에서도 삭제하기 git fetch --all --prune git fetch을 통해 최신화된 로컬저장소의 내용을 가져오게 되는데 이 때 --all 옵션을 통해 모든 remote를 가져오게 한다. 이 때 l..
[Recoil] React를 위한 상태관리 라이브러리(atom, Hooks)
Recoil이란? 페이스북에서 내놓은 새로운 상태관리 라이브러리이다. 페이스북 리액트 코리아 그룹의 한 포스트에는 이러한 장점이 있다고 말해주었다. 1. atom/selector라는 단위를 통해서 derived state(파생 상태)를 효과적으로 처리하고 상태의 "코드 분할"이 가능해진다. 2. 기존 상태관리 라이브러리(ex. MobX, Redux) 보다 훨씬 단순한 API를 제공한다. 3. 페이스북 내부적으로 몇몇 프로젝트에서 사용되고 있었고 이를 라이브러리화 한 것이다. 즉 어플리케이션에서 상태관리를 하기 위한 라이브러리중 하나이다. 공식문서를 통해 학습을 진행해 보았고 이를 정리하기 위해 포스팅을 하였다. Recoil 시작하기 | Recoil React 애플리케이션 생성하기 recoiljs.org ..