개발 블로깅/Javascript 개념
-
[2021.06.13] Javascript ECMA 2021 소개개발 블로깅/Javascript 개념 2021. 6. 13. 17:19
replaceAll 기존에는 문자열 내에 특정 문자를 변경하기 위해, String.replace를 이용했었는데, 이것은 문자열 중 가장 앞에 있는 한 자리만 변경해주므로, 모든 문자열을 대상으로 하려면, 'RegExp' 정규식을 통해 처리를 해주었어야 했다. 그러나 이번에 replaceAll() 함수가 추가되면서, 따로 정규식을 통해 처리하지 않아도 되게 되었다. 🙌 'FooBarFoo'.replaceAll('F', 'C'); // 'CooBarCoo' assignment operators 1. ??= 기존에는, 해당 변수가 null 혹은 undefined일 시, 특정 값으로 세팅을 해주기 위해서는 아래와 같이 if문으로 세팅을 해주었었다. if(sense === null || sense === unde..
-
[21.06.05] 비동기 처리? 그래도 싱글 스레드인 것이 함정인 자바스크립트개발 블로깅/Javascript 개념 2021. 6. 5. 14:44
자바스크립트를 다루는 개발자라면 웹 서비스에서 필수로 쓰이고 있는 Javascript가 싱글 스레드(Single Thread) 기반으로 동작한다는 것을 알고 있을 것이다. 그리고 이러한 싱글 스레드의 한계를 넘고자, 비동기(asynchronous) 동작을 제어할 수 있는 Event Loop라는 개념이 등장하면서 AJax, 그 뒤로 Promise, async/await 등 비동기 동작에 대한 제어를 쉽게 할 수 있는 키워드가 속속히 등장하기 시작했다. 그만큼 싱글 스레드 기반임에도, 멀티 스레드 못지않은 Task 동작을 시키고 이를 더 쉽게 제어하기 위해 계속해서 발전되어 왔다. 하지만, 자바스크립트는 여전히 싱글 스레드이다. 더 Row Level 단으로 따지고 보면, 비동기적으로 동작하는 Task들도, ..
-
자바스크립트 메모리 관리(Garbage Collection)에 대해 알아보자개발 블로깅/Javascript 개념 2020. 9. 4. 17:06
자바스크립트는 언어 특성상 메모리를 자동으로 관리하도록 동작하기 때문에 개발자가 '메모리 관리'에 대해 많이 소홀해질 수 있다는 특징을 가지고 있다. 서비스의 성능 관리를 신경 쓰려면 자바스크립트 내에서 메모리 관리가 어떻게 이루어지고 어떻게 메모리에 신경을 써야 하는지 파악할 필요가 있다. 그래서 이번 블로그에서 자바스크립트 내에서 메모리 관리 핵심 요소인 가비지 컬렉션(Garbage Collection)과 개발자가 메모리 효율성을 높이기 위해서 주의해야 할 점들에 대해 한번 정리해 보려고 한다. 기본적인 메모리 사용 우선 C언어와 같은 로우(Low) 레벨 언어에서는 메모리 관리를 위해 malloc()과 free()를 사용한다. #C언어의 메모리 할당 #include #include // malloc,..
-
Javascript Engine & Event Loop 동작 원리개발 블로깅/Javascript 개념 2020. 8. 30. 03:50
이번 기회에 내가 제일 좋아하는 언어인 자바스크립와 더욱 더 친해지기 위해서, 실제 자바스크립트을 동작시키는 엔진의 내부 구조와 동작 원리에 대해 파헤쳐보고 블로그로 정리해보려고 한다. 자바스크립트 엔진 자바스크립트 언어는 자바스크립트 엔진이라는 녀석을 통해 실행된다. 이 엔진은 웹 브라우저 내부 또는 Node.js 안에 구성되어있다. 자바스크립트 엔진은 가능한 짧은 시간 내에 최적화된 코드를 생성하기 위해 전통적으로는 인터프리터 방식으로 구현되지만, 특정한 방식으로 바이트코드로 JIT(Just-In-Time: 번역한 기계어를 저장해놨다가 필요할 때 다시 꺼내 쓰는 방식) 컴파일을 할 수도 있다. 💡인터프리터와 컴파일러의 차이 사람이 작성한 소스코드를 동작시키기 위해서는, 컴퓨터 언어에 맞는 0과 1로 ..
-
[2020.07.11] 자바스크립트 - Element.style 속성과 getComputedStyle() 메소드의 차이에 대해 알아보자개발 블로깅/Javascript 개념 2020. 7. 12. 15:20
브라우저에 그려진 엘리먼트의 스타일을 가져오는 방법에는 두 가지가 있다. Element.style 속성 참조 getComputedStyle() 메소드 나는 이 두 가지의 차이에 대해 정확하게 알지 못한 채, 엘리먼트의 스타일에 접근하는 작업을 하다가 내가 예상하던 대로 동작하지 않아 엄청 헤맨 경험을 맛 보았다. 그래서 이번에 닥쳤던 문제를 해결하면서 정확하게 알게 된 엘리먼트의 스타일에 대해 아래 예시를 통해서 정리해보려고 한다. # 각기 다른 방식으로 적용된 엘리먼트 두 개 우선 위와 같이 그려진 브라우저 화면이 있다. 해당 코드는 다음과 같다. 첫 번째 엘리먼트 두 번째 엘리먼트 첫 번째 엘리먼트는 인-라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바..
-
[2019.04.23] 자바스크립트 event Loop 개념개발 블로깅/Javascript 개념 2019. 4. 23. 12:12
자바스크립트에서 event Loop란, 그냥 자바스크립 내에서 돌아가는 함수 호출 방식을 말한다. 우선 일반적으로 하나의 함수가 끝나야 그 다음 함수가 호출되는 동기적 방식, 그리고 순서와 상관없이 함수가 끝날 때까지 기다리지 않고 다음 함수가 호출되는 비동기적 방식이 있다. # 싱글 스레드와 멀티 스레드 위 그림을 보면, 멀티 스레드는 한번에 여러 작업을 할 수 있다. 함수 여러개 처리를 동시에 한다. 싱글 스레드는 한번에 하나의 함수처리 밖에 못한다. 자바스크립트에는 setTimeout 등과 같이 비동기적 함수로 실행시킬 수 있는 방식이 있다. 그러면 자바스크립트는 비동기 방식의 언어일까? 자바스크립트는 싱글 스레드이다. 그러면 어떻게 비동기적 방식으로 함수를 돌릴 수 있는 것일까? 이 비동기적 방식..
-
[2019.04.08] __proto__, prototype, constructor 관계개발 블로깅/Javascript 개념 2019. 4. 8. 15:54
쉽게 내 방식대로 정리한 설명 prototype 은 var Human = function () {this.name}; 과 같이 틀로 쓰는 녀석에게 속성을 정의하는 것 (함수만 prototype을 가지고 있음)__proto__ 는 var john = new Human(); 에서 나온 john 인스턴스에 속성을 부여하는 것.(인스턴스만 __proto__를 가지고 있음) 더 쉽게 생각해서, prototype은 붕어빵 틀 자체에 기능을 추가하는 것. __proto__는 붕어빵에, 그 추가했던 기능 # 1 방식1234567891011121314var Human = function(){ }Human.prototype.sleep() = function(){};var Student = function(){ } Stud..
-
[2019.03.01]javascript에서 함수 선언에 따른 차이점.개발 블로깅/Javascript 개념 2019. 3. 1. 23:49
javascript에서 함수를 선언하는 방식은 기본적으로 두 가지가 있다. (아마 더 있을 수도 있지만..)변수에 함수를 생성하여 할당하는 방법그냥 함수를 선언하는 방식이다.# 변수에 함수를 할당하는 방법123var addValue = function(a, b){ return a + b;}cs # 일반적으로 함수를 선언하는 방법123function addValue(a, b){ return a + b;}cs위 두 코드와 같이, 사용하려는 함수를 생성하는 방법이 두 가지가 있다.하지만 역시 이 두 가지에 대한 차이점이 있다는 것! 우선 '변수에 함수를 할당하는 방법'은, 해당 함수를 사용하기 전에, 먼저 그 함수가 위에 선언이 되어야 한다.1234567addValue(1, 2); //