Next.js App Router에서 Motion을 사용하다 보면 다음 두 가지 방식이 있다.// 일반적인 방식"use client";import { motion } from "motion/react";// React Server Components 환경import * as motion from "motion/react-client";둘의 차이는 단순히 import 경로가 아니라 컴포넌트가 어느 렌더링 경계에 배치되는지, 서버와 클라이언트에서 어떤 작업이 수행되는지, 브라우저로 전달되는 JavaScript의 범위가 어떻게 달라지는지에 있다.1. motion/reactmotion/react를 사용하려면 Motion을 사용하는 컴포넌트에 "use client"를 선언해야 한다."use client";impo..

들어가며"호이스팅이 왜 일어날까?", "스코프 체인이란 무엇일까?", "this는 왜 상황마다 달라질까?" JavaScript를 공부해봤다면, 이 질문들은 한 번쯤 생각해보았을 것입니다. 이 세 가지는 따로 외워야 할 별개의 규칙이 아닌, 실행 컨텍스트라는 개념을 이해하면 전부 같은 원리로 설명됩니다.이 글에서는 실행 컨텍스트가 무엇인지, 내부에 무엇을 담고 있는지, 그리고 호출 스택에서 어떻게 동작하는지를 다룹니다.컨텍스트실행 컨텍스트를 이해하기 앞서, 컨텍스트란 무엇인지 이해해야합니다.컨텍스트(Context)란 상황, 맥락, 문맥 상의 의미를 의미합니다. 이를 개발자답게 해석해보면, 텍스트의 내용뿐만 아니라, 텍스트가 사용된 상황, 이전 문맥, 이후 맥락 등을 모두 가지고 있는 데이터 묶음을 가리킨다..