묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
tailwindcss 4.1 docs에서는 container가 목록에서 안보이네요
docs를 보니 4.1에서는 container가 목록에는 안보이는데, 앞으로 없어지는건가요?코드상 동작은 하는데... 왜 최신 버전 docs에서 빠진건지 궁금하네요. 버전업 되면서 변경된거만 보이는건가요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
창조절 안됨
https://github.com/Unsok1234/frontend npm run dev로 실행시키고 인터페이스를 중간으로 옮겼는데강의에는 왼쪽으로 돼있짢아요 이걸 제가 수동으로 옮겨도 되나요?
-
미해결copilot과 함께 파이썬 찍어먹기 (크롤링 , 데이터시각화 )
python 실행관련 문의
안녕하세요. python에서 강의하신대로 코드 입력후 터미널에 python 파일이름.py를 실행하면 아무런 반응이 없이 PS D:\Dev\PYTHON> PS D:\Dev\PYTHON> 글만 다시 뜹니다. (에러코드도 없음) 해결방법을 몰라 진행이 안되는데 코파일럿 통해 질의해도 환경이나, 코드는 정상이라고 합니다. 해결방법을 알려주시면 감사하겠습니다...
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
8.5) Read = 투두리스트 렌더링하기
안녕하세요.투두리스트 렌더링하기에서 TodoItem에 key를 넣지 않았을때 웹브라우저에서 에러가 발생하고, 강의 화면에 vscode에서도 보면 해당 소스코드 위치에 Missing "key" prop for element in... 이라고 나오는데, 제 경우에는 소스코드 위치에 Missing "key" prop for element in... 이라는 내용이 나오지 않습니다. Eslint 플러그인도 설치했고,아래와 같이 설정 했는데, 무슨 차이 때문에 이런 현상이 생기는 걸까요? rules: { "no-unused-vars": "off", "react/prop-types": "off", },그래서, 검색을 좀 해보았고 rules에 아래와 같이 내용을 추가해 봤는데도, Missing "key" prop for element in... 이 내용이 나오지 않습니다. rules: { "no-unused-vars": "off", "react/prop-types": "off", "react/jsx-key": "true", },참고로 저의 package.json은 아래와 같습니다.{ "name": "section08", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^19.1.1", "react-dom": "^19.1.1" }, "devDependencies": { "@eslint/js": "^9.33.0", "@types/react": "^19.1.10", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^5.0.0", "eslint": "^9.33.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", "vite": "^7.1.2" } }
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
live server가 안 떠요..
저 이 화면에서 open with live server 를 눌렀는데이 화면이 떠요.. 저 그러고 혹시 강의 마지막 부분만 보고도 앱을 만들 수 있나요?
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
깃 권한 신청
깃 권한 신청했는데 처리가 안된거 같습니다
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.
좋은 강의 잘 듣고 있습니다.다름이아니라, 이전 강의들에 에러들을 다 해결해서 80강을 듣기 전 까지 상품 상세 페이지 구현 후,상품 상세 페이지 보기까지 에러 없이 잘 되던 것이80강을 듣고 코드를 작성 후 부터 '상품 상세 페이지 ' 가 뜨지를 않고 있습니다.아래 사진 첨부 합니다. 사진 1. 아래 사진으로 DB Browser for SQLITE에서 이미지를 작성 해 준 뒤 일단 이미지는 잘 받아 옵니다. 참고로, 사진 1 은 VS CODE 폴더(GRAB-MARKET-SERVER)에서 server.js에 소스 order : [['createdAt','DESC']], 입력을 일단 개인적인 이유로 빼었기 떄문에, 판매되는 상품에 순서가바뀌어 있습니다.order : [['createdAt','DESC']] 을 넣게 된다면 상품 순서는 축구공,농구공,키보드,키보드로 화면에 나타나는데요, 아래 사진과 같아요.제일 먼저 축구공을 누르게 되면 localhost:3000/products/4라고 뜨기에요, 원래 제대로 되려면,축구공을 누르면 localhost:3000/products/1로 되어야 하는거 아닌가요? 그리고 위 첨부한 사진 보면왼쪽과 같이 에러가 발생하는데요, 어떻게 해야 제대로 작동 할까요?그리고 잘못 소스코드를 입력하고 실행하다보니 키보드가 2개 생성 되었습니다만, 이것을 하나만 남기고 싶은데어떻게 해야 하는지요? -->DB Browser for SQLite에서 삭제하는 방법이 있나요?위에 사진 1에서 가장 마지막인 4번째의 축구공을 누르면, 위와 그리고 아래와 같은 에러가 발생하며 상품 정보 상세 페이지.즉 상품 정보를 받고 있습니다... 만 그대로 멈춰있고 이전 강의 챕터에서 만든 것(상품상세페이지) 불러올 수 없게 되어 질문을 남깁니다. 즉 상품 정보 상세 페이지가 잘 만들어져서 그대로 에러 없이 잘 해왔는데, 에러가 나서 여쭈어봅니다.-추가 질문 : 상품 정보를 받고 있습니다... 페이지 경우는 POSTMAN 가짜 서버(=mock서버)에서랑 관련이 깊은 건가요? POSTMAN(=mock서버)에서 그랩님의 강의를 따라올때, 다른점들이 몇가지 있었는데요(몇가지 다른점은 에러가 있었습니다.), 그래서 위 에러가 발생하는 건가요? 다른점이 발생한 경우라면 포스트맨 에러 스샷을 추가로 올리겠습니다. 그럼 봐주실 수 있나요?아니라면 POSTMAN(=mock서버)과 관련 없이 우리는 Node 서버를 구축 했기에,Mock서버인 POSTMAN과 전혀 상관이 없는 건가요?[상품 상세 페이지] 불러오지 못하는 것은 만일 Node 서버의 문제이지, Postman과 상관 없다면,node 서버측에서는 무엇을 고쳐주거나 어떤 소스를 작성해줘야 에러가 해결될까요? 더불어서 79강 강의 2분 56초 부터 3분 32초 보면, POSTMAN 테스트를 하는 부분이 나오는데, 여기서 아래 사진을 보면[왼쪽 메뉴 get product] Body 부분에서 그랩 강사님 화면과 다르게 뜨는데, 이것은 왜 그런건가요?어떻게 해야 http://localhost:8080/products/1 , http://localhost:8080/products/2 , http://localhost:8080/products/3 을 제대로 작동하게 할 수 있나요? 마지막으로 [참고 사진]으로 POSTMAN의 잘 작동하는 [get products]사진 첨부해 봅니다. 어떻게 해야 이 모든 에러를 해결 할 수 있을지에 대해 자세한 답변 부탁드립니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
init 함수 앞에 await
App.js의 App 생성자 함수 안에서 호출하는 init()은 비동기 함수인데 앞에 await을 붙이지 않아도 되나요?
-
해결됨프론트엔드 마스터클래스
Variable Object 질문
안녕하세요, 좋은 강의 감사합니다.실행 컨텍스트 부분에서 궁금한 점이 있어서 질문드립니다. 강의에서 Variable Object를 설명해주셨는데, 제가 개인적으로 찾아본 자료들에서는 ES2015부터 실행 컨텍스트가 Lexical Environment, Variable Environment, this binding으로 구성된다고 나와 있더라고요.Variable Object는 그 이전 스펙에서 사용되던 용어인 것 같은데, 혹시 강의에서 이 개념을 선택해서 설명하신 특별한 교육적 의도가 있으셨을까요?제가 아직 깊이 이해하지 못해서 그런데, 두 방식 중 어떤 것이 JavaScript 동작 원리를 학습하는 데 더 도움이 되는지, 또는 어떤 차이점들이 있는지 알려주시면 감사하겠습니다.
-
미해결Do it! Node.js 프로그래밍 입문
몽고db security 설정
15강 몽고DB설정하기 영상의 6분경security 밑에 quickstart 메뉴가 안보이는데아이디와 비밀번호 설정을 어떻게 해야하나요?
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
e2e 테스트 CI , 서버비용
안녕하세요 e2e 테스트는 비용이 많이 들어서 어떻게 관리를 하는지 궁금합니다. - 파이프라인에서 매번 CI 에서 돌리기에는 서버나, 시간이 개발 생산성을 잡아 먹을 것 같은데요. 점점 e2e 테스트가 쌓여 나갈떄 어떤 전략을 취할 수 있는지 궁금해요. GPT로 리서치하니까 보통 2가지를 병행해서 스케줄러 + 온디맨드 실행 같이 관리 한다고 하는데, 실제 현업에서는 어떻게 활용하고 계신지, 제가 리서치한 내용 말고 더 효율적이거나, 추천할만한 전략 , 이외의 고려사항 소개해주실 수 있으면 알려주시면 감사하겠습니다.스케줄 실행 (Nightly/주말 풀스윗)EventBridge → ECS Fargate RunTask(Spot 가능) → Playwright 러너대상: 스테이징(or PR 프리뷰 URL)b. 산출물: 트레이스/비디오/리포트 S3 업로드, Slack에 요약/링크온디맨드 실행 (PR 코멘트/수동 트리거)Bitbucket Pipeline에서 aws ecs run-task 호출(또는 ChatOps 슬래시 커맨드)태그/폴더/샤드 인자 넘김 → 필요한 부분만
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
hover pulse animation 관련해서 질문있습니다!
mouseenter 마우스 이벤트를 할때 pulse.start(); 대신 pulse.restart();로 처음시작하게 하는것처럼 실습 때 mouseleave 마우스가 벗어날 때 자연스럽게 하려면pulse.pause();gsap.to('button',{scale:0.8,duration:0.4})두개를 사용해서 어색하지 않게 구현했는데요, pulse.pause();gsap.to('button',{scale:0.8,duration:0.4})대신 pulse.reverse();를 사용해도 동일하게 어색하지 않게 줄 수있는 효과인건가요? 차이점은 없는건지 궁금합니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
메일 확인부탁드립니다
권한 요청드렸습니다.확인부탁드립니다!
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
CodeSandbox Vanilla 질문있습니다
안녕하세요. CodeSandbox에 Vanilla가 보이질 않습니다. 그래서 인프런 내부에 올라온 여러 해결방법을 찾아서 따라하려 했으나 잘 되지는 않는 것 같습니다. 혹시 그냥 자바스크립트를 사용해도 이상없을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
6강/7강 수업
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.6강 마지막 화면이랑 7강 첫화면 코드가 달라져서 이 부분은 어떻게 해결하면 될까요??(안녕하세요->환영합니다)(console.log->alert)크게 이 두 부분이 다른 것 같습니다. 그냥 이대로 진행하면 될까요?2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결Vue 3 시작하기
Vue3에 대해
안녕하세요 이전에 장기효님 강의 vue2 버전으로 초중급 듣고 온 상태입니다. 근데 오래전부터 이미 뷰2는 지원 끊어져서 많은 회사들도 현재 뷰3를 이용하고 있는 걸로 압니다. 여기서 지금 재가 고민인게 중급 이후의 뷰2 강의를 들어야할지, 뷰3 강의를 처음부터 들어야할지 고민입니다. 근데 또 뷰3 강의 초급을 구매해서 커리큘럼만 살짝봤는데 뷰2 초급이랑 거의 비슷한것 같더라구요? 제가 이후에 들어야할 강의는 뭘로 해야할까요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
usecallback과 usememo를 중복해서 쓰는 이유(context 분리하기 챕터)
안녕하세요 강의를 잘 듣고있습니다.하지만 개념이 잘 이해가 되지 않은 부분들이 있어서 질문드립니다.context 분리하기 강의 부분입니다!!!이부분에서 이미 전 시간에 만들었던 useCallback으로 선언했던 함수들이 있습니다. 하지만 왜 app컴포넌트의 렌더링으로 인해 또 함수 선언이 되어 usememo를 써야한다고 하셨는지 문의드려요. 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", targetId: targetId, }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }, []);const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []);그동안 다른 컴포넌트에 props를 줄때는 color={color}식으로 주고, 이는 객체형태라고 합니다. 받는 자식 컴포넌트에서는 {color} 이런식으로 구조분해할당을 합니다. 하지만 createContext로 만든 provider value ={} 는 기본적으로 객체형태가 아닌걸까요? 기본적으로 구조분해할당을 하지 않는거같아서 뭐지싶었습니다<TodoDispatchContext.Provider value={memoizedDispatch}>useEffect, useMemo의 차이점은 무엇인가요? 기본적으로 의존성 배열을 []로 둘때는 처음으로 컴포넌트가 mount 될때만 실행하고 , [todos]를 넣으면 이 변수 state가 바뀔때만 실행하는거같아서 똑같은거같아요
-
미해결뉴비를 위한 자바스크립트
태그요소 선택 및 조작 질문
안녕하세요. 웹사이트 요소들을 선택하고 찾는 과정에서 크롬 콘솔창에서 코딩을 알려주시고 있는데. 혹시.. 해당 웹사이트의 서버에 피해를 끼친다거나 그런 것들이 있을 수도 있는지 여쭤봅니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이벤트 선언 관련 질문입니다.
해당 이벤트에서 클릭 시 useNavigate 함수를 호출하라 인데 이 둘의 동작에서 차이가 발생했습니다.그 이유를 설명해주실 수 있으신가요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
복합 대입 연산자
안녕하세요.1.7) 복합대입 연산자 관련 질문입니다.예제) num7 -= 20; 부분입니다.바로 위에 있는 num7 += 20;은 num7에 할당 되어 있는 값에 20만큼 더해서 console result 값은 30이 반환이 될 것이었고, 반환이 되었습니다.그런 논리라면 num7 -= 20; 이면단순 수식으로 생각을 하였을 때, 10 -20 = -10이 되어야 하는게 아닌가 싶습니다.num7 -= 20; 에서 20; 이 부분이 앞에 오게 되는 이유가 있을까요?기본 연산자에서는 정수만 취급하기 때문에 앞뒤의 순서가 바뀐 것일까요? 단순 JS의 구조적인 문제일까요?이에, 설명하셨던 부분과 약간 상이 한 내용인 거 같아서 질문 남겨드립니다.