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

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로 구분할..

자바스크립트의 원 쓰레드에 대하여 Call Stack이 하나 이기 때문에 모든 동작은 이 안에서 이루어진다. 문자 혹은 숫자를 포함하는 정규식 ^\w*$ ^가 시작이고 $가 종료다 멍청아... 이벤트 루프에 대하여, 마우스를 클릭이벤트 내부적으로 돌아가는 방식 Browser Web API로 해당 이벤트(DOM event, AJAX request, setTimeout)가 보내지고 해당 부분에서 동작 Web API에서 동작이 끝나면 이에 대한 Callback 함수가 Call Queue에 저장되고 CallStack이 비워졌을 때 Call Stack으로 보내지고 동작이후 종료. 이때 Call Stack이 비워져있는지를 주기적으로 확인하고 Call Stack으로 Call Queue의 Task를 보내주는 역할을 E..

MDN 공식문서를 보다보면 다음과 같은 브라우저 호환성 표를 보게 되는 경우가 있다. 일반적으로 많은 자료형과 함수들은 모든 브라우저에 대하여 호환성을 갖추고 있으나 ES6 문법과 같은 최신 문법에 새롭게 추가된 Spread Operator, Arrow Function 등과 같은 함수들은 IE와 같은 옛날 브라우저에는 더 이상 호환되지 않는다. 해당 문법을 활용한 Script 파일을 IE에서 동작시킨다면 원하는 결과를 얻을 수 없다. 개발자들이 고려해야할 사항을 줄여주기 위해 모든 유저들이 Chrome 만을 사용하여 우리의 사이트에 접속한다면 문제가 없겠지만 현실은 그렇지 못하다. 이를 보완할 수 있는 몇가지 방법이 존재한다. 1. Babel ... 2. Polyfill ...

문제 재고 - 주문 프로세스에서 하나의 재고를 동시에 주문할 시 발생하는 동시성의 문제를 해결하기 위함 프로세스 순서 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 전의 데..

2021. 02. 01 누적 조회수 1000 ▲ 2022. 01. 06 누적 조회수 10000 ▲

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에 클릭 불가 설정 해놓으면 해결된다!!!