내가 한 노력들

블로그나 웹사이트에는 사진을 클릭하게 되면, 해당 사진이 확대되고 회전시킬 수 있다는 등 다양한 조작이 가능한 경우를 볼 수 있습니다. js에 다양한 사진 확대 라이브러리가 존재하는데, 그 중에서 lightbox을 설치 및 적용해보겠습니다. 위의 이미지 처럼, 이미지를 클릭하게 되면 확대된 이미지와 그 밑에는 툴바가 있어서 다양한 조작을 할 수 있습니다. npm 설치 npm i vue-easy-lightbox main.js 설정 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import VueEasyLightbox from 'vue-easy-..

loading overlay란, 비동기 작업이나 실행완료까지 시간이 걸리는 작업을 하는 경우에 로딩중이라는 것을 표현해주는 것을 의미합니다. 위의 이미지와 같이 loading overlayd에는 동그란 이미지, 막대 이미지, 프로그레스 바 등등 다양한 종류가 있습니다. 또한 loading overlay의 중요한 역할중 하나는 어떠한 작업이 진행중에 유저가 다른 작업을 하는 것을 방지합니다. 예를 들어, 사진을 업데이트 하고 사진을 수정하는 웹사이트가 있는 경우에 사진 업데이트가 완료된 후에 수정할 수 있는건데 업데이트가 완료되기도 전에 수정을 하는 것은 문제가 발생할 수 있습니다. 그러한 경우를 막기위해서 업데이트 중에는 loading overlay를 통해서 다른 요소의 클릭등의 작업을 방지할 수 있습니..

Vuex를 사용하여, 컴포넌트간의 통신을 쉽게 할 수 있습니다 vuex는 컴포넌트간 공통적인 상태관리 라이브러리입니다. 컴포넌트간에 데이터를 주고 받고, 통신하기 위해서는 props와 emit등을 사용하는데 컴포넌트의 관계가 복잡하게 되면 의미없는 props가 반복되거나 구현하기 힘든 경우가 있습니다. 그런 경우에 vuex를 이용하면, 쉽게 컴포넌트간 공통 데이터 관리를 할 수 있습니다. vuex파일 설정 import { createStore } from 'vuex' export default createStore({ state: { is_clicked: false, }, mutations: { changeClickedState(state) { state.is_clicked = true; }, }, ac..

eval() eval 함수를 사용하면, 문자열을 넣어도 코드로 인식하게된다. eval("6 + 2") //8 문자열으로 넣게되어도, 코드로 인식하여 두 수를 더한 결과인 8이 출력된다. console.log(this.$refs.getData.innerHTML); 내가 eval을 활용한 것은 innerHTML 을 이용해서 ref속성의 값이 getData인 div태그의 값을 console,log에 출력하는 코드를 만들고 싶은데, 이때 getData 부분을 변수처리를 하고싶었습니당. const aa = `this.$refs.${this.getData}.innerHTML`; console.log(aa); 그래서 ` `와 ${ }를 통해서 처리를 할려했는데, 위의 코드대로하면 ` ` 안에 있는 것을 모두 stri..

Click me div를 클릭하면 aaa 함수를 실행 methods: { aaa() { console.log(this.$refs.getData); } } ref 속성으로 작성한 것은 vue 인스턴스의 $refs 속성을 이용해서 가져올 수 있습니다. vue에 내장된 속성은 앞에 "$"를 붙혀서 가져오게 됩니다. $refs 다음에는 가져오고자 하는 ref 속성의 값을 넣어주면 해당 ref 속성 값을 가지고 있는 태그값을 가져올 수 있습니다.

방법 event.target.getAttribute(속성명); 사용 클릭 methods: { getAttribute(e) { console.log(e.target.getAttribute('data')); } }

detail components 게시글 클릭했을 때, 상세 페이지 만들기 Read.vue 기존 Read 컴포넌트에서 onClick 이벤트를 이용해서 detail 컴포넌트로 이동하는 함수를 실행시킨다. detail(i){ this.$router.push({ //params를 넘겨줄때에는 push할때 path보단 name을 사용 name: 'Detail', params: { contentId: i } }) } route.js import Detail from "./components/Detail"; const router = new VueRouter({ mode: "history", routes: [ { path: "/detail/:contentId", name: "Detail", component: Det..

데이터 준비 data/index.js export default [ { writer: '카리나', title: '에스파', content: '존예' }, { writer: '윈터', title: '에스파', content: '졸귀' } ] 원래는 DB에서 데이터를 받아와야하지만, 간단하게 데이터를 만들어놓고 import하는 방식으로 구현 READ components/Read.vue {{ value.writer }} {{ value.title }} {{ value.content }} script에서 import를 통해, data/index.js파일의 데이터를 가져오는 것을 볼 수 있다. 받아온 데이터를 변수로 지정해서 template에서 v-for을 이용해 테이블로 나열 router.js import Re..