묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해
Design a Toast Notification System 미션 관련 질문드립니다.
안녕하세요, 강사님. 강의 잘 보고 있습니다.Design a Toast Notification System 미션을 진행하고 있는데요, 작성한 내용을 채점하고 리뷰하기 위한 프롬프트가 있으면 좋을 것 같습니다. 강사님의 미션 평가 기준이 담긴 프롬프트로 커리큘럼을 잘 따라가고 있는지 점검하는 기회, 강사님과 수강생의 시간을 모두 아낄 수 있지 않을까 생각이 들어서 의견 남깁니다.남은 강의도 잘 보겠습니다. 좋은 강의 제공해주셔서 감사합니다!
-
해결됨"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1 - V8과 코어 해체기
call stack 표현이 잘못표현된것이 아닌가요?
5. [실전 훈련] 사고 실험: 상태 누적 시각화 추적하기예시에서[Step 2] setTimeout과 Promise 등록등을 보면 Call Stack이 비어있음 이라고 표현하셨는데, main 호출후 -> 동기코드 완료될때까지. Call Stack은 엄밀히 비어있는 상태가 아니지 않나요?즉 console.log("D") 가 출력되기 전까지는콜 스택이 비워지는 상태가 발생할수 없지 않나요? 혹시 제가 잘못 알고 있을수도 있으니조심히 여쭙습니다.
-
해결됨미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해
강의자료가 누락됐어요
2. UI 구현자를 넘어 Product Engineer로 가는 T-아키텍처 그리고 AI 시대의 프론트엔드 엔지니어많은 분량은 아니지만 해당강의 자료가 .excalidraw 파일에 누락되어있습니다.
-
미해결프론트엔드 개발을 위한 모든 지식 (개념편)
강의 일정 및 수업 자료 공유 관련 문의드립니다!
안녕하세요 해여님. 강의 잘 수강하고 있습니다. 남은 강의는 언제 업로드 되는지 일정 공유 부탁드립니다. 수업자료 공유(notion/pdf)는 가능한지 문의드립니다. 2-1. 가능하다면 어떤 형태로 언제 업로드 되는지 공유 부탁드립니다. 감사합니다. 오늘도 행복한 하루 되시길 바랍니다.
-
미해결React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)
27강 Context내 RSC 사용 관련 문의
강의 잘 듣고있습니다. 한 가지 궁금한 점이 있어 질문드립니다."App.tsx를 Provider로 감싸는 순간 그 아래 모든 컴포넌트가 서버 컴포넌트로서의 최적화 기회를 잃는다"는 부분이 잘 이해되지 않습니다.제가 알기로는 Provider를 children prop으로 받는 composition pattern으로 작성하면, Provider 자체는 Client Component여도 그 안에 들어가는 children은 Server Component로 유지될 수 있는 것으로 알고 있습니다. Next.js App Router의 RootLayout에서 <Providers>{children}</Providers> 형태로 쓰는 패턴이 그 예시라고 알고 있고요.이 경우에도 RSC 최적화 기회를 잃는다고 보시는 건지, 아니면 제가 놓치고 있는 다른 맥락이 있는지 궁금합니다.
-
해결됨"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1 - V8과 코어 해체기
혹시 다음 강의 제작 예정된 것들이 있을까요?
안녕하세요.이번에 Node.js and CS Part 1을 수강했고 이어서 Part 2도 열심히 수강할 예정입니다.이전에도 느꼈던 부분이지만 AI 시대에는 프론트엔드와 백엔드를 엄격하게 나누는 의미가 점점 줄어들고 있다는 생각이 들었습니다. 그런 흐름 속에서 강의가 저에게 정말 많은 도움이 되었습니다.좋은 강의 만들어주셔서 감사합니다.혹시 Node.js 시리즈가 Part 3까지 이어지는 것으로 보이는데 그 다음 강의에 대해서도 계획하고 계신 내용이 있을까요?개인적으로는 운영/배포 과정에서의 실무 노하우나, 확장 가능한 프로젝트 구조 설계, npm 패키지 제작, 디자인 패턴 같은 주제에도 관심이 많아서 이후 강의에서 이런 내용들도 다뤄주신다면 정말 재미있게 들을 것 같습니다.다음 강의도 기대하고 열심히 공부해보겠습니다.
-
해결됨"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1 - V8과 코어 해체기
1강 질문
Node.js가 I/O집약적 서비스에서 탁월한 성능을 발휘하는 원리가 궁금합니다.
-
해결됨"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1 - V8과 코어 해체기
ai가 만든 강의인가요?
목소리도 그렇고 tts가 읊어주는 것 같은데, 그냥 ai로 대충 장료 만들고 tts 입힌 강의인거 아니죠...?
-
미해결React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계
state 객체로 묶기
mport { useState } from"react"; functionSignupForm() { const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); const [agree, setAgree] = useState(false); functionhandleSubmit(e) { e.preventDefault(); // 페이지 새로고침 방지console.log("제출 데이터:", { username, email, agree }); alert${username}님, 가입이 완료되었습니다!); } return ( <formonSubmit={handleSubmit}><label> 사용자 이름 <inputtype="text"value={username}onChange={(e) => setUsername(e.target.value)} /> </label><br /><label> 이메일 <inputtype="email"value={email}onChange={(e) => setEmail(e.target.value)} /> </label><br /><label><inputtype="checkbox"checked={agree}onChange={(e) => setAgree(e.target.checked)} /> 약관에 동의합니다 </label><br /><buttontype="submit">가입하기</button></form> ); } 이학습 코드에선 왜 const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); const [agree, setAgree] = useState(false);이부분들을 객체로 안 묶고 따로 state로 관리 하는지가 궁금합니다!
-
해결됨"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1 - V8과 코어 해체기
3강 질문
💡[CS 실무 Point: OS 계층의 역량 활용 (epoll / kqueue)] 단일 스레드라고 해서 컴퓨터가 정말로 혼자 일하는 것은 아닙니다. 파일 읽기나 네트워크 통신 같은 무거운 작업은 Node.js가 직접 처리하지 않고, 운영체제 커널이 제공하는 고성능 이벤트 통지 API(Linux의 epoll, macOS의 kqueue 등 시스템 콜)를 통해 운영체제에게 철저하게 위임(Offloading)합니다. 즉, Node.js의 메인 스레드는 교통정리만 아주 빠르게 수행할 뿐, 실제 무거운 짐은 OS 커널이 백그라운드에서 나르고 있는 것입니다. 안녕하세요, 위 설명에서 질문이 있습니다.운영체제에 위임하는 작업과 libuv 스레드 풀의 워커 스레드가 어떤 연관이 있고 어떻게 유기적으로 동작하는지 궁금합니다.
-
해결됨"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1 - V8과 코어 해체기
2강 nodejs 3단계 설명 질문
2.4 Node.js의 3단계 분업 아키텍처 자바스크립트 코드가 운영체제를 움직이는 과정은 세 단계의 협업으로 이루어집니다.자바스크립트 코드 작성: 개발자가 비즈니스 로직을 작성합니다.V8 엔진의 통역: 자바스크립트를 C++가 이해할 수 있는 형태로 통역합니다.C++ 코어 및 바인딩(Bindings): 통역된 지시를 받아 운영체제(OS)에 직접 명령을 내립니다. 이때 C++는 현장의 작업 반장 역할을 수행하며 실제 파일이나 네트워크를 제어합니다.위 내용에서 v8의 통역 이후 부분이 이해가 잘 가지 않습니다. v8 엔진의 결과물은 C++과 관계없이 바이트코드나 기계어가 되지 않나요? 그리고 js만으로 불가능한 os 작업이 나오면 v8 실행 중에 미리 C++로 만들어 놓은 모듈을 호출하는 식으로 동작하는게 아닌지 문의드립니다.감사합니다.
-
해결됨Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)
17강 zustand store 서버에서 생성
서버에서 스토어의 초기값을 설정해서 클라이언트에게 넘겨주는데결국 서버 상태를 zustand에서 관리하게 되는거 아닌가요? 이미 tanstack query가 있음에도 해당 방식을 활용하는 이유가 궁금합니다. 초기값만 서버에서 넘기고 이후는 클라이언트에서만 관리되는 상태 예시가 있을까요?
-
미해결React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)
문의관련 문의
다른분들이 이미 80강 내용없음 및 중복인 부분들 문의를 올렸는데 왜 개선되는게 하나도 없나요????최소한 모가 어떻다는 내용은 전달해 주셔야 하는거 아닌가요??
-
해결됨Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)
next.js 를 2대이상 실행하는 경우 제공하는 cache 기능들은 어떻게 되나요?
MSA 에서 BFF 로 활용하는 경우 클라우드 환경에서 성능과 관련하여 2~3대 이상 실행하는 경우 관련 기능들은 어떻게 동작하나요?part2 렌더링 패러다임의 전환: 캐싱 혁명 (Caching Revolution)part3 Next.js 16 서버 캐시와 TanStack Query의 동기화또 이와 다른 주의 할 점이나 고려해야 하는 부분이 있나요?
-
미해결Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성 (서버-클라이언트 동기화, 극한의 최적화, 풀스택 보안)
76. 전문성 더하기: 놓치면 아쉬운 관련 기술들 수업 자료가 없어요.
수업 자료가 없어요.
-
해결됨DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]
렌더링 차단 리소스 javascript 실행에 관련해서 질문 있습니다.
안녕하세요? 수업을 듣다 질문이 있어서 남기게 됐습니다!브라우저가 렌더링 과정이 DOM & CSSOM -> Render Tree -> layout 단계 -> Paint -> Compositing 단계 순서로 이해하고 있습니다.이번 수업에서는 <script src="url"></script>를 발견하면 DOM 파싱을 멈추고 script 파일을 다운 후에 script가 먼저 실행한 다음 DOM을 다시 파싱 하는 걸로 이해했습니다.여기서 궁금한게 생겼는데요. <body> 끝에 script 태그가 있고, script 코드 내용에서 DOM에 접근해서 한 요소의 widht, height, background를 변경하는 코드가 있어 먼저 실행 되었다면 브라우저 렌더링 어느 부분에 영향을 미치는지 궁금합니다.제가 생각하기에는 script가 먼저 실행되고 나머지 파싱이 되는거라는 수업 내용에 따르면 DOM & CSSOM에서 적용이 된 후 다음 단계들을 따를 것 같습니다.이 수업을 듣기 전에는 리플로우, 리페인트 과정이 있을 거라고 생각했으나 리플로우, 리페인트 과정이 없겠다는 생각이 들어 질문하게 되었습니다.감사합니다.
-
해결됨DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]
렌더링 차단 리소스 관련해서 CSS 질문이 있습니다.
안녕하세요? 수업 잘 듣고 있습니다.막연하게 알고 있던 렌더링에 대해서 자세히 알 수 있어서 정말 많은 도움이 되고 있습니다.수업을 듣다 보니 궁금한 것이 생겨서 문의 드립니다.수업 내용중에 CSS를 <head> 태그 안에 위치 하고 최적화 전력으로 불필요한 CSS는 media속성, loadCSS, 동적으로 분리 한다고 하셨는데요.CSS는 media속성 즉 media query를 말씀 하신 걸까요?loadCSS와 동적으로 분리 한다고 하셨는데 이 부분들이 감이 잡히지 않아 질문 드립니다.감사합니다.
-
해결됨Next.js 마스터 클래스: Part 2 - 풀스택 아키텍처와 프레임워크 심화 (Server Actions, 캐시 혁명, 고급 라우팅)
22강 강의 영상 문의 드립니다.
안녕하세요.해당 섹션을 보니 강의 영상이 올라갈 자리로 보이나 빈 화면이 나와서요.확인 부탁드립니다 :)
-
해결됨Next.js 마스터 클래스: Part 2 - 풀스택 아키텍처와 프레임워크 심화 (Server Actions, 캐시 혁명, 고급 라우팅)
아래 위치에 동영상이 보이지 않습니다.
아래 위치에 동영상이 보이지 않습니다.36. 18강. [Next.js 실전] redirect() 함수로 구현하는 완벽한 동선 제어
-
해결됨Next.js 마스터 클래스: Part 1 미션으로 배우는 App Router의 본질과 렌더링 설계
Vercel 사용법
26강 마지막에 다음에 Vercel 사용법 알려준다고 되어 있는데 Next.js 마스터 클래스: Part 2 에 Vercel 사용법이 나오는 건가요?26강. generateMetadata: 검색 엔진(SEO)의 마음과 소셜 미디어 공유를 지배하는 동적 메타데이터 다음에 Vercel 사용법이 않나오네요?