꼰대코더

BrowserRouter 를 쓸 것인가 createBrowserRouter 를 쓸 것인가?BrowserRouter 보다 createBrowserRouter 를 써야 하는 이유는 다음과 같다.하부 링크가 가능 (링크 화면에서 한번 더 링크)각 링크 컴포넌트 별로 에러 처리가 가능데이터 Fetch 가능일단 맛보기로 BrowserRouter 를 간단한 소스코드를 소개 (React v5에서는 Switch를 v6에서는 Routes를 사용)import {BrowserRouter,Routes,Route,Link} from "react-router-dom"; function App() {   return (                     } />         } />               ); } creat..

기본적으로 웹브라우저는 시큐리티상 다른 Origin(도메인, 프로토콜, 포트) 리소스에의 액세스를 불허한다. 주로 아래와 같은 효과가 있다. 1. API 주소만 안다고 하면 아무렇게나 액세스하여 데이터를 훔쳐갈 수 있는데 이를 방지하는 효과.2. CSRF（Cross-Site Request Forgeries) 를 방지하는데 예를 들면 사용자가 특정 사이트에 로그인 상태에서 스팸메일의 악성 링크를 클릭하면 로그인 세션으로 API 에 접근하여 원치 않는 결과를 초래 할 수 있다. 위의 예에서는 웹 페이지는 example.com 으로 부터 발행되서 그 안에서 api.example.com/func 을 액세스하고 있지만 엄격히 말해 서브도메인도 별도의 도메인으로 취급되므로 아래와 같은 에러가 발생하게 된다. 각각 ..

1. CSS     준비된 CSS 화일을 폴더에 둔다. 예) my.css    React Component 화일에서 아래와 같이 임포트import "./my.css" 2. 구글 폰트 URL 사용    CSS 화일의 선두에 아래와 같이 임포트@import url("https://fonts.googleapis.com");@import url("https://fonts.gstatic.com");@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Roboto:wght@700&display=swap"); 3. HTML   return ( )  에 준비된 HTML body 태그 내부를 붙여넣기    css ..

1. 독립변수  선언const [value, setValue] = useState(0);새로운 값을 설정 setValue(3)}>click 기존 값을 변경 setValue(prev => prev + 1)}>click 2. 리스트 변수선언const [value, setValue] = React.useState(["a", "b", "c"]); 초기화  setValue([ ])}>click 값 추가 setValue(prev => [...prev, "d"])}>click 특정값 삭제 setValue(prev => prev.filter(item => item !== "a"))}>click 특정 인덱스 삭제 setValue(prev => prev.filter((item, index) => index !== 0))}..

아래와 같은 form 디자인이 있고 입력데이터를 보관하기 위해 오른쪽과 같이 useState 를 정의 할 수 있다.const [data, setData] = useState( {             address1: "",             address2: "",             zip: "",             city: "",             state: "",             country: "",  }); 이벤트 정의의 비효율 코드와 효율적인 코드 예비효율적 코드효율적 코드control의 이름을 onChange의 argument로 전달control 의 name 프로퍼티를 지정하고 event.target.name 으로 꺼내서 사용 const onChange = (key) ..

function factory(a, b) {    return a + b; } const sumFunc1 = factory(); const sumFunc2 = factory();console.log(sumFunc1(1, 2)); // => 3 console.log(sumFunc2(1, 2)); // => 3console.log(sumFunc1 === sumFunc2); // => false console.log(sumFunc1 === sumFunc1); // => true같은 factory함수를 가르킨다고 해도 인스턴스 오브젝트는 서로 다르다. 또한 렌더링이 자주 반복되는 경우에도 이전 인스턴스와는 다른 sumFunc1과 sumFunc2 인스턴스가 생성된다. 그럼 언제 useCallback 필요할까?일단..

{  } 로 감싸여져 있는 경우 반드시 return 이 없는 경우 아무것도 표시되지 않는다.return (     { this.state.task.map((item,contentIndex) => {                   ( hello {item.event} {item.eventpara} ) })               }     ) 해결책 1) return 을 명시return (     { this.state.task.map((item,contentIndex) => {                 return ( hello {item.event} {item.eventpara} ) })              }    ) 해결책 2) { } 를 제거return (       { this...

const [count, setCount] = useState(0);const handlecart= (item) => {          setCount(count+1);          setItem(item);}무한 렌더링을 유발하는 코드handlecart(item)}>cart 위의 코드는 handlecart 함수의 참조를 패스하는게 아니라 함수 자체를 호출하고 있다. 따라서 인위적으로 클릭하기 전에 인터프리터가 코드를 파스할 시에 함수를 실행하게 된다. 이로인해 함수내에서 스테이트는 업데이트되고 화면은 다시 렌더링하게 되서 무한 루프에 빠지게 된다.   따라서 해결책은 함수의 참조를 설정하는 것이다.() => handlecart(product)}>cart

keyword scope const 전체 var 와 같으나 한번 값이 할당되면 바꾸지 못함 var function 내 서브블럭내에서 다시 같은 이름의 변수를 할당하여도 똑같은 변수를 가르킨다. let 블럭( { } ) 내 블럭내에 선언하면 블럭을 빠져나오면 사라짐 // case 1 function varScoping() { var x = 1; if (true) { var x = 2; console.log(x); // will print 2 } console.log(x); // will print 2 } // case 2 function letScoping() { let x = 1; if (true) { let x = 2; console.log(x); // will print 2 } console.log(..

map array(list, dictionary) 를 조작하여 새로운 array 를 리턴 const fibonacciNumbers = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34] const doubledFibonacciNumbers = fibonacciNumbers.map(number => number * 2) // [0, 2, 2, 4, 6, 10, 16, 26, 42, 68] const users = [ { name: "Park", age: 51, height: "1.90cm" }, { name: "Lee", age: 22, height: "1.67cm" }, { name: "Choi", age: 47, height: "1.59cm" } ] const userNames = users...