뷰 라우터 ? 뷰에서 라우팅 기능을 구현하 수 있도록 지원하는 공식 라이브러리. 뷰 라우터를 이용하여 뷰로 만든 페이지간 자유로운 이동 가능 태그 설명 페이지 이동태그. 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동 페이지 표시태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 깜빡 거리는 현상없이 이동을 클릭하면 URL끝이 바뀌게된다 URL에 보이는 해시값(#)을 없애려면? var router = new VueRouter({ mode: 'history', routes }); 히스토리 모드를 활용하면된다 마지막 .$mount() 는 el 속성과 같이 인스턴스를 화면에 붙이는 역할을 한다. 인스턴스에 위처럼 el속성..

Path Variable >> useParams React Router | useParams Declarative routing for React apps at any scale reactrouter.com URL 에 변수를 담아 보내는 것 현재는 Path 처리가 되어있지 않다 Path Variable 선언방법 /뒤에 콜론을 적어준다. 다만 이렇게 하면 이후에 /뒤에 아무것도 안적을때 No routes 오류가 뜨기때문에 예외처리하려면 콜론없는 Route를 지정해주는게 좋다 하지만 이번 프로젝트에서 id가 없는 일기는 존재하지 않으니 예외처리를 삭제해주었다 전달한 Path variable을 꺼내서 사용해보자 Diary 컴포넌트로 이동해 코드를 추가해줬다 import { useParams } from "re..

내 유튜브 구독 리스트중 하나인 노마드 코더 alpine.js => 경량 자바 스크립트 웹개발을 위한 제이쿼리 라고 생각하면 편하다 그리고 효과가 15개라 손에 금방 익힐 수 있다. 리액트 웹을 모두 만들기는 어렵고 가벼운 웹이 필요할 때 유용할 듯 Alpine.js Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going. Alpine is a collection of 15 attributes, 6 properties, and 2 methods. There is no bette..

https://reactrouter.com/ Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com 새로운 프로젝트를 위해 emotion-diary react앱을 새로 만들었다. 안쓰는 파일들 삭제해주고 리액트 라우터 라이브러리를 설치해줄 것이다 리액트 라우터 npm install react-router-dom@6 ..

전역 컴포넌트 등록 Vue.component('컴포넌트 이름', { //컴포넌트 내용 }); 컴포넌트 등록 지역 컴포넌트 등록 new Vue({ components: { '컴포넌트 이름' : 컴포넌트 } }); 컴포넌트 등록 컴포넌트 등록 순서도 중요함! Vue 생성자 만들때 cmp보다 위에가있으면 출력결과가 나오지않는다. 뷰 컴포넌트 통신과 유효범위 앵귤러, 백본과 다르게 뷰는 컴포넌트로 화면을 구성하므로 데이터 공유가 불가 - 컴포넌트 마다 자체적으로 고유한 스코프를 갖고있기때문에 다른 컴포넌트의 값을 직접참조 할 수 없다 컴포넌트 등록 컴포넌트 등록 컴포넌트 등록 2개의 지역 컴포넌트를 등록하고 한 컴포넌트에서 첫번째 지역 컴포넌트 값을 직접 참조했을 때 컴포넌트 유효범위(스코프)로인해 아무것도 표..