본문 바로가기

분류 전체보기410

[ 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.
[ ReactNative / KPT ] 동네북 프로젝트 회고 동네북 프로젝트 기간: 2022.1.20 - 2022.1.30 프로젝트 S.A. KEEP 팀원들과 프로젝트 기간 동안 소통이 잘 돼서 git push, pull, merge가 큰 문제없이 잘 이뤄져서 좋았던 것 같다. PROBLEM 마지막날에 UX부분적으로 개선을 하려고 했지만 기능 구현을 마무리 짓다 보면 UX에 작은 아쉬음들이 남았다. TRY 다음 프로젝트에 기회가 된다면 발표 이틀 전에 프로젝트 완료를 목표로 하고 하루정도는 UI/UX개선에 신경을 써서 완성도를 높여보고 싶다. FEEL 한 사람이 맡은 기능이 아직 구현이 되지 않았을 때 그 팀원을 마냥 두는것이 아니라 함께 힘을 보아 문제점을 찾고 끝내 해결해 내는 모습이 멋졌던 것 같다. 2023. 1. 13.
728x90