css:스켈레톤 UI css 만으로 구성하기 | Why ? 특정 페이지를 개발할때, 로딩 스켈레톤을 구현해야 하는 상황이 있었습니다. 이 ui를 구현하기 위해 여러 라이브러리를 사용할 순 있겠지만, 이런 라이브러리들로 인해 프로젝트의 크기가 늘어나고, 불필요한 리소스 낭비가 될 수 있다는 생각도 들었습니다. 따라서, css만으로도 충분히 스켈레톤 ui를 구성 할수 있다 생각되어 css로 스켈레톤 ui, 그리고 그에대한 애니메이션을 구현해 보았었습니다. 아래는 구현한 여러 스켈레톤 ui중 특정 페이지의 모바일 리스트 뷰에 해당하는 디자인 시안에 맞춰 본인이 구성한 UI입니다. UI를 구성하는 방식은 background-image 와 background-size css 속성을 활용해 임의의 스켈레톤 ui를 ..
Javascript:자식 element가 여럿있을때 event 전파 막는 효과적인 방법 | Why? > 상황: 모바일 웹에서, Modal의 overlay 영역의 scroll을 방지하기 위해 overlay 영역을 touch 햇을때 touchEvent 리스너에 모달을 닫는 function을 넣어, 모달을 닫게 하는 기능을 구현해야 하는 상황이 생겼었습니다. > 어려움이 있었던점: 모달의 overlay 영역은 부모 영역에 생기고 그 하위에 모달 컴포넌트의 자식 요소들이 있는 상황이였는데요,이때자식 element에는 onClick 이벤트로 새로운 모달을 띄우는 이벤트가 걸려있는 상황이였습니다. 따라서, 기존의 모달안의 자식 요소들에 걸려있는 클릭시 새로운 모달창이 뜨는 onClick event부모 (모달 ove..
ETC:transpile 과 compile의 비교 잘못된 내용이나, 오타 피드백 환영합니다! | 시작하기에 앞서 transpile과 compile 이라는 두 용어를 헷갈린 적이 한두번이 아니고 잘못 사용하고 있는 케이스들을 봐서, 내용을 다시 한번 되짚어 보려합니다. 프론트엔드 개발을 하다보면 자주 babel이나 typescript를 자주 언급하게 됩니다. 또한, 이들을 설명할때는 compile 혹은 transplie이라는 용어를 종종 사용 하게 됩니다. 우선, babel은 javascript transpiler 입니다. 또한 그다음으로, 타입스크립트 역시도 많이 접하실 텐데요, 타입스크립트가 자바스크립트로 컴파일 되는것인가, 트랜스파일 되는것인가는 아래에서 다시 언급하겠습니다. | transpile v..