튜이의 블로그 튜이의 블로그

지난 글 [JavaScript] 동작 원리 ① – 실행 컨텍스트와 콜 스택 개념 정리에 이어지는 자바스크립트기본 2편이다이번엔 이벤트 루프와 큐에 대한 이해해보고 싱글스레드 기반의 자바스크립트에서 비동기처리와 관련된 동작들이 어떻게 실행되는지 파악해볼 것이다. # Queue비동기 처리를 위한 작업들이 대기하고 있는 공간 ## 태스크 큐(Task Queue)와 마이크로태스크 큐(Microtask Queue)큐 이름포함하는 작업 예시처리 우선순위태스크 큐 (Task Queue)setTimeout, setInterval, DOM 이벤트 등낮음마이크로태스크 큐 (Microtask Queue)Promise.then, queueMicrotask 등높음 # 이벤트 루프이벤트 루프는 자바스크립트안에서 비동기 처리를 가..

프론트엔드 개발을 하다 보면 자연스럽게 듣게 되는 말들이 있다."호이스팅", "콜 스택", "TDZ", 그리고 "실행 컨텍스트".처음 들으면 뭔가 복잡하고 어려워 보이지만, 이건 결국 자바스크립트가 코드를 어떻게 읽고 실행하는지에 대한 이야기다.오늘은 그중에서도 가장 기초가 되는 실행 컨텍스트와 콜 스택에 대해 정리해본다.# 실행 컨텍스트란?실행할 코드와 관련된 정보를 담고 있는 실행 환경이다.자바스크립트는 코드를 실행하기 전, 먼저 해당 코드를 위한 실행 컨텍스트(Context)를 만든다.이 안에는 아래와 같은 정보들이 담긴다어떤 변수들이 있는지어떤 함수가 정의되어 있는지현재 this는 뭔지어떤 스코프에 있는지이런 정보들이 있어야 자바스크립트가 코드를 실행할 수 있다. 예를들어function sayH..

1. var, let, const 차이🔸 var: variable(변동이 심한, 가변적인)의 약자, ES6 이전에 사용되던 변수 선언 방식이고 요즘은 잘 안 쓴다. 특별한 경우가 아니면 안 쓰는걸 추천.function scope나 global scope에서 변수 선언이 이루어진다.함수 내부에서 var로 선언된 변수는 해당 함수 내에서만 유효하며, 함수 외부에서는 전역 변수로 간주된다.var x = 1;if (x === 1) { var x = 2; console.log(x); // Expected output: 2}console.log(x);// Expected output: 2결과: x는 if문 안에서 재할당되며, 블록 밖에서 x가 변경된 모습을 볼 수 있음. 이는 var가 블록 스코프를 무시하고..

텍스트 관련 애니메이션 정리글자단위 페이드 인 글자단위 페이드-[왼쪽에서 오른쪽] Focus 코드보기 See the Pen 글자단위 페이드 - [왼쪽에서 오른쪽] by eso0117 (@eso0117) on CodePen. 글자단위 페이드-[오른쪽에서 왼쪽] Focus 코드..

화살표 함수기존의 함수 표현을 대체할 간결한 표현이지만, 모든 경우에 사용할 수 없고 제한적이다. ## 차이점 & 한계this, super에 대한 바인딩이 없다.new, new.target 키워드가 없다.일반적으로 스코프를 지정할때 쓰는 call, apply, bind 함수 등에 적합하지 않다.생성자로 이용될 수 없다.함수 내에 yield를 쓸 수 없다.## 기존 방식과 화살표 함수 비교// 기존 이름없는 함수function (a) { return a + 100;}// 화살표 함수로 변경시// 1. 'function'을 제거하고 arrow를 인자와 중괄호 사이에 넣기(a) => { return a + 100;}// 2. 중괄호와 'return'을 제거하기 -- return은 함축되어 있다.(a) => ..

들어가기 전에이 글은 Next.js - Chapter 17 : Next Steps 강의를 번역한 글입니다.다음 과정 그리고 번역자의 말축하합니다! Next.js의 주요 기능과 좋은 방법들을 배울 수 있었던 Next.js의 대시보드 코스를 끝마쳤습니다.하지만 이건 겨우 시작입니다. 작은 사이드 프로젝트를 만드는 것부터, 스타트업 아이디어의 구현, 그리고 팀과 함께 만들 커다란 규모의 어플리케이션까지 Next.js는 이러한 구현을 위한 수많은 기능을 가지고 있습니다.여기 Next.js에 대해 더 알아볼 문서들이 있습니다.Next.js 문서Next.js 탬플릿어드민 대시보드 탬플릿Next.js 커머스블로그 스타터 도구Nextra: 문서 생성 도구이미지 갤러리 스타터Next.js 깃 저장소Vercel 유튜브Ne..

들어가기 전에이 글은 Next.js - Chapter 16 : Adding Metadata 강의를 번역한 글입니다.메타데이터 추가하기메타데이터는 SEO와 공유에 있어서 중요한 역할을 합니다. 이번 챕터에서, Next.js에서 메타데이터를 추가하는 방법에 관해 이야기해 볼 겁니다.이번 챕터에서...여기 우리가 다룰 주제들이 있습니다.메타데이터는 무엇인지메타데이터 타입들메타데이터를 통해 Open Graph 이미지를 추가하는 방법메타데이터로 파비콘 이미지를 추가하는 방법메타데이터는 무엇인가요?웹 개발에서, 메타데이터는 웹페이지에 대해 추가적인 상세정보를 제공합니다. 메타데이터는 페이지를 방문하는 유저에게 보이지 않습니다. 대신 화면 뒤에서 페이지의 HTML내에 내장되어(보통 요소) 작동합니다. 이 숨겨진 정보..

들어가기 전에이 글은 Next.js - Chapter 15 : Adding Authentication 강의를 번역한 글입니다.인증 추가하기이전 챕터에서, 폼(form) 유효성 검사를 추가하고, 접근성 향상을 하여 invoices 라우트를 완성했습니다. 이번 챕터에서는 대시보드에 인증을 추가할 것입니다.이번 챕터에서...여기 우리가 다룰 주제들이 있습니다.인증(authentication)이란 무엇인지NextAuth.js를 통해 인증을 추가하는 방법우리의 라우트를 보호하고, 유저를 리다이렉트 하기 위해 미들웨어를 사용하는 방법폼(form) 에러와 pending 상태를 처리하기 위한 React의 useFormStatus와 useFormState를 사용하는 방법인증(authentication)이란 무엇인가요?인..