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

서론최근 새로운 사이드 프로젝트를 시작했다. 프로젝트 이름은 "맨유허브"로, 맨체스터 유나이티드 축구팀의 팬 페이지이다. 팀은 BE 2명, FE 1명(나) 이렇게 3명으로 구성되어 있는데, 처음에는 Designer 1명을 포함해 4명이었다.진행은 처음부터 순탄치 않았다. 기획 자체는 BE 2분이 주도적으로 진행하는데, Designer 분이 회사 일정으로 인해 시간적인 여유가 없었다. 그러다가 어쩔 수 없이 회사 일정이 빠듯해져 프로젝트에서 하차하는 결정을 내리셨다.와이어프레임도 채 완성되지 않은 상태에서 디자인 업무가 나에게 인수인계되었다. 백수 상태이지만 디자인부터 프론트까지 모두 혼자 담당하는 것이 부담스러웠다. 나 또한 기획에 참여하긴 했지만, 축구에 대한 관심이나 배경지식이 없는 상태에서 시작하여..

서론나는 어떤 개발자가 되고 싶은가? 개발 공부를 2~3년 해오면서, 부트캠프도 다니고 사이드 프로젝트도 여럿 진행했지만 정작 "나는 어떤 개발자인가"라는 질문엔 명확하게 답하지 못했다.AI가 코드를 짜고, 혼자서도 서비스를 만들어내는 시대가 됐다. 개발자가 하던 일의 상당 부분을 AI가 대신하고 있다. 그 흐름을 보면서 질문이 더 선명해졌다. AI가 대체할 수 없는 개발자는 어떤 개발자인가. 나는 그런 개발자가 될 수 있는가. 그 생각을 정리해 글로 남긴다. 개발자가 되고 싶은 이유사람들이 나로 인해 편해지는 것 자체가 좋았다. 개발을 시작한 계기는 순수하지 않았다. 학과 동아리 'CIA'에서 캡스톤 대회를 준비하게 됐고, 솔직히 말하면 대회 수상으로 졸업 시험을 면제받고 싶다는 생각이 컸다. 결과는 ..

반응형 레이아웃에서 뷰포트 너비가 바뀌는 순간, 렌더링할 요소 개수가 늦게 재계산됐다. 브레이크포인트를 넘는 순간 잠깐이지만 이전 개수의 요소가 그대로 노출되는 현상이었다.성능 문제는 아니었다. 하지만 상태 계산 시점이 렌더링과 맞지 않는 구조적인 문제였고, 그냥 두기엔 사용자 눈에 직접 보이는 오류였다. 이 글은 그 원인을 찾고 해결한 과정을 기록했다. 문제무엇이 문제였는가반응형 환경에서 뷰포트 너비를 변경하면 약 0.1초 정도 요소가 추가되는데 시간이 걸렸다.원래라면 뷰포트 786px(Tablet size)을 기준으로 보다 클 때 8개, 작을 때 6개가 렌더링 되어야하는데 아래 사진과 같이 렌더링 지연 시간이 보이는 것을 확인할 수 있다. 가설원인을 어디서 찾았는가가장 먼저, 네트워크 환경에 따라 ..

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