Frontend study (31) 썸네일형 리스트형 deep JavaScript - 2. 호이스팅 ✔ 호이스팅에 대해 정리합니다. 👍 호이스팅에 대해서 // var 영역 var val = 'global'; function func() { console.log(val); //undefined var val = 'local'; console.log(val); //local } func(); console.log(val); //global ================================================ // let 영역 let userName = 'James'; function func() { console.log(userName); //ReferenceError let userName = 'Mike'; console.log(userName); //Mike } func(); cons.. deep JavaScript - 1. 변수와 스코프 ✔ 변수를 정의할 때 사용하는 키워드인 let, const 그리고 var의 차이점과 변수의 스코프에 대해서 정리합니다. 👍 변수와 스코프 01. ES2015(ES6) 이전의 변수 정의 변수를 선언하는 방법으로 요즘은 let, const 키워드를 주로 사용하며 권장하고 있다. let, const가 등장하기 전에는 변수를 선언할 때 var 키워드를 사용했다. var 키워드를 사용하지는 않는 이유는 단순히 let, const가 편해서라기 보단(물론 편해서 사용하는 것도 어느 정도 맞지만) var 키워드로 선언한 변수 혹은 함수들이 가진 문제점들이 있기 때문이다. var와 let, const는 어떤 차이가 있고 왜 var를 사용하지 않는 게 좋은지 살펴보자! 02. var와 let, const의 차이 01) v.. JavaScript - 10. Event ✔ 자바스크립트의 이벤트에 대해 정리하고, 마지막에 카운터를 만들면서 이벤트에 대해 익혀보자 👍 이벤트(Event) :) 이벤트는 간단하게 "무언가 일어났다는 신호 또는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 메뉴를 클릭했을 때, 페이지가 로딩될 때 또는 마우스 조작(오른쪽 버튼 누름)하는 행위 등을 말한다. 여기서는 어떤 이벤트가 있고, 이벤트를 어떻게 처리해야 하는지에 대해 살펴본다. 1. 이벤트 관련 용어 1) 이벤트 이름(event name) : click, load 등과 같이 이벤트의 이름을 의미 2) 이벤트 속성 (event property) : 특정 요소에 이벤트를 직접 연결할 때 사용하는 속성을 의미 3) 이벤트 리스너/ 핸들러(event listener/handler) :.. HTTP 프로토콜 01. 웹 동작 방식 브라우저 검색창에 www.google.com 을 입력하면 구글 해당 페이지로 이동하게 된다. 어떻게 구글 페이지가 출력되는 것일까? 사용자가 브라우저를 통해 구글에 접속할 때, 다음과 같은 방식으로 동작한다. 1) 사용자가 웹브라우저를 통해 찾고자하는 URL 주소를 입력 (서버에 요청) 2) 사용자가 입력한 URL 주소 중에 도메인 네임 (google.com) 부분을 DNS 서버에서 검색 3) DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달 4) 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메시지를 생성 5) 이렇게 도착한 HTTP 요청 메시지는 HTTP 프로토콜을 사용하여 웹 페이지.. JavaScript - 9. DOM (= 문서 객체 모델) ✔ 자바스크립트의 DOM 에 대해 정리합니다. JavaScript 👍 여기서는 DOM 정의, 문서 객체의 생성, 문서 객체 제어, 스타일링 하는 방법을 정리한다. DOM (Document Object Model) :) 웹 페이지에 대한 인터페이스이다. 기본적으로 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다. 1. DOM 은 정확히 무엇을 말하나? 브라우저의 랜더링 엔진은 텍스트 파일로 생성된 웹 문서를 브라우저 화면에 보이도록 하기 위해서 이 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 올리는데 이를 DOM이라 한다. 쉽게 말해서 브라우저의 랜더링 엔진이 브라우저가 이해할 수 있도록 텍스트와 같은 형식의 파일들을 읽고 분석해서 브라우저가 이해할 수.. JavaScript - 8. 객체 ✔ 자바스크립트의 객체에 대해 정리합니다. 객체에 대해서 :) 기본 자료형(숫자, 문자열, 불린)은 값 하나를 담을 수 있지만, 객체는 여러 다양한 자료형을 담을 수 있는 자료형이다. 이러한 자료형을 참조형이라고 한다. 참조형에는 기본 자료형을 제외한 것(함수, 객체, 배열, 정규표현식등)들이 해당된다. 1. 객체란 : 객체는 중괄호({})안에 속성들을 담아서 표현하는 자료형이다. 객체는 데이터를 의미하는 속성(property)과 이 데이터를 참조하고 실행해주는 메서드(method)로 구성된다. 객체를 생성하는 방법은 여러가지 있다. 1) Oject 생성자 함수 : Oject 생성자 함수를 호출하여 객체를 생성할 수 있다. 2) 객체 리터럴 : 중괄호를 사용하여 객체를 생성할 수 있다. 3) 생성자 함수.. JavaScript - 7. 함수 ✔ 자바스크립트의 함수에 대해 정리합니다. 함수에 대해서 :) 함수는 특정 작업을 수행하는 데 필요한 기능들을 그룹핑화하기 위해 설계된 독립적인 블록이다. 함수도 일반 객체처럼 값으로 사용할 수 있어서 변수에 할당이 가능하다. (이러한 특징은 자바스크립트의 함수가 일급 함수이기 때문이다. ) 1. 함수 생성하기(= 함수 정의, 선언) : 함수를 사용하기 위해서 우선 함수를 정의(= 선언)해야 한다. 함수를 선언하는 방법은 두 가지가 있다. (생성자 함수로 선언하는 방법도 있지만, 여기서는 생략) 1) 함수 선언식(= 이름이 있는 함수, 유명함수) : 함수 선언식은 아래와 같이 함수명(myFunc)이 들어간다. function myFunc(num1, num2) { return num1 + num2 } 2).. JavaScript - 6. 배열 ✔ 자바스크립트의 배열에 대해 정리합니다. 배열에 대해서 :) 배열은 순서대로 나열된 데이터의 집합이다. 이 배열 안에 담긴 데이터들을 요소 (또는 값)라고 하며 그 요소의 위치를 인덱스라고 한다. 1. 배열 생성하기 [배열 생성하는 방법] 1. new 연산자로 Array 객체를 생성하는 방법 2. 배열 리터럴을 이용하는 방법 const arr1 = new Array(); //new 연산자로 Array 객체 생성하는 방법 const arr2 = []; //배열 리터럴을 사용하는 방법 배열은 위와 같은 방법으로 생성한다. 위 두 가지 중에서 2번의 배열 리터럴을 이용하는 방법을 주로 사용한다. 여기서는 배열 리터럴을 이용해서 배열을 사용하는 방법을 살펴본다. 배열 리터럴은 대괄호 ([])안에 요소를 쉼표로.. 이전 1 2 3 4 다음
