본문 바로가기

웹

[JavaScript] JS파일 분리해서 쓰기 (모듈) 모듈이란 js파일 하나에 들어있는 내용이 많아서 분리하게 될 때, 여러 개로 분리한 각각의 파일을 모듈이라고 부른다. 대부분의 브라우저에서 지원되지만, 인터넷 익스플로러에서는 지원되지 않으니 주의. 그리고 모듈은 로컬에서 동작하지 않는다. 로컬 실행 시 라이브 서버 등을 이용할 것. 자바스크립트에서는 일반적인 스크립트 파일과, 불러오기가 가능한 모듈 파일의 타입을 달리 하고 있다. //스크립트 파일 //모듈 파일 모듈 파일은 export 를 사용해 파일 내부의 함수를 외부로 내보낸다. //hello.js export function hello(name){ console.log(`hello, world! I'm ${name}!`); } 모듈 파일을 불러올 때는 import 를 사용한다. 불러오는 함수는 중.. 더보기
[JavaScript] 자바스크립트의 클래스 클래스란 객체 지향 프로그래밍에서 동일한 종류의 객체를 여러 개 생성하기 위한 틀. 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 이루어져 있다. 주로 재사용을 위해 사용되며, 볼륨이 크거나 복잡한 사이트를 만들때 효과적이다. ES6에서 추가된 문법으로, 이전에는 prototype을 기반으로 클래스를 구현할 수 있었다. 클래스 선언 클래스는 함수와 달리 호이스팅 될 때 초기화되지 않는다. 따라서 정의를 먼저 해야 사용할 수 있다는 점에 유의하자. 클래스의 메서드는 클래스의 body(중괄호({}) 내부)에 정의해야 한다. 생성자(constructor) 새 클래스 객체를 생성할 때, 가장 먼저 자동으로 실행되며 객체의 초기 상태를 설정해주는 메서드. 생성자는 클래스 내에 하나만 존재해야 한다. c.. 더보기
[JavaScript] 자바스크립트에서 변수 이름 앞에 오는 달러($), 언더바(_) 다른 사람의 코드를 보다가 변수 앞에 달러 기호($)가 붙어있는 부분이 의문점이 들어서 찾아본 내용을 정리해본다. `${variable}`의 형식이 아닌 변수 이름 자체가 $variable 의 형식이었다. 식별자에서의 $, _ 알아보니 둘 다 일반 문자로, 식별자(변수나 함수) 이름으로 쓰일 때는 알파벳과 똑같이 취급된다. 특수한 기능이 있는 것은 아니고 관습적으로 사용된다. 이 요소를 활용해 변수 이름을 지으면 변수명만 보고도 그 변수의 특성을 쉽게 알아볼 수 있다. 달러 기호($) document.getElementById() 에 대한 바로가기를 나타낼 때 변수명 앞에 달러를 붙여 사용한다. //document.getElementById("test")의 요소를 매개변수로 받는 함수 function t.. 더보기
[JavaScript] 자바스크립트 클로저 클로저란 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이다. 풀어서 말하자면 함수가 생성된 당시의 외부 변수를 기억해, 생성 이후에도 계속 접근할 수 있게 해주는 기능을 말한다. 외부 함수의 실행이 끝나 외부 함수가 소멸해도 내부 함수는 외부 함수의 변수에 접근이 가능하다. JS의 코드적으로 보자면 아래처럼 비공개 변수를 가질 수 있는 환경에 있는 함수 정도가 되겠다. var makeClosure = function() { var name = 'hello'; return function () { console.log(name); } }; var closure = makeClosure(); closure(); // 'hello'; 클로저를 사용하는 상황 - 현재 상태를 유지하고 변경된 최신 상태를 유지.. 더보기
[JavaScript] 자바스크립트 this this값 함수가 호출되었을 때 그 함수가 속해 있던 객체의 참조. - 메서드 내에서 현재 객체를 참조 - 모든 함수에서 사용가능 - 함수가 호출되어 실행되는 시점에 this값이 결정됨 런타임에 따라 결정되며, 컨텍스트에 따라 가리키는 객체가 달라짐. 전역 컨텍스트에서 현재 객체인 전역 객체를 가리킨다. 웹브라우저에서는 window객체가 된다. 이벤트 처리기 안에서 이벤트가 발생한 요소 객체(이벤트 처리기가 등록된 객체)를 가리킨다. document.body.onclick = function() { console.log(this); } //body클릭 시, 엘리먼트가 출력됨 함수 내부에서 최상위 레벨 코드에서 호출하면 전역 객체를 가리킨다. function func() { console.log(this).. 더보기
[JavaScript] 실행 컨텍스트와 호이스팅 실행 컨텍스트란 코드를 실행하는데 필요한 환경 정보(코드 실행에 영향을 주는 조건이나 상태)를 모아놓은 객체를 말한다. 자바스크립트가 식별자 결정을 효율적으로 하기 위해 사용하는 수단이다. - 전역 컨텍스트: 브라우저가 스크립트를 실행할 때 생성. 모든것을 관리하는 환경으로, 페이지가 종료되면 사라짐. 안에 환경 레코드를 포함한다. - 함수 컨텍스트: 함수 호출 시 생성. 함수 실행이 마무리되면 사라짐. 자바스크립트 엔진이 코드를 실행할 때, 호출 스택(call stack)에 실행 컨텍스트를 push한다. 코드 내에서 함수를 호출할 때마다 호출 스택에 실행 컨텍스트가 push된다. 자바스크립트는 싱글 스레드로 작업을 처리하는데, 따라서 호출 스택에 쌓인 컨텍스트를 위에서부터(=가장 최근 들어온 것부터) .. 더보기
[JavaScript] 스코프(scope) 스코프란 현재 실행되는 컨텍스트를 뜻한다. 자바스크립트의 변수나 함수는 선언 될 때 그 위치에 따라 스코프를 가지며, 참조하는 대상을 찾기 위한 규칙이다. 예를 들어보자. 서로 다른 범위에 이름이 동일한 2개의 변수 x가 선언되어있을 때, x의 값을 콘솔에 출력하려고 한다. 이 때 현재 맥락에서 두 개의 x 중 어느 쪽을 참조하는지 알기 위해 필요한게 스코프라고 할 수 있다. var x = 'global'; function localFunction(){ var x = 'local'; console.log(x); //지역 스코프. local이 출력됨 } localFunction(); console.log(x); //전역 스코프. global이 출력됨 전역 스코프와 지역 스코프 자바스크립트는 함수 레벨 스코.. 더보기
[JavaScript] 자바스크립트 Window 객체 Window객체란 웹 브라우저의 창(window)을 나타내는 전역 객체. 모든 객체가 소속된 최상위 객체로 브라우저 요소, JS엔진, 모든 변수를 담고 있다. 전역 변수가 저장되는 위치가 된다. *대표적인 window 메서드 몇가지 window.open(url) 새 창 열기. 여는 방식 등을 추가로 설정 가능 window.close() 현재 창 닫기 window.setTimeout(function, time) 일정 시간 후 함수 실행 모든 객체는 window에 소속되어 있기 때문에 JS코드 작성 시 window는 생략하고 작성할 수 있다. //아래 두 코드는 같다. window.document.querySelector(body); document.querySelector(body); Window 객체의 .. 더보기

티스토리툴바