FrontEnd

뭐야 이게... uetify에서 Dialog를 구성하던 도중 한 페이지에 너무 많은 Dialog가 존재했다. 그로인해 코드가 너무 길어졌는데, 차라리 Component를 분리해서 관리하면 좋겠다고 생각했다. 그래서 일단 분리를 해서 버튼을 누르자 다음 아래와 같은 오류가 발생했다. 그리고 정상적으로 작동을 하지 않았다 딱 한번만 재대로 작동하고 다음번에 버튼을 누르면 작동을 하지 않았다. 🚨 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. ..

ElasticSearch를 활용한 개발을 하게 되었다. 최근 Spring Boot와 함께 엘라스틱서치를 활용한 인턴 온보딩 프로젝트 개발을 시작하게 되었다. 종종 가끔씩 이제 Elastic과 관련된 글을 쓰지 않을까 싶다. 엘라스틱이 헛갈리는 개념도 많고 여러가지 이슈사항들이 많이 발생하게 되어서 아마 많은 글들을 남기지 않을까 싶다! 다시 본론으로 돌아가자면, 요구사항중 엘라스틱의 저장되있는 모든 index들의 상태를 파악해야했었다. 이러한 요구 사항은 실제로 ES에서는 API로 제공되어서 그 API를 사용하면 됬다. GET /_cat/indices 이와 같은 API를 사용하면, ElasticSearch에서 전체에서 저장한 ES 내부의 index를 확인해볼 수 있었다. 요구사항에 대해서 처리하는 것이 ..

최근 인턴 프로젝트에서 Vue를 사용하게되었는데, UI프레임워크를 사용해서 Validation처리를 손쉽게 하고 싶었고, UI 프레임워크중 material 스타일에 가장 맞는 스타일중 하나인 Vuetify를 선택해서 개발을 시작하게 되었다. Vuetify의 Form-validation vuetify는 기본적으로 form input에서 validation을 제공한다. :rule 을 활용하면 validate를 적용할 수있다. 실시간 검증을 하기위해서는 비동기적으로 구현해야한다. 개인적으로 ES6를 활용하고 싶었으나, 아쉽게 실패했고 그 대안으로 axios를 활용해서 구현했었다. 아래는 vuetify의 form 안의 input 값들을 validation 하는 기능을 기본적으로 제공한다. 그중 v-text-fi..

한빛미디어 활동을 위해서 책을 제공받아 작성된 서평입니다. 모던 자바스크립트에 대한 기초서 잠깐이나마 자바스크립트(Node.js)를 사용하여 개발을 해봤었는데, 다른 언어들과 다른 문법적인 특성 그리고 "자바스크립트스러운" 개발을 하지 못한다는 것이 가장 큰 아쉬움을 줬었다. 특히, 개중에서 가장 나를 골탕먹었던 것은 await/async와 같은 비동기적인 특성을 재대로 활용할 수 없었다는 것이었고, Promise는 나를 한번 더 좌절하게 만들어줬다. 물론, 구글링과 여러가지 이전 코드 스타일들을 따라하면서, 필요할때만 문법적인 것에 대해서 확인해보고 그것이 끝이어서 이왕 알아볼때 전부 문법적인 특징을 잘 활용해서 사용해보는 것도 좋지 않을까라는 것이 스스로에게 되게 아쉬웠던 점이 많았다. 내가 가장 궁..

사실 나는 React에 대해서 잘 모르는 상태에서 Chrome Extension을 구현하면서 발생했던 오류에 대해서 적어두는 포스트이라는 점을 알면 좋을 것 같다. 리엑트 useEffect를 사용하고 싶었는데... 크롬 확장프로그램을 만들다보면, 현재 탭에서 refresh나 변화가 발생할 경우 그 URL 주소변화를 체크해서 useEffect로 바꾸고 싶었던 내 자신만의 요구사항이 있었다. 크롬에서 현재 탭에서 refresh나 변화가 발생할 경우 그 URL 주소변화를 체크를 하는 것은 Listener에 의해서 발생한다. 다음처럼 listen로 useEffect로 처리하면 될거라고 생각했는데, 이러면 중복이 지속적으로 발생한다. 이렇게 누적해서 자꾸 값이 변화하는데, 이런 누적한 값변화는 페이지를 여러번 들..