inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

CityList 개발

CityList.js에서 api.js 파일의 API_URL이 렌더링이 안되는 오류가 있습니다!

해결된 질문

141

안연수

작성한 질문수 8

0

세션 9. 여행지정보 최종프로젝트 작성 중...

  1. CityList 개발 13:25분에서 CityList.js를 작성한 후 localhost:3000을 새로고침해도 전혀 변화없이 빈 화면만 출력이 됩니다!
    api.js에서 API_URL로 전달받을 https://trip-wiki-api.vercel.app/ 에서 도시 정보 40개 정보가 없더라고요, 그래서 웹 화면에 아무것도 출력되지 않아서 문의드립니다!

화면 캡처 2025-06-13 085203.png.webp

 

화면 캡처 2025-06-12 094032.png.webp

 

화면 캡처 2025-06-12 093807.png.webp화면 캡처 2025-06-12 093912.png.webp화면 캡처 2025-06-12 093941.png.webp
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();
}

javascript rest-api spa dom

답변 1

0

효빈 Hyobin

안녕하세요 안연수님!

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