기록장

만약 내가(AllContext.jsx) 파일에 있는공지사항 의 제목, 연도를 가져오고 싶다고 가정하면 아래와 같은 코드이다  | Main.jsximport React, { useContext, useState } from "react"; //useContext 를 가져오기위한 코드import { Link } from 'react-router-dom'; //이건 링크를 달기위한코드 (a href같은 코드)import AllContext from './AllContext'; // context가 있는 파일을 가져오는 코드function Main() { return( 총 {noticeData.length}건 // 몇 건인지 context파일안의 ..

| 설치 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.

app.js 파일 상단에 아래 코드 입력하면터미널의 warning 이 사라짐/* eslint-disable */

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

| react-router-dom리액트의 라우팅을 위한 핵심 라이브러리.(아래는 라우팅 설정, 파라미터와 쿼리 활용, 서브라우트 구성, 그리고 history 객체를 다루는 방법)  | 설치 및 기본 사용법1. react-router-dom 설치yarn add react-router-dom@5 - 특정 주소와 컴포넌트를 연결할 땐 Route 컴포넌트를 사용 - 주소이동은 Link 컴포넌트로 처리import { Route, Link } from 'react-router-dom';문자    | 파라미터와 쿼리페이지 주소 정의 시 유동적인 값을 전달해야 할 때는 파라미터나 쿼리를 사용함.파라미터: 특정 ID나 이름 조회 시 사용함.예: /profile/apple쿼리: 검색 키워드나 옵션 전달 시 사용함.예: /..

| App.jsimport React from 'react';import Counter from './component/counter';import Input from './component/input';import './App.css';function App() { return ( {/* */} );}export default App;   | counter.jsximport React,{useState} from "react";// 리액트 패키지에서 useState라는 hooks를 불러옴function Counter(){ const[number,setNumber] = useState(0); //number은 초기값 0이 할당 //number에 값을 바꾼다 상태값..

| 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 속성에 적용 */} {/* 컴포넌트안..