리오의 일상

[React] 리액트 컴포넌트 스타일링_CSS, Sass, CSS Module, styled-components 컴포넌트 스타일링을 조사하던도중 자세하게 정리된 내용이 있어 공유하고자 합니다. 좀더 자세한 내용은 벨로그 https://velog.io 를 참조하시면 될듯하며 출저 등은 항상 아래에 표기해놓습니다. 리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하나 사용해보겠습니다.저는 개인적으로 컴포넌트 하나마다 Sass 파일 하나씩 만들어서 관리를 하는것을 선호하고, 최근 만드는 프로젝트에서는 styled-components 를 사용하기도 합니다 :) CSS Module 은 작년에 자주 사용했었는데 사용하기가 ..

[React] 리액트(react) 설치 및 설정 리액트란? 리액트 프로젝트시 컴포넌트를 파일로 분리해 저장하며 또 이 컴포넌트는 일반 JavaScript 가 아닌 JSX 라는 문법으로 저장하게됨이 여러가지 파일을 한개로 결합기위해 Webpack 이라는 도구를 사용하고 JSX / JavaScript 등의 문법을 사용하기위해 Babel 이란 도구를 사용. 시작전 준비물Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 기반이기 떄문에 설치 Yarn: npm 의 상위버전으로써 더나은 속도/캐싱을 위해 사용 코드 에디터: VSCode , Atom, WebStorm, SublimeText 윈도우의 경우, Git for Windows 를 설치해서 앞으로 터미널에 무엇을 입..