강의와 만들어진 코드가 달라요

ReactDOM.createRoot와 createRoot의 차이는 모듈을 가져오는 import 방식의 차이입니다:ReactDOM.createRoot (네임스페이스 import)ReactDOM 객체를 통해 접근전통적이고 명시적인 방식어떤 패키지에서 온 메서드인지 명확함 createRoot (named import)함수를 직접 import더 간결한 코드필요한 함수만 import (tree-shaking에 유리할 수 있음)기능적 차이는 없습니다! 두 방식 모두 동일한 함수를 호출합니다.권장사항개인/팀 선호도에 따라 선택일관성 유지가 중요React 공식 문서는 주로 named import 방식 사용최신 프로젝트에서는 createRoot (named import)를 더 많이 사용하는 추세

강의자료

현재 노션으로만 제공하는 점 양해부탁드립니다.

확장 프로그램 설치 및 최적화 버전 문의

안녕하세요 🙂아래 가이드를 한번 확인해 보시겠어요?Play CDN 사용하기Play CDN을 사용하면 별도의 빌드 과정 없이 브라우저에서 바로 Tailwind를 사용해 볼 수 있습니다. Play CDN은 개발 목적으로만 설계되었으며, 실제 운영 환경에서는 사용할 수 없습니다.01 HTML에 Play CDN 스크립트 추가하기HTML 파일의 에 Play CDN 스크립트 태그를 추가하고, Tailwind의 유틸리티 클래스를 사용하여 콘텐츠 스타일을 지정하기 시작하세요.index.html Hello world! 02 커스텀 CSS 추가해보기type="text/tailwindcss"를 사용하여 Tailwind의 모든 CSS 기능을 지원하는 커스텀 CSS를 추가할 수 있습니다.index.html @theme { --color-clifford: #da373d; } Hello world!

Notion API-DB 연결이 안돼요

안녕하세요 🙂노션 데이터베이스 우측 상단 더보기 버튼 클릭 후 [연결] 메뉴에서 생성하신 API 통합을 설정하셨을까요?많은 분들이 이부분을 실수로 누락하셔서요.

필터 watchEffect 질문입니다.

안녕하세요 🙂실무에서는 입력할 때마다 DB 조회를 하면 확실히 성능 문제가 발생할 수 있기에 Debounce, Throttle 기술을 사용합니다.좋은 질문입니다! 실무에서는 입력할 때마다 DB 조회를 하면 확실히 성능 문제가 발생할 수 있습니다. 일반적으로 다음과 같은 방법들을 사용합니다:1. Debouncing (디바운싱) - 가장 많이 사용사용자가 입력을 멈춘 후 일정 시간(보통 300-500ms)이 지나면 API를 호출합니다.import { ref, watch } from 'vue'; import { debounce } from 'lodash-es'; // 또는 직접 구현 const searchKeyword = ref(''); // lodash 사용 예시 const debouncedSearch = debounce(async (keyword) => { // API 호출 const response = await axios.get('/api/search', { params: { q: keyword } }); }, 300); // 300ms 대기 watch(searchKeyword, (newValue) => { debouncedSearch(newValue); }); 직접 구현 예시:const searchKeyword = ref(''); let timeoutId = null; watch(searchKeyword, (newValue) => { clearTimeout(timeoutId); timeoutId = setTimeout(async () => { // API 호출 await fetchData(newValue); }, 300); }); 2. Throttling (쓰로틀링)일정 시간 간격으로만 API를 호출합니다 (예: 1초에 한 번만).3. 최소 글자 수 제한watch(searchKeyword, (newValue) => { if (newValue.length 4. 클라이언트 사이드 캐싱이미 검색한 키워드는 캐시에 저장하고, 같은 검색어는 재요청하지 않습니다.const cache = new Map(); const searchWithCache = async (keyword) => { if (cache.has(keyword)) { return cache.get(keyword); } const result = await axios.get('/api/search', { params: { q: keyword } }); cache.set(keyword, result.data); return result.data; }; 5. 백엔드에서 처리백엔드에서 Rate Limiting 적용데이터베이스 인덱싱 최적화검색 엔진(Elasticsearch 등) 활용실무에서 가장 많이 사용하는 조합:Debouncing + 최소 글자 수 제한 + 클라이언트 캐싱이렇게 하면 사용자 경험도 좋고, 서버 부하도 크게 줄일 수 있습니다!

eslint 룰 관련 질문이 있습니다.

안녕하세요 🙂컨벤션에 대해 말씀드리면주요 ESLint 컨벤션대표적인 컨벤션:Airbnb Style Guide - 가장 인기 있는 JavaScript 컨벤션Standard JS - 세미콜론 없는 스타일Google Style Guide - 구글의 JavaScript 컨벤션Vue 전용:vue/recommended - Vue 공식 권장 규칙설치 예시# Airbnb (가장 많이 사용) npm install --save-dev eslint-config-airbnb-base # Standard npm install --save-dev eslint-config-standard 추천실무에서는 Airbnb 가장 많이 사용하고, Vue 프로젝트면 eslint-plugin-vue 추가하면 됩니다.팀 상황에 맞게 선택하거나 커스터마이징해서 사용하는 걸 권장드립니다.~!

private folders 와 전역 폴더

안녕하세요 🙂좋은 질문입니다! src/components와 src/app/_components의 차이와 사용 이유를 설명해드리겠습니다.주요 차이점src/components (전역 폴더)프로젝트 전체에서 재사용되는 컴포넌트여러 페이지/라우트에서 공통으로 사용예: Header, Footer, Button, Modal 등src/app/_components (Private 폴더)언더스코어(_)로 시작하는 폴더는 Next.js 라우팅에서 제외됨해당 라우트 세그먼트 내부에서만 사용하는 컴포넌트페이지 URL에 영향을 주지 않음분리하는 이유1. 명확한 스코프 관리src/ ├── components/ # 전역 재사용 컴포넌트 │ ├── Header.tsx │ └── Button.tsx └── app/ ├── blog/ │ ├── _components/ # blog 페이지에서만 사용 │ │ └── BlogCard.tsx │ └── page.tsx └── about/ ├── _components/ # about 페이지에서만 사용 │ └── TeamMember.tsx └── page.tsx 2. 코드 조직화와 유지보수컴포넌트가 어디서 사용되는지 명확히 알 수 있음특정 페이지 수정 시 해당 _components만 확인하면 됨3. 의존성 관리전역 컴포넌트 수정 시 영향 범위가 넓음Private 컴포넌트는 영향 범위가 제한적사용 가이드라인하나만 사용해도 되는 경우:작은 프로젝트재사용 컴포넌트가 많지 않을 때팀 규모가 작을 때분리가 권장되는 경우:대규모 프로젝트여러 개발자가 협업할 때페이지별로 독립적인 컴포넌트가 많을 때결론반드시 분리할 필요는 없습니다. 프로젝트 규모와 팀의 선호도에 따라 선택하면 됩니다.간단한 프로젝트: src/components만 사용복잡한 프로젝트: 두 가지 모두 활용하여 명확한 구분제 개인적인 추천은 처음에는 src/components만 사용하다가, 특정 페이지 전용 컴포넌트가 많아지면 그때 _components를 도입하는 것입니다.

AI와 CSS 라이브러리의 궁합

안녕하세요 🙂Tailwind CSSCursor AI는 Tailwind의 유틸리티 클래스 패턴을 매우 잘 이해하고 있습니다. flex items-center gap-4 같은 클래스만 봐도 정확히 어떤 레이아웃인지 파악할 수 있어서, 자동완성과 코드 제안이 놀라울 정도로 정확합니다. Tailwind는 AI의 학습 데이터에 가장 많이 포함된 CSS 프레임워크이기 때문에, Cursor가 거의 완벽하게 코드를 생성해줍니다. 클래스 이름만으로 스타일이 명확하게 표현되어 AI가 의도를 쉽게 파악할 수 있습니다.shadcn/uiTailwindCSS 기반 컴포넌트 프레임워크입니다!! 컴포넌트 코드가 프로젝트에 직접 복사되기 때문에 AI가 내부 구조를 완전히 파악하고 자유롭게 수정할 수 있습니다. npm 패키지로 설치되는 다른 UI 라이브러리들과 달리, Cursor가 컴포넌트를 열어보고 원하는 대로 커스터마이징할 수 있다는 점이 큰 장점입니다. 또한 문서화가 매우 잘 되어 있어 AI가 정확한 사용법을 알고 있습니다.최적의 조합: Tailwind CSS + shadcn/ui두 라이브러리를 함께 사용하면 시너지 효과가 극대화됩니다. shadcn/ui가 Tailwind 기반으로 만들어졌기 때문에, Cursor는 컴포넌트의 스타일을 Tailwind 클래스로 쉽게 수정할 수 있습니다. "Create a login form with shadcn Button" 같은 간단한 프롬프트만 줘도 완성도 높은 컴포넌트를 즉시 생성해주며, 이후 세부 스타일 조정도 매우 쉽습니다. AI와 함께 작업할 때 가장 높은 생산성을 보장하는 조합입니다.

퀴즈 질문 풀이 오류

안녕하세요 🙂맞습니다. AI퀴즈가 잘못되었습니다.AI퀴즈는 인프런에서 자동으로 생성된 퀴즈로 수정 요청할게요~!

onClick 이벤트에 함수 넘길 때

안녕하세요! 이 두 방법의 차이점을 명확하게 설명해드리겠습니다.1. onClick={() => onDeleteTodo(item.id)}화살표 함수로 감싸서 전달하는 경우:// 매개변수가 필요한 경우 onDeleteTodo(item.id)}> 삭제 언제 사용하나요?함수에 특정 매개변수를 전달해야 할 때 (예: item.id) 2. onClick={onDeleteTodo}함수를 직접 전달하는 경우:// 매개변수가 불필요하거나 event 객체만 필요한 경우 삭제 언제 사용하나요?매개변수가 필요 없을 때이벤트 객체(event)만 사용하면 될 때성능을 최적화하고 싶을 때성능 고려사항// ❌ 매번 새로운 함수 생성 (렌더링할 때마다) onDeleteTodo(item.id)}>삭제 // ✅ 동일한 함수 참조 유지 삭제 결론 및 권장사항매개변수가 필요하다면: onClick={() => func(param)} 사용매개변수가 불필요하다면: onClick={func} 사용 강의에서 onClick={() => onDeleteTodo(item.id)}를 사용한 이유는 각각의 todo 항목의 고유한 id를 삭제 함수에 전달해야 하기 때문입니다!추가 궁금한 점이 있으시면 언제든 질문해주세요! 🙂