개발/vuejs (8) 썸네일형 리스트형 한권으로 배우는 vue.js 3 - 따라해보기 4 이번에는 Chapter 4 todolist 만들기를 진행해보았습니다. 코드를 일부로 다 따라쳐보면서 진행하였습니다. 완성된 화면은 아래와 같습니다. 직접 해본이유 1. 직접 따라 치다보니 오타로인해서 에러가 많이 발생햇지만 그 에러를 잡는것 또한 재미.. 2. 직접 따라치면서 내가 사용하지않았던 문법이나 코드스타일을 경험해볼수있엇음. 3. 눈 코딩보다는 직접 따라해본서 문제도 발생시켜보고 변경도 해보면서 100% 이해 볼수있는점이 도움이된것같다. 코드 및 주석 , 동작 확인은 아래처럼 진행하면 할 수 있습니다. git clone https://github.com/baaaaaaaaaaaaam/vue3.git git reset --hard 2265c3936553b2b21a5b0a12997b2ee59e25ab.. 한권으로 배우는 vue.js 3 - 따라해보기 3 이번에는 watch , props , emit , 실전 1 까지 진행해볼예정입니다. 1. watch는 지정 데이터의 변화를 감지하여 사용자가 지정한 콜백함수를 호출할 수 있게해주는 기능이다. 옵션으로 immediate 를 true로 할 경우와 하지않는경우의 차이는 최초 렌더링의 변수할당부분을 watch에서 감지할건지 하지않을건지를 결정하게한다. - Watch.vue 2 Options API 의 watch 로 감시하고자 하는 대상이 객체나 리스트라면 deep 옵션을 true로 설정 해야 감시가 가능하다. 하지만 Composition API를 사용하는 경우 상관없다 - Watch.vue Compositions API 방식 Options API 방식 3. props는 컴포넌트에 데이터를 넘겨줄 수 있는 사용자.. 한권으로 배우는 vue.js 3 - 따라해보기 2 지난번에는 코드에 자세한설명없이 그냥 생명주기를 한번 사용해보았다. 이번에는 책에나와있는 예시를 따라해보면서 기본적으로 알아야할부분과 내가 알게된 부분을 적어보려고한다. 코드는 지난번처럼 아래 git을 clone 한 후 reset 으로 해당 버전으로 돌려서 실행확인해보시면됩니다 git clone https://github.com/baaaaaaaaaaaaam/vue3 GitHub - baaaaaaaaaaaaam/vue3 Contribute to baaaaaaaaaaaaam/vue3 development by creating an account on GitHub. github.com 1 vue3 의 setup을 사용하면서 templete에서 해당 변수 및 메소드를 를 사용하려면 setup 내 return에서.. 한권으로 배우는 vue.js 3 - 따라해보기 1 회사에서는 vue2를 사용하고 있지만 언제가는 vue3로 갈아타야할 것 같아서 "한 권으로 배우는 Vue.js 3" 도서를 구입한 후 따라해 볼 예정입니다. 최종적으로 vue2 진행 한 프로젝트를 vue3로 업그레이드 할 계획입니다. 언제가는 react 로 바꿀날이 올지도 ㅎㅎ 저는 가볍게 전체전으로 훑어본 후 바로 3장으로 넘어 갓습니다. ( node js 및 vscode 등등 설치 궁굼하신 분들은 2장부터 보시면됩니다 . ) (1장은 입문자가 보기엔 먼말인지 이해가 안될수도잇어요 ) 이책에서는 프로젝트 생성시 vite 사용을 추천해주고있습니다. 실제로 vue cli로 프로젝트를 생성생하고나 실행하는 방법보다는 5~6배 빠르더라고요. vite로 프로젝트 생성시 ==> npm init @vitejs/ap.. 두개의 배열 객체에서 중복 추출 ( filter & some ) 두개의 배열안에는 object형태의 데이터들이 들어있습니다 두개의 배열에서 아래 그림처럼 arr배열과 arr1배열의 중복된 값을 arr2배열로 뽑아낼 에정입니다 let arr = [ {seq:1,name:"kim1"} ,{seq:2,name:"kim2"} ,{seq:3,name:"kim3"} ,{seq:4,name:"kim4"} ,{seq:5,name:"kim5"} ] let arr1 =[ ,{seq:2,name:"Lee2"} ,{seq:3,name:"Lee3"} ,{seq:6,name:"Lee6"} ] let arr2 = arr.filter(x1 => arr1.some(x2 => x1.seq == x2.seq )); console.log(arr2) 결과를 먼저 보자면 아래와같이 arr2에 seq=2 와.. vue - electron - github release - ( 2 ) 지난 시간에 github release 배포하는부분 까지 진행했습니다 https://programmerk.tistory.com/55 vue - electron - github release - ( 1 ) electron 의 경우 build 시 page를 가져올때 외부 url 에서 가져오는 방식과 자신의 프로젝트에서 가져오는 방식을 선택하여 build 할 수 있습니다 자신의 project에서 page를 가져올떄 문제점이 하나 있는 programmerk.tistory.com 이번에는 update 할수 있도록 만들어 보려고 합니다 우선 결과물은 아래와 같습니다 제 깃에서 electron-builder-Setup-0.1.40.exe 을 다운 받은 후 실행하면 최신버전 electron-builder-Setup-0.. vue - electron - github release - ( 1 ) electron 의 경우 build 시 page를 가져올때 외부 url 에서 가져오는 방식과 자신의 프로젝트에서 가져오는 방식을 선택하여 build 할 수 있습니다 자신의 project에서 page를 가져올떄 문제점이 하나 있는데 build 시 배포된 exe 파일을 사용자에게 다시 전달해줘야 합니다. 새로운 버전이 나올떄마다 build 해서 생겨난 electron exe 파일을 배포할 수 없기 때문에 github나 등등 프로그램에서 release 및 배포를 다음과 같이 도와줍니다. 지금 부터 vue 3.0 이상 버전에서 vue-cli 를 사용하여 위 과정을 진행할 예정입니다. 1. git repository 생성 2. github access token 발급 3. 환경 변수에 GH_TOKEN 생성 및 컴.. docker + vue + nginx 셋팅 및 배포 저희 회사는 원래 아래와 같이 사용하고 있었습니다. 하지만 2개의 사이드 프로젝트가 진행 되면서 하나의 서버에 3개 proejct가 올려야 하는 상황이 되었습니다. 그래서 아래와 같이 docker를 사용하여 구성을 변경하게 되었습니다 . 기존에는 방식과 차이점은 기존 방식 1. vue build 해서 dist 파일 생성 2. 웹서버에 dist 파일 업로드 변경 후 방식 1. vue 를 dockerize 한 후 docker server 에 push 2. 웹서버에서 도커 실행 이렇게 변경 되었습니다. 웹 서버는 nginx 를 사용했는데 SPA 앱들은 화면을 새로고침 할 때 해당 페이지를 못찾는 문제가 발생하더라고요. 이문제를 해결하기 위해서 여러가지방법 중 가장 설정이 간단한 nginx 를 사용하였습니다. .. 이전 1 다음
