Posis

이번 포스팅에서는 라이브러리 없이 JavaScript 코드만을 사용해서 이미지 슬라이드를 구현해 보겠습니다. 구현하는 방법은 무수히 많기 때문에 이 사람은 이런 식으로 구현했구나라고 참고하시면 될 것 같습니다. HTML Next Prev Bootstrap에 container만 이용했습니다. CSS .slide { overflow: hidden; position: relative; } .slide-container { width: 300vw; height: 400px; display: flex; transition: all 0.8s; } .slide-box { width: 100vw; } .slide-box:nth-of-type(1) { background: center/cover no-repeat url..

이번 포스팅에서는 라이브러리 없이 JavaScript 코드만을 사용해서 이미지 슬라이드를 구현해 보겠습니다. 구현하는 방법은 무수히 많기 때문에 이 사람은 이런 식으로 구현했구나라고 참고하시면 될 것 같습니다. HTML Next Prev Bootstrap에 container만 이용했습니다. CSS .slide { overflow: hidden; position: relative; } .slide-container { width: 300vw; height: 400px; display: flex; transition: all 0.8s; } .slide-box { width: 100vw; } .slide-box:nth-of-type(1) { background: center/cover no-repeat url..

JavaScript의 탄생 1995년 넷스케이프라는 브라우저에 웹페이지를 보조적인 기능을 수행하기 위해 개발한 언어이다. 처음에는 모카(Mocha)로 명명되었고 그 해 9월에 라이브스크립트(LiveScript)로 이름이 바뀌었다가 12월에 JavaScript로 최종 명명되었다. ECMAScript JavaScript의 초기는 크로스 브라우징 이슈가 계속 발생하게 되면서 웹개발을 하기가 무척 어려웠던 시기입니다. 이를 해결하기 위해 ECMA 인터내셔널에 JavaScript의 표준화를 요청하게 됩니다. 그 이후에 1997년에 ECMAScript v1이 완성되었고 정식 명칭을 JavaScript에서 ECMAScript로 명명하게 됩니다. ECMAScript는 매년 새로운 버전을 공개하였고 2009년에 HTML..

이번 포스트에서는 Vue에서 제공하는 refs를 활용하여 DOM에 접근하는 방법에 대해서 다뤄보겠습니다. Refs JavaScript에서는 DOM과 엘리먼트를 직접 조작하기 위해서는 getElementById, getElementsByClassName, querySelector 등등과 같은 메서드를 활용했어야 합니다. 하지만 Vue에서는 Refs를 제공을 해줍니다. 장점 자식 컴포넌트에 직접적으로 접근할 수 있음 DOM조작 메서드 없이 편리하게 엘리먼트를 조작할 수 있음 기본적인 DOM 출력 Hello Vue.js!! Vue의 refs를 활용한 DOM 출력 Hello Vue.js!! 기본적인 DOM 출력의 document.querySelector와 Vue의 refs 출력 this.$refs가 동일한 기능..

이번 포스트는 Provide/inject를 활용한 컴포넌트 데이터 전달에 대해서 다뤄보겠습니다. props와 provide/inject 컴포넌트 간에 데이터 전달에는 props와 provide/inject 두 가지가 존재합니다. props: 컴포넌트 태그마다 작성을 해서 데이터를 보내서 자식 컴포넌트 안에서 script안에 props를 정의해 주어야 합니다. 단, 컴포넌트를 여러 번 거친다고 할 때 모든 컴포넌트마다 작성을 해 주어야 합니다. provide/inject: provide와 inject는 컴포넌트 태그에 작성하지 않습니다. script안에 작성하며 props와 다른 점은 컴포넌트가 여러 번 거쳐도 최상위 컴포넌트와 최하위 컴포넌트 단 두 곳에서만 작성하면 데이터 전달이 이루어집니다. prop..

이번 포스트에서는 컴포넌트 재 사용성을 늘리기 위한 slot을 활용하는 방법에 대해서 다뤄보겠습니다. slot은 언제 사용할까? slot은 컴포넌트를 재사용성을 높이고 싶을 때 사용한다. 즉, 재사용을 한다는 말은 다른 컴포넌트들 보다 디테일하기 때문이다. 디테일하기 때문에 재사용성을 높일 수 있는 것이다. 예를 들어 1번 컴포넌트는 다양한 곳에 사용된다고 한다. 하지만 매번 다른 문구들을 출력해야 할 때 이번장에서 다루는 slot태그를 활용하면 쉽게 재사용할 수 있는 컴포넌트를 만드는 것이다. Basic 프로젝트이름/src/components/Slot.vue 프로젝트이름/src/App.vue Vue.js 기본적으로 부모 컴포넌트를 열린 태그와 닫힌태그를 같이 사용할 때 그 안에 문구를 넣어주면 그 값이..