Javascript139 vue 부모 컴포넌트와 자식 컴포넌트의 변수값을 동기화 하는법 최근 바로 아래의 자식 컴포넌트와 부모 컴포넌트를 동기화 하는법을 찾아보았다.찾아보니 아래의 링크와 같은 방법이 존재하였다.아래를 참고하면 쉽게 부모와 자식이 값을 공유할 수 있게 된다. https://alligator.io/vuejs/upgrading-vue-2.3/#propsync 2018. 9. 10. firebase hosting을 이용한 vue web app 배포 firebase 호스팅을 이용하여 vue web app을 올리고 싶다면 아래의 링크를 참고하면 된다. https://medium.com/@ShayneOSullivan/deploy-a-vue-js-app-with-firebase-hosting-3fc420cf3998 2018. 8. 30. vue에서 firebase 사용시 자동생성되는 id 값을 통해 데이터를 불러올때 최근 vue에서 firebase를 사용하여 db를 불러오는 일은 진행하였다.배우는 예제에서는 db내 객체에 id 필드를 만들어서 where 조건문을 통하여 해당 id의 데이터를 불러오는 작업을 해주었는데,firebase는 db내의 데이터 객체가 생설될때 별도의 자동 ID가 생성되는것을 확인하였다.고로 자동 생성되는 id를 사용하면 되기에 where 조건문에 id를 넣어 to.params.id와 비교해주었다.하지만 데이터를 불러오지 못하였다. 그래서 찾아보니 자동생성 id 같은경우는 where 조건문으로 접근이 불가능하며 (정확한지는 아직 모르겠다.)그 자체로 식별자가 되어 where문이 필요없이 아래와 같은 문법으로 써주면 된다고 한다. firebase.firestore().collection("Your.. 2018. 8. 6. vue.set(state.object, key, value) 함수 최근 최신 프론트엔드 프레임워크인 vue.js를 쓰면서 한가지 문제가 생겼다.바로 변수를 통해 컴포넌트 상태를 업데이트 하려고 했는데,해당 변수가 배열이 되었을경우 아무리 값을 변경해 보아도 적용이 안 된다는 문제였다.찾아보니 vue에서는 아직 배열 감지를 하지 못하여 따로 함수를 써줘야 함을 알게 되었다.함수 이름은 아래와 같다. Vue.set(state.object, key, value) 해당 함수에 대한 자세한 설명은 아래의 링크를 참고 바란다. https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats 그리고 이것을 vue cli의 컴포넌트에 쓰려면 아래와 같이 쓰면 된다.(참고로 배열은 key 대신에 index를 넣으면 된다.) th.. 2018. 7. 24. node.js의 res.locals 함수 node.js로 페이지 렌더링을 하게 되면 중복되는 값들이 있다.이 값들을 한꺼번에 처리할 수 있는 함수가 바로 res.locals 이다.해당 함수를 쓰면 렌더링시 중복되는 값들을 저장해놓고 계속해서 쓸 수 있다.자세한 사항은 아래의 링크를 참조하면 된다. https://stackoverflow.com/questions/29026650/how-to-render-common-variables-from-app-js-to-all-routes-in-express 이것을 안쓰면 렌더링시 중복되는 값들을 모두 복붙하는 노가다를 해야한다.최근 최신프론트엔드를 쓰면서 이 함수를 쓸 필요성이 사라졌지만 나중을 위해 알아두어야 겠다. 2018. 7. 23. node.js를 이용한 이미지 파일 업로드 방법 (프론트엔드 중심으로) node.js를 이용하여 이미지 파일을 업로드 하려면 multer라는 라이브러리를 사용하면 된다.아래는 그에 관한 방법에 대한 링크이다. https://wayhome25.github.io/nodejs/2017/02/21/nodejs-15-file-upload/ 이에 대한 동영상 강좌도 아래의 링크에 있으니 참고하기 바란다. https://www.youtube.com/watch?v=2jwNNFbs4ic 여튼 여기까지 서버세팅이 끝났다면 프론트엔드 단에서 다음과 같은 문제를 생각하게 된다.예제를 보아하니 다들 form 태그에 액션을 걸어서 이미지 파일을 전송해줬는데,만약 form 태그를 안 쓰고 이미지 파일을 전송해야 된다면 어떻게 해야 하는가? 솔직히 나는 위의 질문에 답을 찾고자 웹서핑을 2시간 동안 하.. 2018. 5. 25. 두개의 object를 하나로 병합하기 아래의 링크에 이와 관련된 설명이 잘 나와있다. http://4urdev.tistory.com/22 2018. 5. 14. vue.js에서 jquery를 사용하는 방법 아래의 링크에 설명이 잘 되어 있다. https://lovemewithoutall.github.io/it/install-bootstrap-for-vue/ 2018. 5. 11. input 박스 invalid 이벤트 최근에 form 내의 input 값들의 타당성 검증을 하던도중 디자인 문제에 직면하였다.html5에서는 타당하지 않은 값일 경우 자동으로 스크롤바를 하여서 해당 input 필드로 이동하는데,이 과정에서 내 사이트의 헤더가 position: fixed로 설정이 되어있어서 해당 input 필드를 덮어씌우는 현상이 발생하였다.작은 문제이지만 구글링 해본결과 이러한 문제로 실제 고민하던 사람이 있었다.아래는 그와 관련된 질문 링크이다. https://stackoverflow.com/questions/19814673/html5-input-required-scroll-to-input-with-fixed-navbar-on-submit?utm_medium=organic&utm_source=google_rich_qa&u.. 2018. 5. 10. 이전 1 2 3 4 5 6 7 ··· 16 다음