함수, 변수의 호이스팅 부분 질문있습니다.

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

▶ 함수, 변수의 호이스팅

해결된 질문

작성

111

수정됨

함수, 변수의 호이스팅 강의 영상 부분에

if (storageData?.complete) {
    newLi.classList.add("complete");
  }

이 코드에서 storageData 뒤에 ? 이 물으표가 없으면 매개변수를 받아오지 않게 되니 undefined라고 강사님이 말씀하시는데 이게 무슨 말인지 잘 모르겠습니다.

그리고 ToDoList에서 리스트에 추가를 하고 더블클릭 삭제, 전체 삭제까지는 어느정도 이해가 되는데 로컬스트리지 전체 부분이 조금 이해도 어려운데 어떻게 이해를 하면서 공부를 하면 좋을까요?

react node.js seo graphql next.js

답변 2

노원두

지식공유자

안녕하세요! 부드러운족제비님!

storageData.complete은 우리가 일반적으로 알고 있는 것 처럼 profile.name, profile.age 등과 같은 객체에서 키를 접근하려는 용도와 동일합니다!

profile.name이 profile 이라는 객체에서 name 이라는 키를 꺼내오듯이,
storageData.complete은 storageData 라는 객체에서 complete 라는 키를 꺼내 오게 되는 것인데요!
여기서 storageData가 객체가 아닌 null 또는 undefined 인 경우에는, 그 안에 complete 이라는 키가 없기 때문에 꺼내올 수 없겠죠?!
뿐만 아니라, "객체도 아닌데 어떻게 complete을 꺼내오냐!" 라면서 에러가 나게 됩니다.

따라서, 여기서 storageData?.complete은 "storageData가 만약에 null 또는 undefined 처럼 비어있다면, 에러 내지 말고 그냥 무시하고, 그게 아니라 객체라면 그 안에 있는 complete을 꺼내와!" 라는 의미를 담고 있답니다!^^

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

storageData?.complete 코드에 대해 설명드리자면, 여기서 사용된 ?.는 옵셔널 체이닝(옵셔널 체이닝 연산자)입니다. 옵셔널 체이닝은 객체의 속성값을 읽을 때, 해당 객체 또는 속성이 undefined 또는 null이면 오류를 발생시키지 않고 undefined 값을 반환합니다. 즉, storageData가 undefined나 null이 아닐 경우에만 complete 속성값을 읽으려고 시도합니다. 만약 ?가 없다면, storageData가 undefined나 null일 때 complete 속성에 접근하려 시도하면서 오류가 발생할 수 있습니다.

로컬 스토리지에 대한 이해 부분은, 웹 스토리지 API 중 하나인 로컬 스토리지를 이용해 데이터를 클라이언트 측에 저장하고 관리하는 방법에 대해 배우는 것입니다. 로컬 스토리지는 브라우저를 닫아도 데이터가 유지되는 특징을 가지고 있어, ToDoList와 같이 사용자의 데이터를 임시적으로나마 저장해야 하는 웹 애플리케이션에서 유용하게 사용됩니다.

이 부분을 이해하기 위해서는 기본적으로 로컬 스토리지의 저장, 조회, 수정, 삭제 등의 기본적인 사용법에 대해 익히는 것이 좋습니다. 이를 위해 간단한 CRUD(Create, Read, Update, Delete) 작업을 로컬 스토리지를 사용하여 연습해 보는 것이 이해에 많은 도움이 될 것입니다. 또한, 실제 ToDoList에서 어떻게 데이터가 저장되고 관리되는지를 코드 단위로 분석해보며, 단계별로 하나씩 따라 해보는 사실적인 실습을 통해 보다 깊은 이해를 얻을 수 있을 것입니다.

학습하시는 과정에서 추가적인 도움이 필요하시면, 강의 페이지 내에 있는 [수강 전 문의 게시판]을 통해 강사님께 질문을 남기시는 것도 좋은 방법입니다. (출처)

수강 전 문의하기

학습에 있어 더 궁금하신 점이 있다면 언제든 질문해 주세요.

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

함수, 변수의 호이스팅 부분 질문있습니다.