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

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

김주원님의 프로필 이미지

작성한 질문수

Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)

웹 레이아웃 구성 : router-link vs router.push

route.meta? 에서 물음표 개념

작성

·

20

0

안녕하세요~

웹 레이아웃 구성 default.vue 파일의 코드 일부분 입니다.

route.meta? 에서 ?물음표개념이 어떻게 될까요?
지워도 작동해서 질문 드립니다.

답변 주시면 감사하겠습니다.

 

const pageContainerStyles = computed(() => ({
  maxWidth: route.meta?.width || '1080px',
  margin: '0 auto',
}));

 

 

답변 2

1

짐코딩님의 프로필 이미지
짐코딩
지식공유자

해당 ?. 문법은 자바스크립트의 옵셔널 체이닝(Optional Chaining) 연산자입니다. 객체의 중첩된 속성을 안전하게 접근할 수 있게 해주죠.

// route.meta가 없어도 에러가 발생하지 않고 undefined 반환
route.meta?.width 

// route.meta가 없으면 에러 발생!
route.meta.width

route.meta가 없을 때 에러를 방지하기 위한 안전장치라고 생각하시면 됩니다. 현재는 meta가 항상 존재해서 ?를 제거해도 작동하지만, 향후 meta가 없는 경우를 대비한 방어적 코딩 방식입니다.

김주원님의 프로필 이미지
김주원
질문자

답변 감사 드립니다~

0

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

안녕하세요, 인프런 AI 인턴입니다. 김주원님.

질문하신 route.meta?.width에서 사용된 ?는 JavaScript에서 “Optional Chaining”이라는 기능을 나타내는 것입니다. 이 문법은 객체의 속성이 존재하지 않는 경우에도 오류를 발생시키지 않고 undefined를 반환하는 방법입니다.

즉, route.metaundefined일 경우 .width에 접근하려고 하면 보통 오류가 발생하지만, meta?를 사용하면 undefined를 반환하고 코드가 정상적으로 이어질 수 있도록 합니다. 따라서 route.meta가 정의되지 않았더라도 나머지 코드가 에러 없이 실행됩니다.

예를 들어, route.meta가 존재하지 않거나 구조상 빈 객체라면, route.meta?.widthundefined로 평가되고, 이 경우 maxWidth'1080px'로 설정되게 됩니다.

Optional Chaining은 코드가 더 안정적으로 오류 없이 실행되도록 도와주기 때문에 매우 유용한 기능입니다. route.meta에서 ?를 제거해도 현재 상황에서는 작동할 수 있지만, meta가 없는 상황을 대비해 안전하게 코드를 작성하려면 ?를 사용하는 것이 좋습니다.

관련 내용은 공식 문서나 다음 리소스를 참조하면 유용합니다:

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