# FE
Vuex
Vue.js Application에 대한 상태관리 패턴 + 라이브러리 Application의 모든 컴포넌트들의 중앙 저장소 역할을 한다. (데이터 관리)부모, 자식의 단계가 많이 복잡해진다면 데이터의 전달하는 부분이 매우 복잡해진다Application이 여러 구성요소로
Vue-Router
라우팅 : 웹 페이지 간의 이동 방법Vue.js의 공식 라우터라우터는 컴포넌트와 매핑Vue를 이용한 SPA를 제작할 때 유용하다URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여준다CDN 방식<script src="https://cdn.jsdeliv
Axios
Vue에서 권고하는 HTTP 통신 라이브러리는 axios이다.Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어있고 API가 다양하다.Promise란 서버에 데이터를 요청해 받아오는 비동기 로직 처리에 유
[나혼웹] float, clearfix
float를 적용하고 그 요소들의 container(부모 요소)에 미리 설정한 clearfix를 적용합니다.이때, clearfix는 content=""; clear:both: display: block;을 가지고 있어야 합니다.img 태그를 왜 div 태그를 둘러싸서
Vue Component
Vue의 가장 강력한 기능 중 하나HTML Element를 확장하여 재사용 가능한 코드를 캡슐화함Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용Life Cycle Hook 사용 가능전역 컴포넌트와 지역 컴포넌트가 있다전역 컴포
Vue Event
DOM Event를 청취하기 위해 v-on dircetive 사용inline event handlingmethod를 이용한 event handlingv-on을 사용하여 DOM 이벤트가 트리거 될 때 JS를 실행할 수 있다.이벤트 발생시에 로직 처리를 v-on에 넣기 힘
[나혼웹] 비디오 삽입
padding-top:에 %를 넣으면 부모요소의 가로 사이즈에 영향을 받는다.부모 요소의 가로 너비와 같고 세로 사이즈는 가로 너비의 비율로 표현한다.htmlcssvideo-ratio에 heigth를 지정하지 않고, padding-top을 이용하는 이유는 반응형 때문이
[나혼자웹] Header
header 명시 이유 굳이 다른 기능이 없다고 생각 되어서 그 이유에 대해서 찾아 봤다. header, nav, aside 모두 시멘틱 태그라고 불리고, 의미론적 이유 때문에 쓰인다고 한다. header 안에 inner가 있어야하는 이유 inner의 height가
TIL(22.05.05)
git switch \[-c] branch_namegit checkout \[-b] branch_name둘다 깃 branch를 이동할때 쓰이며, switch는 -c 옵션을, checkout은 -b 옵션을 통해서 branch를 생성하면서 이동이 가능git branch -
TIL(22.05.04)
아오CSS다양한 svg 파일은 무료로 쉽게 구할수 있지만, 간단한 모양은 css만으로 쉽게 해결이 가능하다. ::before속성과 ::after를 이용해서 얇은 막대모양을 만들어 각각 45도, -45도 회전해서 x모양을 만들수 있다.react-router v6 설치re
Directives
디렉티브는 v- 접두사가 있는 특수 속성디렉티브 속성 값은 단일 JavaScript 표현식이 된다. (v-for는 예외)디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용v-model : 양방향 바인딩 처리를 위해서 사용한다. \- e
Vue Instance
el : Vue가 적용될 요소 지정. CSS Selector 이거나 HTML Elementdata : Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태이다template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타