리액트 라우터

리뷰

리액트 렌더링의 장점은 무엇인가

• 이런 질문에 당황하지 않고 잘 답변할 수 있어야 함.

• 인터뷰 시, 잠시 시간을 달라고 하는 방법이나 오히려 되물어보는 방법이 있을 수 있다.

• '제 경험으로는...' 경험 기반으로 대답하는 것도 좋다.

프로젝트의 이유

• 목표를 달성하기 위해 2~3주 짜리의 프로젝트를 다양한 다른 사람들과 같이 진행했다.

• 커뮤니케이션을 연습할 수 있는 기회. 피하지 말자.

• 좋은 커뮤니케이션 : 어색하겠지만 더 자주 커뮤니케이션 하기.

• 내 상태를 더 많이 주기적으로 공유하기

• 예측은 함부로 하지 말아라. 하지만 커뮤니케이션은 자주 하기.

백엔드 기술에 호기심을 갖고 물어보자

• 모델링을 어떻게 했는지 물어보기. 테이블을 어떻게 나눴는지 보기.

• 점점 늘어나고 있는 프론트엔드 개발자가 가져야 할 역량 중 어려운 부분 중 하나가 데이터 모델링.

• 백엔드 개발 흐름을 더 적극적으로 물어보기.

신입의 가산점

• 블로그의 기술 수준이 깊다.

• 현업에서 할만한 기술 수준의 작업들을 하고 있다. (테스트 코드, 리액트 깊게, 오픈소스 컨트리뷰트...)

요구사항 분석

• 기획서를 잘 읽고 요구사항 feature list를 뽑아보기.

• 진행할 때마다 점점 더 발전해야함.

• 테스트 케이스를 뽑아보기(작은 시나리오들).

OAuth 인증 절차

• 로컬 스토리지에 넣어서 사용하는 방식 시도해보기.

• 라우터 URL을 포함해서 처음에 서버로 전송해야함. 최종적으로는 라우터 URL로 이동해야함.

• 모든 처리가 끝난 뒤 라우터 URL을 보내달라고 서버에게 요청하기.

• 로그인의 a 태그에 파라미터로 URL을 삽입하는 식으로 해야할 거임.

라이브러리

• 기술을 넓게 사용하기보다는 좁고 더 깊게 사용하는 편이 더 나을 거 같다.

• 게임, 애니메이션, 프레임워크, 개발환경 등등...

주어진 미션 이외의 미션

• 개선하기

• 반복적인 작업을 개선해나가기(생산성 올리기).

리뷰

• 커스텀 훅 시도해보기

• App.js 는 너무 복잡하지 않게. 컴포넌트만 잘 보이게 (엔트리 포인트)

리액트 라우터

• 처음 구조를 잡을 때 라우터로 잡는 게 좋다.

• history API. 뒤로가기/앞으로가기 가 되므로 UX에 아주 중요하다.

• 지도 서비스 같은 경우가 대표적인 SPA. 네이버 지도에서 길찾기를 하고 뒤로가기를 해보자.

• 리액트 라우터를 사용하며 밑바탕에 있는 기술을 알고 있어야 함(popState, pushState)

• App.js 에 넣어 놓고 구조를 잡자...

• server환경에서 history fallback 처리를 해야한다.

  • 사용자가 URL을 입력할 경우 메인으로 변경해줘야함.

  • CRA dev-server 에서 환경설정을 해줘야 함.