# react typescript

16개의 포스트
post-thumbnail

[React] React Hook Form

React Hook Form 사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 form입니다. 공식문서 보기 사용하는 법 React-hook-form 설치하기 명령어를 입력해주세요. Form register register 예약어를 사용하면

2022년 4월 7일
·
0개의 댓글
post-thumbnail

[React] Coin Tracker 강의 정리

🚨 이 글은 노마드 React JS 마스터 강의를 본 후 정리한 글입니다. 강의 내용에 대한 언급 없이 강의를 보면서 새로 익힌 Hooks나 Componenet, Library 등을 간략하게 정리한 글입니다. 👩‍💻 개발환경 세팅 react-typescript

2022년 3월 31일
·
0개의 댓글
post-thumbnail

[React] TypeScript 적용하기

작업폴더경로에서 터미널을 오픈한 뒤설치가 다 되었다면 .js파일을 전부 .tsx파일로 바꿔서 사용가능합니다.(React로 작업을 하지 않는다면 .ts파일로 사용)파일을 전부 변경해준 뒤 npm start로 서버를 재시작 해줍니다.새로 작업할 폴더 생성 후 IDE와 터미

2022년 3월 29일
·
0개의 댓글

22.03.17 React-typescript

함수형 컴포넌트에서 부모한테 props를 받을 때는 React.FC를 넣는다.여기에서 FC는 functional component를 의미하는 것으로 함수형 컴포넌트에서는 이것을 넣어주어야 한다.이때 컴포넌트에서는 React.FC를 쓰는 순간 children prop을

2022년 3월 17일
·
0개의 댓글

React & Typescript Setup (without CRA) - 6 (환경변수 설정)

환경변수 설정하기 환경변수를 통해 프로젝트 내 외부에 노출하지 말아야 할 정보(Api key, Password 등)들을 노출시키지 않을 수 있다. 1. .env 파일 생성 및 환경 변수 설정 프로젝트의 루트 경로에 생성하며, 파일의 내용은 key=value 형태로 써

2021년 12월 28일
·
0개의 댓글
post-thumbnail

Redux with react&typescript

React 환경에서 Redux에 typescript를 적용하는 방법이다.(Redux toolkit)React + javascript 환경에서 짜여진 Redux 코드에 typescript를 적용하는 과정을 보여주는 글로, redux 관련 세부 코멘트는 생략한다.코드는 여

2021년 11월 22일
·
0개의 댓글
post-thumbnail

React & Typescript Setup (without CRA) - 5 (Font 설정)

Font 설정하기 프로젝트에서 사용할 폰트를 설정해보겠다. 1. 폰트 파일 추가 1) 폰트 파일 다운로드 구글폰트(google fonts)에서 폰트를 다운로드 받는다. 원하는 폰트가 없으면 구글링해서 폰트 파일을 받아도 무방하다. 폰트 파일 확장자가 다수 존재하는데

2021년 10월 22일
·
0개의 댓글
post-thumbnail

React 캔버스로 서명 그리기 (react-signature-canvas)

react-signture-canvas 로 서명 그리기 진행 중인 회사 프로젝트에서 서명을 그리는 기능을 넣기로 했다. 어떻게 구현을 할 수 있을까 생각하던 중, javascript + canvas로 그림판을 만드는 내용의 노마드코더의 강의가 생각이 나서 해당 강의를

2021년 10월 18일
·
0개의 댓글
post-thumbnail

React & Typescript Setup (without CRA) - 4 (React 파일 구조)

React 파일 구조 리액트를 공부하면서 프로젝트의 파일 구조에 대한 고민이 참 많았다. 일단은, 리액트 공식 문서에 파일 구조 관련한 대략적인 내용이 있기는 하다. (공식 문서) 하지만 정말 대략적인 내용이고, 아래의 내용이 꽤 강조된 모습으로 쓰여져있다. "이

2021년 10월 13일
·
0개의 댓글
post-thumbnail

React & Typescript Setup (without CRA) - 3 (eslint & prettier 설정)

이번에는 개발자가 코딩을 하기에 편리한 기능들을 지원해주는 eslint와 prettier를 셋업해보겠다.1) eslint 설치 $ npm install -D eslint 2) prettier와 react 관련된 패키지 설치$ npm install -D eslint-co

2021년 10월 6일
·
0개의 댓글
post-thumbnail

React & Typescript Setup (without CRA) - 2 (Webpack & babel 설정)

Webpack & babel 설정 지난 포스트에서 React & Typescript 설치 및 기본 설정을 했다. 이제부터는 Typescript를 여러 브라우저에서 지원하는 버전의 Javascript로 변환하는 일 등을 맡아서 할 Webpack & bebel 설정을 하

2021년 10월 5일
·
0개의 댓글
post-thumbnail

React & Typescript Setup (without CRA) - 1 (React / Typescript 설정)

creat-react-app 없이 프로젝트 셋업하기 React 프로젝트를 생성할 때, npm에서 제공하는 creat-react-app(CRA)를 사용하여 쉽게 생성할 수 있다. 하지만 직접 webpack, babel 등을 사용하여 CRA의 도움 없이 프로젝트를 생성해

2021년 10월 5일
·
0개의 댓글

Typescript + React Typing 총 정리

React에 Typescript를 입혀봅시다.

2021년 9월 11일
·
0개의 댓글

class component의 타입 선언

클래스 컴포넌트의 제너릭은 ?

2021년 9월 9일
·
0개의 댓글

TypeScript type system

TypeScript란? > - TypeScript는 JS의 static type checker(코드 실행 없이, error를 detect)임 TypeScript는 Typed Superset of JS (JS 코드를 그대로 오류 없이 실행 가능) 실무에서 많은 경우의 오

2021년 4월 13일
·
0개의 댓글
post-thumbnail

Typescript + React + Rollup으로 풀세트 Component Library만들기

최근에 회사에서 ui-library처럼 사용할 global-package를 만들며 setup한 내용들을 공유합니다.

2021년 2월 24일
·
1개의 댓글