프로젝트 작성할 때 ,APP.js와 components폴더 안의 js모듈로 보통 구성을 하시는데, 왜 APP.js에서 $app을 매개변수로 받을 때는 소괄호에서 바로 받는데, 다른 컨포넌트 내부 js모듈에서는 중괄호로 받는건가요? export default function App($app) {} export default function CityList({ $app, initialState,handleLoadMore }) {} APP의 경우 전달받는게 하나인데, CityList의 경우 APP에서 여러개의 매개변수를 받아오기 떄문에 구조분해로 받아오는 건가요? 만약 그렇다면 한개만 매개변수로 받아오는 경우, CityList도 (소괄호)안에 {중괄호}없이 바로 매개변수를 써도 되는 건가요?
안녕하세요! 동물앨범 수업 따라가던 중 질문이 생겨 문의드립니다. require함수 작성시 밑줄이 생기며 require is not defined 라는 에러가 뜨는데, 저대로 실행을 하면 정상 작동하긴 합니다. 구글링을 해보니 package.json파일에 "type":commonJs를 추가하라고 하여 했는데도 똑같이 밑줄이 생깁니다. 어떤게 문제일까요?
export default function TabBar({$app, initialState, onClick }) { this.state = initialState; this.onClick = onClick; this.$target = document.createElement('div'); this.$target.className = 'tab-bar'; $app.appendChild(this.$target); // 필요한 버튼 this.template = () => { let temp = `<div id="all">전체</div> <div id ="penguin">펭귄</div> <div id ="koala">코알라</div> <div id="panda">판다</div>`; return temp; }; this.render = () => { this.$target.innerHTML = this.template(); //$currentTab변수에 현재 state값과 동일한 아이디를 갖는 버튼 요소 할당 let $currentTab = document.getElementById(this.state); //$currentTab ? ($currentTab.className = "clicked") : ""; $currentTab && ($currentTab.className = "clicked"); 동물 앨범 만들기 2-2 강의부분에서 $currentTab 변수에 현재 state값과 동일한 아이디를 갖는 버튼 요소를 할당한다고 하셔쓴데, 왜 this.state가 들어가는지 이해가 가지 않습니다. this.state값은 initialState이고 initialState은 APP컴포넌트에서 빈문자열이었는데...그 뒤로 추론이 되지 않아서.... 흐름? 좀 알려주세요ㅡㅠ
// 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}
this.template = () => 에서 temp에 태그들을 넣어주고 하는 부분에 input에는 클로징태그가 필요없는 건가요? 클로징태그를 작성시 input에 value에 자동으로 /값이 들어가게 되는 상태가 되어 클로징태그가 필요 없는 부분인가? 필요 없는 이유는 무엇인지..에 대한 궁굼증이 생겨 질문드립니다 <div class='search'> <input type="text" placeholder="Search" id="search" autocomplete="off" value=${searchWord} > </div>
안녕하세요. 저는 서버개발자로 일을 하고 있지만, 영보님 강의를 모두 사서 듣고있는 주니어 개발자입니다. 우선 좋은 강좌를 만들어주셔서 너무 감사합니다. 앞으로도 좋은 강좌 많이 만들어 주시면 너무나도 감사할것같습 니다. 현재 돔 인터랙션이라는 강의를 듣고 있고 중반정도 달려왔는데 이 강의를 들으면 듣지 않은 사람들에 비해 어떤 경쟁력을 갖게 되는지 궁금합니다. 영보님께서 강의를 만드신 이유와 의도가 있었을 것 같은데 그 부분이 궁금합니다. 그리고 리액트 심화 강의도 혹시 출시 하실 생각이 있으신지 궁금합니다.
자바스크립트로 SPA 하는법을 꼭 배우고싶었는데 강의가 너무 좋아요! 섹션8부터 상태관리하면서 SPA 방식으로 코드를 리팩토링하는데 강의에서 알려주시는 방법이 약간 리액트의 동작방식과 비슷하다고 봐도 되는걸까요?! 제가 리액트를 얼마전에 배웠는데 뭔가 리액트의 내부 동작을 구현하는 느낌으로 생각해도 되는건지.. 아니면 아예 다른 방식으로 하는건지 궁금해서 여쭤봅니다!!
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 console.log('hello'); 안녕하세요. 혹시 Live Server 질문도 같이 올려도 될까요..? 효빈님께서 라이브 서버 실행하실 때 127.0.0.1:5000 으로 실행이 되시는데 저는 제 아이피 주소 뒤로 공부하는 폴더의 경로가 전부 찍히게 되어서 window.location.pathname 이 콘솔 창에 안찍히게 되더라구요.. VSC에서 Live Server Extensions을 싹 다 지우고 다시 설치해도 초기화가 안되네요..(전에 한 번 Live Server 설정을 건들인 적이 있습니다ㅜㅜ)
(a,b)가 어떤걸 의미하는지 모르겠고 -1, 1, 0을 반환했을때 배열내부적으로 어떻게 처리되는지도 모르겠습니다. let colors = ["green", "blue", "purple"]; const compare = (a, b) => { if (a > b) return -1; else if (a < b) return 1; else return 0; }; colors.sort(compare); console.log(colors);
