jineecode

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#type-assertions Documentation - Everyday Types 언어의 원시 타입들. www.typescriptlang.org 때로는 TypeScript보다 당신이 어떤 값의 타입에 대한 정보를 더 잘 아는 경우도 존재합니다. 예를 들어 코드상에서 document.getElementById가 사용되는 경우, TypeScript는 이때 HTMLElement 중에 _무언가_가 반환된다는 것만을 알 수 있는 반면에, 당신은 페이지 상에서 사용되는 ID로는 언제나 HTMLCanvasElement가 반환된다는 사실을 이미 알고 있을 수도 있습니다. 이런 경우, _타입 단..

getServerSideProps에서 context를 가져올 때 타입에러가 발생할 경우, 확장시켜서 사용한다. export const getServerSideProps: GetServerSideProps = async (context) => { const { userSeq } = context.params; //'ParsedUrlQuery | undefined' 형식에 'userSeq' 속성이 없습니다.ts(2339) ... }; 이때 query는 string으로 받기 때문에, userSeq가 number로 와야할 경우, 형 변환을 따로 해주는 게 좋다. import { ParsedUrlQuery } from 'querystring'; export const getServerSideProps: GetSe..

- 애플리케이션 로직과 뷰(UI)를 분리한 패턴 - UI 구분이 쉬워지며 모킹, 스토리북을 더 쉽게 사용할 수 있습니다. Presentational Components : 데이터가 사용자에게 어떻게 보여지는지 신경쓰는 컴포넌트. 즉, UI. Container Components : 어떤 데이터가 사용자에게 보여 지는지 신경쓰는 컴포넌트 . 즉, API 통신 등을 담당. Container Components import { useState, useEffect } from "react"; export default function useDogImages() { const [dogs, setDogs] = useState([]); useEffect(() => { async function fetchDogs() ..

앱의 수명당 한 번만 초기화하려는 리소스가 있다고 가정합니다. 권장되는 패턴은 일반적으로 구성 요소 외부 에 인스턴스를 만드는 것 입니다. 이것은 일반적으로 redux store과 같이 앱 당 한 번 필요한 리소스에 적합합니다. import type { AppProps } from 'next/app'; import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient() function MyApp({ Component, pageProps }: AppProps) { return ( ); } export default MyApp; 그러나 구성요소를 여러 번 마운트..

연관이 있는 import type ! import type {FC, ComponentProps, ForwardRefRenderFunction} from 'react'; import type {StyleProp, TextStyle} from 'react-native'; ComponentProps React(-Native)의 특정 컴포넌트에서 쓰이는 props 의 타입들을 별도의 타입으로 선언해서 사용하고 싶으면 아래와 같이 작성. export type TextInputProps = ComponentProps; // EX export type TextInputProps = ComponentProps; export const Inputs: FC = () => { return ; }; 위 값을 상속받아 다른 값..

TypeScript 3.8은 타입-전용 imports, exports를 위한 새로운 구문이 추가되었습니다. import type은 타입 표기와 선언에 사용될 선언만 import 합니다. 이는 항상 완전히 제거되므로, 런타임에 남아있는 것은 없습니다. 마찬가지로, export type은 타입 문맥에 사용할 export만 제공하며, 이 또한 TypeScript의 출력물에서 제거됩니다. import type { SomeThing } from "./some-module.js"; export type { SomeThing }; 클래스는 런타임에 값을 가지고 있고 디자인-타임에 타입이 있으며 사용은 상황에-따라 다르다는 것을 유의해야 합니다. 클래스를 import 하기 위해 import type을 사용하면, 확장 ..

함수를 만들어 object 데이터를 다루는 이유 옛날식 1. object 자료가 복잡할 때 좋다. var human = { name: 'Park', age: 30, nextAge() { return this.age + 1 } } human.age + 1; // 31 // 불변성을 유지할 수 없다. human.nextAge(); // 꺼내쓰는 법을 미리 정의 // 31 // 불변성을 유지할 수 있다. 2. object 자료 수정 시 편리하다. var human = { name: 'Park', age: 30, nextAge() { return this.age + 1 }, setAge(나이) { this.age = parseInt(나이); }, } human.age = '20'; // 데이터 수정 시 실수 유..

넥스트에서는 기본적으로 .env.local를 사용하여 불러온 환경변수에 대해 브라우저에서는 노출되지 않고 서버에서만 노출되게 설정되어 있음. // .env.local API_URL = http://localhost:3000 yarn dev Loaded env from /Users/niege/practice/next-practice/next-todo/.env.local // pages/index.tsx import React from "react"; import { GetServerSideProps, NextPage } from "next"; import TodoList from "./components/TodoList"; import { TodoType } from "../types/todo"; impo..