React

react는 무엇인가? react는 왜 쓰는가?

Hook이란?

어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정출처 : 위키백과친구에게 카카오톡을 보내는 행위는 어떻게 보면 데이터를 전송하는 과정이다.무전기가 아니라면 보내는 사람의 핸드폰에서 받는 사람의 핸드폰으로 데이터가 직통으로 전송되지는 않는다.만약 직통

리액트 강의를 들으면서 실습하던 중 이런 에러가 떴다. 난 잘 따라 치고 있었는데??Too many re-renders. React limits the number of renders to prevent an infinite loop.검색해보고 아주 간단하게 해결onC

우리말로 생애주기. 리액트에서 생애주기가 무엇인지 알아보자.생애주기일반적인 시간에 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정1\. Mount\-컴포넌트가 화면에 나타나는 것.2\. Update\-sate가 바뀌거나, 부모 컴포넌트가 리렌더 되거나,

이벤트가 상위 요소로 퍼지는 현상.자식 요소를 클릭해도 부모요소와 부모요소의 부모요소와 부모요소의 부모요소의 부모요소........등 더이상 부모요소를 만나지 않을 때 까지 상위요소를 함께 클릭하게 되는 현상.위 코드는 좋아요 버튼을 누르면 숫자가 올라가는 기능을 수행

react에서 state를 변경하는 함수는 비동기로 처리된다.오래 걸리기 때문에 빨리 수행할 수 있는 것부터 먼저 처리하고state변경함수를 처리한다.setValue 함수가 먼저지만 console.log()가 먼저 수행되기 때문에첫 글자를 입력해도 value가 아직 변

https://react-bootstrap.netlify.app/터미널에 설치 명령어를 입력해준다.App.js파일에 import 하거나index.html 파일 head 태그 안에 붙여넣어준다.App.js보다는 index.html에 넣는게 더 낫겠다.Button

설치 후 사용할 컴포넌트에서 import 해준다.변수에 담아 컴포넌트처럼 사용 가능하다.하나의 버튼을 만들어놓고 배경 색깔만 바꾸고 싶다면 props 문법으로 여러가지 색상을 부여할 수 있다.CSS 파일 없이 JS파일에서 바로 스타일을 넣을 수 있다.컴포넌트 내에 적은

html css로 미리 디자인 만들어놓기UI의 현재 상태를 state로 저장state에 따라 UI가 어떻게 보일지 작성(ex 조건문)

input에 문자가 입력되면 숫자를 입력하라는 경고창을 띄우는 코드다.이상하게 계속 에러가 나길래 정답지를 봤는데 아무리봐도 똑같았다.useState와 useEffect 위치를 바꿨더니 됐다.답지에도 useState가 위에 있는데 못알아차리고 틀린그림찾기 했다.순서가

서버에서 데이터를 받아오는 것 뿐만 아니라 데이터를 서버로 전송하는 것도 가능하다.전송할때는 보통 post요청을 쓴다.받아오는 방식과 마찬가지로 url을 입력하고 그 뒤에 데이터를 실어 보낼 수 있다.promise내의 요청이 모두 성공했을 경우 then 안의 코드가 실

1. Redux 사용하는 이유 컴포넌트들이 props 없이 state 공유 가능하다. 2. Redux-toolkit redux를 좀 더 쉽게 쓸 수 있게 해주는 라이브러리다. 세팅하기 설치 터미널에 입력해 설치해준다. store.js 파일 생성하고 import

1. Redux state 변경하는 방법 기존의 useState와는 다른 방식으로 state를 변경해야 한다. 1. store.js 안에 state 수정해주는 함수를 만든다. 2. 다른 파일에서 쓸 수 있게 export 한다. 3. 원하는 파일에서 import하고

1. state가 array/object일 때 변경하는 방법

프로젝트를 만들 때 브라우저에서 확인하면 새로고침할 때 데이터가 리셋된다.브라우저는 새로고침하면 html, css, js파일을 처음부터 다시 읽기 때문이다.새로고침해도 데이터를 그대로 보관하고 싶다면 서버로 보내서 DB에 저장하면 된다.서버가 없는 경우 localSto

react-query는 SNS를 만들 때, 코인거래소 등 실시간 데이터를 계속 몇 초마다 보여줘야하는 사이트에서 유용하게 쓰인다.터미널에 명령어 입력index.js에서 밑 코드 입력하고 QueryClientProvider태그로 감싸주기상단에 import 해주기

npm ERR 에러 스크롤 totop 버튼을 만들기 위해 gsap을 설치하는데 에러가 났다. React 버전과 gsap버전이 맞지 않아 생긴 오류같았다. npm install gsap react-gsap --save --legacy-peer-deps gsap을 설치하

React는 JSX 문법을 이용하므로 html문법으로 작성해서 에러가 난 듯 하다.친절하게 htmlFor 를 입력하라고 알려준다. 해결!

button을 클릭해서 todo를 저장하는 기능을 구현했다.하나 입력하고 저장 클릭하고, 하나 입력하고 저장 클릭하고, 하나 입력하고...Enter키로 저장이 되는 기능을 구현하면 마우스로 손을 옮기지 않아도 편하겠다고 생각했다.검색 결과 onKeyPress 속성이 많

올바른 이메일 형식으로 된 아이디를 입력하고, 비밀번호를 8자 이상 입력해야 회원가입 버튼이 클릭 가능하도록 활성화되는 기능을 구현했다.button의 disabled의 초기값을 true로 하고, input value가 유효성 검사를 통과하면 false로 바뀌면서 활성화

Access to XMLHttpRequest at 'URL' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass

회원가입 기능을 구현하기 위해 이메일과 패스워드를 입력하고 버튼을 누르면 API서버로 유저 정보를 전송하고 token을 local storage에 저장하도록 했다.테스트 이메일과 비밀번호를 입력했지만 400 에러가 나면서 accessToken이 발급됐는지 알 수 없었다

Uncaught SyntaxError: Unexpected token '<' 서버 폴더와 리액트 프로젝트 폴더를 연동한 뒤 서버를 띄우자 에러가 났다. 검색해보니 리액트 프로젝트의 build 폴더의 index.html 파일에 문제가 있는 것 같았다.

원래는 서버를 실행하려면 터미널에서 cd server명령어로 server폴더로 이동한 뒤 nodemon server.js 를 입력해 로컬 서버를 켜고, 다시 cd ..를 입력해 react root 경로로 이동한 뒤npm start해야 react app을 켤 수 있었다.

createAsyncThunk를 이용해 서버에서 mongoDB에 있는 데이터를 받아와 비동기 처리하는 함수를 만들고 createSlice로 상태관리를 하고싶었다. 이유 모를 에러로 데이터가 받아와지지 않았는데...문제의 에러 메시지를 읽어보니 axios에서 처리되지 않

로그인 상태를 전역으로 관리하기 위해 redux toolkit을 이용했는데 새로고침하면 다시 원래대로 돌아갔다. 이를 방지하기 위해 redux-persist를 설치하고 문제를 해결했다.문제는 해결됐지만 콘솔에 에러가 항상 떠있었다.https&#x3A;//redux-to