DAY : 11
ReactDay : 1

React

1. What is React?

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 사용자가 느끼는 편의성이 좋고 앱으로 발행하기에 적합하다. 따라서 웹페이지가 아니라 웹앱을 만든다라고 한다.
( 참고하기 좋은 사이트 : https://react.vlpt.us/basic/01-concept.html )

2. 기본 세팅

• React와 tailwind를 사용하기 위한 세팅 과정은 아래와 같다.
  
  React
  1) npx create-react- app 파일명 (파일명은 snake표기법 주로 사용)
  2) cd 파일명
  3) npm run start
  4) (react 파일이 생성되면) App.css, logo.svg 삭제
  5) App.js의 @import명령, index.css 내용 전체 삭제
  6) App.js 확장자 .jsx로 변경
  
  Tailwind : https://tailwindcss.com/docs/guides/create-react-app
  1) npm install -D tailwindcss
  2) npx tailwindcss init
  3) tailwind.config.js 파일에 경로 추가

  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

  4) index.css 파일에 아래 코드 추가

  @tailwind base;
   @tailwind components;
   @tailwind utilities;

  5) npm run start
  6) App.js에서 h1 태그를 작성하고 className을 "text-3xl font-bold underline"로 설정하고 잘 작동하는지 확인

3. tailwind

1) What is tailwind?

: Tailwind CSS is an open source CSS framework. 사용하기 쉽다는 장점이 있다. react 파일에서 사용되지만 js에는 영향을 미치지 않는다. (className에서 스타일 값을 지정)

2) 사용법

  <div className="bg-red-100 min-h-screen">

다음과 같이 기존에 지정되어 있는 속성들을 연속하여 나열한다.
익숙하지 않은 값들은 vsCode에서 Extensions로 Tailwind CSS IntelliSense를 설치하고 커서를 위에 올리면 설명이 나온다.
+ mx : margin-x축
+ py : padding-y축
+ screen size -> {'sm': '640px','md': '768px','lg': '1024px','xl': '1280px','2xl': '1536px'}
+ rem단위를 사용한다. text는 1rem === 16px이며, h/w의 경우 4px이다. 또한 []를 사용하여 px 지정이 가능하다.
❗ rem : 최상위 태그의 font-size 값을 기준
( 추가적인 내용은 아래 사이트에 잘 정리되어 있다.
: https://velog.io/@woodong/2.-Tailwind-CSS-%EC%82%AC%EC%9A%A9 )