작성한 질문수 18

1

안녕하세요 🙂

질문 1.

<q-list :style="{'min-width': 100}">
<q-list style="min-width: 100px">
위의 두 가지는 같은 결과를 보여주는 것을 확인했습니다.
:(v-bind) 의 유무가 { }(중괄호) 사용 여부에 영향을 준 것일까요? 어떤 영향을 준 것일까요?

답변
v-bind는 객체(예: { name: 'gymcoding' })를 바인딩 할 때 사용하는 Vue directive 중 하나입니다. 그러므로 객체표현식인 {}(중괄호)를 사용한것입니다.

질문 2.

const leftColStyle = computed(() => ({ hidden: $q.screen.lt.md }));
위 코드에서 { }(중괄호)을 ( )(소괄호)로 한번 더 감싼 이유는 뭘까?

답변
화살표함수(Arrow Function)에서 객체 리턴을 한 줄로 표현할 때 사용할 수 있습니다. 아래 링크를 보시면 해당 문법을 확인할 수 있습니다.
[MDN] 화살표함수

질문 3.

const totalCount = computed(() => response.value.headers['x-total-count']);
const totalCount = ref(response.value.headers['x-total-count'])

답변
computed(콜백함수) 콜백함수내의 반응형 데이터가 변경했을 때 다시 연산하여 값을 할당하는데요. 위 코드에서 response의 데이터가 변경되었을때 totalCount에 새로운 값을 할당하기위해서는 computed()를 사용해야겠죠? ref(response.value.headers['x-total-count']) 해당 코드는 단순히 초기값만 설정할 것이고요.

질문 4.

flex와 row, column은 동급의 개념일까요? 
container 안에서, container에 포함된 items들을
helper classes들을 통해 배치하는 것은 flex와 row/column이 동일하다고 생각했습니다.
차이..점을 모르겠습니다.
column은 flex-direction이 column인 flex일 뿐이라는 생각이 듭니다.
flex flex-center
row를 사용하면 items-center, justify center를 사용해야했던 것을 flex를 사용하면 flex-center로 한 번에 정렬 가능하다는 정도의 차이도 확인했고요.

답변

맞습니다 🙂 flex, row, column은 Flex Container로 동급의 개념들입니다. 하지만 조금 차이가 있는데요.
저의 경우에는 Grid, List 배치를 해야할 경우에는 row, column을 사용하고요. 단순이 items들을 좌, 우, 중앙 배치해야 하는 경우에는 flex를 사용하는 편입니다. row를 이용해서 배치를 해보신후 row를 flex로 변경하고 개발자도구로 확인하시면 Style의 자세한 차이를 알 수 있을거에요~!

예를들면

<div class="flex">
  <div class="col-6">AAAAA</div>
  <div class="col-6">BBBBB</div>
</div>
<div class="row">
  <div class="col-6">CCCCC</div>
  <div class="col-6">DDDDD</div>
</div>

이렇게 해보신 후 개발자도구에서 Flex Item(.col-6)들에게 적용된 스타일을 보시면 차이가 있는것을 확인할 수 있습니다.