React에서 $$typeof 심볼은 무엇인가? react element를 console.log로 찍어보면 $$typeof 라는 심볼이 있는것을 한번쯤은 보았을 것이다. 보통 아래와 같은 객체로 찍힌다. { type: 'div', props: { bgcolor: '#ffa7c4', children: 'hi', }, key: null, ref: null, $$typeof: Symbol.for('react.element'), } jsx로 문법을 작성하게 되면, React에서는 React.createElement(type, props, children) 라는 메서드를 이용하여 변환되게 되는데, 이 React.createElement 함수가 $$typeof 프로퍼티를 추가해준다. 그 이유는 XSS 공격을 막기위..
Webp가 뭔데? 웹피는 손실/비손실 압축이미지 파일을 위한 포맷이다. 최신 기술같지만 2010년에 구글이 공개한 포맷으로 오래되었다. 웹사이트의 트래픽 감소 및 로딩속도 단축을 겨냥한 것이다. 주로 이미지 사진 압축효과가 뛰어난 것으로 알려져있다. 그럼 무조건 파일을 Webp로 저장하면 좋은것일까? 확실히 압축효과는 어느정도 있고, 여러 포맷 확장자를 통일할 수 있다는 장점이 있긴한데, https://techit.kr/view/?no=20200701213803 위 글을 보면, 무조건 좋은것은 아닌것 같다. 위 아티클에서는 작은 이미지일 경우 Webp가 jpeg보다 낫고, 가로 1000px이상의 대형 이미지의 경우에는 jpeg에 비해서 webp의 장점이 사라진다고 한다. 오히려 avif가 더 용량이 낮았..
쿠키 SameSite 2020, 02월 내가 쿠키가 뭔지도 몰랐던 시절. Chrome 브라우저는 쿠키의 SameSite=Lax를 default로 변경했다. SameSite 정책은 크게 3가지가 있다. (None, Lax, Strict) SameSite=None None은 2020,01까지 사용되던 Default 정책으로 SameSite를 검증하지 않는다. 그래서 A사이트에서 B사이트로 요청을 전송하게 되면, 쿠키를 그냥 전송해버린다. 이제는 None을 하려면 Secure라고 명시해주어야 한다. SameSte=Strict Strict는 쿠키의 SameSite 검사를 강하게 제한하는 정책이다. 소스 도메인과 대상 도메인이 일치해야 쿠키를 포함해서 전송한다. 대상은 요청할 수 있는 모든것이다. SameSite..
innerText와 textContent의 차이점 보통 element의 텍스트를 읽거나 수정할시에는 innerText와 textContent를 사용한다. 둘다 텍스트를 추가할 수 있고, 텍스트 값을 반환한다는 공통점이 있기 때문이다. 그럼 차이점은 무엇인가? textContent가 innerText보다 먼저 나와서 IE와 호환이 잘된다. textContent는 innerText가 사용자에게 보이는 값 위주로 반환하는 것과 달리, 가지고 있는 텍스트값을 그대로 반환한다. html코드에서 아무리 엔터를 많이해도 엔터는 1번 적용된것처럼 나타나는데, textContent는 그 엔터가 모두 반영되어서 출력되고, innerText는 엔터가 1번만 적용된것처럼 반환되는 것이다. 즉, display:none이 적용된..
https://www.jsdelivr.com/ jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use. www.jsdelivr.com 원래 일반적으로 그냥 github나 gist에 배포해서 src에 js 주소를 넣어주면 되지 않나 싶었는데, 그렇게 하니까 CORS에러가 뜬다. 찾아보니 github repo나 npm 패키지를 cdn으로 배포해주는 무..
https://www.youtube.com/watch?v=y7IEwpCBQ_o 엄청난 결과를 얻기 위해, 엄청난 노력이 필요한 것은 아니다.
https://dydals5678.tistory.com/42 CSS - 문서의 보이는 순서 (Z-INDEX , POSITION) POSITION HTML 문서의 엘리먼트 배치는 일단 순서대로 배치가된다. 그중 POSITION 속성이 있으면 POTSITION 의 값과는 상관없이 POSITION의 속성이 있는 엘리먼트들이 순서대로 배치가된다 하지만 POSITION이 dydals5678.tistory.com 나는 html의 요소의 쌓이는 순서가, 요소가 위차하는 순서나 z-index로만 결정되는 줄 알았는데, 최근에야 position도 쌓임 순서에 영향을 미친다는 것을 깨달았다. 예를 들어서 position 값이 있는것과 없는것이 있다면, 없는 것이 뒤쪽에 배치가 된다. 즉, 같은 형제레벨에서 position..
