Trip to JavaScript(10)
-
[JS Log] 변수
프로그래밍의 기본인 변수, 나는 변수 생성 과정을 훤히 다 아는가라고 자문했을때 예니오가 나왔다. 너무 쉬운 내용은 패스하고 당당하지 못했던 부분을 정리해본다. 4.1 변수란 무엇인가? 왜 필요한가? > 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. > 직접 메모리 주소에 접근하는 것은 치명적인 오류를 발생시킬 가능성이 높기 떄문에 값의 위치를 가리키는 상징적인 이름인 변수를 붙여준다. > 변수에 저장된 값을 읽어 들이는 것을 참조라한다. 4.2 식별자 > 변수 이름을 식별자라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. > 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 식별자로 값을 구별해서 ..
2023.10.11 -
[JS Log] 배열
사실 배열은 기본 중 기본이지만 깊이 있는 이해를 위해 처음이자 마지막으로 드다본다. 27.1 배열이란? > 배열은 여러 개의 값을 순차적으로 나열한 자료구조다. > 배열이 가지고 있는 값을 요소라고 부른다. > 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다. > 배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다. > 자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이다. 27.2 자바스크립트 배열은 배열이 아니다. > 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 즉, 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다. 이러한 배열을 밀..
2023.10.08 -
[JS Log] ES6 함수의 추가 기능
JS에서 ES6는 도입은 혁신적인 변화였다. 오늘은 그 변화를 들여다보기로한다. 26.1 함수의 구분 > 책에서는 동일한 함수를 여러가지 형태로 호출할 수 있으나 사용 목적이 구분되지 않는 것을 지적하고 있다. > ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. var foo = function () { return 1; }; foo(); new foo(); var obj = { foo: foo }; obj.foo(); > ES6에서는 아래와 같이 함수를 구분해주기로한다. 26.2 메서드 > ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다. > ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructo..
2023.10.08 -
[JS Log] 프로미스
비동기에 대한 내용을 쭉 다루고 있다. 비동기와 점점 가까워지는 느낌이다. 정말 개발을 처음 배울 때 Promise는 너무 어려운 존재였다. 자꾸 뭘 약속을 해준다는데 더 이해가 안되는 느낌이었다. 그냥 처리를 해줄게라고 약속하는 것이었다. async/await이 나와 쓸 일은 많이 없지만 처음이자 마지막으로 제대로 정리해보고 간다. 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 const get = url => { const xhr = new XMLHttpRequest() xhr.open('GET', url) xhr.send() xhr.onload = () => { if (xhr.status === 200) { console.log(JSON.parse(xhr.response)) r..
2023.10.07 -
[JS Log] Ajax
프로그래밍을 배우면서 Ajax는 정말 두려운 단어였다. 뭐든지 모르는 상태에서 용어를 보면 또 그 것이 자주 나온다면 더 두려워지는데 아는 순간 그 두려움은 사라진다. 43.1 Ajax란? > Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에게 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. > 서버로부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 다시 렌더링하지 않고, 변경할 필요가 있는..
2023.10.07 -
[JS Log] 비동기 프로그래밍
비동기는 프로그래밍을 처음 배울 때 굉장히 어렵게 느껴지던 개념이었는데 실상 그렇지가 않다. 동기의 의미를 명확히하면 그러한데, 동기는 순서대로이다. 코드는 라인 바이 라인으로 진행한다. 이게 동기인데 이 순리를 거스르는 것이 비동기이다. 말그대로 순서를 지키지않고 먼저 처리하고 싶은 코드를 처리한다는 개념이다. 오늘 상세히 파헤쳐보겠다. 42.1 동기 처리와 비동기 처리 > 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. > 실행 컨텍스트 스택의 최상위 요소인 "실행 중인 실행 컨텍스트"를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크들이다. > 이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 싱글 스레드 방식은 한 번에 하나의..
2023.10.07