Peep

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

replaceAll & replaceWith

선택자 DOM을 제거하고 새 콘텐츠를 삽입한다
replaceAll, replaceWith 메서드들은 같은 동작을 하고 있으며 구문의 차이가 있다.

// HTML
<div id="box">
<div class="inner">1번</div>
<div class="inner">2번</div>
</div>

// jQuery
$( "<div>새로운</div>" ).replaceAll( ".inner" );
$( ".inner" ).replaceWith( "<div>새로운</div>" );

// 출력
<div id="box">
  <div>새로운</div>
  <div>새로운</div>
</div>

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

animate

css 속성의 애니메이션 효과를 만들 수 있다.

// CSS
#box { width:300px; height:300px; background:red; }

// HTML
<div id="box"></div>

// jQuery
$('#box').animate({
  opacity : 0.25,
  width : '100px',
  height : '100px'
  
}, 5000, function(){ // 5000은 5초를 의미
	// 종료 후 실행될 코드 작성
});

show & hide

선택자를 즉시 표시하거나 감춘다.
css 메서드를 통해 display를 조작하는 것과 유사하지만 show & hide 메서드는 사용자가 입력했던 display의 처음 값으로 복원해준다.
css에 display:none !important 를 입력한 경우 show 메서드 적용이 안된다.

// CSS
#box{ display:inline-block width:100px; height:100px; background:red; }

// HTML
<div id="box"></div>
<button class="show">Show</button>
<button class="hide">Hide</button>

// jQuery
$('.show').on('click', function(){
	$('#box').show();
}); // hide 후 show할 경우 display:inline-block이 유지된다.

$('.hide').on('click', function(){
	$('#box').hide();
});

css

스타일 요소에 접근하여 값을 가져오거나 설정할 수 있다.

// CSS
#box{ width:100px; height:100px; background-color:red; }

// HTML
<div id="box"></div>

// CSS
#box{ width:100px; height:100px; background-color:red; }

// HTML
<div id="box"></div>

// jQuery
$('#box').css('background-color'); // 색상 값 반환
$('#box').css('backgroundColor'); // 색상 값 반환
$('#box').css('width', '500px'); // width 설정
$('#box').css({ 'width' : '500px', 'height' : '500px'}) // 배열로 속성 여러개 설정

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

width

요소의 너비 값을 가져온다.
css의 padding 값을 무시한다.

// CSS
#box { padding:50px; width:300px; }

// HTML
<div id="box"></div>

// jQuery
$('#box').width(); // 300을 반환

innerWidth

요소의 너비 값을 가져온다.
css의 padding 값을 포함한 값을 가져온다.

// CSS
#box { padding:50px; width:300px; }

// HTML
<div id="box"></div>

// jQuery
$('#box').innerWidth(); // 400을 반환

height

요소의 높이 값을 가져온다.
css의 padding 값을 무시한다.

// CSS
#box { padding:50px; height:300px; }

// HTML
<div id="box"></div>

// jQuery
$('#box').height(); // 300을 반환

innerHeight

요소의 높이 값을 가져온다.
css의 padding 값을 포함한 값을 가져온다.

// CSS
#box { padding:50px; height:300px; }

// HTML
<div id="box"></div>

// jQuery
$('#box').innerHeight(); // 400을 반환

보안 강화를 위해 Chrome 80부터 SameSite의 기본 속성값이 None 에서 Lax로 변경되었습니다.

현재 Chrome 84 에서 코로나로 인해 기능을 롤백했지만 Chrome 84이후(안정적인 버전, 7/14일 이후) 다시 재개할 계획이라고 합니다.

해당 속성의 변화는 Chrome 80 이상의 웹 브라우저만 해당하며 이후 Firefox, Edge등의 브라우저도 동일하게 적용한다고 합니다.

<img>, <form>, <iframe>, <link>, <a> 등에서 영향이 있습니다.

Android의 chrome에는 적용하지 않으며 iOS의 chrome은 영향이 없습니다.

SameSite 3가지 속성

None 

쿠키 사용에 있어서 소스가 되는 주소를 검증하지 않습니다.

동일 사이트, 크로스 사이트에 모두 쿠키 전송이 가능합니다.

Strict

보안 정책으로 다른 도메인일 경우 전송을 차단합니다.

소스가 되는 주소의 도메인과 요청하는 도메인이 일치하는지를 확인하여 일치할 경우에만 쿠키가 전송됩니다.

예시

www.google.com → www.google.com (O)

www.google.com → www.naver.com (X)

Lax

Strict 설정의 일부를 예외로 두고 동일하게 동작합니다.

예시

<a href>
<link href>
<form method=get>

예시

기본 값이 Lax로 변경함에 따라 None으로 설정하지 않으면 Lax가 적용됩니다.

None 설정 시 Secure 키워드를 같이 적용해야합니다.

Javascript 설정 예시

document.cookie = "name=yoon";
document.cookie = "name=yoon; SameSite=Lax"; // 위와 같다

document.cookie = "name=yoon; SameSite=None; Secure"; // Secure 추가

서버 설정에서 한번에 모든 쿠키 속성을 변경할 수도 있습니다.

마무리

SameSite 속성은 사용자에게 불편을 줄 수 있지만 CSRF(사이트 간 요청 위조, Cross-site request forgery) 보안을 강화할 수 있습니다.

소셜 미디어 플랫폼, 타 회사의 사이트와 연동된 페이지가 있는 경우에는 Strict으로 할 경우 쿠키가 차단되므로 사용 시마다 인증해야되는 불편함이 생기기 때문에 쿠키를 사용할때에는 상황을 고려해서 사용해야합니다.

참고 및 정보 출처

• https://docs.adobe.com/content/help/ko-KR/target/using/implement-target/before-implement/privacy/google-chrome-samesite-cookie-policies.translate.html
• https://www.chromium.org/updates/same-site
• https://ifuwanna.tistory.com/223
• https://www.hahwul.com/2020/01/samesite-lax.html