inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

roughness이 안 먹혀요 ㅜ

미해결

떠먹는 Three.js

Material 수업강의 중 2:44초에 roughness이 안먹힙니다.. 빛반사가 안되는데 확인 부탁드려요 ㅜ <script async src="https://ga.jspm.io/npm:es-module-shims@2.0.10/dist/es-module-shims.js"></script> <script type="importmap"> { "imports":{ "three" : "https://cdn.jsdelivr.net/npm/three@0.174.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.174.0/examples/jsm/" } } import * as THREE from "three"; const $result = document.querySelector("#result"); // 1. Scene : 화면에서 보여주려는 객체를 담는 공간 const scene = new THREE.Scene(); // scene.add(요소) scene.background = new THREE.Color(0xffe287); // 2. Camera : 신을 바라볼 시점을 결정 const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(2, 2, 2); camera.lookAt(0, 0, 0); // 3. Renderer : Scene+Camera, 화면을 그려주는 역할 const renderer = new THREE.WebGLRenderer({ canvas: $result, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); // console.log(renderer); // document.body.appendChild(renderer.domElement) const light = new THREE.DirectionalLight(0xffffff); light.position.set(2, 4, 3); scene.add(light); const geometry = new THREE.BoxGeometry(1, 1, 1) const basic = new THREE.MeshBasicMaterial({ color: 0x2e6ff2, // wireframe: true, transparent: true, opacity: 0.5 }); // 가장 일반적으로 사용 됨. const standard = new THREE.MeshStandardMaterial({ color: 0xffaaaa, roughness: 0.2, }); const mesh = new THREE.Mesh(geometry, standard); scene.add(mesh); function animate() { // box.rotation.y += 0.01; // box.rotation.x += 0.01; // console.log(box.rotation.y); renderer.render(scene, camera); requestAnimationFrame(animate); } animate(); // 반응형을 위한 함수 window.addEventListener("resize", () => { // 1. 카메라의 종횡비 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); //카메라 업데이트 // 2. renderer의 크기 renderer.setSize(window.innerWidth, window.innerHeight); });

  • HTML/CSS
  • javascript
  • three.js
댓글 1 좋아요 0 조회수 162

member.self-ex 코드 업로드요청

해결됨

[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]

깃허브 url에 member.self-ex 코드가 없습니다. 확인 후 업로드 부탁드려요 그리고, useEffect 제대로 써보기: 반복 작업 제거와 효과적인 클린업 3:43 이부분부터 몇초간 화면이 안보입니다..

  • javascript
  • react
  • jquery
  • typescript
  • es6
  • vanilla-javascript
희원 댓글 2 좋아요 0 조회수 148

Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

공익을 위해 첨부합니다... Windows의 경우 Mac과 다른 방식으로 경로가 설정되는 탓인지 상품 업로드 후 홈화면에서 상품이미지가 엑박으로 보이는 오류가 발생합니다. 그동안 질문&답변 게시판에 올라온 모든 질문 및 답변을 참고해 해결을 해보고자 하였는데요, 그 어느 답변을 참고해도 해결이 되지 않아 눈물을 머금고 10분짜리 강의에 몇시간동안 매달려있었습니다. 그렇게 알게된 방법은... 저의 경우 (1) 상품 업로드 화면에서 사진을 첨부한 후 개발자 도구의 Network에서 첨부한 사진의 링크를 보면 http://localhost:8080/upload/(상품이름).jpg 이런 식으로 뜹니다. (2) 업로드 버튼을 누른 후 홈 화면으로 이동 (3) 개발자 도구의 Network에서 새롭게 업로드된 사진의 링크를 보면 http://localhost:3000/upload/(상품이름).jpg 이런 식으로 뜹니다. 이를 해결하기 위해, grab-market-web 폴더 (사용자에 따라 폴더 이름은 다를 수 있음) → src → main → index.js에서 product-card 의 product-img 부분을 확인합니다. <div> <img className="product-img" src={`${API_URL}/${product.imageUrl}`} ></img> </div> src 링크를 다음과 같이 변경합니다. 그럼 상품 업로드 화면에서의 이미지와 홈화면에서의 이미지가 localhost:8080로 동일해지기 때문에 상품 사진이 정상적으로 보입니다. 물론 이렇게 코드를 수정하고 나면 기존에 저장해놨던 상품들의 이미지에 엑박이 뜹니다. (images/products/__ 이런 식으로 폴더 내 이미지와 연결해둔 링크들이 http://localhost:8080/images/products/__ 처럼 변경되니 엑박이 뜨는 것으로 추정됩니다.) 어차피 이제 사진을 서버에 직접 업로드하는 방법으로 진행될 예정이니 그냥 기존의 상품들은 삭제하시면 될 것 같습니다. (DB Browser → 데이터 탐색 → 기존 상품 레코드 선택 → 현재 레코드 삭제하기 → 변경사항 저장하기 이용하면 삭제 가능합니다.) 저와 동일한 이유로 엑박 뜨는게 아니라면... 저도 모르겠습니다. 방법을 찾으시면 공유해주세요. 파이팅! +) 상품 상세페이지를 들어가면 다시 엑박이 뜹니다. <div id="image-box"> <img src={`${API_URL}/${product.imageUrl}`} /> {console.log(product.imageUrl)} </div> 이때는 product 폴더의 index.js에 들어가여 image-box 부분을 다음과 같이 변경해주세요. 원리는 위와 동일합니다. 그러면 상세페이지에서도 정상적으로 작동합니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
sugi0jubak 댓글 1 좋아요 0 조회수 235

개인 깃허브에 코드 업로드 관련

해결됨

이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의

안녕하세요, 우선 좋은 강의 업로드해주셔서 감사합니다. 다름이 아니라 강의를 보면서 공부하며 친 코드들을 깃허브나 블로그에 개인 공부 기록용으로 공개 업로드해도 될지 질문드리고 싶습니다.

  • HTML/CSS
  • javascript
  • jsp
  • spring
  • spring-boot
  • spring-security
abc123 댓글 2 좋아요 0 조회수 397

2-14.else,else if,switch 관련 질문입니다.

미해결

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

안녕하세요 선생님 자바스크립트 처음 입문한 학생인데 선생님 강좌로 많은 도움을 받고 있습니다. 감사합니다. 오늘 2-14.else,else if,switch 를 듣던 중 선생님께서 알려주신 예제를 실행시키고 switch 문을 변형하여 입력을 하였는데 예제는 무사히 실행되었지만 변형한 switch문은 콘솔도 나오지 않고 오류도 나오지 않아 어떤 부분으로 인한 문제인지 전혀 몰라 질문 남깁니다...ㅠ 뭐가 문제였는지 알 수 있을까요? .

  • javascript
가연 댓글 2 좋아요 0 조회수 154

주석처리한 buttons가 작동하는 이유

미해결

따라하며 배우는 자바스크립트 A-Z

8분즈음에 buttons 선언한 것을 주석처리하고 buttonList만 남겼는데 왜 buttons.addEventListener가 작동하는지 궁금해요

  • javascript
hotsunny 댓글 1 좋아요 0 조회수 127

async&await에서 reject시 처리 방법이 궁금합니다.

해결됨

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

채찍피티에게 물어보니 try/catch로 처리하라고 하는데 이게 최선일까요..?

  • javascript
  • react
  • node.js
박성민 댓글 2 좋아요 0 조회수 219

강의 내용을 어느 정도로 파악하고 있는 것이 좋을까요?

해결됨

백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

안녕하세요. 백엔드 개발자를 목표로 공부하면서, 최소한의 프론트엔드 지식도 익히고 싶어 강의를 수강 중인 학생입니다:) 이번 Ajax 강의를 듣고 처음에는 잘 이해되지 않아 여러 번 반복해서 학습했습니다. 그 결과 왜 직렬화와 역직렬화를 하는지, 그리고 Ajax가 전체적으로 어떤 원리로 동작하는지에 대한 감은 조금 잡을 수 있었습니다. 하지만 코드를 보면 해석은 가능하지만, 직접 작성해보라고 하면 아직 어려운 상태입니다. 강의의 예제 정도는 직접 구현할 수 있을 정도로 습득하는 것이 가장 좋겠지만, 익히는 데 시간이 꽤 걸릴 것 같아 동작 방식만 이해하고 넘어가도 괜찮을지 고민이 됩니다.

  • HTML/CSS
  • javascript
  • bootstrap
형씌 댓글 2 좋아요 1 조회수 157

React 환경에서 클래스형 디자인 패턴 활용에 관한 질문

미해결

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

안녕하세요, React 환경에서 다음 강의를 보며 예제연습중인 수강생입니다. 먼저, 함수형 컴포넌트가 주류가 된 현대 React 생태계에서도 클래스형 디자인 패턴이 많이 활용되는지 궁금합니다. 특히 싱글톤, 팩토리, 빌더와 같은 클래스 기반 디자인 패턴들이 여전히 실무에서 많이 사용되고 있는지 알고 싶습니다. 또한 이러한 클래스 기반의 디자인 패턴 사용 시, React의 재렌더링 측면에서 성능 이슈가 발생하지는 않는지, 실제 개발 경험에서 어떤 장단점이 있는지 궁금합니다.

  • javascript
  • typescript
  • 객체지향
  • 디자인-패턴
  • canvas
김태건 댓글 2 좋아요 0 조회수 229

타입스크립트/next.js 추가학습 관련해서 문의 드립니다

해결됨

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

최근 취업시장이 리액트와 스프링부트나 넥스트같은 백엔드 기술을 모두 할줄아는 사람을 뽑는 추세가 강해져 저도 리액트 관련기술을 익히고자 강의를 신청했고 현재 수강중입니다. 백엔드쪽은 스프링부트로 확고히 가져가서 만약 이후에 둘을 연동할때 DB의 데이터를 가져오거나 서버와 연동해서 데이터를 가져오거나 통신할때 next.js 기술이 필수인지 아닌지 궁금해서 질문 남깁니다. 필수가 아니라면 도움이 되는 지 궁금합니다. 제가 강사님 next,js 소개글을 봤는데 node.js가 필요기술에 있어서 node.js만을 위한 ssr기술인지 궁금합니다.

  • javascript
  • react
  • node.js
이동건 댓글 2 좋아요 0 조회수 135

강의 3-1 인증 스크린 마크업중에 ..

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

안드로이드 버전 14 해당 강의 자료를 받아서 실행해봤는데, 로그인 텍스트가 왼쪽으로 쏠려있고 홈화면 버튼이 동작하지 않습니다. 왜이러는걸까요 ???

  • javascript
  • react
  • react-native
  • typescript
  • react-query
김지환 댓글 2 좋아요 0 조회수 181

사용 기기 관련해서 질문 드립니다.

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

eas와 notification 설정 후에는 로그인 시에 android emulator 상에서 코딩해주신 대로 '실제기기를 사용해주세요' 문구가 나옵니다. ios 는 개발자모드 설정을 구매해야 한다고 해서 기기는 안드로이드로 진행하려고 하는데 android 기기가 따로 없고 emulator 로는 실행이 안되는 걸까요? expopushToken만 보내고 로그인이 되지는 않습니다.

  • javascript
  • react
  • react-native
  • typescript
  • react-query
host0806 댓글 3 좋아요 0 조회수 197

Editor 컴포넌트는 리렌더링되는 것은 맞나요?

해결됨

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

강의내용에 보면 todos가 변경될 때 Editor는 변경이 않되야하는 것 같은데 리렌터링이 됩니다. 소스는 같은데 머가문제인지 알 수있을까요? <Editor.jsx> const Editor = () => { const { onCreate } = useContext(TodoDispatchContext); const [content, setContent] = useState(""); const contentRef = useRef(); const onChangeInput = (e) => { setContent(e.target.value); }; const onKeyDown = (e) => { if (e.keyCode === 13) { onSubmit(); } }; const onSubmit = () => { if (content === "") { contentRef.current.focus(); return; } onCreate(content); setContent(""); }; return ( <div className="Editor"> <input ref={contentRef} value={content} onKeyDown={onKeyDown} onChange={onChangeInput} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default Editor; <App.jsx> import "./App.css"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; import { useState, useRef, useReducer, useMemo, useCallback, createContext, } from "react"; const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Date().toLocaleDateString(), }, { id: 1, isDone: false, content: "빨래하기기", date: new Date().toLocaleDateString(), }, { id: 2, isDone: false, content: "청소하기", date: new Date().toLocaleDateString(), }, ]; const reducer = (state, action) => { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((todo) => todo.id === action.data.id ? { ...todo, isDone: !todo.isDone } : todo ); case "DELETE": return state.filter((todo) => todo.id !== action.data.id); default: return state; } }; export const TodoStateContext = createContext(); export const TodoDispatchContext = createContext(); function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", data: { id: targetId } }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", data: { id: targetId } }); }, []); const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); return ( <div className="App"> <Header /> <TodoStateContext.Provider value={{ todos }}> <TodoDispatchContext.Provider value={memoizedDispatch}> <Editor /> <List /> </TodoDispatchContext.Provider> </TodoStateContext.Provider> </div> ); } export default App;

  • javascript
  • react
  • node.js
Park Ju Yeong 댓글 2 좋아요 0 조회수 195

소스코드관련해서

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

매강좌마다 깃허브 링크가있던데요 매강마다 소스코드를 일일히 다운받아야하나요??? 아니면 한번에 다운받아도되는걸 제가 착각하고있는건가요??? 강의가 진행되어질수록 그만큼 코드변경된흐름을 깃허브 트리로 펼쳐놓으신것같은데.... 하나만받아도되는건지 매강마다 깃허브가서 소스코드를 매강마다 다운받아야하는건지 궁금합니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
hdr.ecssh 댓글 1 좋아요 0 조회수 139

[5-9]이미지 기능구현하기(2) 이미지를 추가하면 너무 느리게 뜹니다.

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

안녕하세요! 선생님 글쓰기 누르고, 제목, 내용 밑에 카메라 모양 눌러서 사진을 추가하면 사진이 매우 느리게 뜹니다... 혹시 이건 왜 그런건가요??

  • javascript
  • react
  • react-native
  • typescript
  • react-query
ksw 댓글 2 좋아요 0 조회수 159

vercel 빌드 후 에러가 나옵니다.

해결됨

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

vercel 빌드를 했는데, 이렇게 에러 메시지가 나오는데 뭐가 문제인지 찾지 못했습니다. vercel 페이지에서도 빌드로그를 보면 아래와같이 나오는데요. npm run build 했을때 정상적으로 노출되고, 오류 메시지가 없어서 정상배포될 줄알았는데 안되네요.ㅠ x Build failed in 181ms 18:15:46.529 error during build: 18:15:46.530 Could not resolve "./pages/NotFound" from "src/App.jsx" 18:15:46.530 file: /vercel/path0/src/App.jsx 18:15:46.530 at getRollupError (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:397:41) 18:15:46.530 at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:393:42) 18:15:46.530 at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21111:24) 18:15:46.530 at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21071:26 18:15:46.544 Error: Command "npm run build" exited with 1

  • javascript
  • react
  • node.js
Babeloper 댓글 2 좋아요 1 조회수 429

섹션 7 - 7 프로젝트 적용하기

해결됨

웹 프론트엔드를 위한 자바스크립트 첫걸음

안녕하세요! 마지막 프로젝트 적용만 남았는데 manifest.json 파일 만들고 저렇게 작성했는데 확장 프로그램 로드를 못하는 상황입니다..!

  • javascript
  • dom
정우 댓글 2 좋아요 1 조회수 157

섹션7 - 7 프로젝트 적용하기

해결됨

웹 프론트엔드를 위한 자바스크립트 첫걸음

🚨 질문 작성법 및 안내사항 질문 작성법 - 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문) - 질문은 최대한 구체적으로 작성해주세요. - 비슷한 질문이 올라와있는지 확인해주세요. - 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요. body { margin: 0 auto; width: 100%; font-family: 'Hi Melody'; background-image: url("https://source.unsplash.com/user/hanjw3288/likes"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; /* color: white; */ /* overflow: hidden; */ } 강사님 안녕하세요! 마지막 프로젝트 적용하기 전에 background-image 적용할때 unsplash가 적용이 안되는데 어떻게 해결해야 할까요..? 저 url 타고 들어가면 404페이지가 뜹니다..

  • javascript
  • dom
정우 댓글 1 좋아요 0 조회수 122

12.18 새 일기 쓰기 페이지 제목 수정 관련

해결됨

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

index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Emotion Diary</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> New.jsx import Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useNavigate } from "react-router-dom"; import { useContext, useEffect } from "react"; import {DiaryDispatchContext} from "../App"; import usePageTitle from "../hooks/usePageTitle"; const New=()=>{ const{onCreate}=useContext(DiaryDispatchContext); const nav=useNavigate(); usePageTitle(`${useParams.id}번 일기 수정`); const onSubmit=(input)=>{ onCreate( input.createdDate.getTime(), input.emotionId, input.content ); nav('/',{replace: true}); }; return ( <div> <Header title={"write new diary"} leftChild={<Button onClick={()=>nav(-1)} text={"< back"}/>} /> <Editor onSubmit={onSubmit}/> </div> ); }; export default New; usePageTitle.jsx import { useEffect } from "react"; const usePageTitle=(title)=>{ useEffect(()=>{ const $title=document.getElementByTagName("title")[0]; $title.innerText=title; },[title]); }; export default usePageTitle; 이전 과정까지는 문제없었는데 12.18에 있는 새일기 쓰기 페이지에 들어왔을 때 페이지에 아무것도 뜨지 않는 문제가 발생하는데 어떤게 문제일까요

  • javascript
  • react
  • node.js
진성원 댓글 2 좋아요 0 조회수 118

실습 코드 있을까요?

미해결

처음 만난 리액트(React)

안녕하세요 감사하게도 강의 잘 듣고있습니다. 혹시 실습한 코드를 받을 수 있는 git 있을까요? 개발환경 버전이 달라서 그런지 챕터6하는데 원치않게 동작하는게 있어서요

  • HTML/CSS
  • javascript
  • react
호호하하 댓글 2 좋아요 1 조회수 253

인기 태그

인프런 TOP Writers

주간 인기글