이번에는 프론트엔드에서의 목표를 점검해 보았다. 이번에 맡은 일은 회원가입이나 로그인 관련 작업이 아니라 제품 리스트와 디테일에 관한 내용들이었기 때문에 그에 해당하지 않는 부분은 체크할 수가 없었다.
☑️ Frontend
- CRA 초기 세팅을 나 혼자서도 어느 정도 할 수 있다.
- Routes.js에 라우트를 추가할 수 있다.
- Pages, Components의 차이점을 알고 어디에 어떤 컴포넌트를 만들어야 하는지 안다.
- event handler를 정의해서 특정 이벤트에 부여할 수 있다.
- 포스트맨을 사용하여 api를 호출하고, 응답을 확인할 수 있습니다.
- fetch나 axios를 사용하여 백앤드에 api를 호출하고,
응답받은 데이터를 활용하여 화면에 보여줄 수 있다. - 로그인 사용자의 token을 왜 localStorage에 저장하는지 설명할 수 있다.
- map을 사용해서 jsx 리턴하여 목록을 구현할 수 있을 것 같다.
- query string이나, path로 동적 라우팅을 구현할 수 있다.
- 자식컴포넌트에서 부모컴포넌트에 어떻게 데이터를 넘겨야 하는지 알고 있다.
- scss를 왜 쓰는지 알고, scss의 mixin 기능 등을 자유자재로 활용할 수 있다.
일단 CRA 초기세팅 같은 경우에는 내가 거의 도맡아 했기 때문에 확실하게 할 수 있다고 할 수 있다.
Routes.js도 이 파일을 세팅하고 관리하는 것도 나였기 때문에 확실하게 할 수 있다.
Pages와 Components의 차이에 대해서도 멘토님들로부터의 피드백이 계속 들어오기 때문에 이것을 모를 수가 없다.
event handler 같은 경우는 해당기능을 검색해서 사용하는 경우가 많기 때문에 아직 부족하다는 것을 느끼고 있다.
포스트맨도 아직 써본 적이 없어서 잘 모르겠다...
fetch는 많이 사용해 봐서 감을 잡았고, axios는 배우면 금방 쓸 수 있을 것 같다. 백엔드와의 통신도 몇번 해보니까 나름 재미 있었다.
로그인 파트를 맡지 않아서 어떻게 저장하는지는 모르지만 token을 localStorage에 저장하는 이유는 보안 때문이라고 알고 있다.
query string이나, path로 동적 라우팅을 구현하는 것은 pagination 기능을 구현하면서 하게 되는 것이라 구현해 봤다.
자식 컴포넌트에서 부모 컴포넌트에 데이터를 넘기는 것에 대해서도 처음에는 해결하기 위해서 많이 검색해 보았고 지금은 어느정도 감을 잡았다.
scss의 Nesting을 활용하는 것은 어느정도 익혔지만 mixin기능에 대해서는 신경을 많이 안써서 많이 활용해볼 필요가 있다.
