Life and IT

자바스크립트는 싱글 스레드라는 것은 개념을 외우듯이 알고 있었다. 하지만 자바스크립트 언어를 만든 브렌던 아이크 선생님은 왜 싱글 스레드를 선택했을까? 우선 그전에 프로세스와 스레드의 개념을 알고 가야 할 것 같다. 프로세스와 스레드 프로세스는 운영 체제로부터 할당받은 작업의 단위이다. 프로세스 내부에는 Code, Data, Stack, Heap이라는 네 가지 리소스가 존재한다. 프로그램을 실행했을 때 보조 기억장치(ex. 하드 디스크)에서 프로그램의 코드를 컴파일하여 주 기억장치인 메모리에 옮겨가면, 그것을 프로세스라고 한다. 스레드는 프로세스가 할당받은 자원을 사용하는 작업의 흐름 단위이다. 스레드는 Stack을 가지며 나머지 Code, Data, Heap 리소스를 사용하며 작업을 처리한다. 이때 ..

C언어와 같은 정적 타입 언어는 변수를 선언할 때 무조건 변수에 할당될 데이터의 타입을 정해주어야 한다. 그러므로 해당 변수에는 선언된 데이터 타입의 값만 할당할 수 있다. 이는 컴파일 시에도 데이터 값이 선언된 타입과 맞는지 확인하여 맞지 않으면 오류를 보내게 된다. 이처럼 데이터 타입에 강제성을 부여하면 훨씬 안정적인 코드를 작성할 수 있다. 이에 반에 자바 스크립트나 파이썬과 같은 동적 언어들은 변수의 재할당에서 자유롭다. 이는 해당 변수가 어떠한 데이터 타입이든 가질 수 있다는 것을 의미한다. 이는 편리하다는 장점이 있지만, 반대로 단점 또한 존재한다. 자유로운 데이터 타입 변화는 코드가 복잡할수록 변수의 데이터 타입 추적에 어려움을 겪게 만든다. 이 때문에 오류를 뿜어내기도 하는 것이다. 따라서..

callback -> '되돌아 호출해달라'라는 의미 어떤 함수 A를 호출하면서 '특정 조건일 때 함수 B를 실행해서 나에게 알려달라'는 요청을 함께 보내는 것이다. 이 요청을 받은 함수 A는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 B를 직접 호출한다. 이처럼 콜백 함수를 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것이다. 예시로 비동기 처리 함수인 setInterval과 setTimeout는 콜백 함수를 넘겨받아 설정한 시간 간격마다 콜백 함수를 호출한다.

JS는 싱글 스레드이다. 자바스크립트는 싱글 스레드 언어이다. Call Stack이 하나이기 때문인데, 전역 Main 함수를 포함하여 함수의 실행을 하나의 스레드가 순회하면서 실행한다. 하지만 모든 연산을 하나의 스레드에서 처리하는 방식만이 존재한다면 자바스크립트는 지금까지 살아남지 못했을 것이다. JS의 비동기 프로그래밍 특징 이러한 단점을 극복하기 위해 비동기 프로그래밍을 사용한다. 비동기적 코드의 반대말은 동기적 코드이다. 동기적 코드는 작업이 끝나야 다음 작업을 진행한다. 비동기적 코드는 현재 실행 중인 코드의 완료 여부와 상관없이 바로 다음 코드로 넘어간다. CPU의 계산으로 즉시 처리가 가능한 코드는 동기적인 코드이다. 하지만 사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행..

JS에서는 boolean, number, string, null, undefined을 제외하면 모두 객체라는 특징이 있다. 배열은 Array 생성자로 생성된 Array 타입의 객체이며 프로토타입 객체는 Array.prototype이다. 1. declaration const arr1 = new Array(); const arr2 = [1,2]; 2. index position const fruits =['a','b']; console.log(fruits); // a, b console.log(fruits[0]);// a | 대괄호 안에 숫자를 기입하면 이를 index로 인식한다. console.log(fruits[1]);// b console.log(fruits[fruits.length - 1]);//배열..

1. function 함수는 object의 일종이다. JS에서는 타입 정의를 따로 하지 않기 때문에 이것이 숫자인지 문자열인지 난해할 수 있다. 따라서 TS(TypeScript)를 활용하여 정확하게 변수의 데이터타입을 지정해주어야한다. TS활용 예시) function log(x: string): number {} // 함수에 타입을 정하는 방식 일반적인 함수 선언 function log(x){ console.log(x); } ​ 2. parameters primitive parameters: passed by value object parameters: passed by reference function changename(x){ x.name='coder'; } const hty = {name:'hty'..

JS Classes es6에서 소개되었으며, 기존 js에 문법적으로 추가된 것이다(완전히 새로운 것이 아님). 이를 syntactical sugar이라고 한다. 클래스는 붕어빵 기계의 틀과 같다고 할 수 있다. 이 틀에 반죽과 팥이라는 data를 넣었을때, 만들어진 붕어빵은 Object와 같다고 할 수 있다. 즉 클래스를 활용하여 다양한 오브젝트를 만들 수 있는 것이다(단팥, 피자, 초코 붕어빵 등등..). 클래스의 이름은 대문자로 시작하는 규칙이 있다. class Person{ //constructor constructor(name,age){ //field this.name=name; //this:생성된 오브젝트의 name this.age=age; } //methods speak(){ console.l..

1. string concatenation 문자열 연결 문자열과 숫자 연결의 경우 + 연산자를 이용 console.log('my'+'cat'); console.log('1'+2);​ 변수를 출력하는 경우 ( ` ` )안에 위치 console.log(`string literals: 1+2 = ${1 + 2}`); console.log('hatae\'s \nbook');​ ( ' ' )안에 '를 문자열로 입력해야하는 경우 \사용 console.log('hatae\'s \nbook');​ 2. numeric operator 사칙연산 및 거듭제곱(**), 나머지(%)를 활용 console.log(1+1); console.log(2**2);​ 3. increment and decrement operators le..

main.js와 html 구현을 효과적으로 할 수 있는 방법을 공부하여 간략히 내용을 정리하였다. head 아무것도 보여주지 못한 채로 시간만 흐름 body js 의존도가 높은 웹사이트라면, 치명적임 head+async async는 boolean값으로, html을 파싱 하면서 병렬로 함께 실행되게 함. main.js가 모두 다운로드되면 이때 html 파싱을 멈추고 js파일을 실행한 뒤 다시 html 파싱 하는 방식. 이로써 시간 단축의 이점이 있음. head+defer async과 비슷하지만 html이 모두 구현된 이후에 다운로드된 main.js를 실행하는 방식. 가장 빠름. 그리고 자바스크립트 코딩 시, 'use strict'을 정의하면 상당한 오류들을 예방할 수 있다고한다. 출처 : 드림코딩 by 엘리