front-end

특정 상황에서 뒤로가기를 했을 때 페이지가 리렌더링 + 리페인팅이 되면 사용자 경험(UX)가 떨어지는 경우가 발생한다. 예를 들어 포스트 목록을 스크롤 다운하다가 하나를 클릭했지만 원하는 포스트가 아니라 뒤로가기를 눌렀을 때 리렌더링되며 맨 위로 다시 올라가게 된다면 사용자 경험이 떨어질 수 밖에 없다. https://github.com/nuxt/nuxt/issues/6451 Prevent re-render / re-paint of a page when you press the browser back button · Issue #6451 · nuxt/nuxt What problem does this feature solve? I am trying to prevent the page from re-rend..

렉시컬 환경을 설명하며 호이스팅에 간단하게 언급했었다. (https://bysxx.tistory.com/3) 렉시컬 환경을 간단하게 요약하자면 자바스크립트를 실행하며 코드 실행에 필요한 정보가 함수 단위로 쌓이는 객체를 실행 컨텍스트라고 하고 여기에는 렉시컬 환경이 있는데 여기에는 함수 내부의 정보를 가진 environmentRecord, 함수 외부의 정보를 가진 outer-EnvironmentReference가 있다. 여기서 environmentRecord

작년 11월 Nuxt 3 stable 버전이 출시되었다 (Reference) Announcing 3.0 · Nuxt We are thrilled to announce the first stable version of Nuxt 3.0.0 ✨ Nuxt 3 is a modern rewrite of the Nuxt framework based on Vite, Vue3, and Nitro with first-class Typescript support and the result of more than two years of research, community feedback nuxt.com 한글로 된 관련 문서가 없는 것 같아 요것 먼저 작성해볼까 한다 우선 가장 큰 변화점은 Vue3를 지원해 준다는 점이다. 사..

만약 누군가에게 자바스크립트에 대해 한 가지만 알려줄 수 있다면 실행 컨텍스트에 대해 알려줄 것 같다. 그만큼 실행 컨텍스트는 가장 중요한 자바스크립트의 핵심 원리이자 여러 가지 특이한 특징들을 가지는 이유가 된다. 먼저 실행 컨텍스트를 한 줄로 요약해 보자면 자바스크립트가 실행됐을 때 스택형태로 쌓이는 하나의 객체이다. 이것만 들어서는 이해하기 힘들 것 같으니 사진과 함께 설명하자면 function foo() { function bar() { console.log('bar') } bar() } foo() 위 코드를 실행했을 때 아래 사진처럼 진행되게 된다 1. 먼저 전역 실행컨텍스트가 쌓이게 되고 2. 그 이후 foo가 실행되며 스택에 쌓임 3. foo안에 있는 bar가 실행되고 스택에 쌓임 4. ba..