Javascript Tips (33) 썸네일형 리스트형 React - A component is changing an uncontrolled input to be controlled 에러 input 태그에 value 값에 undefined, null 들어갔을 때 나오는 현상이다. Array.prototype.at() 메소드 브라우저 버전별 고려하기 22년 출시된 새로운 배열 메소드이다.이 메소드를 프로젝트에서 사용했는데 PR을 올린 뒤 해당 메소드를 프로젝트에 반영해도 될지 안될지에 대해서 질문을 받았다. 먼저 브라우저 엔진에 해당 메소드가 어디서부터 반영되어 있는지 확인하려면 두 가지 방법이 있다. (사수가 가르쳐줌... 사수의 중요성) 1. MDN 문서에서 반영된 일자 확인2. caniuse (https://caniuse.com/) 1. MDN 문서에서 반영된 일자 확인 2. caniuse (https://caniuse.com/) at 메소드는 caniuse에서 나오지도 않는다. 크롬에서는 21년 07월 20일 이후 버전은 괜찮다고 하지만caniuse에서 안 나온다면 지양하는 편이 좋다. 단일책임원칙을 적용한 필터 구현은 어떻게? 필터가 3개가 있다고 가정해보자 사용자가 선택한 필터값은 애플리케이션 어디서든 확인이 가능해야 하므로state 값에 넣어준다. 필터마다 각각 관리하여 확장성을 고려한다. 그림을 그려보면 다음과 같다. State 값 주황색: 선택한 필터 전체 데이터초록색: 선택한 필터에 맞는 서버의 매물 데이터 1. 매매/전세/월세 필터에 대한 데이터를 State에 추가2. 필터에 대한 전체데이터가 담긴 값을 가지고 API조회3. 필터에 맞는 서버 데이터를 State에 넣기 이번엔 매물종류 필터를 수정했다고 가정해보자 그림을 그리면 다음과 같다. State의 필터에 맞는 매물조회 Parameter값은 매매/전세에 대한 필터 데이터는state에 추가된 상태임(위에서 추가함) 매물종류 필터 데이터가 추가되었다. 그러면 S.. js) 배열타입이 확실하지 않을 때 옵셔널체이닝으로 사용하기 let a = '';const res = a.filter(item => item.isUse); console.log(res); 위와 같이 사용하면 'a' 변수는 타입이 문자열이기 때문에 filter 를 사용하려면 에러가 발생한다. 하지만 다음과 같이 사용하면 타입을 확인하지 않고 쓸 수 있다. let a = '';const res = a.filter?.(item => item.isUse); 옵셔널체이닝을 이런 식으로 사용하는 건데 굉장히 어색하다. 옵셔널체이닝은 중첩된 데이터를 접근할 때 null, undefined 여도 에러를 뻗지 않고 접근이 가능하게 하는 연산자다 그런데 'filter' 라는 배열 메소드는a가 배열 타입이 확정도 안되었는데 filter까지 접근했을 때 왜 에러가 발생하지 않는지.. 이미지 퍼블할 때 임시로 넣는 좋은 사이트 https://via.placeholder.com/169 react spa - boot 3 ) kakao 소셜로그인 연동 구조는 다음과 같다.브라우저 -> 백엔드 요청백엔드 -> 프론트로 300코드브라우저 -> 카카오 서버로 인증 요청카카오 -> 브라우저 (300, 토큰 전달)브라우저 -> 백엔드 (토큰전달)백엔드 -> 카카오(토큰 및 인가요청)백엔드 -> 브라우저(세션id, crsf토큰전달) 마지막으로는 code값 200으로 끝난다. rest api가 아닌 link 자체 이동을 해야하기 때문에a 태그나 react의 link를 사용해야함. 혹은 window.open을 사용해서 요청하고 응답값이 잘 온다면 부모 window에서 자식window 종료 후 리다이렉팅 시켜줘야함. 해당 내용을 setInterval로 window 자식의 cookie를 감지하고 감지되고 체크한 뒤 맞다면홈으로 랜딩시킨다. import React,.. react.js) index.html에 로고 에러나오는 현상 index.html에위와 같이 설정하면에러가 난다. 이를 해결해주기 위해선다음과 같이 설정해주면 된다. PUBLIC_URL은index.html파일 이있는public 폴더를 의미한다. react) ip숨김처리 문제로 node 서버가 안 켜지는 경우(Invalid options object. Dev Server has been initialized using an options object that does not match the API schema) 에러메세지Invalid options object. Dev Server has been initialized using an options object that does not match the API schema 가끔 피시방에서 작업을 하는데 피시방에서는 인터넷은 이더넷으로 연결되어 있고ip를 숨겨놓는 경우가 있다. 라우터에서 처리하는지 숨김처리 포인트는 어디인지 모르겠다. 결과적으로는 node에서 제공하는 proxy 서버를 사용할 수가 없게 된다. 확실한건 아니지만핸드쉐이크 과정에서 연결이 끊기는 듯 하다. 그럼 피시방에서 노드로 서버를 킬 수는 없는가가능하다.api만 사용할 수 없다. 1. package.json의 proxy 설정을 지운다. 2. 허용 호스트를 수동으로 설정한다. 아래에 있는.. 이전 1 2 3 4 5 다음
