욕심도 참 많아

프로젝트를 하던 중 '고용 형태' 를 열거형 enum타입으로 d.ts 확장자 파일에서 설정해주고 사용하려고 했는데,해당 파일에서 enum 타입을 as const로 export해서 사용할때 잘 안되는 것을 확인하여 이유를 찾아보면서,일단 d.ts확장자는 컴파일 시점에서만 사용되며, 런타임에는 포함되지 않기에 동작이 안되는 것을 확인하였다.(enum은 실제 런타임 값을 생성하는 구조체 이기에!!)그치만 다른 ts파일에서도 enum을 사용하려고 조금 더 알아 보면서, enum을 깡으로 쓰는것은 안티 패턴이라는 글을 많이 찾아보게 되었다.이유부터 말하자면1. enum은 Typescript에서 열거형 기능을 만들기 위해 생성한 기능으로 , 다시 JS로 트랜스파일이 되면서 번들러에서 TreeShaking을 못하게 ..

프로젝트를 하는 도중 컴포넌트 인터페이스 설정할때 useForm에 타입매개변수를 넣어주려했는데, 생각지 못한 부분에서 타입 에러가 났었다.interface testProps{ A : useForm B : useForm | useForm} 그래서 타입 매개변수안에 | 을 넣을때 A와 B의 경우 무슨 차이점이 있는지 자세히 알아보려 했다.A , B가 다음과 같이 정의되어있다고 가정해 보자 interface A { name: string; age: number;}interface B { email: string; subscribed: boolean;}interface testProps { A: useForm; B: useForm | useForm;} 이 경우, useForm는 name과 ..

Babel은 JS 트랜스파일러 입니다. 트랜스 파일러 : 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환해주는 얘 Babel은 주로 최신 JS (ES6 이상)을 구형 브라우저에서도 동작할 수 있도록 ES5 같은 이전 버전의 JS로 변환하는 데 사용됩니다. 또한, React의 JSX같은 문법도 JS로 변환해 줍니다. const add = (a, b) => a + b; ES6 에서 도입된 화살표 함수 이기에 Babel을 사용하면 var add = function(a, b) { return a + b; }; 이렇게 변환 된다. const element = Hello, world!; 같은 JSX는 const element = React.createElement('h1', null, 'Hello, world!..

저번 글에 이어서, 오늘은 react-hook-form을 사용할때 놓칠수 있는 점들과, 여러가지 팁에 대해서 다뤄보겠습니다. watch / useWatch 1. watch watch는 useForm 훅에서 반환되는 함수 중 하나로, 지정된 폼 필드의 현재 값을 반환하여 줍니다. 폼 필드의 값 변화를 실시간으로 관찰 할 수 있으며, 특정 필드 또는 전체 폼의 값을 얻을 수 있습니다. => 주로 폼 컴포넌트 내에서 사용되며, 해당 컴포넌트의 리렌더링 범위에 영향을 줍니다. 즉, watch를 사용하는 컴포넌트는 관찰하는 필드 값이 변경 될 때마다 리렌더링 됩니다. 2. useWatch useWatch는 리훅폼에서 제공하는 별도의 훅으로, watch와 유사하게 폼 필드의 값 변화를 관찰합니다. 하지만 useWa..

Vite란?? Vite는 프론트엔드 프레인워크로, ES 모듈을 기반으로한 개발서버와 빌드 도구를 제공한다. 경량화된 개발 도구로, CRA 같이 React 프로젝트를 생성하고 구성하는데 사용된다. (기존 webpack, rollup, parcel 과 같은 bundler 이다) 기존의 Webpack Webpack은 모든 모듈을 번들링하여 하나의 파일로 만들고, 이 파일을 로딩할때까지 브라우저에서 지연시간이 발생한다. 반면 vite는 es 모듈 시스템을 통하여 필요모듈만 빌드하고, 빌드된 모듈은 브라우저에 바로 로딩된다. Why Use Vite?? CRA대신 Vite를 쓰는 이유는 다음과 같다. 빠른 빌드 시간: Vite는 빠른 빌드 시간을 제공합니다. 이는 Vite가 빠르게 재구성되는 ESM(ES Modul..

Axios 란 브라우저 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. Fetch에 비해 별도의 설치가 필요하지만, fetch보다 더 많은 기능 지원과 문법을 간소화 해준다. 나는 이번 프로젝트를 진행하면서 전역적으로 사용하기 위하여, axios.create 를 사용해 주었다 import axios from "axios"; const api = axios.create({ baseURL: "~~", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 해당 파일을 생성해 준뒤, api만 따로 import 하여 URL은 뒤에 추가만 해주면 된다! import api fro..