오늘 React 프로젝트 발표 시간이 있었는데 우리팀만 UI 라이브러리를 사용하지 않았다😲😲
css를 효율적으로 작성할 수 있게 도와주는 sass(scss)를 사용하긴 했으나 강사님이 직접 css 작성을 하기보다는 UI 라이브러리를 사용하면 더 좋을거같다고 하셨다 그 말이 계속 맴돌았고 UI 라이브러리를 연습해보지 못한거도 아쉬워서 혼자서 해보려한다 겸사겸사 다다음주 시험도 대비하고!
대단한 결과물을 만들건 아니고 흐름과 쓰는 방법 익히는 정도로만 간단하게!!!!!!
반복해서 많이 연습하고 개발 뿌셔👊👊👊
프로젝트랑 동일하게 주제는 방명록 만들기! Todo List랑 거의 비슷해서 수업 복습하기 좋았던 주제였음
일단 내 계획은 이렇다
1. React + Tailwind css 로 간단하게 방명록 구현 (useState만 이용)
- vite설치부터 Tailwind로 틀 잡는거까지 모두 다 강사님 코드 보지 않고 하나하나 해보는게 목표
2. 1번 코드를 useReducer로 바꿔보기
3. 2번 코드를 ContextAPI로 바꿔보기
+ 시간이 된다면!!!!
4. 어떻게 해야 더 효율적으로 코드 짤수있을지 강사님 or 반친구들한테 조언구해보고 리팩토링
5. 다른 UI 라이브러리 이용해보기
useReducer와 ContextAPI는 React 수업 때 아리까리한 채로 수업이 끝나버려서 너무너무 답답한 상태이기때문에 2, 3번은 꼭 해보려한다!!
개발툴 vite 설치
Vite
Vite, 차세대 프런트엔드 개발 툴
ko.vitejs.dev
npm create vite@latest guestbook -- --template react
만들때마다 느끼는데 진짜 친절한거같다 다음에 뭐해야될지 다 써줌 (다른거도 그러나? 경험이 거의 없어서 잘 모름🙄)
cd guestbook
npm install
npm run dev
npm run dev를 하면 이런 화면을 볼 수 있다!
Tailwind css 설치
https://tailwindcss.com/docs/guides/vite
Install Tailwind CSS with Vite - Tailwind CSS
Setting up Tailwind CSS in a Vite project.
tailwindcss.com
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.css
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],content 안에 넣어주기
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
모든 내용 지우고 넣기
App,jsx
import './App.css';
import React from 'react';
const App = () => {
return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
};
export default App;(화살표 함수로 바꿔주었다)
npm run dev
tailwind css 까지 적용 완료
import './App.css'; -> 이거를 빼도 되지않을까 해서 지웠었는데 빼도 되긴한다
대신에 이렇게 변한다
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}App.css 안에 있는 이거로 인해 가운데에 이쁘게 정렬되고 있던거라 App.css와의 연결을 끊으니 바뀌게되는거다
id=root 라고 해준적이 없는데 어떻게 저게 적용되는건데? 라고 한다면 타고타고 올라가보면 되는데
index.html
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
이렇게 연결연결된거라 서로서로 영향을 받게되는거고(??.....적절한 말인지는 모르겠다🤔)
결론은 #root 에 정해주는게 홈페이지 전체 틀을 결정하게 된다!!!!!
-
모든 공식 홈페이지는 친절했다 따라하기만 하면 됐음 굿굿 여기까지는 다 떠먹여주는거라 하기 쉬웠다
오늘은 설치까지만 하고 내일부터 제대로 시작해보려한다
'토이프로젝트 > *' 카테고리의 다른 글
| [React / Tailwind CSS] Guest Book (2) (0) | 2023.12.16 |
|---|