목록프로그래밍/FE engineering (3)

끄적이고 기록하는 나의 블로그

[Vuejs] vue-meta를 활용하여 meta 태그 dynamical 속성 정의하기

one source로 멀티 도메인 서비스를 하는 경우, 드러날 필요 없는 조건으로 결과물을 달리 해야하는 경우가 있다. javascript 영역 말고도, DOM에서도 마찬가지이다. Vue Component에서의 DOM에 대한 조건문 제어는 경우에 따라 다르지만 Vue Lifecycle hook 함수를 통해 처리하는 경우가 많다. 하지만 태그라던지, index.html 영역에 있는 DOM에 대한 제어는 생각보다 깔끔한 처리가 어렵다. 시도해볼 수 있는 방법은 if 조건문 또는 조건연산자로 내에서 처리할 수 있지만, 복잡한 case의 경우 코드에 대한 가독성이 좋지 않아 운영 관점에서도 어려움을 느낄 수 있다. 그 중에서도 서비스 도메인에 대한 웹 페이지 정보를 담고있는 meta의 경우는 더욱 그러하다. (..
프로그래밍/FE engineering 2023. 12. 21. 20:26
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated:

Vue.js 에서 부모 컴포넌트와 하위 컴포넌트 데이터 전달을 위한 props 를 사용하다가 console에서 하기와 같은 오류를 마주친적이 있다. 사실 그동안 무심코 지나쳤다가.. 저런 warning도 지나치지 말자는 다짐으로 이번 기회에 고쳐본다. 나 같은 경우는, 부모 컴포넌트에서 자식 컴포넌트에게 "files"라는 data를 props로 전달하는데, 자식 컴포넌트에서 props로 받은 files를 직접 변경하는 코딩을 하였다. 저 console 메시지를 직역하면 부모 컴포넌트에서 이 props를 re-rendering하여 값을 다시 엎어쓸수도 있으니, 자식 컴포넌트에서는 props로 전달받은 값을 복사하여 사용하라는 말이다. 즉, 부모 컴포넌트에서 전달하는 props는 단방향으로써, 자식 컴포넌트..
프로그래밍/FE engineering 2021. 4. 15. 14:07
[node] npm install 하였지만 module이 설치되지 않는 문제

Vue.js 프레임워크 환경에서 UI component library module을 하나 추가하였다. 로컬/개발/운영 서버가 관리되고 있는데, 로컬/개발에서는 정상동작을 하였으나, 운영에서는 추가한 UI component가 노출되지 않는 문제가 발생하였다. 여기서 의심해보는 부분은, 1. 해당 module import가 구현되지 않았거나, 2. 정상적으로 module이 설치되지 않았거나, 3. webpack에서 해당 module이 bundle로 들어가지 않았거나 원소스로 개발에서 동작하였으니 1번은 문제 없다. 결과적으로 2,3번에 대한 구체적 확인은 되지 않았지만, node_modules 폴더를 삭제하여 다시 전체 module을 설치하는 것으로 해결 방법을 잡아보았다. #. 해결 방법 1. 해당 프로젝..
프로그래밍/FE engineering 2021. 4. 8. 14:54
이전 Prev 1 Next 다음