173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요! 동물앨범 수업 따라가던 중 질문이 생겨 문의드립니다. require함수 작성시 밑줄이 생기며 require is not defined 라는 에러가 뜨는데, 저대로 실행을 하면 정상 작동하긴 합니다. 구글링을 해보니 package.json파일에 "type":commonJs를 추가하라고 하여 했는데도 똑같이 밑줄이 생깁니다. 어떤게 문제일까요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
express 파일까지 설치하고 server.js에 코드를 작성해 주었습니다. 그런데 웹을 새로고침한 경우 Cannot GET /penguin 이런 에러가 계속 발생합니다. 이 에러를 해결하기 위해서 express를 설치한 것 같은데..무엇이 문제인 걸까요? 혹시 몰라 깃의 코드를 확인해 봤는데, 코드상 문제는 없었습니다. import Content from "./components/Content.js"; import TabBar from "./components/TabBar.js"; import { request } from "./components/api.js"; export default function App($app) { this.state = { currentTab: window.location.pathname.replace("/", "") || "all", photos: [], }; //tab const tab = new TabBar({ $app, initialState: this.state.currentTab, onClick: async (name) => { history.pushState(null, null, `/${name}`); this.updateContent(name); }, }); const content = new Content({ $app, initialState: [], }); // 상태 업데이트 함수 this.setState = (newState) => { this.state = newState; tab.setState(this.state.currentTab); content.setState(this.state.photos); }; this.updateContent = async (tabName) => { try { const currentTab = tabName === "all" ? '' : tabName; const photos = await request(currentTab); this.setState({ ...this.state, currentTab: tabName, photos:photos, }) } catch (error) { console.log(error) } }; window.addEventListener("popstate", () => { this.updateContent(window.location.pathname.replace("/", "") || "all"); }); const init = async () => { this.updateContent(this.state.currentTab); }; init(); } const express = require('express'); const path = require("path"); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, ".."))); app.get("/*", (req, res) => { res.sendFile(path.join(__dirname, "..", 'index.html')); }); app.listen(PORT, () => { console.log('START SERVER') }) ++추가질문 port주소를 3000으로 변경하면 해당 오류가 발생하지 않는 것을 확인했습니다. 라이브서버를 자동으로 실행하면 port가 5500이어서 오류가 발생한 것 같습니다. 1) port는 자동으로 3000으로 변경이 안되나요? 2)server.js에서 port를 새로 지정해준 이유가 궁금합니다. 그대로 5500을 하면 안되나요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요! 강의 너무 잘 수강하고 있습니다. App.js 컴포넌트에서 onClick함수를 저렇게 정의하면 올바르게 동작하는 건 알겠는데 이런식으로 코드를 작성해 tabbar 컴포넌트에서 onClick함수를 실행하면 오류가 뜨는 이유가 궁금합니다!
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
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컴포넌트에서 빈문자열이었는데...그 뒤로 추론이 되지 않아서.... 흐름? 좀 알려주세요ㅡㅠ
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
package.json을 설치할때 해당파일의 설치 위치가 꼭 server파일의 상위폴더인 TRIP-WIKI폴더여야하나요? server파일안에 설치해도 상관없는건지 상관있으면 무엇이 다른건지 알수 있을까요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 우선 강의 잘 듣고 있습니다^^ 동물 앨범 만들기 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}
미해결
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
this.template = () => 에서 temp에 태그들을 넣어주고 하는 부분에 input에는 클로징태그가 필요없는 건가요? 클로징태그를 작성시 input에 value에 자동으로 /값이 들어가게 되는 상태가 되어 클로징태그가 필요 없는 부분인가? 필요 없는 이유는 무엇인지..에 대한 궁굼증이 생겨 질문드립니다 <div class='search'> <input type="text" placeholder="Search" id="search" autocomplete="off" value=${searchWord} > </div>
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
자바스크립트로 SPA 하는법을 꼭 배우고싶었는데 강의가 너무 좋아요! 섹션8부터 상태관리하면서 SPA 방식으로 코드를 리팩토링하는데 강의에서 알려주시는 방법이 약간 리액트의 동작방식과 비슷하다고 봐도 되는걸까요?! 제가 리액트를 얼마전에 배웠는데 뭔가 리액트의 내부 동작을 구현하는 느낌으로 생각해도 되는건지.. 아니면 아예 다른 방식으로 하는건지 궁금해서 여쭤봅니다!!
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 console.log('hello'); 안녕하세요. 혹시 Live Server 질문도 같이 올려도 될까요..? 효빈님께서 라이브 서버 실행하실 때 127.0.0.1:5000 으로 실행이 되시는데 저는 제 아이피 주소 뒤로 공부하는 폴더의 경로가 전부 찍히게 되어서 window.location.pathname 이 콘솔 창에 안찍히게 되더라구요.. VSC에서 Live Server Extensions을 싹 다 지우고 다시 설치해도 초기화가 안되네요..(전에 한 번 Live Server 설정을 건들인 적이 있습니다ㅜㅜ)
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 파일에 package.json은 있는데 어떤 내용들 넣으셨어요???
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
template = [] template = "" 문자열로 초기화 안하고 배열로 초기화 하는 이유가 뭔가요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 2-6 강의부터 4개- 5개 강의 정도 화면이 검정으로 나오는데 저만그런것인지 확인 가능할까요??
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
(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);
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
const start2 = async () => { try { let result = await Promise.all([workA(), workB(), workC()]); result.forEach((res) => console.log(res)); } catch { console.log(err); } }; 해당 코드에서 반환된 프로미스 객체는 배열의 형태로 result 변수에 저장되는 건가요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
this.template 메소드를 innerHTML에 할당하는 방식이 아닌 createElement와 appendChild 등으로 해결해도 괜찮나요? 이렇게 하면 변경되지 않은 부분만 체크하여 필요한 부분만 DOM을 다시 추가하는 방식을 사용할 수 있을 것 같은데
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
App 컴포넌트에서 모든 컴포넌트들의 상태가 관리되는 건가요? 컴포넌트들은 각각의 상태를 관리하고 가 상태를 업데이트하면서 상태관리를 하는게 아닌가요? 이건 모든 상태를 App 컴포넌트에서 관리하고 하위 컴포넌트들은 자신의 상태가 될 데이터를 내려받아서 그냥 render만 해주는 느낌이 들어서요 이렇게 되면 App 컴포넌트에서 관리해야 할 상태들이 너무 많아지고 App 컴포넌트가 복잡해지는 거 아닌가요..? 각 컴포넌트에서 독립적으로 본인의 상태를 관리하고 필요에 따라 상위 컴포넌트에서 상태를 전달받아 render 한다..? 이렇게 이해했는데.. 컴포넌트 단위로 개발하는 spa 개발 개념이 좀 부족한건지 이해가 잘 안되네요
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
$tabBar.forEach((elm) => { elm.addEventListener('click', () => { onClick(elm.id); }); }); 이 onClick 함수 this.onClick으로 호출하지 않았는데, 이러면 TabBar 인스턴스의 onClick 메소드는 쓰지 않는 거 아닌가요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 선생님 제가 설정이 뭔가 틀어졌는지 consol.log하면 선생님처럼 console창이 안뜨고 이렇게 뜨는데 어떻게 해결할 수 있는 방법이 없을까요? 선생님처럼 콘솔창이 떴으면 좋겠습니다.
해결됨
Svelte.js SPA 영화 검색 프로젝트
template 설치중에 에러가 자꾸떠서 질문남깁니다..
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
해당 강의에서 컴포넌트를 만들고 상태관리를 할때 모든 코드에 this가 왜 붙는건가요?? 저렇게 만든것도 그냥 객체인거 같은데 let state ={} 로안 하고 let도 없고 변수도 없는데 this로 state를 참조되는것도 궁금합니다. 모든 코드에 this가 붙는 이유 일반함수에 this한거니 그냥 window 객체에 state 변수가 생긴건지 궁금합니다. 2가 아니면 그냥 state라는 걸 자바스크립트가 제공해서 참조해서 사용하는것인지 this.state = {};
