개발자 지망생의 발전 과정 개발자 지망생의 발전 과정

XHR(XML Http Request) 자바스크립트의 XMLHttpRequest 객체를 통해 구현할 수 있다. 흔히 AJAX(Asybchronous Javascript And XML)라고 부르기도 한다. 페이지 새로고침 없이, 비동기적으로 서버에 요청을 보내고 응답을 받아오기 위해 사용. 사용자 경험(UX, User Experience)에 긍정적인 영향을 줌으로 많이 사용하는 편이다. XMLHttpRequest(XHR)은 AJAX 요청을 생성하는 JavaScript API 입니다. XHR의 메서드로 브라우저와 서비스를 통해 요청할 수 있습니다. 이름에 XML이 들어가긴 하지만, XMLHttpRequest은 XML 뿐만 아니라 모든 종류의 데이터 조작 가능 새로고침하지 않아서 속도가 빠르다. 일반적으로 아..

DOM(Document Object Model) 현재 자바스크립트가 가장 많이 사용되는 부분은 클라이언트 인터페이스인데, 사용자가 보게 될 화면을 구성하는 것을 말한다. 이 때, 주로 DOM API를 사용하게 되는데, DOM이란, 자바스크립트에서 HTML 문서에 접근하는 API를 말한다. Window - 브라우저의 창을 나타내는 전역 객체 - window 객체는 자바스크립트의 최상위 객체이면서 브라우저와 관련된 멤버를 모두 가지고 있다. - 전역적으로 사용할 수 있는 대상이 모두 window 객체의 멤버로 할당되어 있다. document - window의 멤버로, HTML 문서 (부터 까지)에 대한 내용을 담는 객체이다. - 객체 메서드 createElement(x) : 태그의 종류가 문자열인 x인 가상..

오브젝트(Object) - 키(Key)와 값(Value)으로 이루어진 쌍(Pair)의 집합을 가지는 객체 - 오브젝트의 작성 형태는 JSON(JavaScript Object Notation) Object의 형태와 같다 - 키와 값은 콜론(:)으로 구분하고, 이러한 키와 값으로 이루어진 쌍은 쉼표(,)로 구분하여 여러개 작성할 수 잇다. - 오브젝트가 가지는 쌍들에는 순서가 없음으로 인덱스를 통한 접근이 불가 - 오브젝트에 키를 통해 값에 접근할 수 있고, 하나의 오브젝트가 가지는 동일한 계층의 키는 고유해야 한다 - 오브젝트가 가지는 키는 반드시 문자열이어야 하고 값의 타입에는 제한이 없다 let [이름] ={ [키 1] : [값 1], [키 2] : [값 2], [키 3] : [값 3], ... }; ..

함수(Function) - 호출(Call, invoke) 가능한 대상 - 반복적으로 여러곳에서 사용될 가능성이 농후한 로직을 분리하기 위함 - 함수의 명명법은 카멜케이스. 또한 이는 동사이거나 '동사+목적어'의 형태를 가지는 것이 바람직 함수 호출 - 일반 함수와 화살표 함수를 구분하지 않고 아래와 같이 호출할 수 있다. [함수 이름]([전달 인자], ...?) 가령, parseInt라는 이름을 가지는 함수에 전달인자 '3.141592'를 전달하여 호출하는 표현은 아래와 같다. parseInt('314'); 추가로 console의 멤버인 log 함수에 전달인자 'Hello World'를 전달하여 호출하는 표현은 아래와 같다 console.log('Hello World'); 일반 함수 일반 함수 funct..

반복문 공통 키워드 - break : 현재 실행 중인 반복문 종료. - continue : 현재 사이클 생략하고 다음 사이클로 넘어감 for - 반복의 기준이 되는 변수(주로 인덱스)를 활용하여 특정 구현부를 반복하고자 할 때 사용 for([변수 선언 및 초기화]; [반복 조건]; [변수 가감 및 할당]){ [구현부] } 1. for 반복문을 위한 변수를 선언 혹은 초기화한다. 2. 반복 조건이 참(true)인지 확인 a. 반복 조건이 참이면 [구현부]를 1회 실행하고 3으로 이동 b. 반복 조건이 거짓이면 for 반복문 종료 3. 변수 가감 및 할당을 실시하고 2로 돌아감 1부터 5까지의 정수를 출력하기 위해 아래와 같이 작성할 수 있다. for(let i = 1; i

연산자 할당 연산자 - 일반 할당(=) : x = y 꼴에서 y를 x에 할당 - 더하기 복합 대입 연산(+=) : x += y 꼴에서 x와 y를 더한 값을 x에 재할당, x = x + y와 같음 - 빼기 복합 대입 연산(-=) : x -= y 꼴에서 x에 y를 뺀 값을 x에 재할당, x = x - y와 같음 - 곱하기 복합 대입 연산(*=) : x *= y 꼴에서 x에 y를 곱한 값을 x에 재할당, x = x * y와 같음 - 나누기 복합 대입 연산(/=) : x /= y 꼴에서 x에 y를 나눈 값을 x에 재할당, x = x / y와 같음 - 나머지 복합 대입 연산(%=) : x %= y 꼴에서 x에 y를 나눈 나머지를 x에 재할당, x = x % y와 같음 - 거듭 제곱 복합 대입 연산(**=) : x..

변수(Variable) - 선언(Declaration) 및 값 초기화(Intitialization) 이후 값이 변할 수 있는 것 - 변수 선언 시 별도의 타입을 명시하지 않고, 명명법으로 카멜 케이스를 사용한다 - 동일하거나 보다 상위의 스코프(Scope)에서 사용중인 이름이나 약속된 키워드를 변수 이름으로 사용할 수 없다. - 변수 선언 시 값을 부여(Assignment)하지 않으면 초기 값으로 undefined가 할당된다. 변수 선언 let [변수 이름]; 위처럼 값 초기화 없이 변수를 선언할 경우 그 값은 undefined로 초기화된다. 변수 선언 및 초기화 let [변수 이름] = [초기값]; 상수(Constant) - 선언 및 초기화 이후 값이 변하지 않는 것 - 명명법으로 카멜 케이스 이용 -..