본문 바로가기

전체 글

 (596)
Vue 독립적인 Component 간의 데이터 통신 (feat. vuex store) Vue Composition API를 사용하면서 store 데이터를 watch 하는 방법이 손에 익지 않아 기록으로 남겨본다.. 우선.. 내가 구현하고 싶던 기능은 사용자가 웹사이트의 메뉴를 변경할 때 메뉴목록의 하이라이트 지점도 바뀌게 하는 것이었다. 이를 위해선 사용자와 인터랙션하는 Component와 메뉴목록을 관리하는 Component 간의 데이터 전달이 필요했다. Vue에서 상태 관리 등 전역으로 다루어야 할 데이터는 vuex의 store 기능을 사용하기에 store의 데이터를 조작하여 Component들 간의 데이터 전달을 하고자 하였다. 작업은 다음의 3 단계로 진행하였다. 1. Store에 변수 생성 // @/module/common.js import { createNamespacedHel..
여러 HTML 태그를 겹쳐서(overlay) 사용하고 싶을 때 여러 HTML 태그를 겹치게 (overlay) 하고 싶을 땐 CSS의 position 속성의 aboslute, relative 사용을 고려해보자 회사에서 vue3용 open-layers 라이브러리를 사용하여 지도를 표출하고 그 위에 버튼을 구현해야 하는 작업이 있었다. 버튼이당 그냥 태그 두 개를 나열하면 화면이 겹치지 않고 map이 표출된 영역 아래에 button이 표출된다. display: flex; 를 이용하는 방법이 있지 않을까 해서 검색해보았지만 찾지 못했다. 아마 flex는 레이아웃을 컨트롤하는 게 목적이어서 그러지 않을까 싶었다. 결국 찾은 방법은 태그의 position속성을 absolute로 지정하면 된다. 버튼이당 이렇게 하면 지도에 겹쳐져서 버튼이 표시된다. 그런데 또 하나의 난관에 부..
Vue에서 글자 옆에 사각형을 그릴 때.. 이번에 시작한 Vue 프로젝트에서는 각 항목별로 제목을 달아준다. 그 제목을 좀 예쁘게 표시해보고자 아래와 같은 디자인을 구상해보았다. 구글느님의 도움을 받아 canvas 태그를 사용하여 저런 사각형을 그릴 수 있었다. 헌데.. 보는 기기에 따라 달라지는 canvas의 width, height가 마음에 걸렸다. 그래서 pixel로 width, height를 고정하는 대신 vw, vh를 사용해보았다. (참고로, vw랑 vh가 적용되려면 css에 {dsiplay: block; }을 넣어주어야 한다. 헌데 막상 모니터 크기에 따라 이상한 모양으로 변하곤 했다. 이렇게 잘 나오게 맞춰 놓아도 모니터 크기가 달라지면 위처럼 이상하게 변해버렸다. vw,vh 대신 %를 사용해보아도 마찬가지였다. 어느 모니터에서든 자..
데이터 엔지니어링 글 모음 1. HYPER CONNECT - 머신러닝 어플리케이션을 위한 데이터 저장소 기술 머신러닝 어플리케이션을 만들 때 보통 "학습 로직"을 위해 사용하는 데이터 베이스와 "서빙 로직"을 위해 사용하는 데이터베이스가 서로 다른 경우가 많다. 각 DB마다 장단점이 있고 "학습 로직"과 "서빙 로직"이 요구하는 성능 우선순위가 다른 경우가 많기 때문이다. 이를 보완하기 위해 최근 트렌드는 "피처 스토어"라는 추상적인 개념을 하나 만들어서 서로 다른 두 DB를 하나의 DB처럼 활용하는 방안으로 향하고 있다.
문서화 글 모음 1. 뱅크샐러드의 특별한 스펙, '테크 스펙' > 코드 짜기도 바쁜 우리는 문서까지 작성할 시간이 없습니다. 대부분의 소통을 코드로 할 때가 많아 글로 소통하는 방법에 익숙하지 않기도 하고, 한 번 작성된 후 업데이트되지 않는 문서는 시간 들여 필요 없는 문서를 양산해버린 셈이 되니까요. 그럼에도 우리는 쉽게 문서화 라는 마법의 단어를 말하고는 합니다. > 복잡도가 증가한다는 것은 더 많은 함정을 만드는 일입니다. 그리고 개발자의 일은 이 복잡도를 제어하는 것이죠. 복잡도를 제어할 수 있는 가장 좋은 방법은 휘발성이 높은 Short Term Memory로부터 👉 의도와 목적을 조율할 수 있는 수단으로 나아가는 것입니다. 그래서 뱅크샐러드는 테크 스펙을 쓰기 시작했습니다. > 🤔 테크 스펙이 뭔데? 직독 ..
레거시 개선 글 모음 1. 뱅크샐러드는 어떻게 레거시 서비스를 박살내는가 > 약 3년 이상 뱅크샐러드의 성장을 견인한 고마운 서비스였지만 저희가 더 빠르게 성장하기 위해서는 이 레거시 서비스가 가진 복잡도를 반드시 제거해야만 했습니다. 저희는 이 거대한 레거시 서비스를 분해decomposition하는 방법을 택했습니다. 복잡도가 높은 서비스 하나를 복잡도가 낮은 서비스 여럿으로 해체하는 방법을 택한 것이죠. 여기서 저희의 첫 번째 고민이 시작됩니다. 이 거대한 서비스를 어떤 모습으로 나눌 것인가. > 이런 불확실성을 제어하기 위해 ‘내가 확실히 알고 있는 무언가’로부터 생각을 시작해봤고, 저희가 당시에 삼은 기준은 ‘우리 조직’이었습니다. 콘웨이의 법칙대로 “소프트웨어의 구조는 이 소프트웨어를 만들어낸 조직의 커뮤니케이션 구..
빅데이터 커리어 가이드북 (feat. 조성준 교수님) 현재 개발자로 일하고 있지만 앞으로 빅데이터쪽으로 커리어를 만들어나가고 싶어졌다. 하지만 빅데이터, AI, 여러 직무들 등이 나에게 너무 막연하게 다가왔다. 그래서 방법을 찾아보던 찰나 단비같은 조성준 교수님의 [빅데이터 커리어 가이드북]을 발견하였다..!! # 빅데이터 직무 1. 데이터 엔지니어 데이터 자체와 데이터를 둘러싼 시스템을 책임지는 사람 데이터 관리뿐 아니라 수집/보관/처리 시스템의 개발, 구조 설계, 유지보수를 담당 사내 데이터 분석 도구나 시각화 도구를 직접 개발 기존 시스템 개발자의 역량에는 빅데이터 관련 기술도 요구되기 떄문에 개발자가 데이터 엔지니어로 변모하는 경우가 잦음 2. 데이터 애널리스트 데이터에서 기업의 현재 상태와 관련된 인사이트를 도출해 경영진에게 효율적으로 전달하는 업..
JAVA Optional of() vs ofNullable() JAVA에서 Null을 처리하기 위한 방법으로 Optional을 사용한다. Null 대신 Optional 이라는 객체를 반환함으로써 NullPointerException 이 발생하는 걸 방지하기 위해서이다. 회사에서 개발을 하면서 Optional.of() 함수를 썼는데 NullPointerException이 발생했다. 코드를 보니 아래와 같은 느낌으로 작성되어 있어서 of()의 전달인자로 null이 전달된 것이었다. Object myName = null; Optional.of((String)myName); Optional.of()를 호출하려면 null이 아닌 값만 전달되어야 한다. 만일 null이 "될수도" 있는 값이 전달된다면 Optional.ofNullable()을 호출해야 한다. Object myN..

티스토리툴바