생각기록

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..

별코딩 참고 forwardRef 기능 부모 컴퍼넌트에서 자녀컴퍼넌트로 Ref를 전달할 때 쓰는 기능 부모컴포넌트가 자녀 컴포넌트에 dom요소 접근을 해야 할 때 input 태그가 아닌 컴포넌트라면? 같은 기능을 어찌 해야 할까요? 부모 컴퍼넌트에서 만든 ref를 자녀 컴포넌트에 전달! 그때 사용할 것이 forwardRef! props를 전달하듯! 키와 값으로 전달한다. 사용법 리엑트에서 제공하는 forwardRef 함수로(컴포넌츠)를 감싼다. 감싸진 자녀 컴포넌트는 새로운 두번째 인자를 받는데, 두번째 인자 ref 부모에게서 전달받은 ref가 들어있다. 전달받은 ref를 ref={ref} 속성을 넣어준다.

원래는 단계별로 차근차근 props를 전달해야하는 형식 하위만 필요한데, 굳이 중간 컴포넌트들이 받아야 해서 코드도 많고, props가 많아진다 contxt API는 상위 컴포넌트 값을 하위 컴포넌트 어디든 가져다 쓰도록 하는 api인것같다. 즉 전역적인 데이터를 관리하기 편리! porps 대신 context로 사용해 데이터를 공유하면, 하위 컴포넌트에서 useContext를 사용해 데이터를 가져다 쓰는 것 입니다. * context 는 꼭 필요할때만 사용! 사용시 컴포넌트를 재사용하기 어려워 질 수 있다. prop drilling을 피하기 위한 목적이면 Component Composition (컴포넌트 합성) 을 고려하라고 한다. 별코딩 참고 https://www.youtube.com/watch?v=L..

DB 데이터를 객체로 다른 컴포넌트에 보내는 법 menuList 키 : { 값 { 데이터 키 : 값 }} 즉 다른 컴포넌트에서 menuList 객체에서 값을 불러다 쓸때 el.menu_index ~ 그리고 라우터는 라우터인 얘들만 감쌀 수 있다 컴포넌트 자체를 감싸기는 안된다. 추후 기능 추가 기능 같은 아이디는 등록 안되는 로직 추가하기 수정 기능 아이디는 변경 할 수 없다 알림 메뉴 추가 할때 있는 아이디면, 알림창 띄우기

선택적 포트폴리오가 없으면, 지원 힘들다. 회사 메이크인 -청년 취업 도움 기관 컨설팅 이력서 및 자소서 면접 인성검사 취업특강 프로그램 > 설문을 통해 원하는 곳 리스트의 관계자 초빙 매칭데이 > 설문토대 인사담당자 섭외 신청방법 초기상담 10분 프로그램 참여 여부 결정 (자율) https://me2.kr/KiMrV 참여 링크 목적 : 최대한 원하는 곳에 취업, 그를 위한 제공 잡코디 백진경님 화 수 금 학원 내부 잡코디룸 언제든지 궁금하면 가서 물어보기