가수면

Sanity에서 sanity에서 graphQL을 사용하려면 엄격한 스키마 지정을 해줘야 함. 예를 들어 아래와 같은 스키마가 있다고 한다면, // schemas/blogPost.js import {defineType} from 'sanity' export default defineType({ name: 'blogPost', title: 'Blog post', type: 'document', fields: [ // ... other fields ... { name: 'sponsor', title: 'Sponsor', type: 'object', fields: [ { name: 'name', title: 'Name', type: 'string' }, { name: 'url', title: 'URL', typ..

타입스크립트로 마이그레이션 npm install typescript --save-dev yarn add typescript --dev tsconfig.json을 생성하고 기본 값을 추가 (tsc --init) 자바스크립트 파일들을 타입스크립트 파일로 변환 tsc로 잘 적용됐는지 확인해가며 작업 ※ 처음부터 타입을 엄격하게 적용하지 않을 것. any 타입으로 선언 후 any 타입을 더 적절한 타입으로 변경해 나갈 것 tsconfig.json target 컴파일된 자바스크립트 코드가 어떤 ECMAScript(웹 브라우저나 다른 실행 환경에서 동작하는 스크립트) 버전과 호환되어야 하는지를 지정. 항상 최신 버전을 지정하면 좋겠지만 호환되지 않는 브라우저도 있을 수 있기에 최소를 목표로 잡는 게 좋다. noIm..

'개체 리터럴은 알려진 속성만 지정할 수 있으며 '{ name?: string | null | undefined; email?: string | null | undefined; image?: string | null | undefined; }' 형식에 'username'이(가) 없습니다.' 기존 라이브러리 없는 속성을 지정할 경우 이러한 타입 오류가 발생한다. 이 경우 라이브러리에서 선언된 타입에 속성을 추가해주면 된다. 라이브러리에 선언 된 타입 확인하기 DefaultSession에 usename이라는 타입을 추가해주면 된다. 추가하기 // src\types\next-auth.d.ts import NextAuth, { DefaultSession } from 'next-auth'; declare modu..

객체는 생성될 때 내부 프로퍼티([[Prototype]])를 가지게 되는데 이 내부 프로퍼티가 다른 객체를 참조하는 경우 참조 대상을 '프로토타입(prototype)'이라 부른다. 프로토타입은 객체의 상위(부모) 역할을 하는 객체이며, 객체는 프로토타입의 속성과 메서드를 상속받아 사용할 수 있다. 그렇게 객체의 [[Prototype]] 연결을 따라 상위 프로토타입을 찾아가는 것을 '프로토타입 체인'이라고 한다. 프로토타입은 부모 객체이지만, 모든 객체가 동일한 프로토타입을 참조한다고 보긴 어렵다. 생성될 때 자신만의 프로토타입을 가지게 된다는 것이 맞을 것이다. 두 코드를 잘 비교해보자. class A { method() { console.log('A 메서드 호출'); } } class B {} B.pr..

url을 입력할 때 params에 특수문자가 들어가는 경우 키 값과 혼동될 수 있다. 예를 들어 ?query=검색어&range=all 라는 검색 url에서 검색어 자리에 &이 들어간다면 어떨까? '?'가 들어간다면? 이런 경우 온전히 키 값을 보내기 위해 인코딩을 해주는 기능이 있었으니 그게 바로 encodeURIComponent()다. 해당 함수를 value에 사용하면 된다. `...?query=${encodeURIComponent("검색어")}&range=${encodeURIComponent("all")}` 그리고 이것과 같이 쓰기 유용한 매소드로 Object.entries()가 있다. Object.entries() const object1 = { a: 'somestring', b: 42 }; con..

offsetLeft / offsetTop 해당 요소가 부모 요소 내에서 위치한 좌표값. 해당 요소의 경계선 왼쪽 위 모서리부터의 거리를 나타냄. scrollY 스크롤 된 높이 clientWidth / clientHeight 요소의 내부 너비, 높이(px). 패딩은 포함되지만 테두리, 여백 및 가로 스크롤 막대(있는 경우)는 제외됨 clientX / clientY 브라우저 화면에서 마우스 클릭 위치의 좌표값. 브라우저의 왼쪽 위 모서리에서 해당 위치까지의 거리를 나타냄. pageX / pageY 문서 전체에서 마우스 클릭 위치의 좌표값. 문서의 왼쪽 위 모서리에서 해당 위치까지의 거리를 나타냄. screenX / screenY 모니터 화면에서 마우스 클릭 위치의 좌표값. 모니터의 왼쪽 위 모서리에서 해당 ..

HTML요소에 'data-'만 붙이면 어떤 데이터든 꺼내 사용할 수 있음 예시) ... 자바스크립트로 사용하기 let article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars" css에서 사용하기 article::before { content: attr(data-parent); } 선택자로도 사용할 수 있음 article[data-columns='3'] { width: 400px; } article[data-columns='4'] { width: 600px; } 타입스크립트 적용 // Mou..

event.stopPropagation(); event: React.MouseEvent event를 props로 넘겨줄 때 // MouseEvent를 import해줘야 하는 듯? import React, { MouseEvent } from "react"; interface UseTooltipResult { onMouseEnterHandler: (event: MouseEvent) => void; } form const onChangeHandler = (event: React.ChangeEvent) => { const onSubmitHandler = (event: React.FormEvent) => {

import { forwardRef } from "react"; import styled from "styled-components"; type SliderNumProps = { page: number; maxPage: number; opacity: number; }; const SliderNum = forwardRef(({ maxPage, page, opacity }, ref) => { let sliderNumBox = []; for (let i = 1; i < maxPage + 1; i++) { sliderNumBox.push(); } return ( {sliderNumBox} ); }); export default SliderNum; const SliderNumBox = styled.ul` posi..

인터섹션 타입두 개 이상의 타입을 결합하여 새로운 타입을 만들어내 여러 타입을 모두 만족시키는 타입을 의미한다.예시)interface IPerson { name: string; age: number;}interface IEmployee { company: string; position: string;}type IEmployeePerson = IPerson & IEmployee;keyof객체의 키 값들을 숫자나 문자열 리터럴 유니언으로 생성enum의 경우는 keyof typeof로 사용type Point = { x: number; y: number };type P = keyof Point; // “x” | “y”enum LogLevel { ERROR, WARN, INFO, DEBUG}// 'ERR..

리액트 쿼리로 가져오는 데이터가 배열이거나 객체일 때 아래처럼 리액트 쿼리에 제네릭을 먹이면 에러가 뜬다. 이럴 경우 제네릭을 여러 개 먹여도 해결되지 않는다. 해결법 받아올 때 타입을 지정해주지 말고 가공할 때 타입을 지정해 주면 된다. 보너스 위처럼 select옵션을 이용해 가공하려고 할 때 역시 제네릭을 없애고 select에서 가공한 후, 사용할 때 타입을 지정해 주면 된다.

let height = 0; alert(height || 100); // 100 alert(height ?? 100); // 0 논리곱은 0을 falsy 한 값으로 취급. 널 병합 연산자는 height가 정확하게 null이나 undefined일 경우에만 100이 됨. 따라서 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합

JSX.Element children이 단일 React 요소여야 하는 경우 사용. 여러 요소는 허용하지 않는다. type Props = { title: string, children?: JSX.Element, }; const Page = ({ title, children }: Props) => ( {title} {children} ); 여러 children 사용 가능. 그러나 이렇게 해도 문자열은 허용하지 않는다. type Props = { title: string, children?: JSX.Element | JSX.Element[]; }; 이렇게하면 문자열도 가능. 그런데 숫자는 불가능... type Props = { title: string; children: | JSX.Element | JSX.E..

라이브러리의 매개변수 타입 선언해줘야 할 때 1. 해당 props를 타고 들어가 본다. 2. 선언된 것을 지정해준다 3. import한다. .

interface 객체를 정의할 때, 확장성이 있을 때 사용 type 데이터를 정의할 때, 확장성이 없거나 적다고 판단될 때 사용 확장 interface interface User { id: number; name: string; age: number; } interface Admin extends User { role: string; } type type PeopleType = { name: string age: number } type StudentType = PeopleType & { school: string } 함수 정의 interface interface Calculation { (a: number, b: number): number; } const add: Calculation = (a, b..

이해하기 아주 좋은 사진이 있어서 가져왔다! 클래스 vs 함수 비교 // 방법1: 함수를 사용한 방식 function Sword(name, color, damage) { this.name = name; this.color = color; this.damage = damage; } // 방법1의 메소드 function.prototype.attack = function() { // 공격 } function.prototype.defend = function() { // 방어 } // 방법2: 클래스 생성자를 사용한 방식 class Sword { constructor(name, color, damage) { this.name = name; this.color = color; this.damage = damage..

해결방법 1 env를 수정하면 서버를 껐다가 다시 켜줘야 한다. 해결방법 2 분명 제대로 한 것같은데도 적용이 안되면 src 최상위 폴더에 잘 있는지 경로를 확인

토큰 등을 헤더에 실어 보내는 데엔 여러가지 방법이 있다. 리덕스 thunk를 사용할 때 1. 일반적인 방법 // axios 인스턴스 const instance = axios.create({ baseURL: process.env.REACT_APP_MY_API, }); export const __main = createAsyncThunk( "MAIN_FINALE", async (payload, thunkAPI) => { try { const { data } = await instance.get("/api/diary", { headers: { authorization: `Bearer ${localStorage.getItem("token")}`, } }) return thunkAPI.fulfillWithVal..

-태그- 내용 -css- overflow: auto; // 높이에 따라 스크롤 생김 white-space: pre-wrap; // 길이 스크롤 방지

1. 유니온 타입 사용하기 2. if문으로 처리하기 3. 널 병합 연산자 or 논리합 사용하기 3. ! 붙이기 (비추천) 확장 할당 어션셜로 값이 무조건 할당되어있다고 컴파일러에게 전달해 값이 없어도 변수를 사용할 수 있게 한다고 한다. 그러나 null이나 undefined도 분명히 해야할 때가 있기 때문에 무조건적으로 권장되는 방법은 아님. 4. 스프레드 연산자로 풀고 !붙이기 (비추천) 'IntrinsicAttributes & IGetData' 형식에 할당할 수 없습니다. 오류 5. !말고 ?붙이기 (추천) 6. 타입 변경하기 'number' 형식은 'string' 형식에 할당할 수 없습니다. 오류 등 layoutId={String(data.id)} 7. as로 타입 단언하기(비추) data의 타입을..