오늘도 기록it

Nodejs, VS Code 설치 npx create-react-app 파일 이름 app.js , index.js 파일 이용 npm run start. -> 파일 실행해서 창 띄우기 npm i prop-types -> prop의 타입을 설정해줘서 오류를 방지할 수 있음 Button.prototype = { text: propTypes.string.isRequired, }; text라는 prop는 string 타입이어야 하고 무조건 값이 있어야 한다. string이 아닌 다른 타입을 넣어주면 경고문을 띄워준다. css 파일은 각 모듈마다 css를 분리하여 만들어주고 그 페이지에 맞는 css를 import 해준다. import propTypes from "prop-types"; import styled fr..

Nodejs, VS Code 설치 npx create-react-app 파일 이름 app.js , index.js 파일 이용 npm run start. -> 파일 실행해서 창 띄우기 npm i prop-types -> prop의 타입을 설정해줘서 오류를 방지할 수 있음 Button.prototype = { text: propTypes.string.isRequired, }; text라는 prop는 string 타입이어야 하고 무조건 값이 있어야 한다. string이 아닌 다른 타입을 넣어주면 경고문을 띄워준다. css 파일은 각 모듈마다 css를 분리하여 만들어주고 그 페이지에 맞는 css를 import 해준다. import propTypes from "prop-types"; import styled fr..

JSX const Title = ( console.log("mouse enter")}> Hello I'm a title ); React const Title = React.createElement("h3", { id:"title", onMouseEnter: () =>console.log("mouse enter") }, "Hello I'm a title"); babel 을 이용해서 JSX로 작성한 코드를 변환 시켜준다.

spa 프로젝트 배포 serve 패키지로 react 배포 npm install serve -g //serve라는 패키지를 전역으로 설치 serve -s build //serve -s 옵션으로 build 폴더를 지정하여 실행 -s 옵셥은 어떤 라우팅으로 요청해도 index.html 을응답 node.js express로 react npm i express server.js 파일 만들고 const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname,'build'))); app.get('*',(req, res) => { res.sendFil..

Reconciliation 랜더 전후의 일치 여부를 판단하는 규칙 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. import "./App.css"; import React from "react"; class Foo extends React.Component { componentDidMount() { console.log("Foo componentDidMount"); } componentWillUnmount() { console.log("Foo componentWillUnmount"); } static getDerivedStateFromProps(nextProps, pre..

unit Test & Jest Easy Setup, Instant Feedback(고친 파일만 빠르게 테스트 다시 해주는 기능) Snapshot Testing 컴포넌트 테스트에 중요한 역할 npm init -y npm i jest -D 이런식으로 test 할 수 있다. npx jest --watchAll 옵션을 주면 jest가 계속 실행되고 있고 저장할 때 마다 테스트가 자동으로 돌아간다. describe("expect test", () => { it("37 to equal 37", () => { expect(37).toBe(37); }); it("{age:39} to equal {age:39}", () => { expect({ age: 39 }).toEqual({ age: 39 }); }); it("...

https://ko.reactjs.org/docs/context.html 하위 컴포넌트 전체에 데이터를 공유하는 법 데이터 set하는놈 가장 상위 컴포넌트 => 프로바이더 데이터를 Get 하는 놈 모든 하위 컴포넌트에서 접근 가능 컨슈머로 하는 방법 클래스 컴포넌트의 this.context 로 하는방법 평셔널 컴포넌트의 useContext 로 하는 방법 데이터를 set하기 1. 일단 컨텍스트를 생성 2. 컨텍스트, 프로바이더를 사용한다. 3. value 를 사용 import React from "react"; const PersonContext = React.createContext(); export default PersonContext; src->contexts->PersonContext.js imp..

하위 컴포넌트 변경 import { useState } from "react"; export default function A() { const [value, setValue] = useState("아직 안바뀜"); return ( E의 값을 바꾸기 ); function click() { setValue("E의 값을 변경"); } } function B({ value }) { return ( 여긴 B ); } function C({ value }) { return ( 여긴 C ); } function D({ value }) { return ( 여긴 D ); } function E({ value }) { return ( 여긴 E {value} ); } 상위 컴포넌트 변경 import { useState }..

https://v5.reactrouter.com/web/api/Hooks 4가지가 있다. useHistory useParams

useReducer 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우 다음 state 가 이전 state에 의존적인 경우 redux 를 안다면 쉽게 사용 가능 import { useReducer } from "react"; //reducer => state를 변경하는 로직이 담겨 있는 함수 const reducer = (state,action) => { if(action.type === 'PLUS') { return { count:state.count+1 }; } return state; } //dispatch => action 객체를 넣어서 실행 // action = > 객체이고 필수 프로퍼티로 type 을 가진다. export default function Example6() { const [..