React

React로 ref 객체를 전달하여 React는 노드가 변경될 때마다 변경된 DOM 노드에 .current 프로퍼티를 설정하게 된다. input component에 focus 를 위치시킬 필요가 있는 경우속성 값을 초기화 할 필요가 있는 경우useRef로 컴포넌트 안의

자바스크립트 내장 객체fetch 함수는 window.fetch()로 사용되기도 한다.첫번째 인자로 API , 즉 url 주소를 받고 두번째 인자로 옵션 객체를 받게되는데 옵션 객체에는HTTP 방식(method)HTTP 요청 헤더(header)HTTP 요청 전문 (bod

Babel은 JSX를 React.createElement() 호출로 컴파일 하게 된다.위 두개의 예시는 동일하다.(Babel 홈페이지도 동일하다)javascript 를 확장한 문법JSX 중괄호 안에는 유효한 모든 javascript 표현식을 넣을 수 있다.JSX를 작성

SPA는 Single Page Application 의 약자이다.SPA는 서버로 부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.SPA는 단일 페이지로 기존의 서버사이드렌더링(SSR)

App.js 👇🏻Todos.jsx 👇🏻console.log('fetching...') 결과 fetching 이 한번만 나오는걸 확인해볼수 있다.예를 들어 A의 컴포넌트가 usequery를 사용했을때 네트워크 통신을 요청해 네트워크에서 데이터를 받아와서 메모리상의

onClick시 페이지 이동을 원할경우 내가 받아온 데이터를 state로 넘겨줄 수 있다.내가 받아온 데이터의 이름이 product 면 state 뒤에 같은 이름인 product 로 작성한다.넘어가는 페이지의 컴포넌트에는 받아온 값 product 를 풀어줘야하는데 방법

1.의존성에 포함된 값이 변경되지 않는다면 이전에 생성한 함수 참조 값을 반환 해준다.2\. useCallback은 최초에 혹은 특정조건에서 생성한 함수의 참조를 기억하여 반환해주는 hook.새로 생성되지 않는다함은 메모리에 새로 할당되지 않고 동일 참조값을 사용하게

회사내에서 작은 service 프로젝트를 진행하고 있던중 비밀번호 재설정 페이지를 맡게 되었다. react-hook-form은 한번 써봣던지라 같이 사용하려 했고 ts와 관련해서는 같이 써본적이 없기에 이번에 react-hook-form과 zod를 같이 구현하는것이 좋

next의 다이나믹라우트 id 에서 해당 id별로 들어가야 하는 상품가게 페이지가 많아 , router.push 로 페이지를 이동시켜주고있었다.\[id]는 각각의 상점들가게 이름들이 정보와 함께 리스트처럼 나오고 \[detailId]는 각 상점들의 고유한 정보/메뉴/리

next의 다이나믹라우트 id 에서 해당 id별로 들어가야 하는 상품가게 페이지가 많아 , router.push 로 페이지를 이동시켜주고있었다.\[id]는 각각의 상점들가게 이름들이 정보와 함께 리스트처럼 나오고 \[detailId]는 각 상점들의 고유한 정보/메뉴/리

next의 다이나믹라우트 id 에서 해당 id별로 들어가야 하는 상품가게 페이지가 많아 , router.push 로 페이지를 이동시켜주고있었다.\[id]는 각각의 상점들가게 이름들이 정보와 함께 리스트처럼 나오고 \[detailId]는 각 상점들의 고유한 정보/메뉴/리