경험하는 IT

React - React Query(TypeScript) 설치 및 셋팅

React Query 설치 먼저 프로젝트에 React Query를 설치한다. React-Query 홈페이지로 들어가면 아래와 같이 설치 명령어가 있다. 알맞은 명령어를 선택해 설치한다. $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query # or $ bun add @tanstack/react-query 설치가 완료되었다면 프로젝트에 셋팅을 해보자. React Query 셋팅 - React import React from "react"; import ReactDOM from "react-dom/client"; import {QueryClient, QueryClientPr..

React - React Query(TypeScript)란?

React Query 란? React 애플리케이션에서 데이터를 관리하기 위한 JavaScript 라이브러이이다. React Query는 서버에서 데이터를 가져오고 캐시하고 상태를 관리하는데 도움이 된다. 데이터 가져오기, 캐싱, 상태관리등을 간단하게 처리할 수 있다. React Query 핵심 - Data Fetching 단순화 기존 방식은 Fetching 코드를 작성하고 데이터를 넣을 상태 생성, useEffect를 사용해 Mount시 Fetching을 해야 했다. import { useEffect, useState } from "react"; const getData = async () => { const data = await fetch( "API 주소" ).then((response) => res..

Next.js - routing

Next.js 라우팅 Next.js에서 라우팅은 페이지의 경로를 정의하고 해당 경로에 맞는 컴포넌트를 렌더링하는 방법을 의미한다. 라우팅에 방법은 두가지 이다. "App Router"와 "Pages Router" 이다. 각각에 대해 설명해보자. App Router 상태를 유지하고 리렌더링을 방지하면서 자체 경로 안의 컴포넌트와 UI를 쉽게 공유할 수 있다. App Router를 이용하기 위해서는 /app 디렉토리에 파일을 생성해야 한다. 다음과 같이 원하는 파일명을 만든 뒤 그 파일에 page.tsx를 작성하면 된다. 원하는 폴더 안에 page에 파일 확장자는 js, jsx, tsx를 쓸 수 있다. main이라는 폴더에 page UI를 작성 후 직접 실행해 확인해보면 정상적으로 작동하는 것을 볼 수 있다..

Next.js 설치 및 개발환경 셋팅

개발 환경 셋팅 1. Node.js 설치 2024.02.19 - [👨‍💻 node.js] - Node.js 설치 이전 글을 참조하면 된다. 2. VScode 설치 Next.js 프로젝트 생성 1. 터미널 창을 명령어를 입력해준다. npx create-next-app@latest 명령어를 입력해주면 위와 같이 뜬다. Ok to proceed? (y) => y를 눌러준다. What is your project named? [원하는 프로젝트 명] Would you like to use TypeScript? 타입스크립트를 사용할 건지 물어보는 것이다. 원하는 것을 선택하면 된다. Would you like to use ESLint? ESLint를 사용할 건지 물어보는 것이다. 원하는 것을 선택하면 된다. Wou..

TypeScript - if else in types

if else in types if 조건문 처럼 "조건에 따라서 이럴 경우 string, 저럴 경우 number" 와 같이 타입지정이 가능하다. 조건부로 타입만들기 type Age = T; 위 코드에서 Age라고 쓰면 number가 된다. 이걸 "타입 파라미터 자리에 string 타입을 집어넣으면 string을 부여하고 그게 아니면 전부 unknow 부여한다" 에 조건문으로 바꿔 볼 것이다. 타입 조건식은 주로 extends 키워드와 삼항연산자를 이용한다. extends는 왼쪽이 오른쪽의 성질을 가지고 있냐 라는 뜻으로 사용할 수 있기 때문에 조건식 용도로 사용가능하다. type Age = T extends string ? string : unknown; let age : Age //age는 string..

TypeScript - type mapping

Type mapping 특정한 타입을 다른 타입으로 변환하는 과정을 의마한다. 이를 통해 코드의 유지보수성을 높이고 가독성을 향상시킬 수 있다. 주로 제네릭(Generic)과 함께 사용되며, 주로 유연한 코드 작성이 요구되는 상황에서 활용된다. keyof 연산자 keyof는 object 타입에 사용하면 object 타입이 가지고 있는 모든 Key값을 union type으로 합쳐서 내보낸다. interface Person { age: number; name: string; } type PersonKeys = keyof Person; //"age" | "name" 타입됩니다 let a :PersonKeys = 'age'; //가능 let b :PersonKeys = 'ageeee'; //불가능 person ..

TypeScript - Index signature

Index signatures 객체(object)의 속성을 동적으로 정의하는 방법 중 하나이다. 객체가 특정 속성을 가질 때마다 해당 속성의 유형을 지정할 수 있다. 일반적으로 객체의 속성은 사전에 정의되어야 하지만 때로는 런타임 시에 정의되는 동적인 속성이 필요할 수 있다. 이런 경우 index signatures를 사용하여 객체의 속성을 유연하게 처리할 수 있다. - index signatures 기본구문 { [propertyName: string]: propertyType; } 여기서 [propertyName: string]은 객체의 속성 이름을 나타내며, 'propertyType' 은 해당 속성의 유형을 나타낸다. 이러한 색인 서명을 사용하면 객체의 속성이 사전에 정의되지 않은 경우에도 TypeS..

TypeScript - implements

Implements 키워드 클래스가 특정 인터페이스를 구현할 때 사용된다. JavaScript를 보완하여 정적 타입 검사를 지원하는 TypeScript에서는 인터페이스를 사용하여 코드의 구조를 정의하고, 클래스가 해당 구조를 따르도록 강제할 수 있다. class Car { model : string; price : number = 1000; constructor(a :string){ this.model = a } } let 붕붕이 = new Car('morning'); class Car로 부터 생산되는 object들은 model과 price 속성을 가지게 된다. 근데 class가 model, price 속성을 가지고 있는지 타입을 확인하고 싶다면 interfece + implements 키워드로 확인하면..

TypeScript - declare

TypeScript 에서 'declare' 키워드는 타입 선언이나 외부 라이브러리에 대한 타입 정의를 할 때 사용된다. 이는 TypeScript 컴파일러에게 해당 이름이 이미 존재한다는 것을 알려주는 역할을 한다. 주로 외부 라이브러리나 모듈에서 가져온 것을 선언할 때 사용된다. 'declare'는 런타임 코드를 생성하지 않는다. 대신, 컴파일러 타입 체크를 위해 사용된다. 1. 외부 라이브러이에서 가져온 모듈 선언 // externalLibrary.d.ts declare module 'external-library' { export function someFunction(): void; export const someValue: number; } // 사용 예제 import { someFunction,..

TypeScript - TypeScript + Redux

🖥️ Redux 란? 2024.02.19 - [👨‍💻 React] - Redux 이전 글을 참고하자 ⌨️ Redux Toolkit 및 react-redux 설치 // npm npm install @reduxjs/toolkit react-redux // yarn yarn add @reduxjs/toolkit react-redux Redux를 카운터 예제로 알아보자. import React from 'react'; const Counter: React.FC = () => { const counter = 0; return ( {counter} 더하기 빼기 ); }; export default Counter; 버튼을 눌러서 counter를 조작하는 컴포넌트가 있다. 지금은 버튼을 눌러도 작동하지 않을 것이다. ..

TypeScript - React + Typescipt

🖥️ React와 TypeScript 활용하기 React에 TypeScript를 활용한다면 다음과 같은 이득을 따져봐야 한다. 프로젝트 사이즈가 큰가 협업시 다른 사람이 짠 코드를 참조할 일이 많은가 장기적으로 유지보수에 도움이 되는가 나중에 팀원이 더 필요해도 인력수급이 쉽게 가능한가 팀원들 학습에 필요한 시간과 비용이 적게 드는가 TypeScript를 남들이 쓴다고 무조건 적으로 쓰는 행위는 하지말아야 한다. ⌨️ React + TypeScript 설치 npx create-react-app 프로젝트명 --template typescript TypeScript 셋팅이 완료된 프로젝트를 설치 하는 방법이다. 기존 프로젝트에 TypeScript만 더하고 싶다면 기존 프로젝트 경로에서 다음과 같은 명령어를 ..

TypeScript - TypeScript Generics

🖥️ Generics TypeScript 에서 Generics는 코드의 유연성을 높이고 타입 안정성을 유지하는 데 사용되는 강력한 도구이다. Generics를 사용하면 함수, 클래스, 인터페이스 등에서 여러 타입을 다룰 수 있으며, 코드의 재사용성을 높일 수 있다. 🖥️ Generics의 기본 구문 function 함수이름(매개변수: T): T { // 함수 내용 return 매개변수; } 는 제네릭 타입 매개변수를 나타낸다. 이 매개변수는 함수 내부에서 사용되는 모든 타입을 대표한다. 🖥️ 함수에서의 Generics function identity(arg: T): T { return arg; } // 사용 예제 let result = identity("Hello, TypeScript Generics!"..