173만명의 커뮤니티!! 함께 토론해봐요.
미해결
React + API Server 프로젝트 개발과 배포 (CI/CD)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 2강에서 express npm run dev하다가 오류빨간글씨 나오는 분들 참고하세요 자료 다운받으셔서 swagger부분 코드 pdf복사하면 yaml형식이 맞지 않아서 오류가 나는데 참고해서 수정하세요
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
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 개발까지
세션 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 개발까지
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 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.0 node는 20 번대 사용중입니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
console.log('hello'); 찾아봐도 없는데 아직 영상은 없나요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 console.log('hello'); 안녕하세요, 강의 잘 수강하고 있습니다. 궁금한게 있는데, 혹시 vsCode 사용할 때 단축키 설정이나 플러그인 등 추천해주실만한 게 있을까요? 이를테면 괄호()안에 무엇을 누르면 탭을 빠져나오는 단축키가 있다던지 소소한 팁이 있으시다면 공유부탁드리고 싶습니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 소스 올려진 git링크 알 수 있을까요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 효빈님 ! 해당 강의에서 상태 관리 코드들은 this.state , this.setState , this.render 를 통해 생성자 함수의 프로퍼티로 작성하는 반면 App 컴포넌트 의 init 함수 는 프로퍼티가 아닌 함수로 작성하신 부분 이 궁금하여 질문드립니다. 혹시 메서드로 작성한 함수와 자체적인 내부 함수로 작성한 기준이 있으실까요 ?! init 함수는 내부에서만 사용되는 함수이고, 다른 메서드 함수는 외부에서도 사용할 수 있어서 그런걸까요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
App.js 에 있는 코드입니다. 43라인에 this .setState({...}) 코드를 봤을때 header 생성자에 들어가는 코드지만 //32 라인 화살표 함수라서 this 는 Header 이 아니라 App 이라고 생각하면 맞는걸까요 ?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 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일 이후에 적용됩니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
목소리가 시원 시원하셔서 강의가 잘들어옵니다. 다름이 아니라 document.querySelector('div.content'); 이렇게 프로그래밍 하면 만약에 같은 페이지에 새로운 div content 클래스가 추 후에 또 생성되면 생각하지 않았던 동작이 일어 날수 있지 않나요 ? id 값은 유일하니까 id 값을줘서 dom 컨트롤 하는 방식이 좋나요 ?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
말티즈 문구 추가 하실때 textContent 사용해주셨는데 아래 3개가 다 가능한거같은데 아무거나 사용해도 되는걸까요? $type.textContent = '말티즈'; $type.innerHTML ='말티즈' $type.innerText='말티즈';
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요. promise.all([]) 자바스크립트는 병렬로 실행할수 없는데 promise.all 을 사용하면 병렬이 가능한건가요 ?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
npm i express 로 express 를 설치 후 강의와 같이 코드를 작성했지만 .. app.get('/*', (req, res) => {...}); 에서 오류가 발생합니다. TypeError : Missing parameter name at 2: https://git.new /pathToRegexpError 가 발생합니다. 구글에서 검색하여 보니 Express v5에서 '/*' 형식은 맞지 않는 것으로 보입니다. 따라서 아래와 같이 코드를 정규식으로 변환하니 제대로 실행 되었습니다. app.get(/^\/(.*)/, (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); 혹시 정규식 말고 다른 수정 방법이 있는지 알고 싶습니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
template 변수를 빈 배열 리터럴 초기화한 후 배열에 push() 메서드를 사용하여 생성된 이미지 요소를 삽입하는 것이 맞다 봅니다. 나중에 출력 시 join() 메서드로 문자열 출력하는 것이 좋겠네요... 🙂 const API_URL = 'https://animal-api-two.vercel.app/'; const $content = document.querySelector('div.content'); let template = []; const getData = async () => { let res = await fetch(API_URL); try { if (res) { let data = await res.json(); data.photos.forEach((elm) => { template.push(`<img src="${elm.url}" alt="${elm.name}" />`); }); $content.innerHTML = template.join(' '); } } catch (err) { console.log(err); } }; getData(); ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
조건부 렌더링을 통해 다음과 같이 url 에 따라 특정 컴포넌트를 생성하는 방법을 이해했습니다. const render = () => { const path = this.state.currentPage; $app.innerHTML = ""; if (path.startsWith("/city")) { renderHeader(); renderCityDetail(); } else { renderHeader(); renderRegionList(); renderCityList(); } }; 이 경우, 컴포넌트가 추가될 때마다 this.setState 에 추가된 컴포넌트의 setState 를 추가로 호출해야 하는 번거로움도 사라진 것 같습니다. 하지만, 상세 페이지와 메인 페이지를 계속 왔다갔다 할 경우, 공통으로 호출되는 renderHeader() 와 다른 렌더링 함수가 호출되고 인스턴스가 계속 생성이 될 것 같습니다. 이렇게 인스턴스가 계속 생성이 되면, 메모리 효율이 좋지 않을 것 같은데, React나 Vue 같은 도구에서는 이런 문제를 해결해주고 있나요? 아니면, 이 정도는 크게 신경 안써도 될 정도로 미비한 건지 궁금합니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물 앨범 만들기 코드 챕터에서 강의에서 제공하고 API_URL인 https://inf.run/7Sf7J 주소로 들어가면 데이터가 보여지는게 아니라 아래 이미지처럼 나오는데 왜그럴까요?
