1. Tailwind CSS?

• css 프레임워크이다.
• html 혹은 js 파일에서 className을 주는 것으로 css를 처리할 수 있다! css 파일을 옮겨 다니며 만들지 않아도 된다!

2. 어떻게 사용하나요?

1. npm install 한다.
   • npm install -D tailwindcss@latest
   • npm install -D postcss@latest
   • npm install -D autoprefixer@latest
   • nm install -D postcss-loader
     • post css에 관련한 패키지도 함께 설치하자. post css는 이전 포스팅에 있기 때문에 자세한 설명은 생략.
2. 각 config 파일들을 설정한다.

   • //postcss.config.js (파일이 없다면 만들어 쓴다)
     
     module.exports = {
     	plugins: { tailwindcss: {}, autoprefixer: {}, }
     }

   • // tailwind.config.js
     
     module.exports = {
       purge: [],
       darkMode: false, // or 'media' or 'class'
       theme: {
         extend: {},
       },
       variants: {},
       plugins: [],
     }

     • 간단하게 npx tailwindcss init 해도 된다.

   • // webpack.config.js
     
       module: {
         rules: [
           {
             test: /.jsx?$/,
             include: [path.resolve(__dirname, "src")],
             exclude: [path.resolve(__dirname, "node_modules")],
             loader: "babel-loader",
           },
           {
             test: /.css?$/,
             exclude: [],
             use: ["style-loader", "css-loader", "postcss-loader"],
           },
         ],
       },

     • 순서가 중요하다. use 부분의 가장 마지막에 넣어주자.
3. css를 적용해서 작업한다.

   • // index.css나 App.css에서 전체적으로 적용시킨다.
     
     @import "tailwindcss/base";
     @import "tailwindcss/components";
     @import "tailwindcss/utilities";

   • import React from "react";
     
     function page() {
     	<div>
         	<div className="m-15 text-red-500">
             	Hello World!
             </div>
         </div>
     }

   • className을 위의 예시처럼 정해주면 그에 맞게 바뀐 스타일을 얻을 수 있다.
   • 여기서 m은 margin, 그리고 택스트의 색을 바꿔 주었다.
   • 다양한 적용방법과 템플릿들은 공식 홈페이지에서 찾을 수 있다.

1. 문제의 발단

부트캠프 프로그램을 진행하며 페어와 만날 때 아이스 브레이크로 포지션이 어떻게 되냐는 질문을 자주 했다. 몇몇 사람들은 css가 너무 어렵고 디자인도 어떻게 해야 할지 잘 몰라서 백엔드를 지망하는 사람들도 있었다. 아마 처음 css를 배울 때 한번 접근은 쉽지만 파고들면 너무 어렵고 한 번도 해 본 적 없는 디자인에 관련한 것이라서 그렇다고 생각했다. 그렇다면 bootstrap을 이용해 쉽게 접근하고 몇 가지 좋은 결과물을 만들어 보고 접근하면 css에 대한 자신감도 붙고 더 재미있게 공부할 수 있을 것 같다는 생각에 드디어 이 포스팅을 해 보려고 한다.

2. BootStrap?

• 디자인을 도와주는 프레임워크이다. 이미 만들어진 구조를 통해 className을 이용해 적용시키면 그럴듯한 작업물을 얻을 수 있다.
• 심지어 반응형도 만들어 준다!

3. 어떻게 사용하나요?

1. 먼저 bootstrap을 다운로드한다.
   • npm install react-bootstrap bootstrap
2. css파일을 import 한다. 가장 상위의 js파일인 index.js나 App.js에 적용하면 된다.

   • import 'bootstrap/dist/css/bootstrap.min.css';

3. 필요한 컴포넌트를 import 해서 적용시켜 작업할 곳에 사용하면 된다.
   • https://react-bootstrap.github.io/components/alerts/

• 필요한 컴포넌트들을 위 사이트에서 찾아서 사용하면 된다.

• // 이렇게 Button 이라는 컴포넌트를 가져와서 바로 사용하면 된다.
  
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { Button } from "react-bootstrap";
  
  function page() {
  	return (
      	<div>
          	<Button>Hi!</Button>
          </div>
      )
  }

• 위의 사이트에서 예시로 보듯이 variant 속성에 값을 주면 모양을 바꿔가며 사용할 수 있다.

매우 간단하게 적용할 수 있다.
사용하는 것은 좋지만 꼭 직접 css파일에 들어가 보고 어떤 css속성으로 만들어진 것인지를 확인하고 공부하는 것도 중요하다고 생각한다.
그리고 어느 정도 적응이 된다면 직접 만들어 보는 것도 좋은 공부가 될 것이다!
가장 중요한 것은 css의 재미를 모두가 알았으면 좋겠다.

1. PostCSS?

• JavaScript를 이용해 CSS를 편하게 작성할 수 있게 도와주는 플러그인을 사용할 수 있게 하는 플러그인이다.
• 혼자서는 아무것도 못 하고 자바스크립트와 함께 사용할 수 있다.
• 우리가 creat-react-app 하면 함께 설치된다.

2. 어떤 기능들이 있나요?

• 약 270개가 넘는 플러그인들이 있다. 그중 간단한 것을 살펴보면
  1. autoprefixer : -webkit과 같은 prefix를 생략해준다.
  2. postcss-for : for 문을 css에서 쓸 수 있게 된다.
  3. postcss-color-function : 색의 밝기를 조절 할 수 있다.
  4. postcss-nesting : 들여쓰기 가능!

3. 어떻게 사용하나요?

1. 만약 인스톨 되지 않았다면?
2. npm install postcss poscss-loader --save-dev
3. 인스톨 후 루트 root에 'postcss.config.js' 파일을 만든다.

module.exports = (ctx) => ({
 parser: 'postcss-scss', // 만약, scss등의 파싱이 필요한 경우 설정한다.
 plugins: [
  require('postcss-import')({
    path: ['app/assets/']
  }),
// 다음 필요한 플러그인들을 적는다.
 ]
})

// 플러그인들은 실행순서가 중요하다. 위에서 부터 아래로 실행하기 때문이다.
// 그래서 충돌 없이 실행시키기 위해서는 PostCSS의 깃헙 레포로 가서
// Readme를 참고하여 순서를 지켜줘야 한다.

1. 문제의 발단

포트폴리오 배포를 깃허브로 하기로 하였다. 포트폴리오는 정적 사이트이기 때문에 간단하게 배포할 수 있기 때문에 바로 적용해 보도록 한다. 정말 못 하는 게 없는 깃허브다.

2. 어떻게 하나요?

1. 레포를 만든다.
   • 아래의 그림처럼, 이름을 자신의 '깃허브 아이디.github.io'로 만들면 이 것이 도메인이 되어 사용이 가능하다.
   • 나는 이미 포트폴리오 사이트를 만들어 사용중이므로, 중복된 이름이라고 뜬다.
   • 퍼블릭으로 만들자.
   • Readme를 추가해주자.
2. 작업을 한다.
   • 초기 세팅은 create-react-app으로 간단하게 하고 작업하는 것이 편하다.
3. 작업이 끝나면 'gh-pages'를 install 한다. 
   • npm install gh-pages --save-dev
4. package.json파일을 수정한다.

   • "name": "[Github 아이디].github.io",
         "version": "0.1.0",
         "private": true,
         "homepage": "https://[Github 아이디].github.io",
         
         // homepage 부분을 추가한다. 주소는 레포를 만들때 설정했던 그대로 한다.

   •     "scripts": {
             "start": "react-scripts start",
             "build": "react-scripts build",
             "test": "react-scripts test",
             "eject": "react-scripts eject",
             "predeploy": "npm run build",
             "deploy": "gh-pages -d build"
         },
         
         // predeploy와 deploy 부분을 추가한다.

5. npm run deploy로 배포한다.
6. 배포한 깃허브 레포로 들어가서 Settings -> Pages 탭에 가보면 

이렇게 되어 있어야 배포가 완료 되었다는 말이다. 아직 체크표시가 아니라면 세로 고침을 하면서 기다려보자. 시간이 조금 걸릴 수 있다.