부트캠프교육중/react80 [노마드코더] CRA에서 CSS적용하는 새로운방법 노마드코더 강의를 보고 CRA 환경에서 CSS를 적용하는 새로운 방법을 알게되었다. 전체 button에 css를 적용하는게 아니고 내가 원하는 button에만 css를 적용하는 방법 중의 하나이다. 일단 css파일 이름을 Button.module.css로 하고 .btn { background-color: tomato; color: white; } Button 컴포넌트로 가서 import styles from "./Button.module.css"; 이렇게 파일 불러오고 적용하는 방법은 이렇게 하는거다. ; 이렇게 이용하면 css를 컴포넌트처럼 원하는곳에서 사용할수 있다. 2023. 7. 30. [코딩애플]4강 컴포넌트만들기, map사용 # 컴포넌트 만들어보기 import "./App.css"; import { useState } from "react"; import "bootstrap/dist/css/bootstrap.min.css"; import { Navbar, Container, Nav } from "react-bootstrap"; import data from "./data"; function App() { let [shoes] = useState(data); return ( ShoeShop Home Cart {shoes[1].title} {shoes[1].price} {shoes[2].title} {shoes[2].price} ); } function Card(props) { return ( {props.shoes[0].tit.. 2023. 6. 22. [코딩애플] 1~3강 레이아웃을 복사붙여넣기식으로 편하게 개발가능한 => bootstrap 라이브러리 구글에다가 react bootstrap이라고 검색해라. npm install react-bootstrap bootstrap //app.js import "./App.css"; import "bootstrap/dist/css/bootstrap.min.css"; function App() { return ; } export default App; import "./App.css"; import "bootstrap/dist/css/bootstrap.min.css"; import { Button } from "react-bootstrap"; function App() { return ( Primary ); } export defau.. 2023. 6. 22. [todolist]수정기능 구현중2 일단 누르면 상태에따라 버튼이 수정과 제출로 다르게 뜨게 여기까지 구현했다. 이제 input뜨는거 추가하고 그러면 될듯. 일단 누르면 상태에 따라 todolist랑 수정버튼이 뜨고 수정버튼을 누르면 input창과 제출버튼이 뜨게 구현했다. 문제는 하나만 움직이는게 아니고 다 움직인다는게 문제다. 해야할부분 1. id가 같은거만 input창으로 뜨게한다. 2.axios연결해서 input내용이 변경되게하게 일단 현재까지의 코드 todo import { useState, useEffect } from "react"; import axios from "axios"; import styled from "styled-components"; import TodoList from "../Todo/TodoList"; c.. 2023. 6. 17. 이전 1 ··· 6 7 8 9 10 11 12 ··· 20 다음