개발일지

어제 파이어베이스에서 받아온 데이터를 useEffect에 담아 파싱 해서 state에 담아줬다useQuery를 사용하면 useEffect과 state를 사용할 필요 없이 바로 가공해서 data를 사용하면 됐는데 잘못된 코드를 쓰고 있었던 것 useQuery로 데이터 통신하는 것에 대해 이해도가 많이 떨어지는 거 같다 하나씩 다시 코드를 살펴보자지난 글에서 사용한 React Query 사용 오류에 대한 수정 코드{isLoading, isError, data, refetch } - useQuery에 내장되어 있는 기능들 로딩, 에러 상태 관리 변수, 요청 데이터 저장 변수, 쿼리를 수동으로 불러오는 함수를 사용했다queryKey - data 변경 시 queryKey를 이용하면 된다(등록, 수정, 삭제 등)q..

파이어베이스에 저장된 데이터 불러오는 로직을 React Query를 이용해 Migration 했다 이전에 정리한 todoList Query는 이전 버전으로 문법이 많이 다르니 공식문서를 꼭 참고하도록 하자.queryKey는 배열로 만들어주고 queryFn에 서버 데이터를 가져오는 로직을 작성하면 된다가져온 데이터를  useEffect을 이용해 id를 넣어주고 state에 저장(파이어베이스는 데이터를 가져온 후 문서의 id를 넣어준 후 다시 배열에 담아야 한다 파이어베이스 문법특성 때문이니 꼭 필수일 필요는 없다)정렬 버튼을 클릭할 때마다 데이터를 새로 요청해서 받아와야 하는데 쿼리로 작성하고 나니 정렬기능이 작동하지 않는다는 문제가 발생했다문제해결 방법useEffect 의존성배열에 data , selec..

이번 팀 프로젝트 주제는 마켓컬리와 같은 식품 쇼핑몰로 정해졌다카테고리 버튼을 클릭하여 상품 리스트 페이지에 들어가면 상품 데이터들이 높은 가격 기준으로 정렬된 상태로 가져와야하는데 상품 등록 시 상품 가격 타입을 number로 넣었지만 파이어베이스에서 문자열로 변환되어 등록되어 버린다 문자인 상태에서 orderBy로 정렬하게 되면 유니코드로 정렬이 되기 때문에 원하는 정렬 기준을 맞출 수 없다는 문제가 발생했다 내가 하고자 하는 것상품 가격을 기준으로 오름, 내림 차순을 만들고 싶다문제해결을 위해 시도한 방법파이어베이스로 전체 데이터를 불러온 뒤 sort를 이용해 정렬해 줬다이 방법으로 정렬은 가능하지만 클라이언트가 아닌 서버에서 요청값에 정렬을 요청해서 받아야 한다는 피드백을 받고 다시 수정하기로 했..

Github_project작업 항목을 카드 형태로 보드에 추가하고, 해당 항목의 상태를 표시하여 프로젝트를 직관적으로 관리할 수 있다이슈와 결합되어 작업의 진행 상태를 간편하게 업데이트할 수 있다워크플로우 기능을 제공하여 자동으로 작업을 처리하고 필요한 작업들을 설정할 수 있다사용자에 맞춰 테이블을 커스터마이징 할 수 있다 Project 생성Milestone 생성Project 티켓 생성issue 작성티켓 설정 마무리Project Public으로 변경티켓 상세 정보 추가, 공개하기프로젝트 Branch 생성Branch 자동 삭제* 창을 두 개 띄워놓고 하나는 마일스톤, 하나는 프로젝트 생성 할 것, 기본 설정 시 프로젝트 생성 > 마일스톤 생성 > 티켓생성 > 이슈작성 순서로 보는 것을 권장한다왜? 어차피 ..

Tree계층 구조를 시각적으로 잘 보기 위한 규칙(위 → 아래). Subtreetree의 한 부분, root부터 시작해서 leaf들에 이르기까지의 범위 RootTree 또는 Subtree의 첫 번째 노드( EX. root layout )   Leafchildren이 더 이상 없는 nodelayoutsegment와 그의 자식 node에 일관된 UI를 적용하는 데 사용된다자식 node에 있는 요소들이 공통으로 적용을 받아야 하기 때문에 반드시 children prop이 존재해야 한다주로 headers, footers, sidebars 등과 같은 공통된 요소를 정의하는 데 사용된다같은 레이아웃 내에서 다른 경로 간의 전환 시 리렌더링이 발생하지 않고 상태가 유지된다 template라우팅 탐색 시 각 하위 항목..

Router MPA , SPA  CSR(Client Side Rendering) SSG(Static Site Generation) ISR(Incremental Static Regeneration) SSR (Server Side Rendering) Pages routerpage 폴더에 원하는 페이지의 파일을 만들어 라우팅 하는 것App routerapp 폴더 안에 폴더를 생성하고 page 파일을 만들어 라우팅 하는 것MPA ( Multi-Page Application )다중페이지 애플리케이션여러 독립적인 HTML페이지로 구성되어 있으며 서버 측 렌더링으로 사용자가 페이지를 요청할 때마다 전체 파일을 서버에서 다시 받아와야 하기 때문에 페이지 이동 및 렌더링 시 깜빡임 등이 있다 SPA ( Single P..

Next.js버셀에서 만든 React 프레임워크 정적사이트 생성과 같은 기능을 제공하여 SPA(Single Page Application)를 쉽게 구축할 수 있도록 한다동적 라우팅, 데이터 미리 가져오기, 코드 분할, 이미지 최적화 등을 지원한다 TypeScript를 포함한 다양한 언어와 함께 사용할 수 있다 CRA 설치 명령어npmyarnnpx create-react-app [프로젝트명]yarn create next-app [프로젝트명] 패키지 설치 명령어npmyarnnpm install next react react-domyarn add next react react-dom 프레임워크애플리케이션 개발을 위해 구조와, 규칙 등을 제공하는 도구모음(ex. ppt)코드의 흐름을 제어하는 것이 원래 개발자의..

React CRA와 TS 한 번에 설치하기Type과 Interface함수에서 TS 사용하기비동기 함수에서 TS 사용하기_1비동기 함수에서 TS 사용하기_2Generic (제네릭)useState에서 사용하기React CRA와 TS 한 번에 설치하기npmyarnnpx create-react-app my-first-ts-app --template typescriptyarn create react-app my-first-ts-app --template typescript  pretty type errorTypeScript 오류를 읽기 쉽게 만들어주는 VSCode 플러그인  Type과 Interface Typetype은 새로운 타입을 정의하는 데 사용된다새로운 타입을 만들거나 타입을 결합하거나 변환할 때 사용된다..

boolean number string 배열 tuple enum readonly any unknown union  타입 명시해 주는 방법함수명 = (인자 : 인자 타입) : 리턴값 타입 => 실행 내용함수의 리턴값이 없는 경우 void로 넣어주면 된다const calculateArea = (radius: number): number => Math.PI * radius * radius;const radius = 5;const area = calculateArea(radius);console.log(`반지름이 ${radius}인 원의 넓이: ${area}`);boolean function isValidPassword(password: string): boolean { return password.lengt..

컴파일러(TypeScript Compiler 또는 tsc)프로그래밍 언어로 작성된 소스코드를 다른 프로그래밍 언어로 변환해 주는 도구이다 (TypeScript 코드를 => JavaScript 코드로 변환)컴파일러는 변환 과정에서 소스 코드의 구문과 구조를 검사해 문제가 없는지 확인하며 문제 발견 시 바로 에러 메시지를 출력해 주기 때문에 개발자가 런타임 오류를 방지하고 코드의 안정성을 높일 수 있다타입을 명시적으로 선언하지 않아도 코드를 분석하여 변수 및 함수의 타입을 추론할 수 있으며 코드를 더 간결하게 작성할 수 있도록 돕고, 타입 안정성을 유지할 수 있게 해 준다개발자가 타입을 명시적으로 선언할 수 있도록 타입 어노테이션을 지원한다, 타입을 명시함으로 가독성을 높이고, 코드의 의도를 명확히 전달할 ..