# FE
Rules of Hooks
Hooks는 자바스크립트 함수지만 두 가지 규칙을 지키며 사용해야 합니다. 이런 규칙은 linter plugin을 통해 자동으로 적용할 수 있습니다. Only Call Hooks at the Top Level Hooks를 루프 내부, 조건(condition), 또는 중
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