inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

sublime text 설치 불가

미해결

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

하라는 데로 다 해도 그냥 안 깔리네요. 응용 프로그램 크롬으로 넘어가는 과정도 전혀 실행이 안되고요. 추측되는 요인 있으신 분 없으실까요?

  • HTML/CSS
  • javascript
문정언 댓글 1 좋아요 0 조회수 216

맥북을 사용중인데, 터미널이 다릅니다,,,,!

해결됨

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

강의에서는 command prompt를 사용하셨는데, 맥북에서는 zsh와 bash 중 어떤 것을 사용해야 할까요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
어린 송어 댓글 2 좋아요 0 조회수 168

Chapter6 질문 드립니다

미해결

처음 만난 리액트(React)

학습을 잘 따라가는 중 아무 오류나 에러는 없는데 콘솔에는 에러가 나네요 ㅜㅜ 분명 코드도 똑같은데 이유를 잘 모르겠어 코드와 오류 사진 캡처 드립니다!

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

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 조회수 145

선생님 학습 방법 질문이 있습니다.

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

파이썬 기초 문법 학습 후 현재 강의를 듣는 중인데 2번 세션 맛보기 반복 숙달 어느정도까지 해야 다음 챕터로 넘어가는 것이 맞나요? 강의 이름은 맛보기인데 중요한 것 들 같아서 반복 숙달을 어느정도 까지 하는게 좋을 지 궁금합니다.

  • react
  • python
  • django
  • web-api
  • htmx
lkh5040 댓글 2 좋아요 0 조회수 186

상태관리

해결됨

한 입 크기로 잘라먹는 Next.js

next는 자동적으로 캐시 저장기능이 있고 next에서도 DB 데이터가 필요한 페이지에서 직접 불러와서 사용하는 것을 권장한다 라고 말씀해주셨는데요 그러면 next는 보통 zustand, recoli, redux와 같은 상태관리 라이브러리를 사용하지 않는 것을 추천하시나요? 아니면 사용하는 것을 추천하시나요??

  • react
  • typescript
  • next.js
Full Stack 개발자 댓글 2 좋아요 0 조회수 91

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

해결됨

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

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

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

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 조회수 225

useEffect의 의존성 배열에 fetchNextPage를 넣는 이유가 궁금합니다

미해결

Next + React Query로 SNS 서비스 만들기

useEffect(() => { if (inView) { hasNextPage &&fetchNextPage(); } }, [inView, hasNextPage, fetchNextPage]); 이렇게 useEffect를 작성하셨는데 fetchNextPage를 useEffect의 의존성배열에 넣는 이유가 궁금합니다

  • react
  • next.js
  • react-query
  • next-auth
  • msw
i1004gy 댓글 2 좋아요 0 조회수 147

호스팅 업체를 결국 AWS 로 정해야 하는 이유가 궁금합니다.

해결됨

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

강의를 잘 보고 있습니다. 클라우드 플레어가 상당한 장점이 있는 호스팅 업체로 보이는데요, 그럼에도 불구하고 실무에서는 결국 AWS를 선택하는 이유를 아래의 3가지로 정리하면 될까요? 커스터마이징 제한 느린 성능 벤더 종속성 이 외에 클라우드플레어에서 AWS로 이전할 수 밖에 없었던 에피소드가 있으신지 여쭤보고 싶습니다.

  • react
  • aws
  • Google-Analytics
  • cloudflare
  • adsense
  • 수익화
서재원 Seo 댓글 2 좋아요 0 조회수 306

VSCode에 node 설치 mkdir, ls 결과 확인

해결됨

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

Visual Studid Code powershel 터미널l에서 node 설치 확인을 하고 mkdir과 ls를 각각 입력하면 위와 같이 나오는데 맞는 것인지요? 강의 화면과는 다른 것 같아서요.

  • react
  • aws
  • Google-Analytics
  • cloudflare
  • adsense
  • 수익화
안순권 댓글 1 좋아요 0 조회수 173

Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.

미해결

웹 게임을 만들며 배우는 React

한시간 헤매다 다행히 해결책 찾았습니다. 기존 강좌와 @pmmmwh/react-refresh-webpack-plugin 해당 플러그인 버전 차이 때문에 발생한 에러 같습니다. webpack.config.js 파일을 아래와 같이 전체적으로 수정해주세요. const path = require('path'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const webpack = require('webpack'); const isDevelopment = process.env.NODE_ENV !== 'production'; module.exports = { name: 'word-relay-dev', mode: 'development', devtool: 'eval', resolve: { extensions: ['.js', '.jsx'], }, entry: { app: './client', }, // 입력 mode: isDevelopment ? 'development' : 'production', module: { rules: [{ test: /\.jsx?$/, exclude: /node_modules/, use: [ { loader: require.resolve('babel-loader'), options: { presets: [ ['@babel/preset-env', { targets: { browsers: ['> 5% in KR'], }, debug: true, }], '@babel/preset-react', ], plugins: [ isDevelopment && require.resolve('@babel/plugin-proposal-class-properties'), isDevelopment && require.resolve('react-refresh/babel'), ].filter(Boolean), }, }, ], }], }, plugins: [ isDevelopment && new webpack.HotModuleReplacementPlugin(), isDevelopment && new ReactRefreshWebpackPlugin(), ].filter(Boolean), output: { path: path.join(__dirname, 'dist'), filename: 'app.js', publicPath: '/dist/', }, // 출력 devServer: { // webpack 4버전 이상(5버전 포함)도 아래처럼 수정 필요 devMiddleware: { publicPath: '/dist' }, static: { directory: path.resolve(__dirname) }, hot: true, }, }; 공식문서는 아래 링크를 참고하세요. https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin/v/0.5.0-rc.4

  • react
해도디 댓글 1 좋아요 0 조회수 184

page를 클라이언트 컴포넌트로 작성해도 rsc_payload가 생성되는 이유는 무엇인가요??

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요! 덕분에 nextjs에 대해 깊에 알아가고 있습니다. 제목처럼 page 컴포넌트에 'use client'를 명시하고 빌드 해도 해당 페이지에 대한 rsc_payload가 생성되어서 .next 빌드 파일을 살펴 보았습니다. 페이지를 클라이언트 컴포넌트로 작성하던 서버 컴포넌트로 작성하던 .next 빌드 파일 server, static/chunk/app 폴더에 모두 page.js 파일이 생성되는 것을 확인했습니다. 1. server 폴더에 있는 page.js는 해당 페이지에 필요한 번들 파일에 대한 내용인 거고, static 폴더에 있는 page.js는 해당 페이지에 그려질 내용에 대한 파일인 건가요?? 2. 그래서 page컴포넌트를 클라이언트 컴포넌트로 만들어도 페이지에서 사용할 번들 파일의 주소를 알아야 하기 때문에 rsc_payload를 만들어서 내려주는 건가요??

  • react
  • typescript
  • next.js
dl_audgh 댓글 2 좋아요 0 조회수 108

레이아웃은 서버 데이터에 변경사항이 있을 때는 렌더링을 해주나요?

미해결

Next + React Query로 SNS 서비스 만들기

레이아웃은 네비게이션을 해도 상태를 유지하고 렌더링을 하지 않는다라고 이해했습니다. 그런데, 오른쪽 레이아웃을 만들면서 패러렐 라우트라던지 template를 쓰지 않고 (비록 컴포넌트를 분리하긴 했으나) 서버에서 데이터를 뿌려주는 미래를 상상하고 쭉 코드를 짜고 계시는 모습을 보면서, 레이아웃이 서버 데이터는 변경사항을 화면에 반영해주는 것처럼 이해가 되었습니다. 뒷부분은 수강하지 않았습니다. 제가 잘못 이해 중인가요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
y_rzzz 댓글 2 좋아요 0 조회수 117

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

해결됨

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

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

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

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

미해결

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

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

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

padding 과 box-sizing 질문

해결됨

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

14분 부터 css 전체선택자 box-sizing 이 border-box 라서 padding 을 하게되면 a 태그의 크기가 줄어들어야 하는 것 아닌가요? 왜 padding을 통해 크기를 키운다고 말씀하시나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
김트랙 댓글 2 좋아요 0 조회수 126

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

미해결

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

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

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

해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"

미해결

웹 게임을 만들며 배우는 React

package.json 파일 보시면 리액트 버전이 나오실텐데 저는 19 버전이라 위같은 에러가 뜨네요. 따라서, 기존 코드를 (리액트 17버전 이하에서 정상작동).. const ReactDom = require('react-dom'); ReactDom.render(<WordRelay />, document.querySelector('#root')); 아래처럼 변경해주셔야 합니다. import { createRoot } from 'react-dom/client'; createRoot(document.querySelector('#root')).render(<WordRelay />);

  • react
해도디 댓글 1 좋아요 1 조회수 224

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

해결됨

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

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

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

인기 태그

인프런 TOP Writers

주간 인기글