묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배열에서도 for in 사용이 가능한 것 같습니다!
11:42아래와 같이 for in을 배열에서도 사용이 가능한 것 같습니다!다만 권장되지는 않는 방법이라고 하네요.let arr = [1, 2, 3]; for (let i in arr) { console.log(arr[i]); }권장되는 방법: for...of, 일반 for 루프, forEach() 메서드 등
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
에러 해결 방법
[0] Failed running 'server/index.js' [1] [1] VITE v4.4.4 ready in 271 ms [1] [1] ➜ Local: http://localhost:5173/ [1] ➜ Network: use --host to expose [0] Restarting 'server/index.js' [0] file:///Users/kim-yongmin/test-example-shopping-mall/server/index.js:9 [0] import productsJSON from './response/products.json' assert { type: 'json' }; [0] ^^^^^^ [0] [0] SyntaxError: Unexpected identifier 'assert' [0] at compileSourceTextModule (node:internal/modules/esm/utils:337:16) [0] at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:164:18) [0] at callTranslator (node:internal/modules/esm/loader:439:14) [0] at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:445:30) [0] at async ModuleJob._link (node:internal/modules/esm/module_job:106:19) [0] [0] Node.js v22.5.1 [0] Failed running 'server/index.js' 3.1 강의 시청 후 test-example-shopping-mall 브랜치에서, 작업을 시작할려고, 서버와 프로젝트를 모두 킬려고 하는데 잘 동작하지 않습니다. 이에 대한 해결방법이 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
10강 memo / 11강 context 하이라이트 표시 관련 문의
많은 분들이 memo 기능 관련하여 문의 주신것 같은데 내용이 다 동일하네요.. 영상을 보면 변경 전/후 전부다 하이라이트가 표시가 되어서 리렌더링이 발생하는지 시각적으로 확인이 안됩니다. 문의 남기신 글에는 console.log로 확인을 하라고 하시는데.. 그럴것 같으면 강의 내용 자체가 바껴야 되는거 아닌가요?? 이 부분이랑 context 설명하는 부분도 마찬가지인데요.. context 설명할때 onUpdate, onDelete, onCreate는 useCallback을 사용하여 재생성을 방지하게 이미 설정되어있는데, 왜 memo 기능을 써야하나요?? 이 부분도 설명할때 화면상에 하이라이트가 전과 후 다 발생하는데.. 강사님 혼자 뭐 없어진거 확인하는데..화면상으로 전혀 확인이 안되는데.. 혼자 진행하시니 혼란스럽네요.. 확실하게 딱 표시가 나는게 아니라면 그에 대한 설명이 있어야 하지 않을까 싶습니다.
-
미해결Vue.js 시작하기 - Age of Vue.js
크롬 확장 프로그램 vue devtools 설치했는데
개발자도구에서 vue탭이 안보입니다. 버전이 여러게 있길래 다 시도해봤는데도 안보이네요. 현재는 legacy 버전을 설치한 상태이고, 파일 url액세스 허용도 체크되어 있습니다.여전히 vue탭은 개발자도구에서 안나타나네요. 가이드를 부탁드립니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
10.3강 memo(Header) 리렌더링 질문
안녕하세요.컴포넌트 최적화 하는 부분에서 질문있습니다. 10.3강에서 대략 5분 40초쯤에 Header 컴포넌트에 memo 기능을 사용해서 최적화 한 뒤에, 체크박스를 클릭하면서 헤더 컴포넌트가 리렌더링이 일어났는지에 대해 확인하는 부분이 있습니다. 질문사항은 memo 기능을 통해 최적화를 하던 안하던 개발자 도구에서 Header 컴포넌트가 항상 리렌더링이 일어나는것 같은데 어떻게된걸까요? 헤더부분이 계속 노란색으로 뜨면 리렌더링이 일어났다는걸로 보이는데 강의 영상에서도 다른 컴포넌트와 동일하게 노란색으로 변경됩니다. 강의에서 TodoItem을 커스텀한 부분은 강의대로 적용됐습니다.(이부분은 리렌더링이 발생하지 않습니다.)
-
해결됨처음 만난 리액트(React)
React app 설치 시 문제
위와 같이 노드와 npm 이 을 설치하였습니다. 그리고 나서 PS C:\Users\Kim_Seung_Yeon> npx create-react-app my-app Creating a new React app in C:\Users\Kim_Seung_Yeon\my-app. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: my-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-debug-0.log `npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed크리에이트 하게되면 위와같은 에러가 뜨네요 ... 어떻게 처리해야 할까요 ?
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
수강평 이벤트
수강평 적었는데 쿠폰이 안들어와서 문의 드려요!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
파트 4 오픈 일정 문의
안녕하세요! 1~3 파트 까지 완강했고..다른 강의자보다 범쌤 강의가 저에게 너무 잘 맞아서..범쌤 다음 강의만 기다리고 있습니다 ㅠ ㅅ ㅠ 다음 강의 오픈 일정 예정이 언제쯤 일까요?! ㅠ
-
미해결인터랙티브 웹 개발 제대로 시작하기
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
init() { window.addEventListener('scroll', () => { this.scrollRunHandler(); this.scrollPosition(this.mainElem); }); } scrollRunHandler() { clearTimeout(this.scrollState); if (!this.scrollState) { this.mainElem.classList.add('running'); } this.scrollState = setTimeout(() => { this.scrollState = false; this.mainElem.classList.remove('running'); }, 500); } scrollPosition = (elem) => { if (elem.lastScrollTop > window.scrollY) { // 스크롤을 아래로 this.mainElem.dataset.direction = 'backward'; } else { // 스크롤 위로 this.mainElem.dataset.direction = 'forward'; } elem.lastScrollTop = window.scrollY; } 생성자 함수를 클래스 함수로 변경하면서 this가 character를 가리켜야 되는데 window를 가리키는 문제가 생겨서 변수를 그냥 넣어줘서 작동은 하는데 이렇게 하는게 맞는지 궁금합니다.
-
해결됨[코드캠프] 훈훈한 Javascript
강의 내용 PPT 제공
혹시 이 강의에서 쓴 ppt나 pdf파일은 제공 못받을까요 ..?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
section12에서 존재하지 않는다는 얼럿이 뜹니다.
강의 재밌게 잘 들었습니다!다름아니오라 감정 일기장 실습 중 section12에서 궁금한 것이 생겼습니다생성된 일기를 삭제하면 "일기를 정말 삭제할까요? 다시 복구되지 않아요!" 컨펌 다이얼로그가 나타나는 건 잘됩니다.근데 ok 버튼을 클릭하면 바로 home 페이지로 이동하지 않고"존재하지 않는 일기입니다."라는 얼럿 다이얼로그가 그 다음으로 뜨고나서 ok 버튼을 클릭해야 home 페이지로 이동하게 됩니다.올려주신 정환님의 깃헙 소스 파일을 다운받아 실행시키면 이런 문제는 발생하지 않아서 어디를 고쳐야할지 막막합니다.제 소스 코드는 링크에 달아두었습니다.답변해주셔서 감사합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
context 분리
안녕하세요! 강의 잘 수강하고 있습니다.강사님 코드를 따라하면서 하고 있는데,사진처럼 eslint에서 context를 따로 파일로 분리하여 관리하는 것을 하는 경고 메시지가 떠서 질문 드립니다.그래서 제가 context를 분리하려고 구글링을 해봤는데 잘 되지 않아서 혹시 분리는 어떻게 하면 될지 질문드립니다!
-
미해결TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
싱글톤 강의
싱글통 강의에서 숙제에 대한 답변도 볼 수있는 곳이 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
1.4 강의에서 코드 작성할때 가이드텍스트 뜨는 확장 프로그램 뭔지 알수있을까요?
제목이 곧 내용입니다
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
경로 질문드립니다
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂npm error code ENOENT npm error syscall open npm error path C:\Users\사용자이름\Desktop\animal_album_Main\animal_album-3\package.json npm error errno -4058 npm error enoent ENOENT: no such file or directory, open 'C:\Users\사용자이름\Desktop\animal_album_Main\animal_album-3\package.json' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\사용자이름\AppData\Local\npm-cache\_logs\2024-12-06T08_26_22_967Z-debug-0.log 안녕하세요 질문드립니다몇일동안 npm init 떄문에 질문드립니다 npm 설치시 해당 프로젝트 파일이 c드라이브 안에만 있어야 되는건가요 ?1번 바탕화면에 프로젝트가 있을떄도 실행이 안됩니다2번 c드라이브 -> User -> (사용자이름) -> github-> 해당 폴더 -> 프로젝트 폴더3번 c드라이브 -> 프로젝트 폴더 3번일때만 되고 1,2번일때는 npm init 설치가 안되는데2번도 가능하게 할려면 어떻게 해야하는지 궁금합니다
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
node init 설치가 안됩니다.
3분 40초node -vnpm -v 은 다 되는데 init y 는 안됩니다 ..
-
미해결TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
리스코프 치환원칙은 반,공변성과 같은 원리인가요?
class Parents { // 좁은 파라미터 method(name: string, test: string) { // 넓은 반환 타입 return { key: "" }; } } class Child extends Parents { // 넓은 파라미터 override method(name: string) { // 좁은 반환 타입 return { key: "", name: "" }; } } 안녕하세요,리스코프 치환원칙을 보니 반,공변성의 원칙과 같이매개변수는 반공변성을 리턴은 공변성을 가지는 것 같은데, T<child> -> T<parents> 개념이 되는 타입의 정의 원칙을 리스코프 치환 원칙이라 하는 것일까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
node src/index.js 명령어가 적용이 안되어요?
안녕하세요....강의를 한번 다 듣고 다시 복습을 해보려고 하는데 처음부터 막혀버리네요ㅠㅠnode 를 설치했고, 작업폴더를 만든후 VS CODE 에서 오픈폴더를 했습니다. 터미널창에서 npm init 을 실행해서 엔터를 쳐서 완료했구요,간단하게 문장넣고 확인하는 부분에서부터 나오지를 않아서요 ㅠㅠ아래 질문을 검색해보니 비슷한 질문이 있어서 찾아봤는데요,작업폴더명이 혹시나 한글이면 안되나 싶어서 영문으로도 해봤는데 똑같이 안되구요윈도우계정 이름도 한글이 아니고 영문입니다. 혹시 외장하드에서 하면 안되는걸까요?외장하드에서 한글폴더면이 혹시 안되는건지요....예를들어 외장하드>리액트>1-node 이런식이어서 안되는걸까요?
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
화면에 렌더링은 되는데 코드에서 빨간줄이 떠요
{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], "compilerOptions": { "baseUrl": ".", "paths": { "@components/*": ["src/components/*"] } }, "types": ["node"] }import { Canvas } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; import ShowRoom from "@components/three/ShowRoom"; export default function Home() { return ( <> <Canvas> <axesHelper args={[5]} /> <gridHelper /> <OrbitControls /> <directionalLight position={[3, 3, 3]} /> <ShowRoom /> </Canvas> </> ); }//vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from "path"; // https://vite.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: "@src", replacement: path.resolve(__dirname, "src"), }, { find: "@components", replacement: path.resolve(__dirname, "src/components"), }, ], }, });vite config, tsconfig.json을 바꿨는데 home.tsx에서 import ShowRoom from "@components/three/ShowRoom"; 불러오는데 Cannot find module '@components/three/ShowRoom' or its corresponding type declarations.ts(2307)못찾는다는 에러가 생깁니다뭐를 잘못했는지 모르겠습니다ㅠㅠㅠ
-
미해결처음 만난 리액트(React)
React 18.3.1 버전에서는 ReactDom에서 render할 수 없습니다.
최신버전에서는 ReactDom의 Render가 더 이상 사용되지 않는군요..기존의 ReactDom으로 만든 root를 이용해서 render를 하도록 수업 내용이 변경되어야겠습니다.