TAILWIND CSS

고정훈·2023년 11월 6일

오늘은 React.js 설치와
Tailwindcss 설치를 하고 사용법을 배웠다
중간중간 잘못따라가고 오류도 있었지만
블체스 강사님은 절대로 그냥 지나가시지 않는다 될때까지 가르쳐주신다👍👍👍

오늘 상세하게 배운것은 Tailwind css 다
저번에 클론코딩할때 HTML을 작성하고 CSS를 꾸며줄때
엄청나게 복잡하고 힘들었던 기억이 떠오른다

하지만 Tailwindcss 에서는 배우면 배울수록 생산성을 훨씬 업 시킬수있을것같다.

먼저 React 설치부터

하기전에 SPA와 MPA를 알려주셨는데
SPA(Single Page Application) React는 SPA에 포함 된다고한다
예를들어 YOUTUBE에 좋아요 와 같은 버튼을 설명해주셨는데
이버튼을 눌렀을때 만약에 페이지가 새로고침되면 네트워크 낭비가 얼마나 심하겠는가 어떠한 버튼을 누를때마다 페이지가 새로고침되고
내가 보던 동영상이 다시 재생된다면 이용에 불편함을 느낄것이다.
MPA(Multiple Page Application) 이것이 위에서 말한
내가 어떠한 페이지 버튼을 누르게 되면 새로고침되는것이다 .

하지만 이 둘에는 장단점이있는데
SPA는 한번에 한페이지에 많은 양의 데이터가 들어있어
초기 로딩은 MPA보다 늦는다 하지만 페이지 이동에 장점이 있는것은
SPA다 한번에 한페이지에 많은 데이터가 있어서 페이지 이동은 MPA보다
훨씬 빠르다
그리고 SEO(Search Engine Optiamization)검색 엔진 최적화 부분에서는 SPA 가 MPA보다 떨어진다.

그러고나서 설치에 들어갈때
React를 시작하기전 web pack CRA(Creacte React App)
을 설치한다.

npx create-react-app . or forldername

이렇게 app 뒤에 .은 현재 폴더에 다운로드이고 혹은 폴더이름을
작성해 해당폴더에 다운받아주면된다.
경로가 제대로 지정되어있지않으면

cd 를 이용해서 경로를 지정해준다.
그후에 npm run start

npm run start 명령어로 실행이 되는지 확인한다.

이 화면이 뜨면 굿굿
그리고 나서 왼쪽 익스플로러에서 살짝 건드려줄거다

이부분에서

App.js -> App.jsx
App.css and logo.svg 삭제

변경된 상태의 익스플로러화면에서

App.jsx 부분에 import 삭제
그리고 function 함수를 const 화살표 함수로 바꿔준다

그렇담 이제 Tailwindcss 로 넘어갈 준비완료!

이제 다시 터미널에 들어가기전!
Tailwindcss에서 get started 버튼 클릭
-> frameworks guides -> CRA 들어가주면
엄청 상세하게 잘나와있다
여기서부터는
1번 순서는 우리가 앞부분에서 했기때문에
2번 부터 찬찬히 해주면된다

npm install tailwindcss
설치를 기다린후 
npx tailwindcss init

잘 설치가 되었는지 확인은 package.json에 가면 dependencies 안에 tailwindcss님이 들어가있다.

그이후에 다시 3번부터
content 안에 있는 큰따옴표 녀석들 "./src/*/.{js,jsx,ts,tsx}" 을 config에 복붙해주고

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

이 세개를 index.css에 복붙해주면 끝!!

다음으로 Tailwindcss 를 사용해보면

App.jsx에서 html/css 와 비교해보면
html 에서 class를 주고 css에서 꾸며주는것과는 다르게
Tailwindcss 에서는 className(Name은 대문자로)="bg-red-200"
bg는 백그라운드 red 색상 200은 색조 강도이다 이렇게 바로 스타일을
먹일수있다 얼마나 획기적인가 🤩🤩
그리고나서 바로 npm run start 조지면 localhost 3000으로
적용된 div가 출력된다