2022-02-18 TIL

Fact

• 타겟넘버, 부분집합, 순열구하기, 포켓몬 문제풀기
• 코드를 작성하다보니 중복되는 코드가 있는걸 쉽게 볼 수 있었다. 유저 데이터를 전역상태에서 가져오는 코드도 계속 같은 코드들을 컴포넌트들 똑같은 자리에 작성하고있었고, 이 문제를 해결하기 위해 hook란 파일을 만들고 코드를 추상화했다.
• 퀴즈리스트와, 검색결과리스트 컴포넌트가 중복이되는걸 확인하고 컴포넌트 재사용이 필요하다고 느꼈다. 그래서 layouts와 items라는 폴더를 만들고 퀴즈리스트를 layouts에 넣고 그 리스트에 들어가는 퀴즈를 item에 넣고 앞으로도 재사용할수있도록 추상화했다.
• 데이터를 가져오기만하면 끝일까? 라는 생각을 했다. 데이터를 가져오는데 실패하면? 내가 사용자였어도 바로 이상한 에러를 보고 화면을 닫아버릴 것같다. 퀴즈 리스트같은 데이터를 받아올때 실패하면 에러페이지를 띄워주고 다시 데이터를 가져오기를 시도할수있도록 해보았다.

Feelings

• axios를 사용하는 코드도 추상화할수 있지않을까???

Findings

• 내 프로젝트에 vite를 사용한 why? React는 webpack을 사용하고 vite는 Esbuild를 사용하기때문에 vite가 빠를수밖에 없다. 모든 파일을 번들링 한후 서버를 시작하던 방식에서 서버를 먼저 시작하고 해당 브라우저에서 필요한 모듈을 전달합니다. 전과정에서 번들러가 아닌 ESM방식을 사용하기 때문에 앱 사이즈가 커져도 갱신시간에 영향을 끼치지 않습니다.Vite를 사용하면 좋은이유

Future Action

• 중복이 되는 코드가 있으면 바로바로 수정하자.