JavaScript/Vue.js
-
community-app 클론 코딩JavaScript/Vue.js 2021. 1. 3. 16:03
🧀 named router view 동시에 두 개 이상의 컴포넌트를 표시해야 할 때 사용한다. router-view에 name을 등록할 수 있다. 등록하지 않으면 기본적으로 default를 name으로 사용한다. 📍 App.vue name="header" 을 에 태그에 등록한다. name이 등록되지 않은 router-view는 default가 등록된다. 📍 route-index.js 하나의 patht에 components components로 두 개의 컴포넌트를 등록한다. export default new Router({ routes: [ { path: '/', name: 'PostListPage', components: { header: () => import('@/components/AppHeader..
-
memo-app 클론코딩 2JavaScript/Vue.js 2021. 1. 1. 00:40
🥥 REST API, Ajax, axios 🥝 REST ( Representational State Transfer ) http uri를 통해 자원을 명시하고, http methods(post, get, put, delete)를 사용해서 자원에 대한 CRUD를 구현한다. 서버와 클라이언트 사이의 통신 방식 중 하나로 http 프로토콜을 그대로 사용한다. # REST 구조 1. 서버와 클라이언트 구조 서버는 api를 제공, 클라이언트는 사용자 인증 또는 세션, 로그인 정보 등을 직접 관리한다. 2. 무상태 클라이언트의 세션, 쿠키 등을 서버에 저장하지 않는다. 서버는 각각의 요청이 별개의 것으로 인식하고 처리한다. 3. 캐시 처리 가능 웹 표준 http 프로토콜의 캐싱을 그대로 사용 할 수 있다. 캐시를 ..
-
memo-app 클론코딩 1JavaScript/Vue.js 2021. 1. 1. 00:39
🌮 props 속성 props 속성은 부모 컴포넌트에서 자식 컴포넌트로 단방향으로만 바인딩(전달)되는 데이터를 말한다. String, Number, Boolean, Array, Object, Date, Function, Symbol을 전달할 수 있다. 변수를 할당하게 되면 props를 동적으로 할당 할 수 있게 된다 🍀 단방향으로만 바인딩 부모 컴포넌트에서 속성이 변경되면 자식 컴포넌트에 전달이 되지만, 자식에서 변경된 데이터는 부모 컴포넌트에 전달되지 않는다는 뜻이다. 부모 컴포넌트가 업데이트 될 때마다 자식 요소의 모든 props들이 최신 값으로 새로고침이 된다. # 부모 컴포넌트 # 자식 컴포넌트 props: ['memo'] 🍀 props를 변경 할 수 있는 두가지 예시 1. props는 초기 값만..
-
vue.js 하면서 배운 것JavaScript/Vue.js 2021. 1. 1. 00:26
v-for 반복문 돌릴 때 유의할 점 v-for를 돌릴 때에 스코프 잘 잡아야함 li를 반복 시켜야 하면 vfor의 기준을 li로 잡아야 한다. ul로 잡으면 반복시켰을 때 ul-li가 같이 돌아서 css가 짜부러진다. 데이터가 바뀔 때 마다, 작동해야하는 라이브러리들의 타이밍 created() {}, mounted() {}에서 데이터가 아직 바인딩이 되지 않았다면 watch: {}에서 데이터 변화를 감지 시켜서 바인딩 시킨다. int 숫자, string '숫자' 변환하기 서버에서 보내주는 숫자의 타입을 잘 확인한 뒤에 클라이언트에서 보여 줄 형식으로 함수들을 잘 사용한다 parseInt(string'숫자') 스트링 -> 인트 변환 '12,900' > 12900..
-
vue.js 하면서 배운 것JavaScript/Vue.js 2021. 1. 1. 00:20
swiper에 v-if 사용하기 swiper라이브러리에서도 vue의 문법이 묻는다! 야호 javascript 배열 복사해서 사용하기 조건에 따라 배열의 요소가 편집이 되어야 했다. 하지만 수정된 배열의 조건을 실행했다가 다시 완전한 배열로 돌아오면 배열이 모두 깨져있어서, 복사된 배열을 만들어서작업을 해야했다. array.slice(begin-i, end-i) 첫번째 인자로 시작할 인덱스, 두번째 인자로 끝날 인덱스를 복사된 배열로 반환한다. v-for="(item, index) in Array.slice(0, 4)array.concat(value) value을 array의 뒤에 붙인다. value는 배열 또는 객체가 들어갈 수 있다. v-for="(item, index) in Array.slice(0,..
-
vue.js 하면서 배운 것JavaScript/Vue.js 2021. 1. 1. 00:18
vue.js에서 이미지 태그 바인딩 세자리 수마다 ,(콤마) 찍는 정규 표현식 n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')int 받았으면 string으로 바꿔준다 swiper.js 페이지네이션 옵션 slidesPerColumn 컬럼 한 개당 보여줄 슬라이드 수 spaceBetween 슬라이드 간 간격 ( slidesPerColumn을 사용하고 있을 때, 슬라이드의 간격을 띄울 수 있다!) el: '.progress-bar' 스와이퍼의 프로그레스-바를 사용하기 위해 class요소 지정 debugger debugger를 걸고 싶은 곳에 debugger 넣고 실행 debugger가 걸려있는 곳 까지 실행시키면 자동으로 걸림 한 칸씩 넘..