[코드숨] 리액트 6주차 회고-Routing

새로운 출발?

▪︎ 회고

---

그동안 계속 고민이였던 이직에 대한 부분을 결심을 하는 주였다.
금주는 감사하게도 서류를 넣었던 회사 여섯곳에서 피드백이 오게되어,
대부분의 시간을 사전 과제/코테 면접 준비를 하며 보냈다.
(프론트엔드 파트 팀장 권유 및 시니어의 부재로 여섯곳중 한곳은 포기했다)

금주 진행 사항

1. 합격 후 처우 협의중
2. 1차 결과 대기 중
3. 1차 합격 후 2차 면접 일정 조율 중

예정 진행 사항

1. 사전과제 및 수요일 면접
2. 수요일 1차 면접

면접 준비를 하며 프론트엔드 기초 개념을 다시 고민하고 정리 할 수 있었다~
가끔 면접을 본다고 생각하면서 공부를 하면 기초 지식을 쌓는데 도움이 될 것 같다 👍🏻

사실 금주는 코드숨을 제대로 수행하지 못했고 차주에 더 보강할 예정이다 👊🏻

* 차주 계획!
월요일 : 못했던 6주차 Routing 학습 수행
화요일 : 남은 입사 사전 과제 수행
수요일 : 대면 면접 2곳 진행 후 정리 / 코드숨 7주차
목요일 : 코드숨 7주차 이어 하기 

이 후 채용 결과 및 절차에 따라 변동이 있을 것 같다.

▪︎ 복습 한 내용

---

• 웹브라우저 및 리액트 동작 원리

• 기초 CS 및 자료 구조

• 기초 자바스크립트 지식(호이스팅, 실행컨텍스트, 이벤트루프, 클로저 등등...)

• 리액트 성능 관련(key props 전달이유, useCallback, useMemo 등등...)

▪︎ 배운 내용

---

• object key 형태 변수에서 || 을 사용하여 null 처리를 할 수 있다.

 const { location: { pathname } } = window;

 const MyComponent = {
   '/': HomPage,
   '/restaurants': RestaurantsPage,
   '/about': AboutPage,
 }[pathname] || NotFoundPage;

해당 되는 pathname이 없다면 NotFoundPage.

---

• React Router 사용 시 a 태그 대신 Link 태그 사용

기존 a 태그의 href를 사용하여 이동하면 상태값을 잃고,
새롭게 렌더링 되기때문에 리액트에 적합하지 않다.

---

• Router 관련 테스트 코드

function renderApp({ path }) {
    return render((
      <MemoryRouter initialEntries={[path]}>
        <App />
      </MemoryRouter>
    ));
  }

const { container } = renderApp({ path: '/' });

테스트에서 BrowserRouter 적용 대신 MemoryRouter를 사용하여,
더 가볍게 사용 할 수 있다.

<MemoryRouter initialEntries={['/about']}>
initialEntries : Target이 되는 URL를 넣어 줄 수 있다.

---

지금 마음가짐을 유지하고 끝까지 최선을 다해서 성장하길!🔥