CodeHoon

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Vue.js 를 사용하던 와중, 모달(modal) 팝업을 사용하려고 하는데, 음.. css 로 z-index를 설정하고 뭐하고~ 해도 모달팝업이 정상적으로 안나오더라구요?

그래서 공식문서를 조금조금 뒤져보곤 했습니다.
공식문서에서도 Teleport를 Modal-Popup 에서 사용했습니다. (맨 아래 링크)

그래서 알게 된 <Teleport>

😎 How to Use

네, Vue.js 답게 사용자에게 편의성을 제공해주죠. 매우매우 간단합니다.

<Teleport to="body" v-if="updateClicked">
  <UpdateItemModal @closeModal="closeModal" /> <!--모달 컴포넌트-->
</Teleport>

저는 이렇게 사용하였습니다.

 to  속성(attribute)이 태그의 대상을 나타내어 body 태그 ( 단 한개의 body가 있으니까요) 를 바라보게 되어 element의 최상단에 위치하게 된다고 합니다.

그래서 z-index 999 로 설정하고 출력하였더니 정상적으로 출력되었습니다. (이렇게 부족한 css 실력을 메웁니다.)

😶 부연설명 

- v-if 를 통해 어떤 내용을 클릭하면 modal 창이 출력되도록 설정하였습니다.
- closeModal 이벤트를  emit으로 받도록 하였습니다.

결과물 이미지입니다.

이상입니다.

1. 분산형 버전 관리 시스템
2. 이력 관리 저장소
3. 변경을 기록하는 Commit
4. Work Tree & Index

1. 분산형 버전 관리 시스템

  ① 동시 편집 시, 발생할 수 있는 덮어쓰기 현상을 방지할 수 있다.
    -> 편집 내용이 충돌 시, 알림
  ② 소스코드가 변경된 이력을 쉽게 확인이 가능하다.
  ③ 특정 시점에 저장된 버전과 비교하거나 특정 시점으로 되돌아갈 수 있다.

2. 이력 관리 저장소

비슷한 파일이라도 실제 내용 중 일부가 다르면 다른 파일로 인식
  -> 파일을 변경사항 별로 구분해 저장이 가능

① 원격 저장소 (Remote Repository)
  -> 파일이 원격 저장소 전용 서버에서 관리되며, 여러 사람이 함께 공유하기 위한 저장소
② 로컬 저장소 (Local Repository)
  -> 내 PC, 개인 전용 저장소

3. 변경을 기록하는 Commit

① 파일 및 폴더의 추가/변경 사항을 저장소에 기록하려면 ‘Commit’을 해야한다.
② 시간 순으로 저장된다.

③ 각 커밋에는 영문/숫자로 이루어진 40자리 고유 이름이 붙는다.
  → 저장소에서 커밋을 구분하고 선택하는 기준이다.
④ 커밋 시, -m 옵션으로 메세지를 필수로 기입해야한다.

💡 Commit 작성팁
1번째 줄 : 커밋 내의 변경 내용을 요약
2번째 줄 : 빈 칸
3번째 줄 : 변경한 이유

4. Work Tree & Index

① 작업트리 - Work Tree 
  → Git에서 말하는 작업 폴더

② 인덱스 - Index
  → 커밋을 실행하기 전의 저장소와 작업 트리 사이에 존재하는 공간
  → `스테이징(Staging)한다` 라고 표현하기도 함.

v-for에는 유용한 기능이 하나 더 있다.

v-for="(value, name, index) in MyObject"

이런식으로 적용이 가능한 점인데, value와 name은 각각 MyObject에서 value와 key를 나타낸다.

예시를 들어보자면,

MyObject = {
  title : 'the title',
  author : 'Sanghoon',
  description : 'Descriptions... This is Vue.js'
 }

MyObject가 이렇게 있을 때,

<div  v-for="(value, name, index) in MyObject">
    {{ index }}.   {{ name }}  :  {{ value }}
</div>

를 작성한다면,

0. title :  the title
1. author  :  Sanghoon
2. description : Descriptions... This is Vue.js

가 된다. 그러니까, 결국에는 json 형태의 key와 value를 출력할 수 있다는 것이다.