맨동이

스코프 체인과 렉시컬 스코프 스코프 체인 함수는 중첩될 수 있으므로 힘수의 지역 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다. 외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라 한다. 모든 스코프는 위의 그림과 같이 하나의 계층적 구조로 연결된다. 항상 최상위 스코프는 전역 스코프이다. 이처럼 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다. 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 자바스크립트 엔진은 절대 하위 스코프로 내려가면서 식별자를 검색하지 않는다. 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지..

Scope 스코프(유효범위) 는 , 자바스크립트를 포함한 모든 프로그래밍 언어의 중요한 개념이다. function add(x,y) { //매개변수는 함수 몸체 내부에서만 참조할 수 있다. //매개변수의 스코프는 함수 몸체 내부이다. console.log(x,y) //2 5 return x + y; } add(2,5); // 매개변수는 함수 내부에서만 참조할 수 있다. console.log(x,y); // ReferenceError: x is not defined 모든 식별자는 자신이 선언된 위치에 의해 자신이 유효한 볌위, 다른 코드가 자신을 참조할 수 있는 범위가 결정된다. 이 유효 범위가 바로 스코프이다. 즉 스코프는 식별자가 유효한 범위를 말한다. let x = 'global'; function c..

Cannot read properties of undefined 더보기 Uncaught TypeError: Cannot read properties of undefined (reading 'length') Cannot read properties of undefined 에러는 화면이 렌더가 되지 않을때 콘솔창을 키면 자주 볼 수 있는 오류 메시지다. 에러내용은 친절하게 설명해준대로 undefined 의 프로퍼티를 읽을 수 없다는 것이다. (무엇을 읽을 수 없는지 어디서 에러가 발생했는지도 친절하게 알려준다.) 오탈자 문제가 아니라면 사용하는 state가 실제로 undefined란 얘긴데, useState는 비동기로 작동하기 때문에 페이지가 그려지기 전까지 undefined를 가지고 있다가 페이지가 그려진..

병렬 쿼리 정적으로 병렬 쿼리 선언하기 useQuery , useInfiniteQuery 를 나란히 선언하면 자동으로 병렬 쿼리가 실행됩니다. function App () { // 병렬 실행 const usersQuery = useQuery('users', fetchUsers) const teamsQuery = useQuery('teams', fetchTeams) const projectsQuery = useQuery('projects', fetchProjects) ... } 더보기 React의 Suspense모드에서 리액트 쿼리를 사용할 때 첫번째 쿼리가 프로미스를 던지고 다른 쿼리가 실행되기 전에 컴포넌트를 일시 중단하기 때문에 병렬 쿼리가 실행되지 않습니다. 이 때, useQueries 를 사용하거..

기본사항 쿼리는 기본적으로 유니크한 키로 구분되며 프로미스(Promise) 기반 메서드 (GET, POST 등)로 서버에서 데이터를 가져올 수 있다. 컴포넌트나 커스텀 훅에서 쿼리를 구독하려면 다음과 같이 useQuery 를 호출한다. import { useQuery } from 'react-query' function App() { const info = useQuery('todos', fetchTodoList) } 여기서 유니크한 키 는 Application 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하기 위해 내부적으로 사용된다. const result = useQuery('todos', fetchTodoList); 쿼리의 상태는 4가지로 분류할 수 있다. isLoading , status ==..

hover시 살짝 올라가는 버튼UI를 만들어보자. 실행 결과 body { background-color:lightgrey; display:flex; align-items:center; height:300px; } button { cursor: pointer; color: black; width: 300px; height: 30px; display: block; margin: 0 auto; border: solid 1px black; background-color: whitesmoke; border-radius: 5px; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease 0s; } button:hover { background-c..

React가 불변성을 지키는 이유 React가 불변성을 지키는 이유는 부모컴포넌트가 re-rendering 되거나 state,props가 변화될 때 렌더링이 일어나게 된다. 근데 렌더링을 할지 말지 판단하기 위해 state가 변화되는지를 판단한다. 그 과정에서 state 객체 내의 모든 value를 다 깊은 비교하면 당연하게도 효율적이지 않다. 그렇기 때문에 이전 객체와 현재 객체를 얕은 비교로 판단하기 때문에 불변성의 유지가 중요하다. state를 직접 변경하게 되면 value 값은 바뀌지만 참조 값은 바뀌지 않으므로 렌더링이 일어나지 않는다. mutable한 상태를 사용하게 되면 리액트 돔이 제대로 된 추적을 할 수 없을 것이고, 예기치 않은 사이드 이펙트를 발생시킬 수 있다. 어떻게 불변성을 지킬까..

Reduce 메서드란? reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다. map과 forEach 와는 조금 다른 누산값을 곁들인 메서드이다. 문법 // reduce const array1 = [10, 20, 30, 40]; array1.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => { return 다음누산값; }, 초기누산값); reduce 메서드 자체의 반환값은 100이 된다. 1. 콜백 함수 콜백 함수의 첫 번째 파라미터는 reduce 메서드에서 이 콜백 함수가 동작할 때 return 하는 값이 다음 콜백 함수의 첫 번째 파라미터로 전달되는 것이다. 배열의 요소를 다 돌고 마지막 콜백 함수가 동작한 이후의 return..

Each child in an array should have a unique “key” prop. 배열을 사용하는데 key 값을 까먹고 넣지 않으면 더보기 Each child in an array should have a unique “key” prop. 콘솔창에서 위와 같은 문구를 볼 수 있다. 바로 유니크한 key 값이 필요하다는 것! Key값이 왜 필요한가 ? 첫번째 두번째 첫번째 두번째 세번째 리스트의 엘리먼트를 하나 더 추가하면 두 트리의 변경은 잘 작동하지만, key 값이 없기 때문에 변경되지 않은 엘리먼트 또한 재평가를 하게된다. 이런 문제를 해결하기 위해 key값을 넣어주는것이 좋다. 넣어주어야 한다. key 값을 넣어주게 되면 key값으로 판단하여 변경된 부분만 추가할 수 있게되기 때문..

CRA로 리액트 프로젝트를 생성하고 index.js 를 보면 맨 밑에 reportWebVitals() 라는 함수를 실행하고 있는 부분이 있다. 이부분은 같은 폴더의 reportWebVitals 파일에서 가져온 함수를 실행하고 있는 것인데 주석 처리된 예 처럼 함수에 console.log를 넣어주면 개발창으로 앱의 퍼포먼스시간들을 분석하여 객체 형태로 보여준다. // metric(측정도구) 이름 name: 'CLS' | 'FCP' | 'FID' | 'LCP' | 'TTFB'; // 측정된 현재값 (값이 작을수록 빠른성능을 뜻합니다) value: number; // 현재 측정값(current value)과 최신 측정값(last-reported value) 차이 // 첫번째 리포트에서 위 둘값은 항상 같습니다..