객체의 가변성 const originalArr = [1, 2, 3, 4, 5]; let copiedArr = originalArr; console.log(originalArr === copiedArr); copiedArr[0] = 6; console.log(originalArr, copiedArr); // [6,2,3,4,5] , [6,2,3,4,5] 위의 코드처럼 원본 객체는 그대로 두고 싶은 상황에서 복사본이 변경될 때 원본도 같이 변하는 문제점이 발생할 때가 있습니다. 이는 객체의 가변성으로 인해 생기는 문제입니다. == VS === ==은 값이 같은지만 비교하고, ===은 값과 타입이 같은지를 모두 비교합니다. let a = 1; let b = "1" console.log(a == b); // t..
JavaScript 메모리 구조 자바스크립트는 스택과 힙 두 가지 영역을 사용하여 객체가 생성될 때 자동으로 메모리를 할당하고, 더 이상 사용하지 않을 때 가비지 컬렉터를 통해 메모리를 해제합니다. (전역변수, Window 객체도 힙 영역에 저장됩니다.) JavaScript 엔진 (인터프리터 VS 컴파일) 자바스크립트는 최초 인터프리터 방식으로 만들어졌으며, 실행되는 플랫폼(브라우저 등)에 따라 인터프리터와 컴파일 방식이 혼합되어 사용되고 있습니다. 자바스크립트 엔진은 자바스크립트를 실행해 주는 프로그램으로 대부분 웹브라우저 (크롬 - V8, Safari - Webkit 등)으로 인터프리터 방식과 컴파일 방식 등 엔진 별로 목적에 맞게 사용됩니다. 컴파일 방식과 인터프리터 방식의 차이는 컴파일 유무입니다..
화살표 함수 (Arrow Function) 자바스크립트 ES6부터 => 화살표를 이용해서 익명 함수를 선언하는 Arrow Function이 도입되었다. Arrow Function을 사용하면 코드가 간결해진다. 자바스크립트에서 ES란 ECMASCRIT로 자바스크립트의 표준을 나타내는 용어이다. 2015년부터 ES6가 등장하였으며, 이후 ESXXXX 로 나타내고 있다. 문법 Syntax // 파라미터가 없는 경우 () => expression // 파라미터가 하나인 경우 (param) => expression param => expression param => { statements } // 파라미터가 여러개 인 경우 (paramA, paramB) => expression (paramA, paramB) =>..
HTML Hyper Text Markup Language 마크업 언어로 웹 문서를 작성하며, tag를 사용하여 문서의 구조 등을 기술하는 언어. Web & HTML 작동원리 서버는 클라이언트의 요청을 분석하여 결과값을 HTML로 전송하고 연결 종료. 클라이언트는 서버로부터 전달받은 HTML을 Web Browser에 표시 각 Web Browser는 브라우저 엔진이 내장되어 있고, 이 엔진이 tag를 해석하여 화면에 표현 Body 요소 id 속성을 이용하여 문서 내에서 tag를 유일하게 식별 가능 (id속성은 중복 X) class 속성을 이용하여 여러 tag에 공통적인 특성(CSS)을 부여 (class 속성은 중복 O); section section 태그를 이용하면 같은 태그를 서로 다르게 표현할 수 있다...
jQuery 크래스 플랫폼을 지원하여 모든 브라우저에서 동일하게 동작하게하는 javascript library 네이티브 DOM API보다 직관적이고 편리한 API 제공 Event, Ajax, Animation 효과를 쉽게 사용 설치 http://jquery.com/download/ 1. jquery-3.XX.X.min.js 파일 다운로드 시 웹 특정 경로에 저장 2. CDN (Content Delivery Network) jQuery API : http://api.jquery.com 기본 구문 $(selector).function(); // DOM객체들을 담은 래퍼세트 반환 == document.getElementXXX() $(document).ready(function() { //TODO... ..
Ajax 비동기 통신(Asynchronous JavaScript and XML) 동기 통신 : 통신을 요청한 쪽에서 응답이 올 때까지 블락킹 (URL이 직접 나오면서 변경) 비동기 통신 : 통싱을 요청한 쪽에서 응답이 올 때까지 블락킹 X : js 가 핵심 + WEB API - XMLHttpRequest, fetch,axios, jQuery 등 동작 원리 사용자에 의해 이벤트가 발생하면 핸들러에 의해 바로 자바스크립트를 불러온다. 그 후 자바스크립트에서는 XmlHttpRequest 객체를 이용하여 서버로 요청을 보내는데, 그 동안 웹 브라우저는 응답을 기다릴 필요 없이 다른 작업을 수행할 수 있다. (비동기) 서버측에서 처리를 마치고 XmlHttpRequest 객체를 전달 받으면 이를 토대로 Ajax요청..
JavaScript 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원 웹 브라우저가 JavaScript를 HTML과 함께 다운로드하여 실행 웹 브라우저가 HTML 문서를 읽어 들이는 시점에 JavaScript Engine 실행 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 HTML문서에서 사용할 때 script 태그를 사용 선언 내부 선언, 외부 선언 // 내부 선언 (HTML 5부터 type 생략 가능) // 외부 선언 head, body 모두 script 태그가 선언 가능하지만 body 끝 부분에 사용하는 것을 권장한다. head에 있으면 각종 작업 이전에 초기화 되므로 body에 있어야 HTML 먼저 해석하기 때문에 속도가 빠르다. 자료형 console.log("msg..