// node tree에 설정(부모-자식 관계 설정) bookmarkItem.appendChild(bookmarkInfo); bookmarkItem.appendChild(bookmarkDelBtn); bookmarkInfo.appendChild(bookmarkUrl); bookmarkUrl.appendChild(urlIcon); bookmarkUrl.appendChild(nameElement); urlIcon.append(urlIconImg); bookmarkItemList.appendChild(bookmarkItem); 섹션 7의 6강 수강중에 해당 코드에 의문이 생겨서 질문 드립니다. append와 appendchild 2가지 메소드를 활용하셨는데 두 가지 차이가 검색해 봤을 땐 append는 노드뿐만 아니라 텍스트도 추가 가능하다고해서 appendchild로 바꿔봤더니 오류가 발생했습니다. 두가지 차이가 무엇인지 알 수 있을까요? 그리고 메소드 호출시 괄호가 있는 것과 없는 것의 차이가 궁금합니다. addEbentListener같은 곳에 사용되는 콜백함수에는 괄호를 안 붙여도 되는 건지 궁금합니다.// 1번 document.getElementById("cancel-btn").addEventListener("click", newBookmarkToggle); // 2번 document.getElementById("cancel-btn").addEventListener("click", newBookmarkToggle());

코드샌드박스가 또 업데이트 된것같습니다자바스크립트코드를 작성하려고 들어갔는데강좌내용과 달라서 진행을 못하고 있네요..도와주세요 자바스크립트가 두개가 있는데 두개다 들어가면 또 둘다 강좌랑 다르더라고요;; 

안녕하세요우선 강의 잘 듣고 있습니다^^동물 앨범 만들기 2-2를 진행하다가 문의 사항이 있어 글을 남겨 봅니다.아래 코드에서 this.setState에 ...this.state 값을넣어주면서"spread(…) 연산자를 사용해서 기존의 상태를 유지해주고" 라고 설명을 해주셨는데요이 부분이 이해가 잘 가지 않아서요~this.setState({ ...this.state,currentTab: name, photos: await request(name), });setState 함수 newState 매개변수에 { ...this.state,currentTab: name, photos: await request(name), } 객체 값이 들어가면서 ...this.state 값은 어디 값에 들어가게 되서기존 상태를 유지한다고 봐야 될까요??export default function App($app) { 7 this.state = { 8 currentTab: 'all', 9 photos: [], 10 }; 11 12 const tabBar = new TabBar({ 13 initialState: '', 14 onClick: async (name) => { 15 this.setState({ 16 ...this.state, 17 currentTab: name, 18 photos: await request(name), 19 }); 20 }, 21 }); 22 23 const content = new Content(); 24 25 this.setState = (newState) => { 26 this.state = newState; 27 tabBar.setState(this.state.currentTab); 28 content.setState(this.state.photos); 29 }; 30} 

모던 을 위한 다양한 Javascript+EX6 배열 문법 이해116분 2초 const data1 = [1, 2, "dave", null]; const data2 = [ { name: "Dave Lee", age: 30 }, { name: "Alex", age: 40 }, ]; const data3 = [ [1, 2, 3], [4, 5, 6], ]; console.log(data1[0]); console.log(data2[0].name); console.log(data3[0][0]);위 코드에서 마지막줄 console.log(data3[0][0]);만 결과가 나오지 않습니다.[0][1], [0][2], 등 나머지 index 번호를 적용했을 때 정상적으로 나오는데, [0][0]은 왜 결과가 누락되는걸까요?(undefined 라는 결과값도 나오지 않습니다.)

upward070@gmail.com 권한요청드렸습니다!

쌤~문득 궁금해져서 질문드립니다.보통 파일작성하실 때 jsx확장자로 하시는데 왜 유독 util폴더에 있는 파일은 js확장자 인가요?jsx나 js든 자유롭게 써도 되는건지 어떤 규칙이나 의도가 있으신지 궁금합니다.!

선생님, 안녕하세요!모바일 화면에서도 비율을 유지하면서 반응형으로 동작하게 만드는 것이 가능할까요? 여러 방법을 시도해 보았는데, 해결이 잘 안 돼서 이렇게 질문을 남깁니다. 아니면 차라리 모바일 전용 SVG를 따로 만들고, PC 버전에서는 display: none으로 처리한 후 모바일일 때만 보이게 하는 방식이 더 나을까요?조언 부탁드립니다!

import "./App.css"; import Viewer from "./components/Viewer"; import Controller from "./components/Controller"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( <div className="App"> <h1>Simple Counter</h1> <section> <Viewer count={count} /> </section> <section> <Controller onClickButton={onClickButton} /> </section> </div> ); } export default App;const Controller = ({ onClickButton }) => { return ( <div> <button onClick={() => { onClickButton(-1); }} > -1 </button> <button onClick={() => { onClickButton(-10); }} > -10 </button> <button onClick={() => { onClickButton(-100); }} > -100 </button> <button onClick={() => { onClickButton(100); }} > +100 </button> <button onClick={() => { onClickButton(10); }} > +10 </button> <button onClick={() => { onClickButton(1); }} > +1 </button> </div> ); }; export default Controller; App.jsx에서 onClickButton이 count, setCount 함수를 모두 사용하고 있을텐데요, 이것이 Controller.jsx로 넘어갈 때에는 아래와 같이 넘어가나요(value) => { setCount(13 + value);//count:13일때 };아니면 App.jsx에서 onClickButton 함수를 호출하여 App.jsx의 count, setCount를 사용하는 것인가요? 너무 기초적인 질문을 드려 죄송합니다ㅠㅠ

controller에서 async를 안하고 바로 promis객체를 리턴하는 이유가 몬가요? 그런데 이상하게도 값이 잘 나오네요? 제 생각에는 Promise<model>하고 await 후에 나오는 model값을 반환하는게 차이가 있어야 한다고 생각이 나는데 차이가 없네요? 그럼 보통 controller에는 async 키워드없이 로직을 처리하나요? 코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

혼자할때 요런식으로 진행했는데 강의를 보니 아예 다르게 하시더라구요 피그마 여백쪽을 margin 으로 일일히 계산했는데 틀린방법일까요?weight 100% 주면서 쉽게쉽게 하시길래 보면서 제 생각에는 미리 div들 따로 해놔서 maring 굳이 줄 이유가 없는것일까요?

3강에서 비주얼 스튜디오 코드 사용법 강의에서 PDF파일 참고하라는 내용이 있는데 파일은 어디서 확인할 수 있나요?

codesandbox가 또 업데이트 된 것 같습니다..모던 html 기능과 배경지식 이해 강의 영상과 전혀 다른 화면이 나옵니다..사용법 업데이트 해 주시면 좋을 것 같습니다.!

위와 같은 에러가 납니다. ㅠㅠ GPT도 사용하고 이것저것 찾아봐도 해결 방안을 못찾아서 질문 올립니다...

안녕하세요 범쌤...! 강의 너무 잘 듣고 있습니다.motionPath를 이용해서 구현하고 싶은 UI가 있습니다.대략적인 구현하고자 하는 모양은 이러합니다.● 디폴트1. 행성이 각 궤도에 맞춰 공전● 행성을 클릭시1. 공전이 멈추고 클릭 된 행성이 줌인2.행성마다 행성의 설명 UI가 보여짐설명이 부족한 것 같아 부족하지만 피그마로 그려서 첨부해봅니다..실무에 필요한데 도저히 감이오지 않아요 ㅜㅜㅜㅜㅜㅜ  

처음 접하는건데 이해를 계속 못해서두려움에 떨고 있었거든요. ㅠㅠ강의 중간중간 용기를 주시네요.저같이 무지한 사람들은 그런 말이 정말 실낱같은 희망입니다.정말 감사드려요.

https://www.youtube.com/watch?v=uI3k9Ol-Mp4 영어 강의 보고 따라 하려니까 어려워서 그런데 단계별로 설명좀 해주실수 있나요?

플러그인을 사용해야 되나요 아니면 피그마 ai 정식 버젼을 기다려야 되나요?text to figma , image to figma 괜찮은거 추천해주시면 감사여

이런 테이블 피그마로 쉽게 그리는법 좀 알려주세요 강의에서 참고할만한 부분이 있을까여? 

// promise 복습 promise 객체(executor 콜백함수(resolve, reject)) const delay= // delay는 ms값을 받아 promise 객체를 리턴 (ms)=>{return new Promise( // 인수로 함수를 받음, resolve(성공)를 인수로 받아 처리하는 지연함수(executor) (resolve)=>{setTimeout( // setTimeOut은 callback함수와 ms초값을 받음 ()=>{resolve();},ms);} ); } const start=()=>{delay(2000).then(()=>{console.log("대기");});} start(); // async const delay2= (ms)=>{return new Promise( (resolve)=>{setTimeout( ()=>{resolve();},ms);} ); } // 함수의 오른쪽에 작성 -> promise 객체 반환 const start2=async()=>{delay2(2000).then(()=>{console.log("async 대기");});} console.log(start2());섹션 4에 5강 async, await를 수강하던 중에 영상과 다른 결과가 출력 되어 질문 드립니다.두 코드의 결과를 서로 비교하고 싶어서 코드를 2개로 나누었는데요. async를 적은 코드는 pending상태의 promise객체가 나온다고 하셨는데 저는 계속 fulfilled가 나와서 제가 코드를 잘못 썼는지 질문 드리고 싶습니다. 위의 코드의 영향이 있을까 싶어 주석 처리 해도 결과는 같았습니다.  

interface Vehicle<T> { name: string; color: T; option: T; }질문1. Generics과 n개의 제네릭타입설정강사님의 예시는 1개의 Generics를 이용하셨는데 위의 코드와 같이 만약에 n개의 Generics타입을 지정할 수도 있을까요?? 질문2. 만약 n개의 제네릭타입이 가능하다면?어떻게 코드를 수정할 수 있을까요??const car: Vehicle<{price: number}> = { name: 'Car', color: 'red', option: { price: 1000 } }