예전에는 웹 브라우저가 서버에 요청을 하면, 서버에서 완성된 HTML page를 만들어 주는 것이 일반적이었다. 그래서 웹 사이트에서 다른 서버로 요청을 날린다? 하면 개인정보 유출등의 보안적인 행동을 한다고 의심하는 것이 일반적이었다고 한다. 이로인해, 웹 브라우저는 웹 사이트의 요청으로 인해 받은 응답의 서버 도메인이 현재 도메인과 다르면 요청자체를 막아버리는 선택을 하게 된 것이다. 최근에는 웹 사이트에서 할 수 있는 일이 아주 많아졌다. 그러다 보니, 웹 사이트에서 다른 서버로 요청을 보내어 데이터를 받아야 할 수 있는 일도 생겼다. 근데 브라우저 정책상 막혀있으니, 개발자들은 다른 방법을 생각해내었다. 그렇게 나온것이 JSONP이다. html 스크립트 상에서는 다른 도메인에 대한 요청을 하는 것..
웹 브라우저의 구조는 다음과 같다. 1. User Interface : 주소 표시줄, 이전/다음/새로고침 버튼 등의 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스 2. Browser Engine : 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진 3. Rendering Engine : HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진 4. Networking : 각종 네트워크 요청을 수행하는 네트워킹 파트 5. Javascript Interpreter : 자바스크립트 코드를 실행하는 인터프리터 (V8) 6. UI Backend : 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트 7. Data Persistence : localStorage나 Co..
밤새서 미션을 하고 씻는 도중 현재 채택하고 있는 git flow전략에서 머지 방법을 바꿔보자는 의견이 있었다. "feature -> dev는 sqush and merge, dev -> main은 rebase and merge로" 원래는 둘다 스쿼시 머지를 하고 있었는데, 현재 전략을 수정함으로써 얻을 수 있는 이점을 샤워끝나자마자 정리한다. 역시 우테코는 학습하기에 정말 좋은 환경이다 👍 아무튼 내가 전략 수정에 찬성하게된 이유는 다음과 같다. 첫번째 이유로는 git flow 전략은 짧은 배포 주기가 특징인데, dev -> main에서 굳이 커밋을 한번더 생성할 이유가 없다는 것이었고, 두번째 이유로는 짧은 배포 주기때문에 hoxfix나 롤백에 굉장히 유연해야 하는데, dev, main 브랜치의 커밋내..
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://dydals5678.tistory.com/42 CSS - 문서의 보이는 순서 (Z-INDEX , POSITION) POSITION HTML 문서의 엘리먼트 배치는 일단 순서대로 배치가된다. 그중 POSITION 속성이 있으면 POTSITION 의 값과는 상관없이 POSITION의 속성이 있는 엘리먼트들이 순서대로 배치가된다 하지만 POSITION이 dydals5678.tistory.com 나는 html의 요소의 쌓이는 순서가, 요소가 위차하는 순서나 z-index로만 결정되는 줄 알았는데, 최근에야 position도 쌓임 순서에 영향을 미친다는 것을 깨달았다. 예를 들어서 position 값이 있는것과 없는것이 있다면, 없는 것이 뒤쪽에 배치가 된다. 즉, 같은 형제레벨에서 position..
