Provide(제공) / Inject(주입)
( 사진으로 보면 한눈에 알수있다. 데이터를 특정 컴포넌트까지 바로 전달가능하다 )- 부모템플릿에서 자식의 자식의 자식까지 전달할 props를 불필요하게 설정할 필요가 없음 (진작 알았다면..)- 반응성을 가진 변수를 전달시 전달 받은 후에도 그대로 반응성을 가짐부모
Computed값수정/스타일동적바인딩/v-for구조분해할당/watch의여러변수감시
( 5번의 예제. 렌더링된 결과 확인)1. computed값 수정하기computed의 값을 수정하기 위해선 setter를 사용함<script setup> import { ref, computed } from 'vue' const firstName = ref('Joh
속성과 이벤트의 동적바인딩 및 디렉티브 사용예제
1.속성을 동적바인딩하는 방법객체명 = { id : 'id명'}<요소명 v-bind="객체명" >2.이벤트 동적바인딩@[eventName]=이벤트핸들러3.속성 동적바인딩const attrName='속성명'<요소명 :[attrName]="'동적으로 속성을 등록합니다'"
조건부 slot / 동적 slot / 대체 컨텐츠를 사용한 slot
조건부 slotv-if="$slots.슬롯명"을 사용해서 slot을 조건부로 표시할수있다 (예제의 1번 참고)동적 slot변수에 슬롯명을 할당한후 동적으로 slot을 표시할수있다( 예제의 3번 참고 )#[변수명] v-slot:[변수명]등으로 사용가능하다대체 컨텐츠
slot 사용시 부모템플릿에서 자식컴포넌트의 매개변수 관리하기
아래와 같은 상황에 사용가능하다- (부모템플릿 ← 자식컴포넌트1 ← 자식컴포넌트2）와 같은 경우에 사용가능하다- 부모템플릿에서 자식컴포넌트1에서 자식컴포넌트2로 매개변수를 전달하는걸 관리가능하다예제1- 기본예제* 부모템플릿 <자식컴포넌트> <template
아부라 소바 나나이로
후쿠오카에 텐진에 위치한 소바집보통 소바가 아니라 아부라(기름) 소바라는 장르의 음식이다몸에 좋은 기름과 면을 사용해서 맛있고 또한 매운맛 또한 수제 시치미를 넣어서 조절할수있기 때문에 한국인의 입맛에 딱 맞다하지만 오너분이 혼자서 운영하시기때문에 조금 대기시간이 있을
git config pull.rebase false
git pull 명령어를 실행시 발생할수있는 경고이다경고의 내용은 아래와 같다- 브랜치를 가져올때 merge형식으로 받아올것이가- rebase형식으로 받아올것인가- fast-forward only로 받아올것인가를 정해달라는 내용이다이번의 정리에는 merge와 rebas
npm install과 npm ci 의 차이
지인과 개발을 하던 도중 프로젝트에서 알게 된 사실이다프로젝트 초기 설정시나 실서버에 배포할때 package.json 파일과 package-lock.json 파일이 존재할 경우npm install 명령어를 입력할때 package-lock.json 파일이 존재하므로 항상
Package.json과 Package-lock.json에 대해서
한마디로 정의하면 아래와 같다package.json은 설치할 패키지의 버전 범위이고package-lock.json은 실제 프로젝트에 설치한 패키지 버전이다package-lock.json의 사용이유버전 범위를 기록한 package.json만 존재한다면 해당 프로젝트를 사
flex의 flex-grow / flex-shrink / flex-basis에 대해서
flex사용이유레이아웃을 만들기 위해서요소의 배치를 쉽게 위해서flex의 컨테이너에서 사용되는 축약형flex-flow : column nowrap; /* 컨테이너 내 아이템들을 세로로 배치하고, 줄바꿈을 하지 않습니다 */flex-growcontainer에 여분의 공간
CSS의 가운데정렬(수직/수평) 방법 및 margin:auto에 대해서
아래의 1번의 예제1.transform의 transition을 이용한 방법 (수직/수평)가장 먼저 position설정후 top:50%와 left:50%를 맞춘다그러면 요소의 왼쪽모서리가 화면 정중앙에 위치하게 되지만 요소는 가운데에 정렬되지 않는다여기서 transfor
Position정리 relative / absolute / fixed / sticky
Sticky예제( 스크롤 하기전 sticky요소가 relative하게 위치한 모습 )( 스크롤 후 sticky요소가 viewport기준으로 top:10px부분 부터 fixed하게 위치한 모습 )Position 설명1.staticposition 속성을 지정하지 않으면,