깊고 넓은 삽질

🏁 지난 주 목표 | 리액트쿼리 활용, 본투비루트 시작 Teave :: 리액트쿼리로 전환 대수술 ◼ 최근에 원티드 프리온보딩 코스에서 배운 리액트 쿼리를 우리 프로젝트에도 적용해보기로 했다. 리액트 쿼리를 사용한 커스텀 훅으로 서버 데이터를 사용하는 로직을 모두 분리하고, 서버 데이터의 스키마를 model폴더에 넣어서 관리했다. ◼ 지난주에 완성된 페이지 도안들을 마크업 했다. 검색 결과 페이지를 마크업 할 때 처음에는 검색 페이지와 결과 페이지를 나눠서 구현했었다. 그런데 검색페이지에 딱히 들어갈 컴포넌트가 없는데 불필요하게 페이지가 나뉘는 것 같았다. 그래서 검색시 하나의 페이지에서 useRouter의 쿼리 유무로 결과 페이지 분기를 나눴다. 이 때 쿼리는 배열이 올 수도 있어서 타입가드를 따로 해줘..

🏁 목적 | jwt 토큰을 디코딩한 객체의 특정 value값을 storage에 넣기 ◼ 토큰을 디코딩해서 디코딩된 토큰 객체의 user_id 값을 사용하고 싶었다. ❌ 문제 | 객체의 속성을 못 찾음 그럼 디코딩된 토큰이 내가 생각하는 객체인지 확인해주는 타입가드를 넣으면 어떨까? ✅ 해결 | 사용자 정의 타입가드 함수 사용 구글링 해보니 is라는 ts문법으로 사용자정의 타입가드를 할 수 있단다 https://bobbyhadz.com/blog/typescript-check-if-unknown-has-property Check if Value with Unknown Type contains Property in TS | bobbyhadz Use a user-defined type guard to check..

다음은 원티드 프리온보딩 프론트엔드 챌린지 CRUD w ReactQuery 과제 중 진행된 리팩토링 사항이다. # 캐싱 # 관심사의 분리 첼린지 소개 페이지 프리온보딩 프론트엔드 챌린지 1차 | 원티드 AI 채용, 연봉 정보, 이력서, 커리어 콘텐츠까지 커리어 성장에 필요한 모든 것, 원티드에서 만나보세요. www.wanted.co.kr 구현한 코드 깃허브 GitHub - ggsno/wanted-pre-onboarding-challenge-fe-1: Learning CRUD with React Query Learning CRUD with React Query. Contribute to ggsno/wanted-pre-onboarding-challenge-fe-1 development by creating ..

🏁 목적 | 타입 상속을 이용한 타입 재사용 ◼ 상품에 대한 type들을 모은 ProductProps로부터 필요한 타입들을 ts문법 Pick을 이용해 가져오고자 했다. ❌ 문제 | Type '${target_type}' is not assignable to type 'Pick' ◼ Pick 는 분명 number타입인데 not assignable 하다고 한다,, ✅ 해결 | Pick은 객체 형태를 반환함 ◼ 찾아 보니 Pick으로 만든 타입은 타입 자체가 아니라 객체형태라고 한다. 즉, Pick는 string으로 바로 평가되는 것이 아니라 { "id": string }로 평가된다는 말이다. ◼ Pick을 최근에 배워서 빨리 써먹고 싶은 생각에 남발했던 것 같다..

다음은 원티드 프리온보딩 프론트엔드 챌린지 CRUD w ReactQuery 과제 중 진행된 리팩토링 사항이다. # 관심사의 분리 # 적절한 추상화 첼린지 소개 페이지 프리온보딩 프론트엔드 챌린지 1차 | 원티드 AI 채용, 연봉 정보, 이력서, 커리어 콘텐츠까지 커리어 성장에 필요한 모든 것, 원티드에서 만나보세요. www.wanted.co.kr 구현한 코드 깃허브 GitHub - ggsno/wanted-pre-onboarding-challenge-fe-1: Learning CRUD with React Query Learning CRUD with React Query. Contribute to ggsno/wanted-pre-onboarding-challenge-fe-1 development by crea..