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();
}
답변 1
0
안녕하세요 안연수님!
https://trip-wiki-api.vercel.app/?start=0
강의에서 사용되는 api는 위와같이 start=startIdx 를 뒤에 작성해주어야합니다.
다만 수강생분들이 헷갈리지 않도록 https://trip-wiki-api 에도 접속 가능하게 변경해둔 상태이니, 다시 한 번 확인 부탁드릴게요! 감사합니다.
콜백 함수 메서드 등록
0
82
2
ssr방식 경험
0
75
1
compare 함수 설명에 오해의 소지가 있어보입니다.
0
82
2
API를 비동기 처리하는 이유가 끊겨서 그런건가요?
0
96
2
DOM 트리 보는 곳
0
80
1
배열과 객체의 구조분해할당 방법이 다른 이유
0
82
2
배열 메서드가 순수 함수인지 확인하는 방법
0
72
2
콜백 함수의 매개변수로 _를 쓰는 이유가 무엇인가요?
0
71
2
콜백 함수의 매개변수는 어떻게 구분되나요?
0
58
1
호이스팅 안쓰는게 좋나요?
0
54
2
함수 선언식과 함수 표현식은 어떤 경우에 쓰면 좋나요?
0
81
2
?. 연산자는 자바스크립트 연산자인가요?
0
45
1
JS의 논리 연산자 &&, ||가 리액트의 조건부 렌더링 &&, ||인가요?
0
82
2
자바스크립트 질문
1
103
2
동물앨범만들기 1-1 api 오류
0
54
2
CityList개발-handleLoadMore함수질문
0
69
1
객체와 배열의 const 차이
0
45
1
const 객체/배열 차이
0
62
2
header 개발 새로고침 오류
0
64
2
Promise 객체
1
57
2
cityList 렌더가 안되는 문제
0
51
2
init 함수 앞에 await
1
64
2
동물 앨범 만들기 pushtState 관련
0
58
2
동물 앨범 만들기 사진 관련 문의
0
74
2





