반응형 Step29 카카오테크캠퍼스 2기 | STEP2 | 19일차(24-07-18) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 19일차(24-07-18) 회고📝 URL 생성 함수 (URLSearchParams 객체 활용)API 엔드포인트를 문자열로 직접 조합하는 방식이 너무 복잡하게 느껴졌다. 쿼리 파라미터가 많아지고 복잡해질수록 이를 관리하기 어려웠고, URL 인코딩과 같은 세부적인 처리를 수동으로 해야 해서 실수할 가능성도 높았다.URLSearchParams 객체를 활용하여 쿼리 파라미터를 쉽게 관리할 수 있도록 했다. 이를 통해 URL 인코딩 문제도 자동으로 해결되었고, 코드 안정성도 높아졌다. 아래와 같은 함수로 URL 생성 로직을 분리했다.const getThemesProductsPath = ({ themeKey, pageToken, maxResults }: RequestPa.. 2024. 7. 18. 카카오테크캠퍼스 2기 | STEP2 | 18일차(24-07-17) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 18일차(24-07-17) 회고📝 Chakra UI음 Chakra UI를 사용하게 되면서, 얼마나 쉽게 사용할 수 있을지, 그리고 생산성이 얼마나 향상될지에 대해 궁금했다. 새로운 라이브러리를 배우는 과정에서 초기에는 다소 어려움이 있었지만, Chakra UI의 공식 문서와 다양한 튜토리얼을 통해 기본 사용법을 익히는 데 많은 도움이 되었다. 또한 예제 코드를 직접 실행해 보며 실습을 통해 이해도를 높였다. Accordion 컴포넌트Chakra UI의 Accordion 컴포넌트는 상품 상세 정보를 깔끔하고 쉽게 표현할 수 있었다. AccordionItem, AccordionButton, AccordionPanel 등의 컴포넌트들을 조합하여 아코디언의 기본 구조.. 2024. 7. 17. 카카오테크캠퍼스 2기 | STEP2 | 16일차(24-07-15) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 16일차(24-07-15) 회고📝 페이징 응답 타입 일반화과제 진행 중 페이징 처리를 위한 응답 데이터 타입을 정의해야 했다. 처음에는 각 페이지별로 개별 타입(ThemeProductResponse)을 만들었지만, 모든 페이지에서 응답 데이터 구조가 동일하다는 것을 깨달았다. 이대로라면 중복 코드가 발생하고, 유지보수가 어려워질 것이 걱정되었다.// 초기 코드 (개선 전)export type ThemeProductResponse = { products: ProductData[]; nextPageToken?: string; pageInfo: { totalResults: number; resultsPerPage: number; };};재사용성을 .. 2024. 7. 17. 카카오테크캠퍼스 2기 | STEP2 | 15일차(24-07-12) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 15일차(24-07-12) 회고📝 커스텀 훅(Custom Hook) 및 유틸 함수(util function)프로젝트를 처음 접했을 때, 'hook' 폴더와 'util' 폴더로 파일이 구분된 것을 보고 왜 이렇게 나누는지 궁금했다. 처음에는 단순히 파일을 정리하기 위한 것이라고 생각했지만, 실제로는 각 폴더가 다루는 내용과 역할이 다르다는 것을 깨달았다.hook 폴더: 주로 상태 관리를 위해 커스텀 훅을 모아놓은 폴더이다. 리액트 컴포넌트에서 공통적으로 사용하는 상태 로직을 추출하여 재사용 가능하게 만든 함수들이다.util 폴더: 상태와는 무관하게, 자주 사용되는 로직이나 기능을 함수로 모듈화한 유틸리티 함수들을 모아놓은 폴더이다. 일반적으로 입력을 받아 변환된.. 2024. 7. 17. 카카오테크캠퍼스 2기 | STEP2 | 14일차(24-07-11) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 14일차(24-07-11) 회고📝 API 요청 - axios초기 API 연동 단계에서는 각 요청마다 base URL과 헤더를 일일이 명시했다. 특히 여러 API 엔드포인트를 사용하는 경우 코드 중복이 심했고, 인증 토큰을 수동으로 관리하면서 실수 가능성과 코드 복잡도가 높아졌다.// 초기 코드 (개선 전)axios.get('https://api.example.com/data', { headers: { 'Content-Type': 'application/json', },});해결 방안 1: axios 인스턴스axios 인스턴스를 생성하여 base URL과 공통 헤더를 통합 관리했다. 이를 통해 코드 중복을 제거하고 설정 변경 시 단일 지점에서 관리할 수.. 2024. 7. 17. 카카오테크캠퍼스 2기 | STEP2 | 13일차(24-07-10) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 13일차(24-07-10) 회고📝 함수 추상화 API 호출 로직이 컴포넌트에 결합되어 재사용성이 떨어졌다.const { data, isLoading, error } = useQuery( ['rankingProducts', filterOption], () => fetchRankingProducts(filterOption), { keepPreviousData: true },);개선 코드: useFetchRankingProducts라는 커스텀 훅을 API 파일에 정의하여 useQuery 로직을 캡슐화하였다. // api.jsexport const useFetchRankingProducts = (filterOption) => { return useQuery( .. 2024. 7. 17. 카카오테크캠퍼스 2기 | STEP2 | 12일차(24-07-09) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 12일차(24-07-09) 회고📝 타입 추론# 기존 코드const items: Item[] = getItems();# 수정 코드const items = getItems();처음에는 getItems() 함수가 반환하는 값의 타입을 명시적으로 지정하는 것이 안전하다고 생각했다. 하지만 코드가 길어지면서 타입 어노테이션이 불필요하게 복잡해 보였다.TypeScript의 타입 추론 기능을 활용하여 items 변수의 타입을 생략했습니다. getItems() 함수의 반환 타입이 명확하기 때문에 TypeScript 컴파일러가 자동으로 items 변수의 타입을 Item[]으로 추론한다. 코드를 간결하게 유지하면서도 타입 안정성을 확보할 수 있었다.타입 추론에 대한 이해가 부족.. 2024. 7. 17. 카카오테크캠퍼스 2기 | STEP2 | 11일차(24-07-08) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 11일차(24-07-08) 회고📝 Context API 사용한 인증 관리Context API 사용 방법createContext 메서드를 사용하여 context를 생성한다.생성한 context를 사용할 컴포넌트에 값을 전달하기 위해 Provider로 감싼다.Provider의 프로퍼티인 value에 전달할 데이터를 넣는다.Provider의 value에 담은 데이터를 전달할 때는 두 가지 방식이 있다: Consumer 컴포넌트와 useContext 훅. 이번 프로젝트에서는 useContext 훅을 사용했다.Context 생성Context는 전역적으로 사용할 값을 제공하기 위해 사용된다.export const AuthContext = createContext(unde.. 2024. 7. 17. 카카오테크캠퍼스 2기 | STEP2 | 1일차(24-06-24) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 1일차(24-06-24) 회고📝 과제 수행 기록조별 그라운드 룰 설정 & 다짐 공유하기스케줄 결석 시 반드시 팀원들에게 알리기 📢 (결석 사유는 공유하지 않아도 됩니다).플래너는 매일 스케줄 📅, 학습일지 제출 📝, 과제 제출 마감일 등을 슬랙에 공유합니다.금요일은 21:00까지 학습 일지를 제출해야 합니다 ⏰. Git/Github 학습하기소스트리를 많이 사용하여 익숙해졌습니다. Git 명령어로 사용해야 하는 이유는 무엇인가요?프로젝트 디렉토리로 이동: 작업을 시작하기 전에 프로젝트 디렉토리로 이동했습니다.PS C:\\Users\\User> cd C:\\Users\\User\\Desktop\\workspace Git 저장소 클론: 프로젝트의 초기 코드베이.. 2024. 6. 25. 이전 1 다음 반응형
