ksw_devlog

useQuery로 받아온 데이터를 navigate를 통해 props를 전달해주는 코드를 짰다. 추후에 다시 정리해서 설명예정... import axios from "axios"; const BASE_URL = 'http://localhost:3001'; export const videoApi = axios.create({ baseURL: BASE_URL, headers: { 'Content-type': 'application/json', } }); // export const createVideo = async () => { // // const response = await videoApi.post('/videos'); // const response = await axios.post('http://l..

어제 보았던 react hook form을 이용하여 게시글 작성 기능을 구현하였다. import styled from 'styled-components'; import { useForm } from 'react-hook-form'; import { useMutation, useQueryClient } from 'react-query'; import { v4 as uuidv4 } from 'uuid'; import axios from 'axios'; import { useNavigate } from 'react-router-dom'; import { authService } from '../common/firebase'; export default function PostPage() { const quer..

React Hook Form react-hook-form https://www.react-hook-form.com/ Home React hook for form validation without the hassle www.react-hook-form.com React에서 기존 사용자입력값을 관리하려면, useRef나 useState를 이용해야했지만, React Hook Form을 이용하면 간단하게 처리할 수 있다. 아래는 공식홈에 있는 예제코드이다. 예제코드 import React from "react"; import { useForm } from "react-hook-form"; const Example = () => { const { handleSubmit, register, formState: { ..

Type script를 배우는 주간이었다. 기본 타입부터 union, any, unknown, void Narrowing, Assertion, type alias, interface 등을 배울 수 있었다.

Generic 적용한 함수만들기 함수에 이런 괄호를 열면 파라미터를 또 입력할 수 있습니다. 근데 여기 안엔 타입만 입력할 수 있습니다. 타입파라미터 문법임 function 함수(x: MyType[]) :MyType { return x[0]; } let a = 함수([4,2]) let b = 함수(['kim', 'park']) 그럼 이제 함수를 사용할 때도 안에 파라미터처럼 타입을 입력할 수 있습니다. 그럼 님들이 이제 함수( ) 이렇게 쓰는 순간 MyType 이라는 변수에 number 라는게 들어간다고 보시면 됩니다. 그럼 이제 함수( x : number[] ) :number { } 이거랑 똑같이 동작합니다. 그럼 뭐가 좋겠습니까. 아까 unknown 가득한 예제와는 다르게 return 되는 타입이 n..

Class에서 Type script 복습 class Car { model :string; price :number; constructor(a :string, b :number){ this.model = a; this.price = b; } tax() :number{ return this.price * 0.1 } } let car1 = new Car('소나타', 3000) console.log(car1.tax()) console.log(car1) -------- class Word { num; str; constructor(...param : any[]){ let nums :number[] = []; let strs :string[] = []; param.forEach((i)=>{ if(typeof i =..

function 내함수(x :number | string){ return x + 1 //에러남 } Operator '+' cannot be applied to types 'string | number' and 'number' string | number 같은 union type 에는 일반적으로 조작을 못하게 막아놔서 그렇습니다. 이런 메세지를 보면 1. 타입을 하나로 Narrowing 해주거나 2. Assert 해주거나 둘 중 하나 해주면 됩니다. Type Narrowing if문 등으로 타입을 하나로 정해주는 것을 뜻합니다. 그래서 아까 함수를 사용할 때 function 내함수(x :number | string){ if (typeof x === 'number') { return x + 1 } else ..

this의 뜻 1-1. 그냥 쓰거나 함수 안에서 쓰면 this는 window를 뜻합니다. 그냥 HTML 파일 아무거나 하나 만들고 중간에 이렇게 변수를 큰 공간에 만드시면 x라는 변수는 window라는 큰 오브젝트안에 자동적으로 생성됩니다. 함수도 마찬가지고요. 아무튼 그냥 보관소입니다. 끝! *전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수입니다. 그냥 script태그 내에 쌩으로 var 변수 하나 만들면 그건 자연스레 전역변수가 됩니다. --- 1-2. this는 메소드를 가지고 있는 오브젝트를 뜻합니다. 쉽게 외우고싶다면 this는 '메소드의 주인님'을 지칭합니다. 그럼 밑의 예제의 this는 무슨 값이 출력될까요? var 오브젝트2 = { data : { 함수 ..