📚요약
지난 시간에 이어 회고와 함께 부족한 부분을 구현해 보겠습니다.
📖Book Store 프로젝트
📄중간 회고
회고를 하는 이유는 결론적으로 "더 잘하려고"라고 할 수 있습니다.
- 성장과 학습
- 문제 해결
- 유연성과 적용성
- 퍼포먼스 향상
📑진행했던 학습 주제
- 타입과 모델 : 타입을 작성해서 발생할 수 있는 오류를 예방한다. 모델을 작성해서 백엔드와 약속된 데이터를 프론트에서 확인해 볼 수 있다. TS에서 제공되는 유틸리티를 잘 활용하는 것도 중요하다.
- 데이터 흐름
- 컴포넌트 작성
- css 스타일링 : flex, grid의 활용.
- 커스텀 훅
+ 생산성을 위해 고민해 볼 것들
- 스니펫 사용 : 코드를 조금이나마 덜 치도록 도와주는 것.
- 기능 단위 작업 흐름 파악 : 개인의 작업에 맞게 순서를 정하는 것. 해당 고민이 왜 생산성을 높여주는가? 마구잡이로 생각나는 대로 작업을 진행하는 것보다 어느 정도 정해진 틀을 두고 작업을 하면 다음 작업에 대한 고민을 덜 한다. 또한 휴먼 에러의 발생 확률을 줄여줄 수 있다.
ex) 데이터 모델 정의 → 컴포넌트 생성 → 배치 → 1차 스타일링 → 데이터 패치/훅 → 이벤트 핸들러 → 추가 스타일링 → 리팩토링
| Keep(계속 가져가야할 좋은 점) | Problem(고쳐야할 문제점) | Try(시도해 볼 행동) |
| - 회원가입 ~ 주문까지 경험 - 생산성을 고려한 개발 - 데이터 흐름에 맞추기 |
- 테마스위처 미적용 - import alias 미흡(상대경로) - 중복 코드 - css 스타일링 정리 - 다양한 UI 패턴을 다루지 못함 |
- 테마스위처 재배치 - alias 적용 - 중복 코드 제거 - useAuth 훅 - 다양한 UI 패턴 경험 |
📄경로 변경
경로 변경이 필요한 이유는 프로젝트의 크기가 커져 경로를 지정하는데 문제가 발생할 수 있습니다. 또한 믿고 있던 IDE가 배신을 하는 경우도 있기 때문에 상대 경로가 아닌 절대 경로를 이용하는 것을 추천합니다.
CRACO를 활용해 상대 경로로 적용되어 있는 경로들을 절대 경로로 변경해 보겠습니다.
- 라이브러리 설치 : npm i -D @craco/craco craco-alias
- 설정
- tsconfig.paths.json 생성
- craco-alias를 이용해 craco.config.js 생성
- tsconfig.json 수정
- package.json scripts 수정
- 실제 적용
자세한 설명은 CRACO의 사이트에서 확인 가능하고, 실제 변경된 코드는 Github에 있습니다.
Configure CRA without ejecting. | CRACO
Create React App Configuration Override
craco.js.org
📄스니펫 만들기
VSCode에서 extension을 설치하지 않고 커스텀 스니펫을 만드는 방법을 소개해 드리겠습니다.
[VSCode 꿀팁] 나만의 Snippet 만들기
https://seukjjang.tistory.com/18 [VSCode] 나만의 code snippet 만들기코딩자바스크립트로 코딩테스트 문제를 풀다보면 우선순위 큐와 같은 자료구조가 필요한 경우가 있다. 이때마다 작성해둔 코드를 매번
nulzi-dev.tistory.com
📄useAuth
지난 구현 중에 로그인에 대한 부분은 따로 커스텀 훅을 제작해서 사용하지 않았습니다. 이번 시간에 커스텀 훅 useAuth를 만들어서 사용해 보겠습니다. signup부터 login, reset request, reset password까지 useAuth에 담아두고 기존 컴포넌트에서 가져다가 사용합니다.
📄TanStack Query(== React Query)
과거 React Query라는 이름을 가졌던 TanStack Query를 활용해 보겠습니다. 해당 라이브러리는 fetching, caching, synchronizing, updating server state을 더 쉽게 도와줍니다.
자세한 내용은 사이트를 방문하면 알 수 있습니다.
TanStack Query
Instead of writing reducers, caching logic, timers, retry logic, complex async/await scripting (I could keep going...), you literally write a tiny fraction of the code you normally would. You will be surprised at how little code you're writing or how much
tanstack.com
📑Loading
라이브러리에서 제공하는 useQuery 훅을 사용하면 로딩 여부도 알 수 있습니다. 이를 활용해 로딩 화면까지 구현할 수 있습니다.
자세한 프로젝트 코드는 Github에서 확인할 수 있습니다.
ProgrammersSchool/FE-BOOKSTORE/bookstore at main · nulzi/ProgrammersSchool
프로그래머스 데브코스에서 학습하는 것들을 모아두는 레포. Contribute to nulzi/ProgrammersSchool development by creating an account on GitHub.
github.com
다음 시간에 계속...
출처 & 참고
문윤기 강사님의 강의
'개발 > 프로그래머스 데브코스' 카테고리의 다른 글
| 프로그래머스 데브코스 80일차 with. TS 웹 풀스택 (0) | 2024.07.26 |
|---|---|
| 프로그래머스 데브코스 79일차 with. TS 웹 풀스택 (0) | 2024.07.25 |
| 프로그래머스 데브코스 77일차 with. TS 웹 풀스택 (0) | 2024.07.23 |
| 프로그래머스 데브코스 76일차 with. TS 웹 풀스택 (2) | 2024.07.22 |
| 프로그래머스 데브코스 75일차 with. TS 웹 풀스택 (0) | 2024.07.19 |
