묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
motionpath 플러그인에서 align의 자세한 역할 궁금합니다
안녕하세요 강의 잘 듣고 있습니다! 공식 문서 보면서 복습하는 중인데 공식문서 예제에는 motionPath:{ path: "#path", align: "#path", autoRotate: true, alignOrigin: [0.5, 0.5] } 처럼 path와 align이 같은 요소로 지정되어 있습니다.그래서 codepen을 이용해서 강의 내용처럼align에 움직이는 요소를 지정해봤는데 경로에서 붕 떠서 이동합니다. 마찬가지로 강의 샘플 코드도 align에 경로를 넣어서 한번 테스트 해봤는데 이번에는 호랑이가 너무 붕 떠서 이동합니다. 강의 내용에서는 align에 움직이는 타겟을 넣으면 된다고 하셨는데이건 svg 코드 구성에 따라서 다른건가요??? 공식 문서에 따르면 움직이는 요소를 경로에 맞춰 정렬 해주는게 align의 역할이라고 하는데추상적인 설명인 것 같아서 잘 이해가 안됩니다..! align에 대해 제가 정확히 이해하고 있는게 맞는지,그리고 align에 들어가는 요소는 정확히 어떻게 구별해 넣는게 좋은지 궁금합니다
-
미해결TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
실습에 사용되는 이미지
실습에 사용되는 이미지들 출력이 안되고 있습니다.(e.g. https://via.placeholder.com/400x400.png?text=City)
-
해결됨자바스크립트로 배우는 자료구조 & 알고리즘 (개념+문제풀이)
강의에 나온 selection 코드에 오류가 있습니다.
강의 코드function selectionSort(array) { const n = array.length - 1; for (let i = 0; i < n; i++) { let minIndex = i; for (let j = i + 1; j < n; j++) { if (array[j] < array[minIndex]) { minIndex = j; } } if (minIndex !== i) { const temp = array[i]; array[i] = array[minIndex]; array[minIndex] = temp; } } return array; } // console.log(selectionSort([77, 41, 6, 4, 3, 2, 5, 222])); console.log(selectionSort([3, 6, 5, 2, 8, 1]));[문제]위 방식처럼 하면 n이 array.length - 1 이기때문에 두번째 for문은 j가 마지막 인덱스 이전까지만 수행된다. 즉 마지막 인덱스 요소는 정렬 X[3,6,5,2,8,1]를 예시로 들자면,i가 0일때 j는 1번째 인덱스부터 시작하며 j가 n보다 작을때까지 최소값을 탐색한다. j가 5일때 j < n 조건에 맞지 않아 minIndex를 1로 바꾸는거 실행 X[해결]따라서 n을 array.length - 1로 할당하지 않고 array.length로 해야함그러면 두번째 for문에서 j의 조건에 맞아 마지막 인덱스 접근 가능추가로 i는 마지막 인덱스에 접근할 필요가 없으므로 첫 번째 for문의 조건을 n - 1로 바꾸기. function selectionSort(array) { const n = array.length; for (let i = 0; i < n - 1; i++) { let minIndex = i; for (let j = i + 1; j < n; j++) { if (array[j] < array[minIndex]) { minIndex = j; } } if (minIndex !== i) { const temp = array[i]; array[i] = array[minIndex]; array[minIndex] = temp; } } return array; } // console.log(selectionSort([77, 41, 6, 4, 3, 2, 5, 222])); console.log(selectionSort([3, 6, 5, 2, 8, 1]));
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물앨범 1-1-2
경로 에러가 나와서 혹시 제 파일구조 때문에 그런지 궁금하여 문의드립니다!일단 파일구조가 아래와 같은 방식으로 구성되어있습니다.(맨위에 lecture라고 따로있습니다 lecture/section06/src) 원래 강의코드koala.html<!DOCTYPE html> <head> <title>Animal Album</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./src/styles.css" /> </head> <body> <div id="app"> <div class="tab-bar"> <a href="/"><div>전체</div></a> <a href="/penguin.html"><div>펭귄</div></a> <a href="/koala.html"><div class="clicked">코알라</div></a> <a href="/panda.html"><div>판다</div></a> </div> <div class="content"></div> </div> <script src="./src/koala.js"></script> </body> 현제 제 코드<!DOCTYPE html> <head> <title>Animal Album</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./src/styles.css" /> </head> <body> <div id="app"> <div class="tab-bar"> <a href="index.html"><div>전체</div></a> <a href="penguin.html"><div>펭귄</div></a> <a href="koala.html"><div class="clicked">코알라</div></a> <a href="panda.html"><div>판다</div></a> </div> <div class="content"></div> </div> <script src="./src/koala.js"></script> </body> 이렇게 해야 화면에 동물사진이 나오는데 혹시 경로 상의 문제인지 아니면 파일구조상 때문에 이렇게 작성해야하는지 궁금하여 문의드립니다! 차후에 강의를 듣고 프로젝트를 할때 불편함을 느낄지.. 걱정되어 문의드립니다!
-
미해결처음 배우는 리액트 네이티브
맥북 m4에서 nvm으로 설치불가
현재 맥북에서 nvm으로 node 14버전 설치가 불가능합니다 18로 대신 설치했는데 문제가 없을지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
Ubuntu 설치 관련
제 노트북이 램이 8G인데 Ubuntu 설치해서 이용가능할까요?
-
미해결포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편
portfolio-site 소스코드 받았는대 실행이 안돼요
소스코드 보고 분석할려고 다운받았는대 실행이 아예 안되요 script 에 start 넣어도 모듈 에러 뜨고 실행방법 따로 있나요?
-
미해결JavaScript 베이스캠프
변경된 API 주소 CORS 오류
변경된 API 주소를 사용하려 하니CORS 오류가 있어서 데이터를 가져오지 못합니다.해결 방법이 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
8.5) Read -투두리스트 렌더링하기 강의 내용 중 질문드립니다!
import "./List.css"; {import Todoitem from "./Todoitem"; const List = ({ todos }) => { return ( <div className="List"> <h4>Todo List🎉</h4> <input placeholder="검색어를 입력하세요"></input> <div className="todos_wrapper"> {todos.map((todo) => { return <div>todo</div>; })} </div> </div> ); }; export default List; <질문> {todos.map((todo) => { return <div>todo</div>; })} {todos.map((todo) =>{ ....})} 빨간줄 친 todo는 어디서 나온건지 이해가 되지 않습니다 8.5) Read -투두리스트 렌더링하기 강의1분 46초 입니다!
-
미해결Next.js 시작하기
globals.css를 삭제하니 404가 나옵니다
styles/globals.css의 내용을 삭제하니_app.jsx에서 import 에러가 생기고import를 삭제하니 화면에Link 의 내용과 404화면이 함께 나옵니다 그리고 다음강의에서 Layout.tsx도Module not found: Can't resolve '@/layouts/Layout.tsx' 이러한 에러가 나오는데 next 15버전이라서 에러가 나는걸까요?..
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
콜백함수 호출시 인자 개수 체크
안녕하세요. 강사님.콜백함수 챕터에서 repeat 함수에서 호출하는 Callback 함수에 인수를 하나로 넣어주고 있는데 callback 함수가 어떤 함수 인지 모르는 상태에서 인수가 여러개인 함수를 넣어 준다면 오류가 발생하지 않을까요?callback 함수로 들어오는 인자가 잘못된 경우 안에서 타입 체크등을 하기도 하는지 궁금합니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
컴포넌트 리렌더링 관련 질문
안녕하세요! 강의 잘 듣고 있습니다ㅎㅎ이번 강의에서 React dev tools의 'Highlight updates when components render' 옵션을 통해서 컴포넌트가 언제 리렌더링 되는지 감지하는 방법을 알려주셔서 해당 내용 학습 중에 궁금한게 생겨 질문 드립니다. 해당 옵션을 켜고, 이번 강의의 실습 내용 중에서 input 영역을 input component로 분리하면 다른 component와 어떠한 영향도 주고 받지 않으니까 input을 작성할 때 input 영역만 highlight가 될 거라 예상했는데요,실제로는 형제 컴포넌트도 다 같이 리렌더링 되는 것처럼 보이더라구요. 이 현상이 제 코드의 문제인건지, 다른 이유가 있는건지 궁금합니다. input component를 분리한 App.jsx와 Input.jsx를 아래에 코드로 첨부했습니다.[App.jsx]import { useState, useEffect, useRef } from 'react' import "./App.css" import Viewer from './components/Viewer' import Controller from './components/Controller' import Even from './components/Even' import Input from './components/Input' function App() { const [count ,setCount] = useState(0); const handleClickCount = (addValue) => { setCount(count + addValue) } return ( <div className="App"> <h1>Simple Counter</h1> <section> <Input /> </section> <section> <Viewer count={count} /> {count % 2 === 0 ? <Even /> : null} </section> <section> <Controller onCount={handleClickCount}/> </section> </div> ) } export default App[Input.jsx]import { useState } from "react"; const Input = () => { const [input, setInput] = useState(""); return ( <input value={input} onChange={(e) => { setInput(e.target.value) }} /> ) } export default Input;
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
스프링 공부를 하다가 노드 백엔드도 경험해 보고 싶어서 자바스크립트 강의를 들으려는데
백엔드 부분을 위해 필요한 파트는 어디어디인가요?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
배포관련 질문드립니다.
저는 vercel과 cloudtype 을 이용해 배포를 했습니다.gitlinkfront-linkbackend-link업무게시판등 backend연동이 잘 되지만, admin에서 문제가 있습니다. 수업에 진행한 아이디와 패스워드로, 진행했고, 오류가 나는 부분들을 계속 수정해 보았으나, 로그인연동이 안되서 문의 드립니다. 데이터는 git에 업로드된 내용으로 확인해 주시면 좋겠습니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
메일확인 부탁드립니다.
메일확인 부탁드립니다. 아직 권한이 안왔어요!복습이 하고싶어요... 이메일 : wkemrm@gmail.com
-
해결됨프로젝트로 쉽게 배우는 TypeScript 기초
퀴즈에 답변이 나와있어요!
이런식으로 퀴즈에 답변이 뭔지 나와있어서 말씀드립니다!
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
단언문 순서에 따라 테스트 결과가 왜 달라지나요?
expect(screen.getByTestId('cart-icon')).toBeInTheDocument(); expect( await screen.findByRole('button', { name: 'Maria' }), ).toBeInTheDocument(); expect(screen.getByText('2')).toBeInTheDocument();영상의 테스트 코드는 통과하는데, 위와 같이 두번째와 세번째 단언문을 바꾸면 실패합니다. 왜이런가요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요 ScrollSmoother에 대해 질문드릴게요
안녕하세요 ScrollSmoother에 대해 질문드릴게요! 이번 강의 너무 잘보고 있는데 ,다른분의 질문을 보고 ScrollSmoother가 무료가 되었다라고 말씀하셔서 활용해보려고 합니다. 사용법이 ID를 레퍼하여 자식 div를 tramsform으로 따라오는식으로 스무디 효과를 주는건 확인했습니다 근데 만약에 페러렉스 효과를 백그라운드 이미지에 반영해보려니 tramsform의 크기를 따라가는지 background fixed같은건 전혀먹히지가 않는거같네요 .. 스크롤링하면 부드럽게 스무스 하게 되면서 bg의 포지션도 살짝움직이는 식으로 구현해보려 했는데 혹시 방법이 없을지 질문드립니다. ㅜ
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
node_modules 폴더가 생기지 않아요
npm init -y해서 package.json은 생겼는데 npm install express했을때 package-lock.json은 생겼는데 node_modules 폴더가 생기지 않네요 ㅠ
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
14강 - 72,73번 강의 영상이 동일한거 같습니다.
- 강의 영상에 대한 질문이 있으시면, 상세히 문의를 작성해주시면, 주말/휴일 제외, 2~3일 내에 답변드립니다 (이외의 문의는 평생 강의이므로 양해를 부탁드립니다.)- 강의 답변이 도움이 안되셨다면, dream@fun-coding.org 로 메일 주시면 재검토하겠습니다. - 괜찮으시면 질문전에 챗GPT 와 구글 검색을 꼭 활용해보세요~- 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 14강 72, 73번 강의 영상이 동일한거 같습니다. 72강 23초 화면 73강 23초 화면 확인 요청드립니다..ㅠㅠ
