JS Stack/Front-end
SameSite Cookie
SameSite Cookie
2020.06.15쿠키(Cookie)와 저장소(Storage) SameSite cookies explained https://web.dev/samesite-cookies-explained/ first-party cookie와 third-party cookie 브라우저는 도메인 별로 쿠키를 저장하고 있다. 따라서 다른 도메인으로 이동한다고 해서 쿠키가 삭제되지 않는다. 다른 사이트 갔다가 돌아왔을 때, 로그인 상태가 유지되는 것은 브라우저가 해당 도메인의 세션 쿠키를 다시 꺼내기 때문이다. 어떤 도메인에 요청할 때, 브라우저는 해당 도메인의 쿠키를 꺼내 헤더에 포함하여 전송하도록 되어 있다. 내가 현재 도메인 A에 있고, 페이지 내에 삽입된 이미지는 외부 도메인 B의 데이터다. 이미지를 불러오기 위하여 외부 도메인 B로 요..
Same-origin Policy, CORS
Same-origin Policy, CORS
2020.06.14Same-origin Policy와 CORS https://en.wikipedia.org/wiki/Same-origin_policy 영문 위키가 젤잘나와있음. 시나리오까지. W3C spec Same-origin Policy란? 스크립트에 적용되는 정책이며, 스크립트 내에서 다른 리소스를 요청할 때 요청지가 Same-origin이 아니면 막는 정책 현재 리소스(스크립트)를 가져온 출처와 (프로토콜, 호스트, 포트)가 동일한 출처를 Same-origin으로 판단한다. 이는 브라우저가 `` document.domain``을 보고 판단함. 좀 더 정확히는, Cross-origin read를 막는다. https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_..
HTML5 data-* attribute
HTML5 data-* attribute
2018.11.23HTML5 data-* attribute```htmlOwl```Global attribute다.페이지 혹은 앱 내에서만 사용할 데이터에 지정한다. 이렇게 지정한 데이터 ``c "bird"``는 JS에서 불러와 사용할 수 있다. CSS에서도 불러와 사용할 수 있다는게 큰 특징!!```js// getAttribute()를 사용하기var test = document.getElementById('test');console.log(test.getAttribute("data-animal-type")); // .으로 접근하기 (IE 11 이상, 표준)var test = document.getElementById('test');console.log(test.dataset.animalType); // 자동으로 camel..
[HTML] form tag, input 태그 속성
[HTML] form tag, input 태그 속성
2017.06.10input 태그checkbox와 listbox는 ``html ``로 지정하면 서버에서 배열로 받을 수 있다.HTML5에서 input에 type이 많이 추가되었으니 참고할 것.(tel, email, url, date, ...) 이를 사용하면 좀 더 semantic하게 나타낼 수 있다.HTML5에서 input에 placeholder 등의 attribute가 추가되었으니 참고. 아무것도 입력 안하는 상태를 방지하려면 `` required`` 추가. 다른 길이 제한 속성을 쓰더라도, 별개로 써줘야 함.입력되는 문자의 최대 길이를 제한하려면 `` maxlength``입력되는 문자의 최소 길이를 제한하려면 `` maxlength``입력되는 문자의 패턴을 제한하려면 `` pattern``(정규표현식) - 근데 max..
[Front-end] Ajax
[Front-end] Ajax
2017.05.28Ajax : Asynchronous JavaScript and XML 프레임워크나 언어를 지칭하는 것이 아닌, 대화식 웹 어플리케이션 제작 기법을 의미 페이지 전환 없이 JS단에서 서버에 데이터를 요청하는 것이 Ajax Ajax 예? 자동완성 기능. 페이스북. 페이지 이동을 하지 않고 데이터를 불러오고, 댓글이 새로고침되니까 F12의 Network탭을 보면 주고받는 데이터를 확인할 수 있음 JSON ( JavaScript Object Notation ) 자바스크립트에서 사용하는 객체 형태로 데이터를 표시하는 형식이다. json data는 ``js eval()``을 이용해 바로 js 객체로 만들 수 있다. (``$.extend``를 사용해도 가능할 것 같다.) ```js let json = eval('('..
CSS Selector
CSS Selector
2017.05.24CSS Selectorcascading 우선순위```!important > style attribute > #id > .class > tag selector```같은 cascading 우선순위를 가질 경우 아래에 위치한 style이 더 높은 우선순위를 가진다.minify할 때 주의해야 할 점이, 같은 속성 같은 값을 지정하는 경우 cascading을 고려해서 일부러 따로 지정해놓은 경우도 하나로 합쳐버린다. 그래서 끝 값 1정도를 다르게 주어야 하는 경우가 있다.가장 구체적으로 지정된 selector가 제일 우선시 된다.그래서 ``html ``요렇게 있는 DOM에서... `` .body.center``로 선택한 것이 `` .body``로 선택한 것 보다 우선한다.이런 경우 `` .body.body``로 ..
CSS 팁과 기본 지식
CSS 팁과 기본 지식
2017.05.03CSS tip생활코딩 CSS 사전 뭔가를 숨길 때```cssheight: 0px;보다는display: none;을 사용하는 편이 좋다.``` 줄바꿈```css// 한문자 단위로 쪼개려면 word-break: break-all; // 스페이스바 나와도 안쪼개고 1자로 쭉 이어 갈거면(스크롤 있는 경우)white-space: nowrap;``` css 세로 가운데 정렬다양한 방법이 있지만, flex를 쓰거나 아래 링크에서 저자가 괜찮다고 한 방법이 좋아 보임.https://mytory.net/archives/9727 CSS selector2017/05/24 - [Web/Front-end] - CSS Selector px과 rem, empx - 절대 크기rem - root element(html)의 상대 크기..
[HTML, JS] refresh / redirect
[HTML, JS] refresh / redirect
2017.04.29사실 HTML과 JS를 이용해 redirect하는 것 보다 서버 측에서 HTTP redirection status code(301, 302)를 보내 redirect하도록 하는 것이 더 좋다. 2017/06/08 - [Web/Back-end] - [PHP] HTTP response header 수정 JS를 이용하면 JS가 비활성화 되어 있는 경우 제대로 동작하지 않으니 JS보다는 HTML을 사용한 방법이 나은 것 같다. HTML```htmlrefresh : redirect : `````content``에 url이 한꺼번에 들어간다는 것에 유의. JS```jsrefresh : location.reload() redirect : location.href='http://www.example.com/'```
[jQuery] CDN, Usage
[jQuery] CDN, Usage
2017.04.13jQuery보다 먼저 알았으면 좋았을 것들 jQueryjQuery는 주로 DOM, Ajax, 그리고 event와 effect를 처리하기 위해 사용하는데, effect같은 경우 css로 처리할 수도 있다. hover같은건 effect로 봐야하기 때문에 css로 처리하는 것이 좋고, onclick은 event로 봐야하기 때문에 JS로 처리해야 한다. effectcss로는 어려운 동적으로 페이지를 꾸미는 작업은 보통 jQuery Plugin을 활용해 처리하게 된다. DOM기존 JS로 DOM을 선택, 추가, 수정하려면 제한이 많은데, jQuery를 활용하면 복제, 이동 등의 작업도 간단히 처리할 수 있다. 그래서 DOM 관련 작업을 하다가 뭔가 복잡한 것 같으면 그냥 jQuery를 찾아보는게 더 빠를 수 있다...
쿠키(Cookie)와 저장소(Storage)
쿠키(Cookie)와 저장소(Storage)
2017.04.12Cookie와 Storage 모두 개발자 도구의 Application 탭에서 확인할 수 있다.Cookie는 EditThisCookie 크롬 확장프로그램을 사용하는 것이 편하다. Cookie서버에서 클라이언트가 쿠키를 설정하도록 지정할 수도 있고, 클라이언트에서 자체적으로 설정할 수도 있다.HTTP는 stateless protocol이므로 상태를 저장하기 위해 쿠키를 이용한다. 쿠키는 기본적으로 `` Name=Value`` 형태로 지정한다.다음 속성들도 가질 수 있다.Expires / Max-Age : 파기 날짜를 지정하지 않으면 브라우저가 종료될 때 쿠키가 삭제된다.Path : 입력하지 않으면 현재 도메인의 경로로 자동 입력된다. 지정한 경로의 하위에서만 해당 쿠키에 접근할 수 있다.Domain : 입력..
[Front-end] DOM 이벤트 모델
[Front-end] DOM 이벤트 모델
2017.03.15https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick eventuality이벤트 핸들러 추가, 실행, 관리 객체https://github.com/umbum/Web/blob/master/JS/goodparts/eventuality.html 이벤트흔히 사용하는 ``js window.onload``가 바로 이벤트다.```jswindow.onload = function(){};load : 이벤트 이름 또는 이벤트 타입( event type )onload : 이벤트 속성function(){}; : 이벤트 리스터 또는 이벤트 핸들러``` 문서 객체에 이벤트를 연결하는 방법을 이벤트 모델이라 한다. 이벤트 모델은 다음과 같이 DOM Level에 따..
[JS] 팁, 문서 객체 모델(DOM)
[JS] 팁, 문서 객체 모델(DOM)
2017.03.15TIP 웹 브라우저는 ``html ``를 먼저 읽고 ``html ``를 읽는다. 일반적으로 ``html ``` 둘 다 스크립트를 내려받는 동안은 HTML parsing을 진행하는데 ``async``는 스크립트를 내려받은 직후 스크립트를 실행하고 ``defer``는 스크립트를 내려받고 계속 HTML parsing을 진행하다 HTML parsing이 끝나는 시점에 스크립트를 실행하게 된다. ``defer``, jQuery, `` window.onload`` 순으로 빠르다. ```js $(function() {}); equivalent to $(document).ready(function() {}); window.onload = function(){}; ``` window 객체 브라우저를 통해 JS를 사용할 ..