inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

primitive에 onClick 이벤트가 안되는 경우

미해결

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

아래와 같이 코드를 작성했습니다. 렌더링은 잘되며, 에러코드도 안 뜨는데 클릭 이벤트에 응답이 없습니다. import { useLoader, useThree } from '@react-three/fiber'; // import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/Addons.js'; export default function ShowRoom() { const gltf = useLoader(GLTFLoader, './models/custom.glb'); const { raycaster } = useThree(); // console.log(gltf); console.log(raycaster); const handleClick = () => { console.log('click'); const intersects = raycaster.intersectObjects(gltf.scene.children, true); console.log(intersects); }; return ( <primitive object={gltf.scene} onClick={handleClick} /> // <mesh // rotation={[THREE.MathUtils.degToRad(45), THREE.MathUtils.degToRad(45), 0]} // > // <boxGeometry /> // <meshStandardMaterial /> // </mesh> ); }

  • javascript
  • react
  • typescript
  • 인터랙티브-웹
  • three.js
  • webgl
  • react-three-fiber
이지현 댓글 1 좋아요 0 조회수 10

감정일기장 vercel 배포 후 새로 고침 시 404페이지가 뜨는 이유

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요! 길고긴 강의를 끝내며 배포에 성공했습니다! 🎉 뿌듯하네요~ 질 좋은 강의 진행해주셔서 감사합니다. 배포 이후 페이지 확인하면서 한가지 문의드릴 부분이 있습니다. 사이트에 접속해서 일기 하나를 열고(/diary/1 같은 주소) 새로고침(F5)을 하면 404페이지가 뜨는데 이 부분은 어떻게 수정해야하는지 문의드립니다.

  • javascript
  • react
  • node.js
MIYEON LEE 댓글 2 좋아요 0 조회수 15

자료실

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

선생님 자료실이 어디있는지 못찾겠어요

  • HTML/CSS
  • javascript
  • sass
  • jquery
  • scss
junghee sun 댓글 2 좋아요 1 조회수 20

Sort 메서드 관련 아티클

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

수업 노트에 제시된 "Sort 메서드 관련 아티클" 하이퍼링크를 클릭하면 404: 잘못된 링크입니다. 메뉴를 통해 정상적인 페이지로 접근하세요. 라고 뜨면서 아무런 내용도 보이지 않습니다. 다른 페이지로 넘어가거나 홈으로 넘어가려고 해도 같은 오류가 뜨는데, 어떤 경로로 접속해야 해당 아티클을 확인할 수 있는 것인가요?

  • javascript
  • react
  • node.js
ikv 댓글 2 좋아요 0 조회수 23

4.1) React.js를 소개합니다 강의를 듣고 궁금한 점이 생겼습니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

강의에서는 React에서 DOM을 흉내 낸 Virtual Dom을 사용하여, 업데이트를 Virtual Dom에 다 모은 후에 한번에 반영하여 DOM을 1회 수정해 시간적인 측면에서 성능을 개선한다라고 설명해주셨다고 이해했는데, Virtual DOM을 수정하는 것이 DOM을 수정하는 것보다 시간이 빠른 이유는 뭔가요?

  • javascript
  • react
  • node.js
승준 댓글 2 좋아요 0 조회수 20

html, body에 적용하는 css 스타일 질문입니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

html, body { margin: 0px; width: 100%; background-color: rgb(246, 246, 246); } 우선 해당 스타일을 body 뿐만 아니라 html 까지 포함 시키는 이유가 궁금합니다. width에 100%를 주었는데, 그 이유와 height에는 100%를 주지않은 이유가 궁금합니다. 자식 요소들의 너비/높이에 %를 준다면 부모 요소의 너비/높이를 기준으로 삼는다는데, 최상위 태그인 html의 너비/높이에 %를 주면 그 기준이 무엇인지도 궁금합니다.

  • javascript
  • react
  • node.js
박준형 댓글 2 좋아요 0 조회수 23

html / css 기초는 있습니다..

해결됨

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

첫 강의 수강하면서 모르는 부분이 조금 있어 기본기를 더 다져야 할것 같아서 미뤄두었는데 제 수준 정도면 강의 듣는데 지장이 없을까요? html -> 시멘틱태그, class,id 등등 태그 특성이해 css -> flex, transition, animation, flex 등등 기초부분 가능

  • HTML/CSS
  • javascript
  • 웹앱
  • 웹-디자인
  • 포트폴리오
seomiseon44 댓글 2 좋아요 0 조회수 36

모든 컴포넌트를 클라이언트 컴포넌트로 했을 때

미해결

타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지

안녕하세요, 저는 회사에서 next.js로 포팅하여 개인적으로 좀 공부하고 있는 학생입니다. 현재 2강 할 일 관리 앱을 보면서 저희 회사의 작업 방식을 함께 생각해봤는데 저희 회사는 꼭 필요한 부분 (iron-session을 이용하여 세션을 가져온다거나)을 제외하고는 죄다 클라이언트 컴포넌트로 바꿔서 사용하고 있습니다. 그래서 이 작업을 진행하면서도 클라이언트 컴포넌트로 모두 바꾸어 진행한다면 어떨까라고 생각이 들었었는데 과제에서는 최소한의 컴포넌트만 클라이언트 컴포넌트로 바꾸라고 하신 이유가 궁금합니다. 감사합니다!

  • javascript
  • react
  • typescript
  • next.js
  • jwt
댓글 3 좋아요 0 조회수 21

ReactScriptExample 관련 질문

해결됨

React 마스터 클래스: Part 1 - 미션으로 깨우치는 렌더링 본질과 설계

안녕하세요 강의 잘 듣고 있습니다 강의에서 index.html 부분을 설명해주실 때 최신 문법의 js를 사용하고 있어 babel이 jsx를 구버전 js로 컨버팅하는 역할을 수행한다고 설명을 해주셨는데요 node js 로 서버를 호스팅하지 않더라도 로컬 경로의 html이 크롬에서 렌더 되서 보이더라구요 브라우저는 chrome을 사용하고 있는데, 이건 그냥 최신 브라우저들이 jsx를 지원하고 있다고 이해하면 될까요?

  • HTML/CSS
  • javascript
  • react
  • 웹앱
  • frontend
한건우 댓글 1 좋아요 0 조회수 31

소스코드즘 부탁드립니다.

미해결

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

현재 완벽한 프론트엔드 부트캠프와 고농축 백엔드 부트캠프 둘다 수강중입니다. 두 강의 소스코드 전체를 보내주시면 감사하겠습니다. doomco@naver.com

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
수뼈 댓글 1 좋아요 0 조회수 32

안녕하세요 한번 더 문의드립니다.

미해결

카카오 면접관이 알려주는 문서기반의 프레임워크 통신 패턴을 위한 GraphQL

안녕하세요 평소에 hong님 강의를 수강하고 잇는 수강생입니다. 다름이 아니라 기존에 나눠주신 resolvers.js파일에는 새로 적어야 하는 코드에 대한 자료가 없습니다. 제가 못찾은 걸수도 있는데 현재로서는 보이지가 않습니다.

  • javascript
  • typescript
  • graphql
  • msa
  • 국비지원-부트캠프
잉꼬팡이 댓글 4 좋아요 0 조회수 56

81강 실습 자료 없음

해결됨

React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)

'81강. [Pain] 대규모 삭제 작업 시 발생하는 수많은 요청을 하나로 묶기' 에 관하여 실습 자료가 없는데 혹시 의도된 것일까요?

  • javascript
  • react
  • typescript
  • frontend
  • zustand
Yoon Robin 댓글 2 좋아요 0 조회수 49

선생님 공유해주신 핸드북에 링크가 몇개 잘못되었어요

미해결

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

선생님 공유해주신 핸드북에 링크가 몇개 잘못되었어요 8.호이스팅 , 17. spread와 rest 두개가 에러가 나네요 나오지 않습니다. ㅠㅠㅠ

  • javascript
  • rest-api
  • spa
  • dom
ymckh1005 댓글 2 좋아요 0 조회수 46

62강 실습자료가 잘못되었습니다.

해결됨

React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)

62강 실습 자료로는 ' [Solution] Stale-While-Revalidate: 사용자에게는 캐시를, 뒤에서는 갱신을' 에 관한 내용이 나와야하는데, 현재는 '[Pain] 수동으로 관리하던 전역 로딩/에러 상태가 로직을 오염시킬 때' 로 나와있습니다. 62강 실습 자료 교체 부탁드립니다.

  • javascript
  • react
  • typescript
  • frontend
  • zustand
Yoon Robin 댓글 1 좋아요 0 조회수 38

코드 자료는 없는걸까요?

해결됨

카카오 면접관이 알려주는 문서기반의 프레임워크 통신 패턴을 위한 GraphQL

안녕하세요 hong님 강의를 수강하고 있는 수강생입니다. 다름이 아니라 코드 자료들은 따로 안보이는데, 직접 일시정지하고 쳐야하는 건가요? 아니면 제가 못찾은 걸까요?? 강의 일시정지 하고 코드를 치기엔 조금 힘들거 같아서 그렇습니다!

  • javascript
  • typescript
  • graphql
  • msa
  • 국비지원-부트캠프
잉꼬팡이 댓글 3 좋아요 0 조회수 70

강의 목표

해결됨

"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part 2 - 스트림 아키텍처와 하드웨어 통제기

안녕하세요. AI 딸깍의 시대를 1~4 구매하여 수강 중에 있습니다. 강의를 듣다보니, 의문이 들어서 문의드립니다. AI로 딸깍하니, 얕은 수준으로 다루게 되니 원리를 이해하자를 이야기하고자 해당 강의가 있는 것 같습니다. 실무에서는 라이브러리나 프레임워크로 개발을 진행하게 되는 것 같습니다. 원리를 이해하면 개발을 조금 더 잘하게 된다? AI에 명령을 내릴 때 조금 더 잘 내릴 수 있다? 아니면 장애가 터졌을 때 이유를 알 수 있다? 그것도 아니라면 개발 시 장애를 미리 예측하여 대응할 수 있다로 봐야할까요? 보면서 궁금하여 문의드립니다.

  • javascript
  • node.js
  • 컴퓨터-구조
  • frontend
  • backend
윤수혁 (나무펜) 댓글 1 좋아요 0 조회수 45

강의 노트 위주로 학습

해결됨

"AI 딸깍의 시대" 원리로 돌파하는 Node.js와 CS Part1 - V8과 코어 해체기

안녕하세요. 현재 Node.js를 학습한 뒤 NestJS를 공부하고 있습니다. 부족한 CS 지식과 Node.js의 내부 동작 원리를 보완할 수 있을 것 같아 강의를 수강하고 있는데, NestJS 학습과 개인 프로젝트를 병행하다 보니 강의를 모두 시청하는 데 많은 시간을 투자하기가 어려운 상황입니다. 그래서 가능하다면 강의 노트를 중심으로 학습하여 시간을 조금 더 효율적으로 활용하고 싶습니다. 혹시 강의 노트만으로도 핵심 내용을 충분히 습득할 수 있을까요? 아니면 영상 강의를 통해서만 얻을 수 있는 중요한 설명이나 실무적인 인사이트가 많은 편인지 궁금합니다. 만약 강의에서만 얻을 수 있는 내용이 많다면 시간을 조금 더 내서라도 영상을 함께 수강하려고 합니다. 의견 부탁드립니다.

  • javascript
  • node.js
  • 컴퓨터-구조
  • frontend
  • backend
김상호 댓글 1 좋아요 0 조회수 60

쿠키 생성 관련

미해결

타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지

카카오 로그인 후 이메일을 입력하고 몽고DB에 이메일과 refresh token이 저장된 것 까지 확인은 했는데 쿠키가 생성되지 않고 있네요. 강사님 네이버메일로 소스코드링크를 보냈습니다.

  • javascript
  • react
  • typescript
  • next.js
  • jwt
태리바이트 댓글 3 좋아요 0 조회수 75

JWT auth error invalid token

미해결

타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지

이메일 입력 후 contitnue 버튼을 누르면 JWT auth error invalid token 오류가 나네요. 몇시간째 보고 있는데 원인을 찾지 못하겠네요. 전체 소스 코드를 같이 첨부하고 싶은데 할 수 가 없네요. 일단은 EmailInfoForm 소스만 올려 봅니다. backend는 .env 빼고 소스를 특별하게 수정한 부분이 없습니다. 브라우저 application 데이터도 클리어 해보고 했지만 소용이 없네요. 확인 부탁드립니다. "use client"; import {useState} from "react"; import {MailIcon} from "../ui/Icons"; import {validateEmail} from "@/lib/validation"; import clientApi from "@/lib/api/clientApi"; import {useRouter, useSearchParams} from "next/navigation"; export default function EmailInfoForm() { const router = useRouter(); const searchParams = useSearchParams(); const accessToken = searchParams.get("access_token") ?? ""; const [email, setEmail] = useState(""); const [error, setError] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); const handleFormSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => { e.preventDefault(); if (isSubmitting) return; setError(""); //이메일 검증 const validationError = validateEmail(email); if (validationError) { setError(validationError); return; } //확인 대화 상자 const confirmed = window.confirm( "한 번 입력한 이메일은 변경할 수 없습니다. 이 이메일로 저장할까요?", ); if (!confirmed) return; setIsSubmitting(true); try { const res = await clientApi("/auth/update-email", { method: "PATCH", body: JSON.stringify({email: email.trim()}), headers: { Authorization: `Bearer ${accessToken}`, }, }); if (!res.ok) { const errorData = await res.json().catch(() => null); throw new Error( (errorData && errorData.error) || "이메일 업데이트에 실패하였습니다.", ); } router.replace("/"); router.refresh(); } catch (e) { setError( e instanceof Error ? e.message : "이메일 업데이트에 실패하였습니다.", ); } }; return ( <> <form className="flex flex-col gap-5" onSubmit={handleFormSubmit}> <div className="flex flex-col gap-2"> <label htmlFor="email" className="text-sm font-medium text-foreground" > Email Address </label> <div className="relative"> <MailIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" /> <input id="email" type="email" placeholder="Enter your email" className="h-11 w-full rounded-lg border-none bg-secondary pl-10 pr-4 text-sm text-foreground placeholder-muted-foreground outline-none focus:ring-2 focus:ring-primary" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> </div> {error && ( <p className="text-sm font-medium text-destructive">{error}</p> )} <div className="grid grid-cols-2 gap-3"> <button type="button" className="h-11 rounded-lg bg-secondary text-sm font-medium text-secondary-foreground transition-colors hover:opacity-90" > Cancel </button> <button type="submit" className="h-11 rounded-lg bg-primary text-sm font-medium text-primary-foreground transition-colors hover:opacity-90" > Continue </button> </div> </form> </> ); }

  • javascript
  • react
  • typescript
  • next.js
  • jwt
태리바이트 댓글 2 좋아요 0 조회수 72

경력기술서는 어떤 방향이 좋을까요?

미해결

포트폴리오 어나더레벨 | 합격하는 이력서 작성법

현재 경력 기술서는 큰돌님이 말씀하신 것과 비슷하게 하나의 이슈에 대한 문제, 분석, 해결 과정, 결론 및 소감 형태로 나열되어 있습니다. 여기서 문제점이, 이슈가 많을수록, 내용이 많을수록 비대해지더라구요.. 한, 두 줄 내로 줄여도 이슈가 많으니 페이지는 자꾸 늘어나고 있습니다. 경력기술서 내용을 포트폴리오에 넣어 분산시켜야 할지, 굵직한 이슈만 적어야할지, 방향에 대해 고민이 됩니다. 경력기술서의 존재 이유?(면접관이 왜 보는지, 어떤 부분을 중심으로 보는지 등) 같은게 궁금합니다.

  • HTML/CSS
  • javascript
  • python
  • java
  • 포트폴리오
q g 댓글 2 좋아요 0 조회수 63

인기 태그

인프런 TOP Writers

주간 인기글