생각기록

https://stackoverflow.com/questions/71769990/react-18-destroy-is-not-a-function React 18 - destroy is not a function My application was working fine, then I updated it to react 18, now it is throwing "destroy is not a function" when I navigate from one route to another if the current route is using useE... stackoverflow.com 프로젝트 하던중에 검색할때 로그인 값이 없으면, 검색이 되지 않던 오류가 생겼다. 이유는 useEffect 안에 함수를 적어놔서...

DB 구조 supplies 테이블의 likeCount는 모두의 찜 갯수 ( 거기에 유저아이디의 찜 +1 , -1 ) pick 찜 테이블 유저 아이디 / supplies의 pk 값을 가지고 있다. 순서 1. 찜 버튼을 누르면, 로그인이 되어있지 않으면 알림창으로 로그인을 하라고 한다. 2. 로그인이 되어있으면, likeState의 여부에 따라 바뀐다. 판매페이지에서 조인문으로 가져온 pick / supplies db 데이터를 { list } 로 받고 있다. list.picks 모든 사람의 찜 데이터 값에 필터 를 걸었다 data.userId === isLoggedIn 좋아요 글의 유저 아이디와 로그인한 유저 아이디가 일치하는값 datas에는 내가 좋아요 한 찜 데이터들만 온다. 그 값이 존재하면, setL..

1. 스토어 생성 (리듀서 만들어서 인자에 넣는다.) 2. 리듀서 생성 (현재state, action 인자) - state값을 쓸때 전개연산자로 복사해서 씁니다. 3. Provider stroe={store} 스토어의 울타리 처리 해주기 -상태를 쓸곳만 4. 스토어의 무선 연결기능 useSelector (스토어 상태값을 콕집어서 쓴다) - state.number 라는 값을 쓰겟다라는 뜻 5. Dispatch 액션 만들기 ( 상태를 어떤 기능을 취할 것인가? ) - dispatch 함수 인자에 action을 담아서 리듀서를 호출하게 한다. 6. reducer 함수의 두번째 인자의 action 설정 - if ( action.type 은 어떤 액션 ) 이라면, { state값을 어찌하겟다 } 그값을 retur..

2023-02-06 코딩애플 리엑트 강의 개발환경 셋팅 node.js 설치 vscode 에디터 프로젝트 생성 1.작업용 폴더 생성, 우클릭 터미널 열기 2. npx create-react-app 프로젝트 명 state를 쓰는 이유 Destructuring 문법 let num = [1, 2]; let a = num[0]; //1 let c = num[1]; //2 let [a, c] = [1, 2]; 왜 변수로 안하고 state로 하나요? 만약 변수가 변경되면, 변경이 자동으로 html에 반영이 되지 않는다. 리엑트는 state의 값이 변경되면, 자동으로 재랜더링 반영된다. > 자주 변경될 부분을 쓰면 된다. array / object 는 원본을 보존해 복사하는게 좋다 let copy = 글제목; copy..

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @testing-library/react@13.4.0 npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! peerOptional react@"^16.9.0 || ^17.0.0 || ^18" from @reduxjs/toolkit@1.9.1 npm ERR! node_modules/@reduxjs/toolkit npm ERR! @reduxjs/toolkit@"^1.9.1" from the root project npm ERR! peer react@"17.0.2" from rea..

리액트는 nodejs보다 무겁다 MySQL 서버 설치 및 접속 (notion.site) 실행파일만 두고 package.json에 있는 저걸 해보자 npm run build 빌드를 왜하냐 리엑트자체가 무거워서 배포할때 가볍게해주기 위한 것 용량차이가 많이 남! (Ubuntu 서버에서) nginx 서버 이용 19-13. React 배포 (notion.site) 19-13. React 배포 가장 기본 형태의 Hello World도 용량을 확인하면 1.8MB 가 나옴. uncovered-nutmeg-b8e.notion.site Nginx 서버 구축 시 아파치웹서버를 사용햇는데 이것도 웹을 구동시켜주는 웹서버 프로그램 js파일을 올릴때 많이 사용 리액트 배포시 얘를 사용해보겟음 Nginx 란? 트래픽이 많은 웹사..

콘솔을 찍어.. 오류 종류 커피이름들이 다른데, 한 품목으로 합쳐서 계산 되는것 느낌상 데이터 key값이 잘못 된 것 같다는것은 알고 있었는데 어찌 해결해야할지 모르겠었다. 도움을 받고나니 의심가는 부분, 모르는 부분에 모두 console.log를 찍으셨다. id가 뭔지 모르겟다고 하니 바로 콘솔을 찍으셧다. id => 커피, 논커피 품목 name => 아메리카노 amout => 수량 price => 가격 useContext 로 지정되어있는 값 carCtx의 addItem목록에 키:값으로 된 객체 값을 할당한다. 즉 이 값들을 다른 컴포넌츠로 props로 보내고 있다. 해당 컴포넌츠로 가보면 문자열 좌우에서 공백을 제거하는 함수가 trim() 함수 좌우공백만 처리 정상적이라면 해당 input의 수량을 o..

useReducer reducer - state 변경 disPatch - reducer에게 요청 action - disPatch의 요청 내용 철수가 은행에게 " 만원 출금 " 요청 철수 disPatch "만원 출금해주세요 " action 거래내역 state 은행 reducer 철수가 거래내역을 업데이트 하기 위해서는 엑션(요구)를 은행(리듀서)에게 보낸다. 다른 액션을 보내서 예금 송금 출금 등 스테이트를 업데이트가 가능하다 dispatch라는 함수에 인자로 action을 넣어서 리듀서에게 전달 받은 리듀서는 state를 action으로 바꿔준다. reducer - state를 업데이트 하는 역할 ( 은행 ) dispatch - state 업데이트를 위한 요구 action - 요구의 내용 1. useRe..