참고 자료 : https://joshua1988.github.io/web-development/vuejs/v-model-usage/ 🚀 V-model이란? 🔽 속성 공식 문서에 안내된 v-model 속성의 사용법은 아래와 같아요. new Vue({ data: { inputText: '' } }) 이렇게 이용자의 입력을 받는 UI 요소들에 v-model이라는 속성을 사용하면 입력 같이 자동으로 뷰 Data 속성에 연결되게 되는 것이에요. 🔽 v-model 동작 방식 v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작하게 되요. 매번 개발자가 하나하나 v-bind와 v-on 속성을 다 지정해 주지 않아도 좀 더 편하게 개발할 수 잇게 고안된 문법인 것이에요. 앞에서 살펴본 코드를 아래와 같이..

🚀 HMR(Hot Module Replacement) `HMR`은 브라우저를 새로 고치지 않아도 `Web Pack`으로 Build한 결과물이 Web Application에 실시간으로 반영될 수 있게 도와주는 설정 입니다. 브라우저 새로 고침을 위한 `Live Reload` 대신 이용 가능하고, `Web Pack Dev Server`와 함께 이용할 수도 있는 것이에요. 🔽 HMR 설정 React.js, 앵귤러, Vue.js와 같이 대부분의 Framework에서 이미 `HMR`을 이용할 수 있는 Loader들을 지원하고 있으나, 만약 개별적으로 설정하고 싶다면 아래와 같은 방식으로 설정할 수 있습니다. module.exports = { devServer: { hot: true } } Dev Server에 O..

🚀 Vuex 🔽 개요 Vuex(뷰엑스)란 Application 상태 관리(State Management)를 돕는 Library인 것이에요. 먼저 상태(State)란 Vue의 data 속성과 비슷한 것이에요. 여기서 상태 관리란 현대 FE(Front End) Framework에서 모두 사용하는 개발 Pattern을 의미하는 것이에요. Vue.js에서는 Vuex라는 상태 관리 Pattern을 사용하는 것이에요. 상태 관리가 필요한 이유는 Component의 숫자가 많아졌을 때, Component 간 Data 전달이나, 관리가 어렵기 때문인 것이에요. Data 전달을 더 명시적이고, 효율적으로 하기 위한 방법이 상태 관리랍니다. Vuex란 Vue.js의 상태 관리 Pattern이자 Library인 것이에요. ..

🚀 Html Tag 정리 🔽 Block Level Element(블록 레벨 요소)와 Inline Level Element(인라인 레벨 요소) Box Model은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라져 버리는 것이에요.그렇기 때문에 먼저 블록 레벨 요소와 인라인 레벨 요소에 대해 공부할 필요가 있는 것이에요. 블록 레벨 요소는 태그를 사용해 요소를 삽입 했을 때, 혼자 한 줄(한 행)을 차지하는 요소인 것이에요. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 것이에요. 따라서 그 요소의 왼쪽이나, 오른쪽에 다른 요소가 올 수 없는 것이에요. 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 하는 것이에요. 대표적인 태그로는 , 태그가 있는 ..

🚀 CSS 기본 정리 위의 내용 중 position, display, width, height, overflow는 '이 곳'에 예쁘게 정리 해 둔 것이에요. 🔽 background 이름이 아주 직관적이에요. 바로 배경색을 의미하고, 값은 color 속성 포맷을 이용하는 것이에요. Tag의 크기가 없을 경우 배경색이 표시되지 않는 다는 것은 참고해야 될 사항인 것이에요. 예시 코드 상자상자상자1 상자상자2 상자상자 출력 결과 주니하랑은 해당 배경 색상을 16진수 표기법으로 이렇게 준 것이에요. 그런 뒤 준비 해 둔 사진을 넣어 주고, no-repeat 속성을 주었는데, background-image로 컨테이너 보다 작은 이미지를 적용하면 이미지가 반복되어 출력할 수 있게 해주는 것이에요. 이 때, `bac..

🚀 Color 속성 color 속성은 단어 뜻대로 색상, 정확히는 글자의 색상을 의미하는 것이에요. `red`, `blue` 등 이미 정의된 색 `#000`, `#FFFFFF` 등의 16진수 색상 코드 `rgb(255, 255, 255)` 등의 rgb 형 색상 `rgba(200, 100, 150, 0, 5)` 등의 투명도(Alpah)가 적용된 rgba 형 색상 color 속성은 위 목록 등의 값을 이용할 수 있고, 기본값은 `inherit`으로 부모의 색상을 가져오는 것이에요. 🔽 예시 Code text1 text2 text3 text4 출력 결과 참고 자료 : https://ofcourse.kr/css-course/color-%EC%86%8D%EC%84%B1 CSS color 속성 - ofcourse..