선택자 충돌 시 /*css*/ .special{ color: blue; } p{ color: red; } css는 cascade와 specificity라고 불리는 rule을 가지고 있고, 해당 rule에 따라 충돌 시 더 강한 선택자가 적용된다. cascade rule : 뒤에 적용된 스타일이 앞선 스타일을 덮어쓴다. specificity rule : 요소를 더 특정하는 선택자가 스타일을 차지한다. 따라서 위의 예제에서 specificty rule에 의해 color는 blue가 된다. specificity specificity는 4가지의 단위로 측정된다. Thousands : style 속성 내에 정의되어 있는 style(inline style)일 경우 Hundreds : ID selector를 사용하여..

html2canvas + 이미지 호스팅 *예제는 React Hook 환경에서 진행되었습니다. 결과 table을 이미지로 만들어 공유해야하는 요구사항이 있었다. 요구사항을 수행하기 위해서는 다음과 같은 과제를 순차적으로 해내야한다. html table을 이미지로 만들기 만들어진 이미지를 호스팅하기 호스팅된 이미지를 카카오톡 api를 이용하여 공유하기 차례대로 해보자. html table을 이미지로 만들기 DOM요소를 이미지로 만들 때, html2canvas라는 라이브러리가 주로 쓰인다. import html2canvas from 'html2canvas'; const copyDOM = async () => { window.scrollTo(0, 0); let url = ""; await html2canvas(..

후위표기법으로 계산기 만들기 계산기 관련 외주가 들어와서 해보던 중, 예전에 배웠던 후위표기법을 사용해야했다. 그런데 기억이 안나서 검색 없이 혼자 구현하려다 보니 너무 어려웠다... 검색해보니까 stack을 이용해서 후위표기법을 만드는 간단한 방법이 나와있어서 까먹지 않기 위해 기록한다. 후위 표기법 수식 트리 후위 표기법이란 계산식에서 계산을 위해 사용하는 표기법이다. 예제와 함께 살펴보자. 수식 : 9x3+1-3%3 수식이 주어졌을 때 비연산자와 연산자로 나눈 후, 각 항목을 하나의 노드라고 생각하면 트리 형태로 만들 수 있다. 이러한 트리는 수식을 트리라는 자료구조로 만든 것이니 수식트리, 즉 Expression Tree라고 불린다. 트리 순회와 표기법 트리를 순회하는 방식에는 prefix(전위)..