# react typescript

harimad

React에서 TypeScript를 적용해서 Todo 앱을 만들어 보겠습니다. 본론에서는 파일마다 코드가 바뀌는 스냅샷을 두었습니다. 정리란에는 각 파일의 코드를 넣었으니 코드를 참고하면 좋습니다.

hokim

이번 글에서는 크게 세가지를 살펴볼 것이다. tailwind 개별 css 합치기, 커스텀 plugin 추가하기, 반응형이다.

hokim

카카오에서 마이그레이션하면서 쓴 글을 보니 편하고 유용해보여 리액트로 테일윈드를 임포트 + 커스텀하는 방식에 대해 정리글을 쓰려고 한다.

hokim

create-react-app으로 생성하면 앱이 너무 무겁게 돌아가니 좀 가볍게 꼭 필요한것만 넣어서 구성해보자

river_kim_

( 서버와 클라이언트를 만들자 편을 참고 )오늘은 리액트 ( 타입 스크립트 ) 프로젝트를 설치했을 때처음에 무엇을 건드려야 할지 모를 때 간단한 가이드임참고로 아무것도 없는 상태로 만드는 가이드라서 기술적인 부분은 없다.프로젝트를 설치했다면 요런것들이 생겼을것이다.여기

bomida

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

bomida

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

bomida

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

hongwr

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

greatasher7

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

greatasher7

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

greatasher7

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

greatasher7

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

greatasher7

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

greatasher7

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

greatasher7

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

greatasher7

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

with-key

React에 Typescript를 입혀봅시다.

with-key

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

mementomori

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