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..

문제문제링크 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 제한사항가로의 길이 n은 5,000이하의 자연수 입니다.경우의 수가 많아 질 수 있으므로, 경우의 수를 1,000,000,007으로 나눈 나머지를 return해주세요.입출력 예시n결과411 문제 풀이이런 문제의 접근은 n이 1일때부터 차근차근 접근해야한다.하지만 세로가 3으로 고정되어 있으므로 n이 홀수일 때, 타일을 모두 채우는 경우의 수는 0이다.따라서 우리는 짝수 내용만 고려하면 된다. 그럼 n=2 일 때는 3개로 주어진 예시에서 찾을 수 있다. n=4일 때는 11개로 설명에 나와있다.여기서 주의 깊게 봐야할 점은 n=4일 때, n=2일 때..

내가 보려고 만드는 기술 면접 리스트문제 리스트CPU와 메모리는 각각 어떤 역할을 하나?프로그램은 어떻게 실행되는가?메모리 계층 구조를 간단히 설명해보세요.캐시 메모리는 왜 필요한가?지역성(Locality)이란?스택(Stack)과 힙(Heap)의 차이는?콜 스택(Call Stack)이란?스택 오버플로우가 발생하는 시점과 이유메모리 누수는 왜 성능 문제로 이어지나요?멀티코어 CPU가 프론트엔드에 주는 이점은?컨텍스트 스위칭이란?무거운 연산이 UI를 멈추게하는 이유Web Worker는 왜 필요한가요? 들어가기 전,컴퓨터 구조라는 과목은, 말 그대로 컴퓨터의 구조와 관련된 학문으로 내가 공부하고 있는 프론트엔드를 넘어 웹 개발자라면 기본적으로 인지하고 있어야하는 내용입니다.따라서, 공부한 내용은 컴퓨터 구조라..

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

📦 스택(Stack)스택(Stack)은 데이터를 한쪽 방향으로만 넣고 꺼내는 자료구조입니다. 후입선출(LIFO, Last In First Out)방식으로 동작하여 가장 마지막에 들어온 데이터가 가장 먼저 나가는 구조입니다.예를들어, 접시를 쌓아두고 위에서부터 하나씩 사용하는 것과 같습니다. 🏓 동작 방식스택의 핵심은 “순서대로 데이터를 넣고, 마지막 데이터를 꺼낸다.” 입니다. 1. 데이터 추가(push)앞에서부터 순서대로 데이터를 추가합니다.2. 데이터 제거(pop)가장 마지막 데이터를 제거합니다.3. 스택의 가장 마지막 데이터 확인마지막에 있는 데이터를 확인합니다.4. 스택이 비어있는지 확인스택이 비어있는지 확인합니다.가장 간단한 방법은 배열의 길이가 0인가를 확인하는 방법입니다.JavaScrip..

HTTP란HTTP(HyperText Transfer Protocol)란 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 계층의 프로토콜이며, 전통적인 Client - Server 모델을 따르는무상태 프로토콜로 서버가 두 요청 간에 어떠한 데이터(상태)도 유지하지 않습니다. 어려운 말인 것 같지만 이해하고 나면 별거 아닌 말입니다. 하나씩 살펴보면, HTTP는 글자에서 알 수 있듯, 하이퍼미디어 문서를 전송하기 위한 프로토콜입니다.여기서 하이퍼미디어 문서란, 우리가 흔히 사용하는 하이퍼링크와 사진, 영상 등을 문서에 담을 수 있는 문서를 말합니다. 우리가 흔하게 사용하는 유튜브라던가, 쇼핑몰 사이트를 대표적인 예로 들 수 있습니다. 애플리케이션 계층이란, 네트워크의 OSI 7계층 중 7계..