묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물 앨범 만들기 pushtState 관련
안녕하세요, 선생님.수업 잘 듣고 있습니다! 동물 앨범 만들기-3 수업을 듣다가 pushState메서드 사용할 때 가장 첫번째 값에 null을 넣는 이유가 궁금합니다!감사합니다! const tabBar = new TabBar({ $app, initialState: "", onClick: async (name) => { history.pushState(null, `${name}`, name); this.setState({ ...this.state, currentTab: name, photos: await request(name === "all" ? "" : name), }); }, }); ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물 앨범 만들기 사진 관련 문의
안녕하세요. 동물 앨범 만들기 부분을 듣고 있습니다. 올려주신 사이트에 들어가려고 하니까 '연결이 비공개로 설정되어 있지 않습니다' 라는 문구가 나와서 여러가지 방법을 사용해봤는데, 마지막에 불법 정보 유해 사이트쪽으로 넘어가지는데 혹시 어떻게 해결할 수 있을까요?⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
자바스크립트 첫걸음 교재 질문..
자바스크립트 첫걸음 교재 책을 구매했는데이 교재로 웹 프론트엔드를 위한 자바스크립트 첫걸음, 한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지교재로 이 두개 강의 같이 공부할수 있나요? 아니면 별도로 정리를 해야할가요
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
URL에 따라 리스트 불러오기 - getSortBy()와 getSearchWord()를 활성화 하면 리스트가 사라집니다
const getSortBy = () =>{ if(window.location.search){ const sortText = window.location.search.split('sort=')[1].split('&')[0]; console.log(`getSortBy : ${sortText}`); return sortText; }; return 'total'; }; const getSearchWord = () => { if(window.location.search && window.location.search.includes('search=')){ return window.location.search.split('search=')[1]; }; return ''; }; ... this.state = { startIdx: 0, sortBy : getSortBy(), searchWord: getSearchWord(), region: "", cities: "",}; 일단 문제가 되는 코드는 이 부분 입니다.이부분을 작성 한 이후로, 새로고침 하면 아래 시티리스트가 안나오다가상단 sort 또는 search 를 주석처리 하면 리스트가 출력 됩니다 전체 코드는 아래 git 주소를 같이 봐주시면 감사하겠습니다.https://github.com/KimDay366/onebite_js/tree/main/section09/Trip-Wiki 한시간째 똑같은 코드만 보고 있는데, 계속 봐도 저는 뭐가 문제인지 모르겠네요 ㅠㅠㅠ
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
DOM API-2 1분54초 경 질문드립니다.
안녕하세요 강의 잘 듣고 있습니다 좋은 강의 만들어주셔서 감사합니다!DOM API-2 1분54초 경 질문드립니다. let $type = document.createElement("div"); $type.className = "info-item"; $type.id = "type"; $type.textContent = "말티즈"; console.log($type); 이렇게 출력이 되고 div#type.info-itemlet $type = document.createElement("div"); $type.className = "info-item"; $type.id = "type"; $type.textContent = "말티즈"; console.log($type.outerHTML); 다음과같이 .outerHTML을 출력해야 강의와 같이 아래처럼 출력이 되는데<div class="info-item" id="type">말티즈</div>어떤 차이가 있는 걸까요? 환경설정을 어떻게 하면 강의처럼 그냥 console.log($type);만 출력해도<div class="info-item" id="type">말티즈</div>와 같이 웹사이트 콘솔창에서 볼 수 있을까요? ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 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> 이렇게 해야 화면에 동물사진이 나오는데 혹시 경로 상의 문제인지 아니면 파일구조상 때문에 이렇게 작성해야하는지 궁금하여 문의드립니다! 차후에 강의를 듣고 프로젝트를 할때 불편함을 느낄지.. 걱정되어 문의드립니다!
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
스프링 공부를 하다가 노드 백엔드도 경험해 보고 싶어서 자바스크립트 강의를 들으려는데
백엔드 부분을 위해 필요한 파트는 어디어디인가요?
-
미해결React + API Server 프로젝트 개발과 배포 (CI/CD)
2강에서 express npm run dev하다가 오류빨간글씨 나오는 분들 참고하세요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.2강에서 express npm run dev하다가 오류빨간글씨 나오는 분들 참고하세요자료 다운받으셔서 swagger부분 코드 pdf복사하면 yaml형식이 맞지 않아서 오류가 나는데 참고해서 수정하세요
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
node_modules 폴더가 생기지 않아요
npm init -y해서 package.json은 생겼는데 npm install express했을때 package-lock.json은 생겼는데 node_modules 폴더가 생기지 않네요 ㅠ
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
최종프로젝트 상세페이지 출력 오류 문의드립니다!
세션 9. 최종 프로젝트cityDetail 개발-2 에서https://trip-wiki-api.vercel.app/ 강사님이 알려주셨던 링크에는 상세페이지 이미지와 받는 정보가 없습니다! 어떻게 상세페이지를 출력할 수 있나요? Japan을 검색창에서 검색하고 상세페이지를 눌렀지만 아무런 정보가 출력되지 않고 있습니다! import Header from "./components/Header.js"; import RegionList from "./components/RegionList.js"; import CityList from "./components/CityList.js"; import CityDetail from "./components/CityDetail.js"; import { request, requestCityDetail } from "./components/api.js"; export default function App($app) { const getSortBy = () => { if (window.location.search) { return window.location.search.split("sort=")[1].split("&")[0]; } return "total"; }; const getSearchWord = () => { if (window.location.search && window.location.search.includes("search=")) { return window.location.search.split("search=")[1]; } return ""; }; this.state = { startIdx: 0, sortBy: getSortBy(), region: window.location.pathname.replace("/", ""), searchWord: getSearchWord(), cities: "", currentPage: window.location.pathname, }; const renderHeader = () => { new Header({ $app, initialState: { currentPage: this.state.currentPage, sortBy: this.state.sortBy, searchWord: this.state.searchWord, }, handleSortChange: async (sortBy) => { const pageUrl = `/${this.state.region}?sort=${sortBy}`; history.pushState( null, null, this.state.searchWord ? pageUrl + `&search=${this.state.searchWord}` : pageUrl ); const cities = await request( 0, this.state.region, sortBy, this.state.searchWord ); this.setState({ ...this.state, startIdx: 0, sortBy: sortBy, cities: cities, }); }, handleSearch: async (searchWord) => { history.pushState( null, null, `/${this.state.region}?sort=${this.state.sortBy}&search=${searchWord}` ); const cities = await request( 0, this.state.region, this.state.sortBy, searchWord ); this.setState({ ...this.state, startIdx: 0, cities: cities, searchWord: searchWord, }); }, }); }; const renderRegionList = () => { new RegionList({ $app, initialState: this.state.region, handleRegion: async (region) => { history.pushState(null, null, `/${region}?sort=total`); const cities = await request(0, region, "total"); this.setState({ ...this.state, startIdx: 0, sortBy: "total", region: region, cities: cities, searchWord: "", currentPage: `/${region}`, }); }, }); }; const renderCityList = () => { new CityList({ $app, initialState: this.state.cities, handleItemClick: async (id) => { history.pushState(null, null, `/city/${id}`); this.setState({ ...this.state, currentPage: `/city/${id}`, }); }, handleLoadMore: async () => { const newStartIdx = this.state.startIdx + 40; const newCities = await request( newStartIdx, this.state.region, this.state.sortBy ); this.setState({ ...this.state, startIdx: newStartIdx, cities: { ...this.state.cities, cities: [...this.state.cities.cities, ...newCities.cities], isEnd: newCities.isEnd, }, }); }, }); }; const renderCityDetail = async (cityId) => { try { const cityDetailData = await requestCityDetail(cityId); new CityDetail({ $app, initialState: cityDetailData }); } catch (err) { console.log(err); } }; const render = async () => { const path = this.state.currentPage; $app.innerHTML = ""; // 상세 페이지로 이동 if (path.startsWith("/city/")) { const cityId = path.split("/city/")[1]; renderHeader(); renderCityDetail(cityId); } else { renderHeader(); renderRegionList(); renderCityList(); } }; this.setState = (newState) => { this.state = newState; render(); }; const init = async () => { const path = this.state.currentPage; // 메인 페이지 if (!path.startsWith("/city")) { const cities = await request( this.state.startIdx, this.state.region, this.state.sortBy, this.state.searchWord ); this.setState({ ...this.state, cities: cities, }); } // 상세페이지 else { render(); } }; window.addEventListener("popstate", async () => { const urlPath = window.location.pathname; const prevRegion = urlPath.replace("/", ""); const prevPage = urlPath; const prevSortBy = getSortBy(); const prevSearchWord = getSearchWord(); const prevStartIdx = 0; const prevCities = await request( prevStartIdx, prevRegion, prevSortBy, prevSearchWord ); this.setState({ ...this.state, startIdx: prevStartIdx, sortBy: prevSortBy, region: prevRegion, currentPage: prevPage, searchWord: prevSearchWord, cities: prevCities, }); }); init(); } //API.js 코드입니다!export default function CityDetail({ $app, initialState }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "city-detail"; $app.appendChild(this.$target); const getScoreColor = (score) => { // let scoreNumber = parseInt(score); if (score >= 4) return "green"; if (score >= 3) return "yellow"; return "red"; }; this.template = () => { let cityData = this.state.CityDetail; let temp = ``; if (cityData) { temp = `<div class="image-banner"> <img src="${cityData.image}"/> <div class="city-name"> <div class="city">${cityData.city}</div> <div class="country">${cityData.region} / ${cityData.country}</div> </div> </div> <div class="progress-container"> <div class="info-item"> <div class="label">⭐ Total Score</div> <div class="progress-bar" score-color="${getScoreColor( cityData.total )}" style="--score:${cityData.total * 20}%"></div> </div> <div class="info-item"> <div class="label">💵 Cost</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.cost )}" style="--score:${cityData.info.cost * 20}%"></div> </div> <div class="info-item"> <div class="label">😆 Fun</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.fun )}" style="--score:${cityData.info.fun * 20}%"></div> </div> <div class="info-item"> <div class="label">🚓 Safety</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.safety )}" style="--score:${cityData.info.safety * 20}%"></div> </div> <div class="info-item"> <div class="label">🌐 Internet</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.internet )}" style="--score:${cityData.info.internet * 20}%"></div> </div> <div class="info-item"> <div class="label">💨 Air Condition</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.air )}" style="--score: ${cityData.info.air * 20}%"></div> </div> <div class="info-item"> <div class="label">🍜 Food</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.food )}" style="--score: ${cityData.info.food * 20}%"></div> </div> </div> `; } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); }; /* this.setState = (newState) => { this.state = newState; this.render(); }; */ this.render(); } //cityDetail.js 상세페이지 코드입니다!
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
CityList.js에서 api.js 파일의 API_URL이 렌더링이 안되는 오류가 있습니다!
세션 9. 여행지정보 최종프로젝트 작성 중...CityList 개발 13:25분에서 CityList.js를 작성한 후 localhost:3000을 새로고침해도 전혀 변화없이 빈 화면만 출력이 됩니다!api.js에서 API_URL로 전달받을 https://trip-wiki-api.vercel.app/ 에서 도시 정보 40개 정보가 없더라고요, 그래서 웹 화면에 아무것도 출력되지 않아서 문의드립니다! server.js 파일도 /*splat 로 변경해서 "start server" 노드 명령어로 터미널에서 출력되도록 수정 완료했지만, 홈페이지 이미지가 출력되지 않고 있습니다!const express = require("express"); const path = require("path"); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, ".."))); app.get("/*splat", (req, res) => { res.sendFile(path.join(__dirname, "..", "index.html")); }); app.listen(PORT, () => { console.log("START SEVER"); }); export default function CityList({ $app, initialState }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "city-list"; $app.appendChild(this.$target); this.template = () => { let temp = `<div class="city-items-container">`; if (this.state) { this.state.cities.forEach((elm) => { temp += ` <div class="city-item" id=${elm.id}> <img src=${elm.image}></img> <div class="city-item-info">${elm.city}, ${elm.country}</div> <div class="city-item-score">⭐ ${elm.total}</div> </div> `; }); temp += `</div>`; } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); }
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물 앨범 만들기 최종 에러 수정부탁드립니다!
현재 제가 동물 앨범 만들기 전체 파일 구조와 index.html 코드는 이렇게 작성하였으며, 강의 내용과 동일하게 작성하였습니다api.js 코드와 TabBar.js 코드입니다. 강의 내용과 동일하게 작성하였습니다.content.js 코드와 index.js 코드를 작성하였습니다.마지막으로 App.js 코드를 작성하였지만, 동물 사진이 웹 화면에 출력이 되지 않고 있습니다!import TabBar from "./components/TabBar.js"; import Content from "./components/Content.js"; import { request } from "./components/api.js"; export default function App($app) { this.state = { currentTab: window.location.pathname.replace("/", "") || "all", photos: [], }; //tabBar const tabBar = new TabBar({ $app, initialState: this.state.currentTab, onClick: async (name) => { history.pushState(null, null, `/${name}`); this.updateContent(name); }, }); //content const content = new Content({ $app, initialState: [], }); //state this.setState = (newState) => { this.state = newState; tabBar.setState(this.state.currentTab); content.setState(this.state.photos); }; this.updateContent = async (tabName) => { console.log(tabName); const name = tabName === "all" ? "" : tabName; const photos = await request(name); this.setState({ ...this.state, currentTab: tabName, photos: photos, }); }; window.addEventListener("popstate", () => { this.updateContent(window.location.pathname.replace("/", "") || "all"); }); const init = async () => { this.updateContent(this.state.currentTab); }; init(); }
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물앨범만들기 코드 에러문의드립니다!
동물 앨범 만들기 3차 까지 들어서 라이브 코드를 작성하였지만, 강의 내용에서 나오는 웹 실행화면이 출력되지 않고 있습니다.또한, 강사님의 깃 주소에 있는 코드들을 그대로 실행해도 강의 내용처럼 나오지 않습니다.강사님이 동물 앨범 만들기 2차 때는 1차에서 작성한 각 동물들의 js파일과 html 파일을 삭제하라고 하셨는데, 막상 1차때 작성한 파일들을 삭제하니까 동물 사진이 웹에 출력되지 않아서 다시 기재하였습니다그래서, 강사님의 깃 주소에는 1차와 2차, 3차 코드는 중복되게 작성하면 안되는 건가요?강사님처럼 웹 화면에 출력될려면 3차 코드만 있으면 되는 건가요?왜 3차 코드만으로 강의 내용처럼 출력이 안되는 걸까요?1차, 2차, 3차의 모든 코드들을 융합해서 작성해야하나요?다음 강의 node.js와 express.js를 진행할 수 가 없어서 급하게 문의드립니다! !
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
cityList 개발에서 citylist 가 렌더가안되요
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂console.log('hello'); https://trip-wiki-api.vercel.app/?start=0브라우저에서 여기로 들어가도 api 호출값이 안나오고 검은색 창이 떠요 그리고 코드 작성했는데, Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.이런 에러만 console에 찍혀서...코드 사이트에 있는걸로 복사해서 넣어도 마찬가지네요server.js는const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, '..'))); app.get('/*splat', (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); app.listen(PORT, () => { console.log('START SERVER'); });/*splat은 /*name 해도 결과가 같아요 ㅠ express는 5.1.0node는 20 번대 사용중입니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
css 코드 작성 영상은 어디에 있나요?
console.log('hello'); 찾아봐도 없는데 아직 영상은 없나요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
질문있습니다.
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂console.log('hello'); 안녕하세요, 강의 잘 수강하고 있습니다.궁금한게 있는데,혹시 vsCode 사용할 때단축키 설정이나플러그인 등추천해주실만한 게 있을까요?이를테면 괄호()안에 무엇을 누르면 탭을 빠져나오는 단축키가 있다던지 소소한 팁이 있으시다면 공유부탁드리고 싶습니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
git 주소
안녕하세요 소스 올려진 git링크 알 수 있을까요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
섹션 8. 상태 관리와 API - 2.동물 앨범 만들기-2-2
안녕하세요 효빈님 !해당 강의에서 상태 관리 코드들은 this.state, this.setState, this.render를 통해 생성자 함수의 프로퍼티로 작성하는 반면 App 컴포넌트의 init 함수는 프로퍼티가 아닌 함수로 작성하신 부분이 궁금하여 질문드립니다. 혹시 메서드로 작성한 함수와 자체적인 내부 함수로 작성한 기준이 있으실까요 ?!init 함수는 내부에서만 사용되는 함수이고, 다른 메서드 함수는 외부에서도 사용할 수 있어서 그런걸까요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
this 질문
App.js 에 있는 코드입니다.43라인에 this.setState({...}) 코드를 봤을때header 생성자에 들어가는 코드지만 //32 라인화살표 함수라서 this 는 Header 이 아니라App 이라고 생각하면 맞는걸까요 ?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
CityList 개발 실습진행 오류
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, '..'))); app.get('*splat', (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); app.listen(PORT, () => { console.log(`START SERVER`); }); 서버키고 localhost:3000에 접속하면저는 사이트에 이미지가 안나와요예제를 잘못따라친건가 싶어서 노트 예제 복붙하고 했는데도 안보이네요 콘솔탭보니까 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.라고 나오는데 해결법 아시나요?⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
