잉어빵

 최근에 팀내 개발자 중 A 개발자가 나한테 찾아와서는 템플릿 내부에 코드를 잘 작성하였는데 화면에서는 안보이고 있다고 찾아옴...

A 개발자 나름 문제 해결을 위해서 찾아봤는데 문제점은 template 태그가 존재하고 해당 태그의 css display가 none 이 되어 있어서 내부 코드들이 안 보이는 것 같다고 이것이 문제다! 라고 하였다...

그런데 정상적인 코드면 template 가 보일 이유가 있나?... 작성된 코드를 가보았당

어... 음 template 내부에 template 코드가 들어가있네... 

template 태그는 특정 디렉티브 ( v-if, v-for, v-else 등..) 이 없으면 template 엘리먼트 그냥 들어간다.. 단 최상위 탬플릿 태그랑 이런 것들은 별개 사항

결론은 vue 공식 문서 다 ~ 있으니까 다시 읽고 나한테 설명하라고 함

출처 - vue 래퍼..

최근에 사수가 퇴사하게 되면서 팀 사정상 부서 이동이 되었고... 기존 파트에서 사용하던 vue2 프로젝트를 vue3 로 변경하는 작업을 진행 하고 있는 중입니다.

작업은 vue3 버전 템플릿 형태는  tempate - script (setup) - style 형태로 아래와 같이 사용하고 있는데

<template>
    <div>

    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

컴포지션 api - setup 형태는 인스턴스 구조에 제약을 두고 있지 않다보니... 자동으로 snippet 이 적용이 안되고 있습니다.

그래서 개발자 개인적인 취향으로... 보기 좋게 작성 하기 위해서 vscode 내부에 snippet 를 임의로 커스텀 하여 사용 하였고 추가 된 주석은 아래와 같음..

<template>
    <div>

    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
// ✅ 1. Import 필요한 모듈
// ✅ 2. Props & Emits 정의
// ✅ 3. 반응형 상태 선언
// ✅ 4. Lifecycle Hooks (마운트/언마운트 시 로직 실행)
// ✅ 5. Watcher (props 값 변경 감지)
// ✅ 6. 이벤트 핸들러
</style>

코드 snippet 은 아래 설정 사용 하였습니다...

"Vue 3 Setup Component": {
      "prefix": "v3s",
      "body": [
        "// ✅ 1. Import 필요한 모듈",

        "// ✅ 2. Props & Emits 정의",

        "// ✅ 3. 반응형 상태 선언",

        "// ✅ 4. Lifecycle Hooks (마운트/언마운트 시 로직 실행)",

        "// ✅ 5. Watcher (props 값 변경 감지)",

        "// ✅ 6. 이벤트 핸들러",

      ],
      "description": "Vue 3 Composition API - setup() 기본 구조 템플릿"
    }

시멘틱 사용 이점

• 웹 접근성 향상
• 가독성 향상 및 유지보수 편리
• 검색엔진 최적화

div 태그에 class ="header","footer","main" 이런식으로 하는 것보다 body , header , main, footer 식으로 관리하는게 편하다

종류 (자주 사용하는거 간단하게..)

• header : 페이지에 대한 정보 담는 태그 , 페이지 상단 위치
• nav : 페이지와 전체적으로 관련성은 있지만 세부 내용과는 직접적인 연관 없는 분리 된 내용 포함
• aside : 주로 main content 를 정의 할 경우에 사용
• section : 문서, 프로그램등의 일반적인 섹션 표현
• article :  여러가지 아이템을 묶어 재사용 가능하게 한 그룹화
• footer :  주로 저작권 정보 및 서비스 제공자 정보 등을 기입 하며 페이지 하단 위치

box-sizing

• content-box :  콘텐츠 영역을 기준으로 크기를 정함
• border-box : 테두리 기준을 크기로 정함
• initial :  기본값으로 설정
• inherit : 부모 요소의 속성 값을 상속

border-box 안하면 padding 제외 사이즈가 width 값으로 정해지기 때문에 디자인이랑 다른 결과물 나올 수 있음

width , height 에 대한 정리

인라인 요소

대표적인 인라인 태그 span 태그 기준

width : 컨텐츠 크기만큼 늘려줌

height :  컨텐츠 크기만큼 늘려줌

블록 요소

대표적인 블록 태그 div

width: 가로요소를 부모의 크기만큼 최대한 늘려줌

height: 세로요소를 컨텐츠 크기만큼 늘려줌

세로 요소에 지정된 값이 없고 컨텐츠 없으면 출력이 안됨. 

margin : 0 auto; 는 대표적인 중알 정렬 속성 

1. margin : 0 auto

0 값은 위 아래 여백을 주지 않는다 의미. auto는 좌우 여백을 균등하게 배분 처리 하겠다는 의미

2. margin auto 안되는 상황

margin: auto 는 inline 속성에는 적용 되지 않음. inline 속성은 자기 자신 만큼의 영역값 (width, height) 을 지니고 있기 때문임

• inline 속성이 아닌 block 속성으로 태그 변경
• span 대신 div 태그 사용
• 요소의 display 속성을 block 으로 변경

Block vs Inline

• 대부분 HTML element 는 block 요소
• header, footer, p, li, table, div, h1 등 모두 block 요소에 해당
• block 요소 의미는 해당 요소 옆(좌우)에 다른 요소를 붙일 수 없다라는 의미
• block 요소와 성질이 반대인 inline 도 존재
• inline 요소는 요소끼리 서로 한줄, 바로 옆에 위치 할 수 있음
• inline-block 은 하이브리드 모드라고 생각하면 됨. 기본적으로 inline 처럼 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치가 가능하지만 block 처럼 width , heigth 속성 지정 및 margin , padding 속성의 상하 간격 지정이 가능함