분류 전체보기403 [ React Query ] 게시물에 따른 comments 업데이트 React Query에서 데이터가 만료되었다는 뜻은? 데이터 refatching 실행에는 만료된 데이터 외에도 여러 트리거가 있다. 컴포넌트가 다시 마운트 되거나 윈도가 다시 포커스 되었을 때 만료된 데이터일 경우에만 refatching이 실행된다. staleTime translates to ‘max age’ 데이터가 만료됐다고 판단하기 전까지 허용하는 시간. 웹사이트에 표시된 데이터가 10초까지는 그대로여도 괜찮다면 staleTime을 10초로 설정한다. staleTime의 기본 값이 0인 이유 데이터는 항상 만료 상태이므로 서버에서 다시 가져와야 한다고 가정한다는 뜻이다. 게시물에 따른 comments 업데이트 문제: 게시물에 따른 comments가 업데이트 되지 않는다. 첫 번째 게시물의 comme.. 2023. 1. 21. [ React Query ] useQuery, isError, isLoading Cliente State vs. Server State Client state: user’s chosen language or theme. Server state: information stored on server React Query, 3가지 키워드 Query - 어떤 데이터에 대한 요청을 의미한다. Mutation - 어떤 데이터를 바꾸는(추가, 수정, 삭젝) 것이다. Query Invalidation - 쿼리를 무효화 시킨다. React Query 실행 순서 1. React Query 설정 npm install react-query 2. Create query client: 쿼리와 서버의 데이터 캐시를 관리하는 클라이언트 3. Apply QueryProvider: 자녀 컴포넌트에 캐시와 클라이언트.. 2023. 1. 19. [ WebSocket ] 채팅기능 구현(1) - port에 서버 뛰우기 WebSocket이로 채팅 기능을 구현해 보았다. 현재 파일구조 websocket-chatting ├─ README.md ├─ back │ ├─ package-lock.json │ ├─ package.json │ └─ src │ └─ server.js └─ front package.json 파일 생성 npm init -y node modules & package-lock.json 파일 생성 npm install express nodemon nodemon 이란? Node.js 서버가 실행 중일 때 코드에 변경사항이 생기면 서버를 내리고 다시 가동을 시켜야 한다. 이때, nodemon을 이용하면 굳이 서버를 내리지 않아도 변화된 부분을 반영시켜 주는 Node.js 패키지이다. 설치 npm install no.. 2023. 1. 18. [ TypeScript ] 제네릭 & 타입 추론 제네릭 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것 아래 코드는 text라는 파라미터를 받아 그대로 text를 반환한다. 아래의 코드에서는 string이 들어와도 타입은 any로 반환하고 숫자가 들어와도 any를 반환한다. 반환을 할 때 그에 맞는 타입을 반환하고 싶을 때 제네릭을 사용하면 된다. function getText(text: any): any { return text; } getText('hi'); // 'hi' getText(10); // 10 getText(true); // true 를 사용한 아래 코드가 제네릭의 기본 문법이다. function getText(text: T): T { return text; } getText('hi'); getText(10); getText(t.. 2023. 1. 17. [ TypeScript ] Interface & Intersection Type type vs interface 타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부이다. 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능합니다. 따라서, 가능한 한 type 보다는 interface로 선언해서 사용하는 것을 추천합니다. Interface 사용법 기본 정의 interface Person { name: string; age: number; } const person1: Person = { name: 'js', age: 20 }; const person2: Person = { name: 'ljs', age: 'twenty' }; // Error 선택 속성 interface Person { name: string; age?: number; } const pe.. 2023. 1. 17. [ TypeScript ] Union 타입 & Type Alias (사용자 정의 타입) OR 연산자 ( A || B ) printOut함수는 input 파라미터를 받아서 해당 파라미터를 출력해 준다. const printOut = (input: string | number) => { // 문자열 또는 숫자형이 올수있다. console.log(input); } printOut('문자열'); // 문자열 printOut(20); // 20 printOut(true); // Error typeof toFiexed()는 소수에 사용된다. typeof을 사용하여 number일 경우와 string일 경우를 조절해 줄 수 있다. function getAge(age: number | string) { if (typeof age === 'number') { age.toFixed(); return age; .. 2023. 1. 16. [ TypeScript ] 타입 표기 (Type Anotation) String let str: string = 'TypeScript'; //str 변수 선언 str = 123 // Error str = true // Error str = undefined // Error Number let num: number = 6; //num 변수 선언 let hex: number = 0x288; // 0x는 16진수로 만들어준다 let binary: number = 0b1010; // 0b는 2진수로 만들어준다. let octal: number = 0o288 // 0ㅐdms 8진수로 만들어준다. Boolean let isTrue: boolean = true; Array (배열) let arrNum : number[] = [1,2,3]; let arrStr : string[] = .. 2023. 1. 16. [ TypeScript ] TypeScript 기초 다지기 및 파일 생성 TypeScript VS JavaScript Time TypeScript는 변수의 타입이 컴파일타임에 결정된다. JavaScript는 변수의 타입이 런타임에 결정된다. 컴파일타임? 런타임? 컴파일 타임 (Compile time): 작성한 소스코드가 어떠한 것(js, binary 등)으로 변환되는 과정 런타임(Runtime): 프로그램이 실행되는 과정 TypeScript를 왜 쓸까? 장점 단점 TypeScript 1. Microsoft에서 만들었고 꾸준히 업데이트를 한다. 2. 생태계가 크다. 3. Microsoft에서 개발한 VScode와 잘 맞는다. 4. 대부분의 Library에서 타입 정의 파일을 제공한다. 5. 유지보수가 JS보다 유리하다. 1. JavaScript에 비해 어렵다. JavaScrip.. 2023. 1. 16. [ WIL ] 내일배움캠프 11주차 보호되어 있는 글 입니다. 2023. 1. 15. 이전 1 ··· 6 7 8 9 10 11 12 ··· 45 다음 728x90
