인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

정우님의 프로필 이미지

작성한 질문수

웹 프론트엔드를 위한 자바스크립트 첫걸음

섹션7-4 api사용해서 명언 설정하기

해결된 질문

작성

·

36

0

🚨질문 작성법 및 안내사항

질문 작성법
- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)
- 질문은 최대한 구체적으로 작성해주세요.
- 비슷한 질문이 올라와있는지 확인해주세요.
- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.

if (quoteItem) {
    //localstorage에 quote가 있다면
    let { createDate, quoteData } = JSON.parse(quoteItem);
    if (createDate === `${month}-${date}`) {
        quoteElement.textContent = `"${quoteData}"`;
    } else {
        getQuote();
    }
} else {
    //localstorage에 quote가 없다면
    getQuote();
}

안녕하세요 강사님!
api 활용해서 명언 설정하기 강의를 듣는 중에 마지막 로컬스토리지에 조건문을 하고 나서 명언이 나오고 그다음 새로고침을 하면 undefined가 출력이 되는데 어느쪽이 문제 일까요..?
혹시 오타가 있나해서 강의 대본에 코드를 복붙해도 결과가 똑같아서 질문드립니다!
안내사항
- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다.

답변 2

0

효빈 Hyobin님의 프로필 이미지
효빈 Hyobin
지식공유자

안녕하세요 정우님 🙂 질문주셔서 감사드립니다.

새로고침시에 undefined가 출력된다면 api 호출 오류가 아닌,
아마 로컬 스토리지에서 명언을 꺼내올 때 오류가 발생하는 것 같습니다.

현재 날짜와 로컬 스토리지에 저장된 날짜가 동일한 경우,
로컬 스토리지에 저장된 명언을 불러오는 방식으로 동작 되기 때문에,
해당 코드에서 오류가 없는지 확인 해주세요!

여전히 문제가 발생한다면 전체적인 코드를 다시 올려주시면,
제가 확인해보도록 하겠습니다. 감사합니다.

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. 정우님!

언급하신 문제는 로컬 스토리지에서 저장한 데이터를 가져올 때 발생하는 것 같습니다. localStorage에서 데이터를 가져와서 JSON.parse()로 객체를 해석할 때, 올바른 데이터 구조인지 확인할 필요가 있습니다. quoteItem으로부터 createDatequoteData를 정확히 추출하지 못했을 가능성이 있습니다. 따라서 몇 가지 점검해보면 좋을 것 같습니다.

  1. 데이터 저장 형식 확인: 로컬 스토리지에 저장할 때와 동일한 형식으로 데이터를 저장하고 있는지 확인하세요. 데이터 저장시 형식이 다르면 JSON.parse()가 오류를 일으킬 수 있습니다.

  2. 로컬 스토리지 확인: 브라우저의 개발자 도구를 열고, Application 탭에서 Local Storage에 접속하여 현재 저장된 데이터가 무엇인지 확인해 보세요. 데이터가 올바르지 않은 형식으로 저장되어 있으면 문제가 발생할 수 있습니다.

  3. 데이터 저장 시점: quoteDataundefined로 나오는 상태는 localStorage에 저장된 데이터가 제대로 초기화되지 않았기 때문일 수 있습니다. 확인 후, 로컬 스토리지에 데이터를 저장하는 함수가 정상적으로 호출되는지, 그리고 quoteData가 제대로 저장되고 있는지를 체크해 보세요.

관련된 문제 해결을 위해 이미 비슷한 질문이 올라와 있는지 확인해 보시기 바랍니다:

  • 디지털시계 개발하기 - 해당 답변에서는 localStorage와 데이터 파싱 관련 문제를 다뤘습니다. 명확한 형변환을 위해 JSON.parse()JSON.stringify()를 적절히 사용하는지 점검해 보세요.

위 답변들을 통해 문제 해결에 도움을 받으실 수 있을 겁니다. 추가적으로 궁금한 점이나 세부적인 코드 설명이 필요하다면 이어서 질문해 주세요. 강사님께서 바로 답변해 주실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

정우님의 프로필 이미지

작성한 질문수

질문하기