기록장

1. 코드펜 오른쪽 하단의 Embed를 클릭   2. 원하는 설정후 HTML 탭에서 copycode  3. 글쓰기 바의 가장 오른쪽, 블로그 글쓰기 모드를 HTML 으로 변경 후 삽입   4. 글쓰기 모드를 다시 기본모드로 바꾼 후 완료!(글쓸때 보면 아래 사진과 같이 해당 계정에 들어가서 보라고 나오지만, 실제로 글쓰기 '완료'로 퍼블리싱 된걸보면 제대로 동작한다)   See the Pen Untitled by galaxy_star (@fold6) on CodePen.

📌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 */

원래의 Prettier 단축키는 ctrl + alt + p? 인가 그런데자신이 쓰고싶은 걸로 바꾸려면 아래처럼 하면 된다! 1. Prettier 다운 및  설치2. 설정(ctrl+,) 에서  default formatter 검색하여 Prettier 로 설정3. 키보드 설정 (바로가기) ctrl+k ctrl+s 에서 Format Document 검색하여키 바인딩 : Ctrl + Shift+  B 변경(나는 위 바인딩이 편해서 이렇게 씀)  이렇게 prettier 설정에서 (확장 프로그램 목록의 톱니바퀴 아이콘 클릭)TAB 가로 폭도 바꿀수있다! (기본이 2이라서 나는 4로 변경)

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

App.js에서 Wrapper 라는 컴포넌트를 쓰다가,Wrapper안에 새로운 요소를 추가해야 하는 상황이라면,(원래 컴포넌트 안에 태그를 추가 할 수없음ㅇ) 기존 Wrapper.jsx안에 코드(div,p 등등) 를 추가해야 하지만,Wrapper.jsx에 children 요소를 추가함으로써html 처럼 App.js에 자식요소를 그대로 넣을 수 있게 됨   | Wrapper.jsx 코드import React from "react";function Wrapper({ children }) { return( {children} );}export default Wrapper; Wrapper 에 자식요소로 들어갈 children 을 지정해주고,App.js에서 html 에서 div,p등등을 입력하듯 작성함  ..

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