⌚️ 시간관리

☀️ 기상시간 - 6:30 (그렇다고 바로 공부를 시작한건 아님ㅎ)
🌕 마감시간 - 24:00

💻 오늘 배운 것

◉ 소개(component) 페이지 만들기

오늘까지 중첩 routing을 셀프로 시도해보고 안되면 도움을 받으려고 했는데,
잠들기 전에 갑자기 번뜩 떠오른 생각으로 한번 시도해봤더니 성공했다! 드디어...
메인페이지에서는 nav bar가 보이지 않고 component 소개페이지에서만 띄울 수 있도록 하는 구조를 짰다.

그동안 내가 성공하지 못했던 이유

그동안 중첩 routing을 위해 <RootRouter> 밑으로 <Items> <Header> 등의 component들을 단일구조로 넣었더니 자꾸만 nav bar가 메인페이지부터 고정이 되어버려서 답답했었다.

그러던 중 중첩 routing의 예제를 보다가 한단계의 component를 만들어서 children으로 넘겨주면 어떨까 싶은 생각이 들어서 <ComponentList>를 만들어서 그 안에 추가적으로 <Items>를 만든 후 <RootRouter>에서 children으로 받았더니 됬다!

<RootRouter>
  <ComponentList>
     <Items />
  </ComponentList>
</RootRouter>

---

RootRouter.js

export default function RootRouter({children}) {
  const NotFound = () => {
  return <div>sorry, Not Found.</div>
  }
  
  return(
   <Container>
    <Switch>
     <Route exact path="/" component={Main} />
     <Route path="/about" component={About} />
       {children}
     <Route path="/button" component={ButtonBoard} />
     <Route path="/check-box" component={CheckBoxBoard} />
     <Route path="/popover" component={PopoverBoard} />
     <Route component={NotFound} />
    </Swtich>
   </Container>
  )

---

ComponentList.js

export default function ComponentList({children}) {
 return(
  <Container>
    <ListContainer>
      <Link to="/button">Button</Link>
      <Link to="/check-box">Check-Box</Link>
      <Link to="/popover">Popover</Link>
    </ListContainer>
    <ContentContainer>
      <Route exact path="/button" component={ButtonBoard} />
      <Route path="/check-box" component={CheckBoxBoard} />
      <Route path="/popover" component={PopoverBoard} />
    </ContentContainer>
    <MainButton>
        {children}
    </MainButton>
  </Container>
 )

---

Items.js

export default function Items() {
 return(
   <Container>
   	<Link to="/">Main으로 가는 버튼</Link>
   </Container>
 )

스타일링을 할 때 우측하단에 홈 모양의 Main으로 이동하는 버튼을 만들어서 중복되게 사용하려 했는데 이 파일에 만들면 같은 위치에 띄울 수 있을 것 같다.

◉ CSS 사용방법 - 글꼴사용

이전에 알아둔 방법인데 정리해두지 못해서 오늘에서야 정리하는 사용법..!

구글메인페이지의 폰트를 비슷하게나마 따라하고 싶어서 g 모양을 중점으로 비슷한 글꼴을 구글폰트에서 찾아서 적용법을 알아봤더니 여러가지 방법이 있었다.
그중 그나마 쉬운 방법을 찾아서 적용했다.
바로 css파일에 url을 import 하는 것!

@import url();

@font-face {
    font-family: 'Roboto', sans-serif;
    src: url();
}

❓오늘의 나는

1. 아침부터 일찍 일어나서 공부를 시작하려 했는데 너무 일찍 일어나버려서 아침에 좀 많이 피곤했던 것 같다. 그래서 오전엔 피부치료 하고 잘 챙겨먹고 청소하는 시간을 보냈다. 나도 모르게 휴일이라는 생각이 들었던 것 같다?ㅎ
2. 중첩Routing을 해결하지 못한 채 어제를 보냈기 때문에 오늘은 moon의 도움을 받아서 완성하려 했는데 각자 할일을 하느라 따로 보내게 되었다. 그래서 혼자서 끙끙대며 코드를 짜보다가 결국 11시 넘어서 커밋도 다 끝낸 이후에 해결을 해버렸다!!!!!!!! 드디어!
3. 엄마가 외가댁으로 휴가간지 벌써 4일차. 집안일을 밀려서 하지 않아야겠다는 생각때문에 빨래도 찾아서 미리 다 해두고 여기저기 집안일까지 신경쓰려니 여간 귀찮은게 아니다.
4. 아직도 피부상태가 많이 좋지 않은 상태이지만 거기에만 신경이 쏠릴정도는 아닌듯 하다. 그 시기는 지나간 것 같으니 다시 공부에 집중해보기로 마음먹었다.
5. 새로운 사이드프로젝트에 대해 아는게 없어서 어제 그 분야 관련동영상?을 찾아서 보았고, 이제 우리가 준비해야할 부분에 대해서 ethan에게 연락을 했는데 바빠서 오늘안에 받질 못했다ㅠㅠ 내일은 꼭 받을 수 있었음 좋겠다.

❗️내일의 나는

1. 다시 공부를 시작하기로 했으니 아침에 일어나는 습관을 다시 잡아야겠다. 요즘 맘편히 자고 일어났더니 늦게 일어나버리는 것 같다ㅠㅠ
2. 운동을 조금씩 시작해야 할 것 같다. 그래도 밤늦게 먹지 않았더니 한결 몸이 가벼운 것 같다. 스쿼트 100개라도 도전해보아야지
3. 중첩라우팅을 드디어 성공했으니 스타일링을 들어가야겠다. 계획보다 너무너무 밀려버렸으니 차근차근 해내서 어떤 결과물이라도 내야할 것 같다. 수동적으로가 아닌 능동적으로 움직여야겠다.