본문 바로가기

JavaScript/React3

React with TypeScript create-react-app으로 React+TypeScript 환경을 세팅하고 싶다면 npx create-react-app app-name --typescript 명령을 실행하면 된다. -끝- create-react-app 말고, 기존에 세팅해둔 프로젝트에 TypeScript를 추가하기 위해선 여러 패키지들을 추가로 설치해주어야 한다. TypeScript를 사용하기 위해 typescript, React와 관련된 타입 정의를 사용하기 위한 @types/react, @types/react-dom 패키지를 설치해준다. npm i typescript @types/react @types/react-dom @types/node @types/jest 자바스크립트 테스트 프레임워크 Jest를 위한 타입 정의가 포함된.. 2021. 1. 9.
React 세팅하기 (without create-react-app) React 개발 환경 세팅하는 법! create-react-app을 사용한다. 처음부터 직접 세팅한다. create-react-app은 리액트 환경을 빠르게 세팅해주는 패키지이다. 공식으로 제공하는 기능이다. React 공식 홈페이지 Create React App에서 사용 방법을 알 수 있다. 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org 강의나 구글링으로 React 세팅 방법을 찾아봤지만 대부분 1번 방법으로 React를 세팅하고 있었다. 그래도 React 공부할 겸 2번 방법을 선택했다. 여기 저기 열심히 찾아보며 겨우 세팅했다... 이제 열심히 세팅한 내용을 정리해보자! (window +.. 2021. 1. 2.
React에 대하여 프론트엔드 개발을 더 효율적이게 도와주는 라이브러리, React에 대해 알아보려 한다. 참고로 React 공식 문서를 보고, 좀 더 잘 이해하고자 블로그에 정리하는 것이다. React는 페이스북에서 만든 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 컴포넌트 단위로 코드를 작성하여, UI를 구성한다. 1. React를 사용하는 이유 상태에 따른 뷰만 간단하게 설계하면 된다. 데이터가 변경될 때 변경되는 컴포넌트만 갱신하고 렌더링하기 때문에 효율적이다. (컴포넌트가 뭘 말하는 것인지는 사용하는 법에 있는 코드를 보면 좀 더 이해가 빠를 것 같다.) 이런 선언적 뷰는 코드를 알아보기 쉽고 디버그하기 쉽게 만들어준다. 또한, React는 컴포넌트 기반으로 개발된다. 이 컴포넌트를 조합하여.. 2019. 10. 29.