본문 바로가기

개발

(49)
한권으로 배우는 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..
nodejs - mysql connect lost 이번시간에는 PROTOCOL_CONNECTION_LOST 에러에대해서 다뤄볼 예정입니다. 일단 기존 구조는 다음과같습니다. db.js 에서는 db 정보 및 connect 와 error event 리스너가 있습니다. 이 코드를 middle1 , middle2 , middle3 에서 require로 참조해서 query 를 날리고 있습니다. 기존 구조에서 2가지 문제점이 있습니다. 첫번째 문제는 일단 mysql 의 wait_timeout을 28800초로 설정해둔 상태에서 시간이 경과하면 PROTOCOL_CONNECTION_LOST 이 발생하여 connection을 잃어버립니다. 설정은 마지막 query 이후 wait_timeout만큼 유지하다가 connect lost 가 발생하는 걸로 알고있엇는데 cloud ..
node js 실시간 로그 수집 및 검색 -3 앞서 테스트 코드를 돌려서 검색하는것 까지 해봣습니다. https://programmerk.tistory.com/59 node js 실시간 로그 수집 및 검색 -2 이번시간에는 저번에 설명해 드렸던 부분을 실제로 돌려보는 작업을 할 예정입니다. * 설명한 부분이란 : nodejs로그를 kibana에서 검색 및 시각화 제 개발환경은 윈도우 10 이고 docker 와 docker-compose programmerk.tistory.com 이제 마지막으로 저희 서버에 반영하기 입니다. 예제에서는 docker-compose를 실행할때 build 하고 volume을 bind 하는 부분이 있엇는데 저는 dockerfile을 docker image로 만든 후 docker-compose에서 bind하지않는 방법으로 진행..
node js 실시간 로그 수집 및 검색 -2 이번시간에는 저번에 설명해 드렸던 부분을 실제로 돌려보는 작업을 할 예정입니다. * 설명한 부분이란 : nodejs로그를 kibana에서 검색 및 시각화 제 개발환경은 윈도우 10 이고 docker 와 docker-compose는 이미 설치하였습니다. 순서대로 따라해보시면 테스트해보실 수 있습니다. 순서는 다음과 같습니다 1. git clone https://github.com/baaaaaaaaaaaaam/logsystem 2. docker-compose 설명 및 실행 3. nodejs 접속 및 로그 확인 4. kibana 접속 5. 패스워드 초기화 & 파일 수정 & 재실행 6. filebeat 에서 nodejs 로그파일 확인 시작합니다 1. git clone https://github.com/baaaa..
node js 실시간 로그 수집 및 검색 -1 안녕하세요 엄청 오랜만에 글을쓰는거같은 기분입니다. ㅋㅋㅋ 오늘 작성하려는 글은 실시간 로그 수집 및 검색으로 예전에 작성한 글에서 추가하여 진행하게 되었습니다. https://programmerk.tistory.com/49 [nodejs] - 한국시간 로그 남기기 (with docker) docker 위에 올라간 nodejs + express 의 한국시간으로 로그남기는 방법입니다. 로그파일은 logs 라는 디렉토리가 생성되면서 자동으로 해당날짜 파일이 생성됨니다. 설치가 필요한 모듈 npm install express programmerk.tistory.com 음.. 처음에는 docker 로 nodejs를 사용할때 log를 남겨야겠다는 단순한 생각으로 위에 처럼 하게 되었습니다. 실제로 서버에 아래처럼..
두개의 배열 객체에서 중복 추출 ( 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 와..