React

webpack deprecated

https://www.youtube.com/watch?v=ifSTp9WEHpo 

react-scripts > config > webpackDevServer.config

setupMiddlewares: (middlewares, devServer) => {
    if (!devServer) {
        throw new Error('webpack-dev-server is not defined')
    }

    if (fs.existsSync(paths.proxySetup)) {
        require(paths.proxySetup)(devServer.app)
    }

    middlewares.push(
        evalSourceMapMiddleware(devServer),
        redirectServedPath(paths.publicUrlOrPath),
        noopServiceWorkerMiddleware(paths.publicUrlOrPath)
    )

    return middlewares;
},

 

 

 

https://react.vlpt.us/basic/22-context-dispatch.html

22. Context API 를 사용한 전역 값 관리 · GitBook

https://developer0809.tistory.com/133

[#. React] parent에서 버튼 클릭할 때마다 children에서 div 영역 생성하기

* fast-api 연동

https://testdriven.io/blog/fastapi-react/

 -내가 놓친 부분 (data 같은 건지 체크필요)

 const fetchProjects = async () => {
      const response = await fetch("http://localhost:8000/project")
      const projects = await response.json()
      setProjects(projects.data)
    }

@app.get("/project",tags=["projects"])
async def get_projects() -> dict:
    return {"data": projects}​

 

*iterate 오류

https://upokary.com/uncaught-typeerror-object-is-not-iterable-cannot-read-property-symbolsymbol-iterator/

 

*Input Textbox 추가하기

https://developer0809.tistory.com/133

 

*... 의미

https://krksap.tistory.com/1381

* 배열에 객체 추가

https://velog.io/@bellecode20/%EA%B0%9D%EC%B2%B4%EB%A1%9C-%EC%9D%B4%EB%A3%A8%EC%96%B4%EC%A7%84-%EB%B0%B0%EC%97%B4%EC%97%90-%EA%B0%9D%EC%B2%B4-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-%EB%A6%AC%EC%95%A1%ED%8A%B8-React-hooks

*함수형컴포넌트 이벤트 핸들링 form

https://technicolour.tistory.com/48

https://bgeun2.tistory.com/28

* 항목별 삭제

https://bgeun2.tistory.com/28

 

*eslint

[오류해결] npm install 설치시 npm ERR! code ERESOLVE

npm install 뒤에 ' --save --legacy-peer-deps ' 를 추가해주면 된다.

 

https://velog.io/@vsnm25/JSX-%EC%99%80-Eslint-Prettier-%EC%A0%81%EC%9A%A9

 

 

오류해결

[Webpack] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default

https://velog.io/@jaewoneee/Webpack

 

오류해결

react class Add React Component onClick

https://archuive.tistory.com/58

<바르게 정렬 Prettier>

install

https://prettier.io/docs/en/install.html

 

실행

https://www.daleseo.com/js-prettier/

npx prettier "index.js"

 

<JSX란>

https://developerntraveler.tistory.com/54

[React 기초] JSX란? / JSX 문법

 

https://m.blog.naver.com/pjt3591oo/221907792621

[react] React Developer Tools를 이용한 컴포넌트 렌더링 이해와 배포

<reactstrap>

https://anerim.tistory.com/145

[리액트 React] reactstrap 사용하는 법 / reactstrap 실무에서 사용하는 기능 공유 / reactstrap 종류

https://reactstrap.github.io/?path=/story/home-installation--page 

Storybook

<react-bootstrap>

https://samtao.tistory.com/30

리액트에서 부트스트랩(React Bootstrap)적용하기

<Switch>

https://baeharam.netlify.app/posts/react/why-switch-is-needed

[React] <Switch>는 언제 써야 할까? - 배하람의 블로그

<Route render >

https://nyang-in.tistory.com/228

[React] react-router에서 render 이용해서 컴포넌트 보여주기

 

<no-unused-vars 오류 안뜨게 하는 법>

https://leirbag.tistory.com/106

React 터미널 창에 Warning 안뜨게 하는법

 

<usecallback>

https://www.daleseo.com/react-hooks-use-callback/

React Hooks: useCallback 사용법

<Form 만들기>

-참조 사용하기 

리액트에서 폼 컴포넌트를 만들어야 할 때 몇 가지 패턴을 사용할 수 있다. 

그중 참조라는 리액트 기능을 사용해 직접 DOM에 접근하는 방법이 포함된다. 리액트에서 참조는 컴포넌트의 생명주기(lifetime)값을 저장하는 객체다. 참조와 관련한 여러가지 용례가 있다. 이번에는 참조를 사용해 DOM 노드에 직접 접근하는 방법을 살펴본다.

 

import React, {useRef} from "react";

export default function AddQuest({ onNewQuest = f => f }) {
    const Qtitle= useRef();
    const Qanswer= useRef();

    const submit = e => {
        e.preventDefault();
        const title = Qtitle.current.value;
        const answer = Qanswer.current.value;
        onNewQuest(title, answer);
        Qtitle.current.value="";
        Qanswer.current.value="";

    };

    return (
        <form onSubmit={submit}>
            <input ref={Qtitle} type="text" />
            <input ref={Qanswer} type="checkbox" />
            <button>ADD</button>
        </form>
    );
}

 

제어가 되는 컴포넌트

폼 값을 DOM이 아니라 리액트로 관리한다. 제어가 되는 컴포넌트를 쓸 때는 참조를 사용할 필요도 없고, 명령형 코드를 작성할 필요도 없다. 제어가 되는 커모넌트를 사용하면 튼튼한 폼 검증 기능 등의 추가가 훨씬 더 쉬워진다.

import React, { useState } from "react";

export default function AddQuest({ onNewQuest = f => f }) {
    const [title, setTitle] = useState("");
    const [answer, setAnswer] = useState("");

    const submit = e => {
      e.preventDefault();
      onNewQuest(title,answer);
      setTitle("");
      setAnswer("");  
    };

    return(
        <form onSubmit={submit}>
            <input value={title}
            onChange={event => setTitle(event.target.value)}
            type="text"
            />
        </form>
    );

   
}