반응형

자바스크립트 2

[React] TypeScript를 적용해보자.

TypeScript는 자바스크립트를 기반으로 만든 프로그래밍 언어입니다. 즉, 자바스크립트에 새로운 기능을 추가한 것이에요. 타입스크립트라는 언어가 왜 만들어졌냐면, 자바스크립트는 자바나 C++와는 달리 변수의 타입을 선언하지 않기 때문입니다. 해당 언어들은 프로그래밍 언어가 작동하기 전에 타입을 확인하지만 자바스크립트는 아닙니다. 한줄 한줄 실행하죠. ES5에서는 var, ES6부터는 let과 const 를 사용하여 객체, 배열, 문자열, 숫자 등의 모든 타입을 만듭니다. 이에 따라 문자열을 받아서 출력해주는 함수가 있다고 했을 때, 이 함수에 문자열이 아닌 숫자가 들어와도 아무런 문제가 없이 실행되는 것입니다. 이러한 경우에서 문제가 발생하였고, 그것을 해결하기 위해 자바스크립트의 코드에서 타입을 선..

Study/React 2022.12.18

[React] styled-components를 사용해서 CSS를 적용해 보자

따로 CSS 파일을 만들어서 관리하는 것에서 벗어나 자바스크립트 파일 안에서 사용할 수 있도록 만들어주는 라이브러리입니다. 컴포넌트 별로 개발하는 리액트의 특성상, 필요한 CSS만을 사용해서 적용시켜줄 수 있는 이 라이브러리는 합이 잘 맞겠죠? 설치: npm i styled-components 사용 예시: // keyframes : 애니메이션 import styled, { keyframes } from "styled-components" const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; // 정의한 애니메이션 적용 animation: ${animation} 1s linear i..

Study/React 2022.12.17
반응형