You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[JS] 🍪 자바스크립트로 쿠키(Cookie) 다루기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbV8a0s%2FbtrfXyhqGb1%2FYimJMLP77H72UB0kojd7l1%2Fimg.jpg)
[JS] 🍪 자바스크립트로 쿠키(Cookie) 다루기
Cookie란? Cookie는 데이터이면서, 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어있는 것이다. 어떤 사이트에 접근을 하고 '하루 동안 이 창을 보지 않기'라는 문구를 본적이 있는가? 아니면, 로그인을 위해 로그인 정보 저장, 자동 로그인 같은 경우를 본적 있는가? 사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다. 쿠키를 알아보기 전, 쿠키가 저장되는 방식은 key : value 방식임을 기억해두자. ex) username = 홍길동 브라우저가 웹 페이지를 서버로부터 요청하게되면, 이 페이지에 속한 쿠키들이 추가로 요청된다. 이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다. 💡 쿠키와 세션..
🌐 부모창 ↔ 자식창 서로 값 전달하기
부모창에서 자식창으로 값 전달하기 자바스크립트에서 window.open()을 이용하면 팝업창을 띄울 수 있다. 이때 팝업창은 자식창, 팝업을 띄우는 창은 부모창이 된다. 그리고 자식창과 부모창간에는 서로 값을 주고받을 수 있다. 부모창에서 자식창에 접근하려면, 우선 window.open()을 통해 얻은 팝업창 객체를 변수에 담고 그 변수를 통해 접근하면 된다. let openWin = window.open("Child.html"); openWin.document.getElementById("cInput").value = "전달하고자 하는 값"; Parent.html 부모창 전달할 값 : [자식창 열기]를 클릭하면 openChild() 함수가 실행되며 자식창이 열린다. 그리고 [전달] 버튼을 클릭하면..
🌐 HTML 포커스 제어하기 - focus, blur
HTML 포커스 제어 사진이나 이미지와 같은 작업을 다뤄보신 독자 분은 아마 focus와 blur 처리에 대해 들어본 적이 있을 것이다. 사진에 블러 처리를 하면 이미지가 흐려지고 포커스 처리하면 흐린게 원래대로 되돌아온다. HTML 포커스는 이러한 개념을 엘리먼트에 가져온 것으로 보면 된다. HTML에서 , , , 와 같은 엘리먼트에 focus 를 부여하면 해당 요소에 데이터를 입력할 준비가 되었다를 의미한다. blur는 반대로 포커스를 잃은 순간을 이야기 하는데, 입력란에서 더이상 데이터를 입력할 수 없는 상태라고 보면 된다. focus / blur 이벤트 focus 이벤트는 요소가 포커스를 받을 때, blur 이벤트는 포커스를 잃을 때 발생한다. onfocus : 입력창이 포커스 받을 경우 작동 o..
🌐 Fetch API 으로 AJAX 요청하기
자바스크립트 AJAX 요청 방식 정통적으로 XMLHttpRequest() 객체를 생성하여 요청하는 방법이 있지만 문법이 난해하고 가독성도 좋지 않다. 따라서 이번시간에는 자바스크립트 AJAX 통신의 최신 기술인 fetch() 메서드 사용법에 대해 알아보는 시간을 가져볼 예정이다. XML Http Request 방식 xmlhttprequest 객체를 이용한 정통적인 초창기 비동기 서버 요청 방식이다. 성능에는 문제는 없지만 코드가 복잡하고 가독성이 좋지 않다는 단점이 있었다. var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = function () { if (httpRequest.readyState == XMLHttpReques..
🌐 XMLHttpRequest 으로 AJAX 요청하기
AJAX (Asynchronous Javascript And XML) Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다. Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. ajax를 통한 웹 브라우저와 웹 서버 간의 통신 절차는 다음과 같다. 사용자에 의한 요청 이벤트가 발생 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냄 서버는 전달받은 XMLHttpRequest 객체를 가지고 요청을 처리 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 응답 데이터를 생성 웹 브라우저에 전달 이때 전달되는 응..
🌐 이벤트 기본 동작 취소 하는 3가지 방법
이벤트 기본 동작 취소하기 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 그밖의 브라우저 기본 단축키 (복사 기능이나, f12, 엔터 같이, 키를 누르면 기본적으로 동작하는 기능) 이러한 기본적인 동작들을 기본 이벤트라고 하는데, 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소하거나 조작 할 수 있다. 다음 3가지 방법을 소개해본다. inline 방식 onclick 의 속성값에 이벤트의 리턴값이 false이면 기본 동작이 취소된다. prevent event on opentutorials prope..
🌐 브라우저 이벤트 종류 & 사용법 총정리
브라우저 이벤트 란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있다. 이벤트가 발생하면 그에 맞는 반응을 하여야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다. 자바스크립트 이벤트의 종류 실무에 자주 쓰이는 대표적인 자바스크립트 이벤트를 소개한다. UI Event Event Description load 웹페이지나 스크립트의 로드가 완료되었을 때 unload 웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우) e..
🌐 DOM(문서 객체 모델) 다루기 문법 💯 총정리
브라우저 DOM 종류 브라우저는 HTML 문서를 로드한 후, 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데, 이것을 DOM tree라 한다. 문서 노드(Document Node) 트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다. 요소 노드(Element Node) 요소 노드는 HTML 엘리먼트를 표현한다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다. document.getElementById(id) // -> i..
🌐 브라우저 & 윈도우 화면 - 높이/너비 구하기
클라이언트(브라우저) 높이/너비 구하기 표준이 아닌 방법들로 해보니 브라우저 환경에 따라 인식이 이상하게 되는 경우가 발생했다. 제일 확실한 방법은 screen 객체를 활용하거나 HTML5 표준을 따르는 방법인 것 같다. body객체로 구하기 (HTML 표준 X) // 실제 사용하는 브라우저의 안쪽 너비 document.body.offsetWidth document.body.scrollWidth document.body.clientWidth // 실제 사용하는 브라우저의 안쪽 높이 document.body.offsetHeight document.body.scrollHeight document.body.clientHeight HTML5 표준 window.screenTop //: 상단으로부터 브라우저 위치 ..
🌐 window.open (새창 열기/닫기) 사용법 💯 정리
window.open (새창 열기) 웹브라우저에서 새창(팝업창)을 열기 위해서 가장 간단히 사용할 수 있는 방법이 바로 자바스크립트 window 객체의 open() 함수를 사용하는 것이다. var popup = window.open('팝업주소', '팝업창 이름', '팝업창 설정'); 다음은 팝업 클릭시 네이버창 팝업 띄우는 예제이다. See the Pen window.open by barzz12 (@inpaSkyrim) on CodePen. window.open 인수 정리 var popup = window.open(url, name, option); url 새창(팝업창)에 보여질 주소 다. 선택적인 값으로 비워두면 빈창(about:blank)이 보이게 된다. name 새로 열릴 창의 속성 또는 창의 이..
🌐 window.onload() 를 사용하는 이유
HTML 실행 위치에 따른 오작동 HTML 문서는 객체 태그들을 위에서부터 아래로 차례차례 읽어 들인다. 그런데 이러한 특성으로 인해 가끔 자바스크립트의 작성 위치에 따라 오작동을 일으키기도 한다. 예를들어 아래 코드와 같이 hello 이러한 까닭은 HTML은 실행 이전에 에러 체크를 하지 않고 실행을 하는 인터프리터 언어적 특성으로 인해, 자바스크립트의 document.getElementById('name') 가 html 내부 id가 name이란 태그가 생성되기도 전에 실행되므로 요소를 가져올 수가 없어 문제가 일어나는 것이다. 그러므로 아래 와 같이 자바스크립트 태그를 문서의 뒤로 옮겨야만 하는데, 문제가 해결되기는 하지만 html 문서가 길어진다면, 내가 만든 자바스크립트가 아래쪽에 놓여있다면 휠을..
