https://yarnpkg.com/cli/set/version

https://mong-blog.tistory.com/entry/%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A5%BC-%EC%B5%9C%EC%A0%81%ED%99%94%EC%8B%9C%ED%82%A4%EB%8A%94-3%EA%B0%80%EC%A7%80-%EA%B8%B0%EB%B2%95-%EC%BD%94%EB%93%9C-%EC%95%95%EC%B6%95-%EA%B2%BD%EB%9F%89%ED%99%94-%EB%82%9C%EB%8F%85%ED%99%94

Tanstack-query에서 staleTime과 gcTime은 데이터를 캐싱하고 관리하는데 중요한 두 가지 설정 값이다. 1. staleTime데이터가 얼마나 오래 '신선한 상태'로 유지되는지를 정하는 시간 staleTime 내에는 같은 쿼리에 대한 새로운 네트워크 요청이 일어나지 않고, 캐시 데이터를 그대로 사용하게 된다. 예를 들어 staleTime을 5분으로 설정하면, 데이터를 가져오고 나서 5분 동안 데이터가 '신선하다'고 판단해서 쿼리 호출 시 추가 네트워크 요청 없이 캐시 데이터를 계속 사용한다. 그리고 5분이 지난 후 해당 쿼리를 호출하면 새로운 요청을 보내서 데이터를 갱신한다. staleTime 기본값은 0임 2. gcTime해당 쿼리를 사용하는 곳이 없게 된 이후에도 캐시 데이터를 얼마..

1. 실행 컨텍스트 ?- 실행 컨텍스트는 자바스크립트에서 코드가 실행되는 환경을 의미한다. - 자바스크립트 엔진이 코드를 실행할 때, 그 코드가 실행될 때의 환경을 정의하고 관리하기 위해 존재하는 것이 실행 컨텍스트이다. - 실행 컨텍스트는 크게 전역 실행 컨텍스트와 함수 컨텍스트로 나눌 수 있다.  - 전역 실행 컨텍스트는 자바스크립트가 처음 실행될 때 생성되는 컨텍스트이다. 이 전역 컨텍스트는 프로그램이 종료될 때 까지 유지되며, 전역 컨텍스트에서 선언된 변수와 함수는 프로그램 내 어디서는 접근이 가능하다.- 기본적으로 자바스크립트는 싱글 스레드이기 때문에, 전역 실행 컨텍스트는 1개만 존재한다. - 함수 실행 컨텍스트는 함수가 호출될 때마다 생성되는  컨텍스트를 의미한다. 각 함수는 자신만의 컨텍스..

1. Reflow  reflow와 repaint는 웹 페이지가 렌더링 되는 과정에서 발생하는 중요한 작업들입니다.reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 말합니다. DOM의 구조가 변경되거나 CSS 스타일이 변경되면, 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산해야 합니다. 이 과정은 모든 자식 요소와 관련된 부모 요소까지 영향을 주기 때문에 비용이 많이 드는 작업입니다. 예를 들어, CSS에서 요소의 width나 height 속성을 변경하면, 브라우저는 해당 요소뿐만 아니라 연관된 모든 요소의 배치를 다시 계산해야 합니다. 2. Repaintrepaint는 요소의 모양이나 스타일이 변경될 때 발생합니다. 요소의 레이아웃은 그대로이고, 색상이나 배경 등의 스타일만 변경..

API ?- 두 개 이상의 프로그램(소프트웨어 시스템)이 통신하기 위해 따라야 하는 규칙어떤 프로그램(혹은 서비스)이 다른 프로그램에 요청을 보내고, 그 요청에 대한 결과를 받는 방법을 정리한 규칙. REST API(RESTful API)웹 데이터 전송 방식 중 하나API의 엔드포인트 구조를 구현하는 방식HTTP 프로토콜에서 제공하는 기본 method들(GET, POST, PUT, DELETE)을 사용해서 두 머신이 네트워크를 통해 데이터를 주고 받는 방식이다.REST 방식을 구현하는 웹 서비스를 RESTful한 웹 서비스라고 한다.(그래서 제약들을 모두 만족해서 만들면 RESTful하다 고 한다)API에서 전송하는 자원(resource)을 URI로 표현하고 해당 자원에 행하고자 하는 의도를 HTTP메소..

클로저는 함수가 선언될 때의 스코프를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능을 말합니다.비유하자면, 함수가 자신이 생성된 환경을 '기억'하는 것이라고 할 수 있습니다. 클로저는 자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어집니다. 스코프란?Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있다.즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’ 자바스크립트에선 스코프는 2가지 타입이 있습니다. 바로 global(전역)과 local(지역)  클로저의 핵심 요소 1. 중첩 함수(Nested Function): 함수 안에 정의된 함수. 2. 외부 함수의 변수 접근: 내부 함수가 외부 함수의 변수에 접근 가능. 3. 변수 상태 유지: 외부 함..

const styles = useSpring({ from: { transform: 'translateX(0px)' }, to: { transform: 'translateX(100px)' }, reset: true,});https://www.react-spring.dev/ react-springWhy Springs? We think of animation in terms of time and curves, but that causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that. Springs don’..

https://www.npmjs.com/package/react-hook-form react-hook-formPerformant, flexible and extensible forms library for React Hooks. Latest version: 7.53.0, last published: 19 days ago. Start using react-hook-form in your project by running `npm i react-hook-form`. There are 5111 other projects in the npm registry usingwww.npmjs.com  https://ko.legacy.reactjs.org/docs/forms.html#controlled-components..

E2E 테스트란 ?  E2E 테스트란 ? E2E 테스트 과정에서는 실제 사용자의 시나리오를 테스트함으로써 애플리케이션 동작을 테스트하게되고,또한 프론트엔드에서 OS와 브라우저엔진 환경이 달라서 발생하는 크로스 브라우징 이슈를 E2E 테스트를 통해 미리 방지할 수 있습니다.이 테스트를 통과함으로써 애플리케이션의 무결성을 증명할 수 있게 됩니다.E2E 테스트는 End To End의 약자로 애플리케이션의 흐름을 처음부터 끝까지 테스트하는 것을 의미합니다.React 에서의 테스팅도구  ? React 에서 가장 많이 사용하는 테스팅 도구는 cypress다. 하지만 요즘에 playwright 가 뜨기 시작하면서 찾아보니 cypress에서 playwright 로 옮기는 개발자들도 늘고 있는 것 같다.  Cypress..