프론트엔드 첫걸음

개요사용자의 입력을 요구하는 서비스에서는 화면을 떠날 때 '떠나시겠습니까?' 를 묻는 경우가 있다.이 때 useBlocker를 잘 사용하면 더 좋은 코드를 작성할 수 있을것이다.useBlocker란?useBlocker는 React Router에서 네비게이션 차단 기능을 제공하는 훅이다.사용자가 페이지를 이동하려 할 때 특정 조건이 충족되면 네비게이션을 차단할 수 있다.즉, 페이지 이탈을 방지하는 역할을 한다. useBlocker 코드 React-Router 에서 useBlocker 코드를 찾아보자.//1. 매개변수export function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker { let { router, basename } = us..

import { useLocation } from "react-router-dom"; const location = useLocation(); console.log(location); hash : 주소의 # 문자열 뒤의 값 (주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용) key : location 객체의 고유 값, 초기에는 default 이고, 페이지가 변경될 때마다 고유의 값이 생성됨. pathname : 현재 주소의 경로 (쿼리스트링 제외) search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값 //http://경로?id=10&count=2022 인경우 'id=10&count=2022' URLSearchParam..

export function createDOM(node) { if (typeof node === 'string') { return document.createTextNode(node); } const element = document.createElement(node.tag); Object.entries(node.props) .forEach(([name, value]) => element.setAttribute(name, value)); node.children .map(createDOM) .forEach(element.appendChild.bind(element)); return element;}export function createElement(tag, props, ..

개요김민태 React 강의를 보다가 DOM을 추가하는 코드에서 forEach(bind()) 부분이 이해되지 않았다. 처음에는 forEach(child => parent.appendChild(child))는 이해가 됐는데, forEach(parent.appendChild.bind(parent))가 같은 동작을 한다는 점이 납득되지 않았다. 그래서 이 부분을 공부한 내용을 정리해 본다.function createDOM(vdom) { const element = document.createElement(vdom.tag); // element가 생성됨 vdom.children .map(createDOM) // 각 자식 요소를 재귀적으로 DOM 요소로 변환 .forEach(element.appe..

https://engineering.linecorp.com/ko/blog/line-securities-frontend-3/ [커스텀 훅 도입 이전] 원래 App 컴포넌트는 5개의 구성 요소를 가지고 있습니다. 상태 변수인 checkList와 이벤트 핸들인 handleCheckClick, isAllChecked를 계산하는 부분, 체크박스를 그리는 부분, 그리고 그 밖의 것을 그리는 부분입니다. 이 중에서 Checks 컴포넌트를 분리하는 과정에서 App에서 빠진 것은 체크박스를 그리는 기능뿐입니다. 나머지 4개의 기능은 여전히 App에 남아 있고, 재사용할 수 없습니다. 특히 checkList가 여전히 Checks가 아닌 App에 남아있는 것은 주목할 만합니다. App이 '다음' 버튼의 disabled 속성..

[출처] https://stackoverflow.com/questions/71540973/why-use-usequeryclient-from-react-query-library https://tkdodo.eu/blog/react-query-fa-qs#why-should-i-usequeryclient QueryClientProvider는 생성된 queryClient 를 React Context에 넣어 앱 전체에 배포한다. useQueryClient로 가장 잘 읽을 수 있다. 이렇게 하면 추가 구독이 생성되지 않으며 추가 재렌더링이 발생하지 않는다(클라이언트가 안정적인 경우). //클라이언트가 안정적인 경우 export default function App() { // ✅ this is stable const..

순회하는 element에 모두 ref를 달지 않고 상위 element에만 ref를 달아준 뒤에 상위 ref에서 Array.from(상위element.ref).map 을 사용해도 되지만- map으로 순회하는 component마다 ref를 달고 싶다면 ?? https://stackoverflow.com/questions/63059962/reactjs-map-with-a-ref-to-each-component ReactJS .map with a ref to each component Working on making it so when a user goes back a page in my react app they will be scrolled to the position on the page they were..

1. 루트경로에 jsconfig.json 만들고 (.gitignore, package.json과 같은 위치) 2. 아래와 같이 compilerOptions에 baseUrl추가 { "compilerOptions": { "baseUrl": "src" }, "includes": ["src"] } 3. ide를 껐다 켠다. 3번이 중요함. 아 왜 안되지 안되나보다 했는데 껐다 켜니까 잘됨 ^^ 껐다 켜시오. [참고] https://imkh.dev/react-absolute-path/

설치 npm install @react-oauth/google@latest npm install jwt-decode index.html /*중략*/ Sandwich 코드 function App() { //구글 로그인 const [user, setUser] = useState({}); function handleCallbackResponse(response) { console.log('Encoded JWT ID token : ' + response.credential); var userObject = jwt_decode(response.credential); console.log(userObject); setUser((prev) => { return { ...prev, userObject }; }); co..

코딩애플 강의 38강 batch - setState함수 맨 마지막것만 실행되는것 리액트 17에서는 ajax나 setTimeout 내부는 batch 없이 (맨마지막 setState만 실행되는것 없이) 모든 setStatet실행됐음 리액트 18에서는 ajax나 setTimeout 내부에서도 setState batch useTransition , useDeferredValue import {useState, useTransition, useDeferredValue } from 'react'; let a = new Array(7000).fill(0) function App() { let [name, setName] = useState('') let [isPending, startTransition] = useT..