JavaScript (30) 썸네일형 리스트형 Javascript) Web Storage Web Storage 키 밸류 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴 쿠키는 한 번 설정하면 이후 모든 웹 요청에 이 쿠키가 포함되어 서버로 전송되지만 웹 저장소에 저장된 데이터는 클라이언트에 존재할 뿐 서버로 전송이 이어지지 않아 네트워크 트래픽을 줄인다. 문자열 기반 데이터 이외에 구조회된 객체를 저장할 수 있다. 쿠키는 하나당 최대 4KB로 한 사이트당 최대 20개까지로 용량 제한이 있지만 웹저장소는 용량제한이 없다. 쿠키는 만료 일자를 지정하여 그 날짜에 제거되고 만약 만료 일자를 지정하지 않으면 세션 쿠키가 된다. 웹저장소는 만료 기간 설정 자체가 없어 한번 저장한 데이터는 영구적으로 저장된다. Local Storage 명시적으로 지우지 않는 이상 영구적 보관이 가능하다... Javascript) this 용법 자바스크립트 함수는 호출될 때, 매개변수로 전달되는 인자값 외에 arguments 객체와 this를 암묵적으로 전달받는다. Java에서 this는 객체 자기 자신을 참조하는 변수 Javascript에서 this는 함수 호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정됨 함수 호출 방식 var foo = function () { console.log(this); }; 함수 호출 foo(); // Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …} 전역 객체 (global object)는 모든 객체의 유일한 최상위 객체 = window 글로벌 스코프에 선언된 함수는 전.. Javascript) undefined vs null undefined vs null 공통점 원시자료형 undefined 아무 값도 할당 받지 않은 상태 var로 선언한 변수는 자바스크립트 엔진에 의해 암묵적으로 undefined로 초기화됨 즉, 초기화되지 않은 var 변수 null null != NULL != Null 값이 비어있는 상태 개발시에 의도적으로 해당 변수에 값을 주지 않는 경우 사용 null을 할당하면 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미 즉 값에 대한 참조를 명시적으로 제거하여 가비지 콜렉션의 수집 대상이 되게 하는 것 (메모리 반납) References https://hanamon.kr/javascript-undefined-null-%ec%b0%a8%ec%9d%b4%ec%a0%90/ Javascript) 클로저(Closure)란? 이 글은 아래 링크의 글을 공부하면서 정리한 글입니다. JavaScript 클로저(Closure) 클로저란?MDN에서는 클로저를 다음과 같이 정의하고 있다. 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’. 흔히 함수 내 hyunseob.github.io 클로저(Closure)란? 독립적인 자유 변수 함수 내에서 함수를 정의하고 사용하는 것 내부 함수가 상위 스코프의 식별자를 참고하고, 그 상위 스코프를 외부에서 사용했을 때 내부 함수에 의해 참조되고 있는 상위 스코프의 식별자를 수정할 수 없는 형태 외부 함수는 내부 함수의 지역 변수에 접근할 수 없지만 내부 함수는 외부 함수의 변수에 접근할 수 있다 클로저는 각자의 환경을 가지고 있고.. Javascript) 호이스팅(Hoisting) 이란? 이 글을 아래 링크를 공부하며 정리한 글입니다. [JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog Step by step goes a long way. gmlwjd9405.github.io 호이스팅(Hoisting) 이란? Hoist : 게양하다 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 자바스크립트 parser가 함수 실행전 해당 함수를 한 번 쭉 훑은 다음, 함수 내 필요한 변수 값들을 모두 모아서 유효 범위(함수 블럭 { .. } 내)의 최상단에 선언 즉, 현재 실행되는 라인에 필요한 변수가 해당 라인 아래쪽에 위치해있다면 자바스크립트 파서가 내부적으로 끌어올려 사용할 수 있게 처리하는 것인데 실제 코드 위.. Javascript) 서버와 통신 없이 file 타입의 input에 업로드한 이미지 파일 바로 화면에 보여주기 (input onchange event) 파일 타입의 input에 사용자가 파일을 넣고, 별도의 서버 통신 없이도 이 파일을 화면에 보여주는 방법이다. 그냥 input에 value를 읽으면 fake path로 보여주기 때문에 file reader 객체를 통해서 읽어야 한다. $("#file-input").on("change", (e) => { var file = e.target.files[0] var fr = new FileReader(); fr.readAsDataURL(file) fr.onloadend = (e) => { $("#uploaded-file-img").append(` `) } }) 웹/Frontend) 브라우저 동작 방식 브라우저의 주요 기능 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시 자원은 주로 html 문서 또는 정적 파일 URI : Uniform Resource Identifier - 자원의 주소 브라우저의 기본 구조 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼 등 브라우저 상단의 툴바같은 부분 브라우저 엔진 : 사용자 인터페이스 - 렌더링 엔진 사이의 동작을 제어 렌더링 엔진 : 요청한 콘텐츠를 화면에 표시 ex) 파이어폭스 : Gecko / 사파리,크롬 : 웹킷 동작 과정 HTML 문서 파싱 콘텐츠 트리 내부에서 HTML 태그를 DOM 노드로 변환 외부 CSS 파일의 스타일 파싱 이 정보들로 랜더트리 생성 랜더트리 순서대로 화면에 표시 후 각 노드를 화면의 정확한 위치에 표시 UI 백엔드에서 .. Javascript) 서버에서 보내는 Blob 객체 > File 객체 받기 var xhr = new XMLHttpRequest() xhr.open("POST", "", true) xhr.setRequestHeader('Content-type', 'application/json') xhr.responseType = 'blob' xhr.send(JSON.stringify(json)) // json을 바디에 담아서 요청 보낼 경우! 아니면 그냥 send() xhr.onload = function() { console.log(xhr) var blob = xhr.response var file = new File([blob], "sample") // blob 은 반드시 배열안에 담아야 한다! console.log(file) } ajax로 받았더니 그냥 responseText에 바이너리로.. 이전 1 2 3 4 다음
