기록장

| 설치 https://react-icons.github.io/react-icons/ React Icons react-icons.github.iohttps://icons.getbootstrap.com/  이 사이트에서 미리 볼 수 있고 아래 code로 설치 //yarn 용 라이브러리yarn add react-bootstrap bootstrapyarn add react-icons//일반 용 라이브러리npm install react-bootstrap-icons --savenpm install react-icons --save // npm   | 기본 사용 예import { MdLogin, MdOutlineLogout, MdOutlineAccountCircle } from "react-icons/md"; 사용..

1. 아래와 같이 classNames를 설치함npm install classnames 혹은 yarn add classnames   2. 상단에 import , 설치후에는 아래와 같이 두가지를 동시에 넣을 수 있음 import classNames from 'classnames';      --- 라이브러리 사용하지 않는, 다른 방법 : 템플릿 문자열 사용 ---

| 설치 및 기본 사용 예https://swiperjs.com/react#use-swiper-slide Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com 1. React와 React-DOM 패키지를 아래 버전으로 설치 npm install react@18 react-dom@18 ※ 만약, 이전 버전이 낮거나 높아서 사용이 안된다면, 아래 코드로 삭제후 위 코드로 다시 설치npm uninstall react react-dom  2. Swiper 설치..

📌ReactDOM / React 라이브러리 추가- Settings > JavaScript 탭으로 이동하여 ReactDOM , React 를 External Scripts에 추가- Settings > JavaScript 탭으로 이동하여 ReactDOM을 External Scripts에 추가⚠️ 검색해서 나오는 CDN을 넣고, 19.0.0 버전이 아니라 18.2.0으로 직접 수정해야 잘 동작함  📌Babel 변경- Settings > JavaScript 탭으로 이동하여 JavaScript Preprocessor 를  Babel 으로변경      📌 codepen 으로 실행하는 예시 See the Pen Untitled by galaxy_star (@fold6) on CodePen.

1. 프로젝트 디렉토리로 이동     터미널을 열고 프로젝트 폴더로 이동:     cd REACT-TODO-APP 2. 패키지 설치 (또는 yarn.lock 파일 대신 package-lock.json 파일이 있는 경우 npm install)    필요한 패키지를 설치:     yarn install     또는     npm install 3. 개발 서버 실행     서버를 실행:     yarn start     또는     npm start

| App.jsimport React from "react";import Wrapper from "./component/Wrapper";import Hello from "./component/Hello";import "./App.css";function App() { /* 객체형으로 현재 컴포넌트에서 스타일을 선언하는 방법 */ const style = { backgroundColor: "skyblue", color: "white", fontSize: 40, padding: "1rem", }; const name = "hello2"; return ( {/* css를 적용하는 방법 : className 속성에 적용 */} {/* 컴포넌트안..

App.jsimport React from "react";import Wrapper from "./component/Wrapper";import Hello from "./component/Hello";import "./App.css";function App() { /* 객체형으로 현재 컴포넌트에서 스타일을 선언하는 방법 */ const style = { backgroundColor: "skyblue", color: "white", fontSize: 40, padding: "1rem", }; const name = "hello2"; return ( {/* css를 적용하는 방법 : className 속성에 적용 */} {/* 컴포넌트안에 ..