[항해99] 3주차 React 입문 회고

✅투두리스트로 시작하는 리액트

투두리스트 구현 기능

• 투두리스트 추가
• 투두리스트 삭제
• 투두리스트 완료 / 취소

 

투두리스트 학습 목표

• props로 컴포넌트 구성하기
• 리액트 훅(useState) 다루기
• event handler로 이벤트 관리하기
• vercel을 이용해 리액트 사이트 배포하기

 

이번 주차 과제는 투두리스트를 제작하는 것이었는데,

별다른 가이드라인도 없이 리액트를 시작하려니까

다들 많이 어려워하는 분위기였다.

 

개인적으로는 과제 요구사항으로는 배워가는 게 별로 없을 것 같아서

전부터 적용하고 싶었던 기술들을 적용해봤다.

 

vite, typescript, antd, styled-components를 적용했다가

typescript는 개발 속도에서 시간적 한계를 느꼈고

antd는 커스텀이 너무 어려워서

vite, styled-components만 추가해서 작업했다.

 

새로고침하면 데이터가 날라가 버리는 게 너무 치명적이어서

localStorage에 데이터를 저장하는 식으로 추가 보완했다.

 

To Do List

 

👨‍💻리액트 입문 주차 시험

시험 오픈런

시험 제출물

과제를 열심히 준비했다면 시험도 어렵지는 않았을 것 같다.

2시간 제한 시간이 있는 만큼 많은 기능을 구현하는 시험은 아니었다.

 

투두리스트 추가 기능만 구현하면 되고,

css도 별 것 추가할 것 없이 리스트를 보여주기만 하면 된다.

구현 후 배포까지 마치고 url을 제출하면 시험은 끝이다.

 

투두리스트 제작 시험을 마지막으로 리액트 입문 주차가 끝이 났다.

 

▶React 입문 주차 TIL 모아보기

[TIL] 비트 주세요

 

[TIL] 성불하게 해주세요

 

[TIL] 졌잘싸

 

[TIL] 한번만 쓰고 버린다구요?

 

[TIL] 투두리스트 마무리

 

[TIL] 하루가 너무 짧다구요

 

 

 

 

 

 

📮이번 주에 배운 것

antd

대표적인 디자인 컴포넌트이다. MUI는 사용해본 적이 있어서 antd도 한번 사용해보고 싶었다.

잠깐 사용해본 바로는 깔끔하다.

(그래도 나는 디자인적으로 MUI가 더 좋다.)

 

커스텀하는 작업에서 어려움을 많이 느껴서 빼버렸지만,

기회가 된다면 제대로 한번 써보고 싶다.

typescript

vite로 eslint랑 prettier 환경설정한다고 시간이 꽤 걸렸었는데,

뭐 하나하면 구글링하고 뭐 하나하면 또 구글링하고

결국 작업 속도에서 한계를 느껴서 빼버렸다.

 

라이브러리의 타입을 적용하는 부분에서 엄청 어려웠다.

리액트 타입은 어떤게 있는지,

기본적인 타입은 알아도 구조적인 객체를 어떻게 타입 적용해야하는지 등등

어려움을 느낀 포인트가 너무 많다.

 

다음에는 any로 수습하면서라도 사용해야겠다.

vite

vite로 리액트 환경을 설정할 수 있게 되었다.

아직 vite.config를 쉽게 다루지는 못한다. 자료도 더 많이 보고 공부가 필요해보인다.

 

사용하면서 빠르다는 생각은 했는데 시험 때 프로젝트를 cra로 진행하면서 역체감을 엄청 심하게 느꼈다.

프로젝트 생성부터 리로딩까지 vite가 엄청나게 빠르다.

 

앞으로도 자주 사용하게 될 것 같다.

styled-components

reset css추가해서 global styled 적용하고

theme적용할 수 있게 되었다.

 

props를 이용해서 동적 스타일링도 가능하며

구조적이게 컴포넌트화할 수 있다.

 

css-in-js 방식도 좋지만

다른 딸려오는 기능들도 너무 편하고 좋았다.

localStorage

web Storage 기능을 저장하고 불러올 수 있다.

투두 리스트의 state를 업데이트하는 동시에 storage에 저장하고

storage에 투두 리스트의 데이터를 불러왔다.

 

저장된 데이터는 새로고침해도 사라지지 않으니

적용하고 만족도가 매우 높았다.

😎이번 주차 정리

1. 더 많이 배워가는 방법

요구사항보다 프로젝트의 완성도를 더 높이려고 했고

시키는 것만 하지 않아서 더 많이 배울 수 있었다.

 

2. 건강관리도 실력

아프다고 하루 이틀정도 시간을 날리니까

열심히 하겠다고 애쓴 시간이 무색해져버렸다.

건강관리에 유의하고 잠을 푹 자자.