개발 항해일지 22/04/02 :: UI 프레임워크, 리액트 과제 테스트

일지 2022년 4월 2일

 

 

컴포넌트 라이브러리

개발 연습을 위해 혼자 프로젝트를 진행하면,

디자인, 마케팅에는 신경을 덜 쓰게 된다.

그래도 공개를 할 웹이 깔끔하게 보이고 싶어서 라이브러리로 눈길을 돌렸다.

 

레이더에 들어온 것은 CSS 라이브러리 tailwind,

리액트 컴포넌트 라이브러리 MUI(전 Matarial UI), Chakra UI다

그 중에 나루토도 생각나고, 이름이 마음에 들어서

이번에는 Chakra UI 경험을 하기로 결정

 

사용하기 전에는 적용을 하면 순식간에 뚝딱 만들어 낼줄 알았는데

지금 초반인데 시간을 꽤 잡아 먹는다

어떤 컴포넌트가 있는지 공식문서를 처음부터 훑어보고,

그 컴포넌트가 어떤 HTML 태그로 변환되는지 알아야 레이아웃 구성이 편해질 듯 하다

얼른 익숙해지고 싶구만

 

 

리액트 과제 테스트

테크쪽에서 굉장히 인기 많은 기업의 리액트 과제 테스트를 볼 기회가 생겼다.

이 글을 쓰는건 테스트 다음날인 일요일(4/03),

테스트가 밤 늦게 끝나서 오늘 푹 쉬고 이제야 정리

 

프론트엔드에 관한 질문들도 있었는데 그 부분은 건너뛰고

이번 리액트 과제가 뭘 원했는지 살펴보고,

어떤 부분을 발전 시켜야 될 지 알아보자

 

문제는 기업 비밀이라 컨셉으로 정리

 

1️⃣ Git 사용

기본적인 사용 방법

- 새로운 브랜치 생성

- 커밋, 푸쉬, 풀 등

 

2️⃣ 렌더링 & 포맷팅

- 조건에 따른 렌더링

- 데이터 포맷팅

 

3️⃣ 상태 관리

- 로컬은 물론

- 전역 상태 관리까지

개인적으로 로컬에서는 useState, 전역적으로는 Redux를 사용했다

 

4️⃣ API

- Layout Shifting 방지

- query 추가해서 fetch

- 한 컴포넌트에서 2개 이상 API콜 관리

- 로딩시 처리

- 이미 받은 데이터 다시 API 호출 없이 사용

- API 호출에 딜레이 주기

 

5️⃣ 리팩토링

- 리팩토링

- 근거 제공