음악이 있는 개발자 블로그 음악이 있는 개발자 블로그

MVVM의 등장배경 기존 디자인 패턴(MVC, MVP)등에서 단점으로 이야기되는 View의 의존성을 최소화하기 위해 등장 MVVM 기본 MVVM은 Model, View, ViewModel의 머리만 따와서 명명되었습니다. 기존의 MVC 패턴에서 화면이 복잡해질수록 Controller가 비대해진다는 문제와 View가 Controller와 강하게 결합되어 있는 문제를 해결하기 위해 MVVM 패턴이 제안되었습니다. MVVM에서 가장 중요한 개념이라면 Observer 패턴을 통한 Data Binding이라고 할 수 있습니다. 기존의 Controller에서 Model의 변경에 따라 View를 직접 변경해주었다면 MVVM은 바인딩을 통해 이를 자동으로 업데이트 해줍니다. FrontEnd에서의 MVVM 프론트에서 MV..

많은 오픈소스 프로젝트에서 CHANGELOG.md와 같은 파일을 통해 명시적으로 버전을 관리한다. 현재 개발 중인 프로젝트에서도 이슈 트래킹을 좀 더 수월하게 하고자 이를 적용하기로 했다. Lerna와 standard-version 사이에서 고민하였으나 standard-version가 versioning에 초점이 맞춰져 있는 것에 비해 Lerna는 Mono-Repo를 위한 패키징에 초점이 맞춰져있어 상대적으로 다양한 기능이 많았으나 그만큼 더 무거워 Standard-Version을 채택했다. Github을 사용하는 경우에는 CHANGELOG.md 파일을 만드는 방식이 아닌 Github에서 제공하는 Release를 활용하기도 한다. (standard-version에서도 Github를 사용할 경우 githu..

상황 서버에 파일을 비동기적으로 업로드하며 병렬 처리를 위해 Axios.all을 사용 문제 Axios.all을 활용 시 하나의 Promise만 Reject 되어도 정상적으로 응답이 돌아오지 않아 이후 로직 처리 불가 탐색방법 Case 1 : https://stackoverflow.com/questions/48681126/axios-all-spread-and-catch-all axios.all spread and catch all I'm using .all method of popular library 'axios' for handling my ajax requests. But how can I handle errors in case all requests got 404? for example: axios..

z-index를 남용할 경우 발생하는 문제점 - 이미 존재하는 컴포넌트를 사용할 때 해당 컴포넌트 구조에 따라 원치 않는 정렬이 발생할 수 있다. 화면의 z축 순서를 정하는 규칙은 크게 4가지를 기준으로 정해진다. - 해당 컴포넌트의 Z-index 값 (내림차순) - 해당 컴포넌트의 Position 여부 (Unpositioned Parent의 순서 > Z-index > Mark Up 순서 z-index only works with positioned elements

Multi-Tenancy : 공유된 네트워크 인프라를 논리적으로 구분하여 여러 유저들이 사용할 수 있도록 하는 네트워크 아키텍쳐 Multi-Tenancy는 네트워크 아키텍쳐의 일종이다. Multi-Tenancy의 개념에 대하여 이해하기 위해서는 해당 단어를 이루고 있는 Tenant의 의미를 먼저 알아볼 필요가 있다. Tenant : 입주자, 거주자, 사용자 등 해당 단어를 살펴보면 여러 사용자들이 사용할 수 있도록 만든다는 것을 알 수 있다. 이를 좀 더 상세하게 이해하기 위해서는 Google Docs등과 같은 SaaS를 떠올려보면 좋다. SaaS는 개별 사용자(Tenant)마다 개별의 공간을 제공해준다. 이때 적용할 수 있는 아키텍쳐는 크게 Single-Tenancy와 Multi-Tenancy로 구분할..

문제 재고 - 주문 프로세스에서 하나의 재고를 동시에 주문할 시 발생하는 동시성의 문제를 해결하기 위함 프로세스 순서 Lock 종류 Shared Lock(Read Lock) : 데이터를 읽을 때 사용되는 Lock으로 같은 Read 끼리는 동시 접근 가능 Exclusive Lock(Write Lock) : 데이터를 변경할 때 사용되는 Lock으로 해당 Lock이 해제될 때까지 어떤 접근도 허용하지 않음 Transaction Isolation Level 종류 위의 Lock을 Transaction에 따라 자동으로 걸어주는 기준을 의미 READ UNCOMMITED COMMIT 여부와 관계 없이 데이터를 조회 수정 중인 데이터를 조회하는 Dirty Read 발생 가능 READ COMMITED COMMIT 전의 데..

SEO(Search Engine Optimization) : 검색 엔진 최적화 검색엔진 최적화는 Google, Naver 등의 Bot에서 적절한 결과를 크롤링 할 수 있도록 처리하는 작업을 의미한다. 최적화를 위한 방법은 다양한 종류가 있으니 이 포스팅에서는 필요한 부분만 골라서 설명한다. 1. meta 태그의 title 및 description, keywords 설정 가장 중요한 부분이다. title이 명확할수록 검색엔진 봇으로 하여금 특정 키워드에서 높은 우선순위를 부여받을 수 있다. 위와 같이 google을 검색할 경우 title, description이 순서대로 사이트에 출력되는 것을 확인할 수 있다. 2. 하위 URL에 도메인 명시 하위 URL이 봇에 의해 크롤링 될 경우 이 페이지가 상위 도메..

pointer-events: none; Child Node CSS에 클릭 불가 설정 해놓으면 해결된다!!!