![]()
보통 리액트는 컴포넌트를 기반으로 개발하게 되며 컴포넌트별로 CSS를 갖는 형식으로 스타일을 관리하게 된다. 하지만 모든 CSS를 한 곳에서 관리하지 않다 보면 CSS의 클래스 명이 중복되어 잘못된 스타일이 적용될 수 있다. 이런 문제를 해결하고자 style-components 라이브럴리가 탄생 style-components 장점 1) 클래스 이름 버그 해결 2) 더 쉬운 CSS 관리 : 모든 스타일이 특정 커모넌트에 연결되기 때문에 사용되지 않은 불필요한 스타일을 쉽게 제거 3) 간단한 동적 스타일 적용 : 컴포넌트의 상태에 따라 쉽고 직관적으로 동적 스타일 적용 4) CSS 자동 구성 : 페이지에 렌더링되는 컴포넌트를 추적하여 해당 스타일을 완전히 자동으로 추가 npx create-react-app ..
![]()
리액트는 자바스크립트이며, 자바스크립트는 동적 프로그래밍 언어이다. 동적 프로그래밍 언어는 런타임 시 변수의 타입이 결정된다. 이렇게 런타임 중 변수의 타입이 결정되면 변수의 타입 때문에 발생하는 버그와 에러는 자바스크립트를 실행해 보지 않으면 알 수가 없다. 이런 문제를 해결하고 정적 타입 분석기인 타입스크립트를 사용한다. TypeScript: JavaScript With Syntax For Types. (typescriptlang.org) JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by..
![]()
@testing-library는 DOM 테스팅 라이브러리이다. 사용자 중심 방식으로 UI 컴포넌트를 테스트하는 데 도움을 주는 라이브러리이다. https://testing-library.com/docs/react-testing-library/intro/ React Testing Library | Testing Library React Testing Library builds on top of DOM Testing Library by adding testing-library.com npm install --save-dev @testing-library/react App.js import logo from './logo.svg'; import './App.css'; function App() { return..
![]()
https://jestjs.io/ Jest By ensuring your tests have unique global state, Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take. jestjs.io C:\Users\knew\Documents\20211104\jest-test>npm init This utility will walk you through creating a package.json file. It only covers the most common items, ..
C:\Users\???>node -v v16.8.0 C:\Users\???>npm -v 8.1.2 C:\Users\???>npx create-react-app --version 4.0.3
