Today

Todo

• 컴포넌트를 나눠 파일에 넣음
• Nav바를 간단히 만들었음

• src폴더에 파일을 그냥 넣어주면 된다고 생각했었는데 클라이언트 페이지가 많아짐에 따라 폴더를 정리해서 넣어주는것 또한 task였다. 페어와 신경을 써서 다른이가 보아도 쉽게 찾을 수 있도록 넣어줬는데 이걸 의논하는데 어려움을 겪었다.
  우리가 파일을 나눠준 기준은 routes 기준이 아닌, 처음 봤을때 눈에 보이는 큰 component를 기준으로 선정했다.
  ( 크게 <Home/>,<Sidebar/>,<Login/>,<Nav/><Footer/>를 큰 컴포넌트로 선정해줬다.)

  https://miro.com/app/board/uXjVONKQ0zM=/

• 본격적으로 리액트를 하려하니 라우팅부터 어려웠다. 그리고 폰트어섬에서 이모티콘 가져오는것도 html이랑 동일하다고 생각했었는데 좀 다르더라? 당연한건데 당황스러웠다. 패키지 제이슨에서 폰트 어썸에서 제공한 모듈을 다운받은 후 폰트 이름을 가져와 <FontAwesomIcon /> 컴포넌트에 속성 icon={폰트이름}을 아래와 같이 사용하면 된다.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBars } from '@fortawesome/free-solid-svg-icons'

function Nav() {
    return (
        <div>
            <ul>               
               <div><Link to='/sidebar'><FontAwesomeIcon icon={faBars}/></Link></div>
            </ul>
     생략

• 로고 이미지도 가져오려고 했는데 스크린샷으로 찍은 png파일은 잘 들어오는데 어디선가 저장한 png는 잘 안불려와져서 고생했다.. 그래서 이미지를 스크린샷으로 찍은 이미지로 대체했는데 어디선가 저장한 png는 왜 안불려져 온걸까..
  이건 아직 해결못함 ㅜ