react (4) 썸네일형 리스트형 Vue 개발자가 Next.js를 배우며 겪은 혼란: Server Component와 Client Component 이해하기 Vue와 Nuxt에 익숙한 개발자로서 Next.js를 처음 접했을 때, 가장 혼란스러웠던 부분은 "왜 데이터를 fetch 했는데 화면이 업데이트되지 않는가?"였습니다. Vue에서는 당연하게 작동하던 반응형 시스템이 Next.js에서는 전혀 다른 방식으로 동작했고, revalidatePath라는 낯선 함수를 호출해야 했습니다.이 글은 Vue/Nuxt 개발자가 Next.js의 Server Component와 Client Component를 이해하는 과정을 담았습니다.첫 번째 혼란: 왜 화면이 업데이트되지 않는가?Vue/Nuxt에서의 당연함Vue나 Nuxt에서 개발할 때, 반응형 시스템은 너무나 자연스럽게 작동합니다. {{ post.title }} 이 코드는 예상대로 작동합니다. 게시글을 추가하면 .. JavaScript 개발자가 Flutter의 copyWith를 이해하기까지 시작하며Flutter를 배우면서 가장 궁금했던 것 중 하나가 바로 copyWith 패턴이었습니다.// 이게 왜 안 되는 거지?deck.keyword = "커피"; // 컴파일 에러!// 왜 이렇게 해야 하지?final newDeck = deck.copyWith(keyword: "커피");"JavaScript였으면 그냥 바꾸면 되는데..." 라는 생각이 들었습니다. 하지만 실제로 사용해보니 이 패턴이 왜 필요한지 이해하게 되었고, 오늘은 그 내용을 공유하려 합니다.JavaScript에서는 당연했던 것들JavaScript(특히 React)로 개발할 때, 객체나 배열을 다루는 방식은 이랬습니다:// 객체 일부 변경const user = { name: "김철수", age: 30, email: "kim@exam.. JavaScript this 바인딩 이해하기 핵심 개념JavaScript에서 this는 함수가 어떻게 호출되느냐에 따라 결정됩니다. 함수를 작성할 때가 아니라, 실행될 때 결정된다는 게 핵심입니다.1. 기본 바인딩 (Default Binding)함수를 그냥 호출하면 this는 undefined가 됩니다 (strict mode/모듈 환경).function sayName() { console.log(this.name);}sayName(); // TypeError: Cannot read properties of undefined2. 암시적 바인딩 (Implicit Binding)객체의 메서드로 호출하면 this는 .앞의 객체를 가리킵니다.const person = { name: '철수', sayName: function() { console... Vite: 차세대 프론트엔드 개발 도구 Vite란 무엇인가?Vite(프랑스어로 "빠르다"는 뜻)는 Evan You(Vue.js 창시자)가 만든 차세대 프론트엔드 빌드 도구입니다. 기존의 Webpack이나 Parcel 같은 번들러들이 가진 느린 개발 서버 시작 속도와 느린 HMR(Hot Module Replacement) 문제를 해결하기 위해 탄생했습니다.왜 Vite가 필요할까?기존 번들러 기반 개발 환경의 문제점을 이해하면 Vite의 필요성이 명확해집니다.전통적인 번들러의 한계느린 서버 구동: 프로젝트가 커질수록 개발 서버를 시작하는 데 수 분이 걸리기도 함느린 업데이트: 파일 하나를 수정해도 전체 번들을 다시 빌드해야 하는 경우가 많음비효율적인 리소스 사용: 필요하지 않은 모듈까지 번들링하여 메모리 낭비Vite의 핵심 원리1. ESM(ES .. 이전 1 다음
