원하는 것을 만드는 수단

테일윈드. 사람인 등의 채용 사이트를 보다보면 종종 언급되는 CSS 라이브러리들 중 하나죠? 처음 테일윈드라는 녀석을 보았을 때는 상당히 친숙한 편이었습니다. 왜냐하면 회사에서 화면단은 부트스트랩을 사용하여 직접 디자인하고 있었는데 너무나도 닮아있었죠. 그래서 신년 계획인 개인 프로젝트에 적용하기로 했습죠! 이후에 폰트를 적용하고자 하는 태그에 className='font-KR'를 적용해주면? 정갈한 폰트로 변하게 되죠! 그리고 한글 폰트와 영어 폰트 두 가지를 적용하고자 이렇게 적용하여 사용하고 있습니다. 도움이 되셨길!

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

따로 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..

리액트를 처음 접하는 사람이라면 가장 먼저 해야 할 일? create-react-app 패키지를 설치하는 일입니다. 리액트 기본 구조를 편리하게 만들어 주는 패키지이죠. 리액트 개발 환경을 설정하기 위해 필요한 webpack과 babel 등 많이 사용하는 라이브러리들을 포함하고 있고 복잡한 설정들을 간단히 해결할 수 있습니다. 설치: npx create-react-app 폴더명 이 아이들을 간단히 정리를 해보자면, npx : npm을 통해 설치하는 파일들을 간단하게 설치하고 실행할 수 있게 도와줍니다. create-react-app : 페이스북에서 만든 공식적인 React 웹 개발용 보일러플레이트(Boilerplate)입니다. 참고로 보일러플레이트라는 것은 최소한의 변경으로 여러 곳에서 재사용되며 반복적..