프로젝트 2일차.
첫날 로그인/회원가입 HTML, SCSS 까지 마무리하였고, 오늘은 MAIN CONTENT와 FOOTER 까지 끝내기가 목표. 하지만 다 못했지요

오늘 알게된 것 & 처음 해본것

git stash : 깃에게 있어 중간저장 같은 기능?

프로젝트를 진행하면 각자 맡은 컴포넌트/기능에 맞춰 깃 브랜치를 생성하고 작업하게 된다. 나는 4가지의 컴포넌트 구현을 맡았다. HTML/CSS까지 마무리한 뒤 브랜치를 옴겨 작업하다보니 지금 작업하는 브랜치는 어딘지.. 로컬마스터의 상태는 어떤지 혼란스러웠고, 결국 각 브랜치마다 상태가 뒤엉켜 버렸다.처음이니까 괜찮다! 반복하지만 말자! 해결하기 위해 구글에 검색해보고, 멘토에게 물어보기도 하고! 프로젝트는 이제 막 시작인데 깃과 나는 전쟁!

브런치를 옮겨야 할때 ?

작업을 하다보면 브런치를 이동해야 하는 상황이 생긴다. 이럴때는 무조건

git status
git add <파일선택>
git commit -m '누구나 알아볼수 있는 커밋메세지'

위 3종은 세트이다. 하지만 기능 구현이 다 된것도 아닌데 커밋메세지를 남기기 모호한 상황이 분명 생기게 된다. 이럴때는 git stash 기능을 사용하자! 중간저장 기능이라고 생각하면 쉽다. stash를 할때마다 기록이 남게 되고, 다시 되돌리고 싶을때는 stash리스트에서 확인하면 된다.

git stash 명령어 정리

git stash  : stash 리스트에 현재상태 저장
git stash -u : 새 파일이 생성되었다면 -u 옵션을 기입
git stash save <stash이름지정> : 각 stash의 이름지정하여 저장
git stash list : stash 목록이 뜬다. 여기서 stash목록 확인가능, 커밋메세지로 리스트가 작성되기도 하는것 같다
git stash apply : 가장 마지막 중쉡목록으로 복원! 자주씀!
git stash apply stash<아이디> : 해당아이디의 stash로 복원
git stash drop : 가장 최근 저장한 stash 삭제
git stash clear : stash 기록 모두 삭제
git stash pop : 가장 최근 stash 복원하고 list에서 제거
git stash bransh : 이기능은 아직 잘 모르겠다! 구글검색 추천!

종류가 많다. 어떻게 활용하는지 간단하게 적어 보면

git status : 현재 상태 파악
git add <파일선택> : 저장할 변경된 파일 선택
git stash  & git stash -u : stash list에 기록

위 과정까지 진행하고 git checkout 브랜치명으로 브랜치를 순회하고 돌아오면, 이전 작업판 내용이 날라간 것이 확인된다.
그럴때는 당황하지말고 !

git stash list
git stash apply

를 통해 중간 저장 목록을 확인하고, 복원하고 작업을 이어나가면 된다!
모든 작업이 마무리 되고 기능 하나하나 마무리 될때마다

git add <파일명>
git commit -m '누구나 알아보는 커밋 메세지'

를 통해 add/commit을 하자!

git push origin <브랜치명> & PR(pull request) 날리는 것은 어느정도 기능구현이 마무리 되었을때 진행하자.

git merge <가져올 브랜치 선택>

여러 브랜치를 한번에 작업하고, 공통파일이 수정되었다면 브랜치를 최신화 시켜줘야 한다. ORIGIN MASTER에 PR를 통해 merge할수 있지만, 상황이 여의치 않다면 내 브랜치에서 merge를 해도 된다.

나의 상황은 로그인브랜치에서 작업하다 공통 css내용 수정을 했고, 회원가입브랜치에도 공통 css를 적용해야 했다. 두 개의 브랜치 상태가 달랐고, 먼저 수정한 로그인 브랜치를 회원가입 브랜치에 merge 하는 작업을 진행했다.

merge를 위한 순서

1. 브랜치 이동

   • 제일 먼저 수정사항을 반영할 오래된 브랜치로 이동한다.

   git chechout <브랜치명>

2. 머지 명령

   git merge <최신브랜치 or 되돌리고픈 브랜치>

   • 꼭 반영할 브랜치에서 변경상태를 가져와야 한다.
   • 머지를 하다 보면 COMPLICT가 발생하기도 한다.
   • 이번은 나혼자 한것이라 쉽게 해결했지만, 충돌 당사자 들은 꼭 의견을 나누고 해결하는 습관을 들이자!

git reset : 커밋 되돌리기

기능구현이 마무리 된것 같아 commit 했더니 수정 안한 부분이 보이고.. 조금 고치고 커밋 다시 하기엔 모호할때 커밋취소!

git reset HEAD^

최근 커밋을 취소하고 다시 보내자.

git add 취소하고 싶다면?

git reset HEAD <파일경로/파일명> 으로 git add를 취소할 수 있다.

Font-awesome for react.js

사이트 푸터를 작업하면서 SNS 아이콘, 카드사 아이콘을 가져다 쓰기위해 라이브러리를 설치하였다.

리액트에서 폰트어썸 사용하기 링크에서 자세히 설명 되어있으니 참고하자.

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons

위 기입된 목록 중 1,2번 줄은 꼭 설치해야 하고, 이하 free 표기된 목록은 아이콘목록이 다르니 확인하고 설치하자. 브랜드 로고가 중점으로 필요하다면 free-brand-svg-icons만 설치해도 된다. 꼭.. 목록을 확인하자. 난 free-solid-svg-icons만 설치하고 SNS로고 안된다고 계속 삽질을 했다 하하핳

Font-awesome 사용법

<FontAwesomeIcon icon="coffee" />

HTML로 바로 작성할때는 <i class='fa coffee'> 와 같은 방식으로 사용했지만, 리액트에서는 Component와 Props로 설정을 하게 된다.
icon Props에 아이콘이름이 들어가고, 사이즈 같은 것은 css에서 적용거나 지원해주는 Props를 사용한다.
Props list : size / fixedWidth / inverse / listItems / rotate / flip=horizontally, vertically, both / spin & pulse / border / pull = left or right / swapOpacity...폰트어썸깃헙에서 더 찾아보기

• 컴포넌트에 적용할때는 Import 모듈, 아이콘 구조분해 작업이 필요하다.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faFacebookF,
  faTwitter,
  faPinterest,
  faInstagram,
  faYoutube,
  faTumblr,
  faCcVisa,
  faCcMastercard,
  faCcPaypal,
  faCcDiscover,
  faCcAmex,
  faCcDinersClub
} from '@fortawesome/free-brands-svg-icons';

/*...중략... */

<ul className='icon-list'>
  <li>
    <FontAwesomeIcon icon={faFacebookF} />
  </li>
  <li>
    <FontAwesomeIcon icon={faTwitter} />
  </li>
</ul>

Font-awesome 아이콘리스트

위에서도 언급했지만, 폰트어썸 라이브러리 설치 이후 다른 아이콘은 뜨는데, 페이스북 아이콘이 뜨지 않아 한참을 고생했다. 변수명이 다르게 저장되어 있어 구조분해 되지 않나?? 오만가지 시도를 했는데, 결론은 내가 불러들인 라이브러리(아이콘목록)에 페이스북 아이콘이 정의되지 않은 것이었다. 그리곤 구글에서 열씸히 아이콘 리스트를 찾았지만 .. 검색하는게 더 어렵

하지만 이 모두 헛수고 였으니, vscode에서 cmd + 클릭 으로 라이브러리 경로를 클릭했더니 내가 원한 아이콘 리스트가 나왔다! 라이브러리 파일 자제가 리스트였다. 이 기능을 진즉에 알았지만 오늘처럼 유용하게 느낀 날이 또있을까

아이콘 리스트를 열고 검색하여 찾으면 쉽게 찾을수 있다.

Font-awesome의 이름 규칙

폰트어썸 사이트에서 아이콘을 검색하면 하이픈(-)으로 이어진 이름이 자주 나온다. js에서는 (-)을 쓰지 않고 카멜케이스를 사용하기 때문에 이름 을 바꿔주어야 한다.

내가 사용한 facebook을 예로들면, 사이트에는 facebook-f 라 적혀있다. 위 이름은 HTML에 바로 적었을때 class에 지정하여 사용하는 방식이다. 우리는 폰트어썸 4버전, 리액트에서 사용 할 것이기 때문에 fa라는 접두사를 붙이고 카멜케이스를 적용하여 이름을 수정해야 한다.

facebook-f -----> faFacebookF

아이콘 사이즈 & 스타일

아이콘은 props를 통해 설정 할 수 있지만, 세밀한 사이즈나 컬러 같은것은 스타일을 적용하는것이 단순 & 편리 & 정확할 수 있다. 상황에 맞는 선택을 하자. FOODLY 사이트 푸터에 들어간 카드아이콘 크기는 정확하게 맞지않아 font-size를 통해 조절하였다.(props는 2x, 3x... 크기가 있지만, 지정간격이라 정확하지 않다) 색상또한 기본 회색에서 어두운 색으로 변경하였다.