보호되어 있는 글입니다.

보호되어 있는 글입니다.

recoilnpm i recoilRcoilRootrecoil 상태를 사용하는 컴포넌트는 부모 트리에 RecoilRoot 가 필요하다.import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue,} from "recoil";createRoot(document.getElementById("root")!).render( );AtomAtom은 상태(state) 의 일부, atom 의 값을 읽는 컴포넌트는 atom 을 구독한다.구독하는 컴포는트는 atom의 상태 변화가 있으면 rerender한다 .const textState = atom({ key: "textState", // unique ID default:..

React-Hook-Form (비제어 컴포넌트)React 기반의 폼 관리 라이브러리로, 폼 상태 유효성 검사를 처리 방법폼 요소의 값이나 상태 변경에 대한 이벤트를 관리하기 위해 이벤트 핸들러를 작성 할 필요 없이, hook(useForm,useController,useWatch..)을 사용해서 관련 데이터를 추적 및 업데이트를 할 수 있다.장점간결한 API직관적인 API를 제공 폼 로직 단순화높은 성능입력 필드값의 변화를 추적해서 "상태" 대신 참조(reference)를 사용해서 불필요한 리렌더링을 방지한다.유효성 검사React-Hook_Form 내장 유효성 검사를 지원하며, Yup,Joi등의 외부 라이브러리와 통합 가능, 검사를 수행하고 에러 메세지를 표시할 수 있습니다.주요개념useFormReact..

npmnpm install vite-plugin-svgr --save-devdevDependencies에 설치!vite.config.ts 수정import { defineConfig } from 'vite';import react from '@vitejs/plugin-react-swc';import svgr from 'vite-plugin-svgr';export default defineConfig({ plugins: [react(), svgr()], ...});주의사항(vite 버전 별 import 방법)vite-plugin-svgr(4.0.0 이전 버전)import { ReactComponent as TestSVG } from "assets/images/test.svg";return ;// inde..

useRefuseRef는 rerendering 이 필요하지 않은 값을 참소 할 수 있는 React Hook 이다.initialValue : ref객체의 current프로퍼티 초기 설정값이다. 이 인자는 초기 렌더링 이후 무시된다!ref.current 프로퍼티를 변경해도 컴포넌트를 다시 렌더링 하지 않습니다.사용법import { userRef } from "React";const ref = useRef(initialValue);useRef는 처음에 제공한 initialValue로 설정된 단일 프로퍼티가 있는 ref객체를 반환한다.다음 렌더링에서도 동일한 객체를 반환(초기화).ref를 사용하면 다음을 보장합니다:(렌더링할 때마다 재설정되는 일반 변수와 달리) 리렌더링 사이에 정보를 저장할 수 있습니다.(리렌..

axios 란?브라우저 및 Node 환경에서 사용 가능한 Promise 기반의 HTTP 클라이언트,주로 Rest API 통신에 사용, 간단한 API 를 통해 HTTP 요청을 할 수 있다!주요 기능Promise 기능Axios는 비동기 처리를 위한 Promise 를 사용하며, .then().catch()를 통해 결과를 처리 할 수 있다요청과 응답Axios 는 요청과 응답 데이터를 변환 할 수 있는 기능이 있다.transformRequest, transformResponse 를 통해 데이터를 가공 할 수 있다.자동 JSON 변환👍🏻요청 데이터가 Object 일 경우 자동으로 JSON 으로 변환응답 데이터도 자동으로 Object로 변환interceptors⭐️요청이나 응답을 가로채서 추가적인 처리를 할 수 ..

Union TypeUnion 은 합집합이다. | 로 구분하고 javascript 의 OR 연산자와 비슷한 역활을 한다.(영단어 union 자체가 '합집합'이라는 뜻)type Marvel = "IronMan" | "Captain";type Dc = "Batman" | "Superman";type Hero = Marvel | Dc;// "IronMan" | "Captain" | "Batman" | "Superman" 모두 가능const iAm: Hero = "IronMan"; //OK타입 지정을 Hero로 하면 Marvel ,Dc 의 모든 영웅을 할당 할 수 있다.Intersection TypeIntersection 은 교집합이다. 여러 타입을 조합하여 하나의 타입으로 만들수 있다.교차 타입은 & 로 타입을..

class란?클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 툴로,객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.class User(){ //=> class 함수는 첫 문자를 대문자로 약속🤙🏻 name:string; // => 멤버 변수 constructor(name){ this.name = name; } method1(){ console.log(this.name); }}const user = new User('hyun nam');user.method();// hyun namnew User()를 호출하면 내부에서 정의한 메서드가 들어있는 객체를 생성합니다.new 함수를 호출하면 constructor()로 객체를 초기화 합니다..

Typescript Watch mode!👀tsc app.ts를 사용해서 .js 변환 후 사용하면 conflict 난다...매번 바꿀떄마다 확인하기도 힘들고 ...tsc app.ts -w여러개의 파일을 comfile해야 할 떈?!cd typescript-comfiler // 해당 파일로 이동tsc --init // tsconfig.json 파일 생성tsconfig.json 의 설명typescript 를 위한 프로젝트 파일 표시기,이 폴더에 있는 프로젝트와 모든 하위 폴더는 타입스크립트로 관리되고 있다.tsc=> .ts 로 생성된 파일들 전체를 .js로 변환해준다.(테스트 때 conflict 엄청 날거 같은데...)tsconfig.json의 사용법"exclude": ["node_modules"],"incl..