JavaScript

JavaScript에서 인터프리터, 동적, 객체 지향 언어 개념에 관해

자바스크립트 소개 자바스크립트는 인터프리터 언어로, 파이썬과 같이 컴파일 프로세스가 필요하지 않고 직접 실행될 수 있는 언어입니다. 또한 이는 동적 언어로, 동적 타이핑을 허용합니다. 이것은 개발자가 변수의 데이터 타입을 실시간으로 변경할 수 있게 해주며, 다음 코드 블록에서 설명된 것처럼 변수의 데이터 타입을 변경할 수 있게 합니다: let x = 1; x = 'hello'; x = true; x = { a: 1, b: 2 }; x = [1, 2, 3, 4, 5]; x = function (a, b) { return a + b; }; 자바스크립트에서의 객체 지향 개념 자바스크립트는 또한 객체 지향 언어이지만, C++ 및 Java와 같은 언어와는 다른 방식으로 객체 지향 개념을 구현합니다. 자바스크립트는..

Time complexity (with JS) - Part 1

실제로 회사에서 근무했을당시 Nest js 를 활용한 백엔드 API 를 만드는 업무를 담당했었는데 그 당시에는 시간복잡도 라는 개념이 없엇기때문에 반복문 안에서 또 반복문을 사용하는 경우가 있었다 이런 경우에 연산속도가 엄청나게 늘어나기때문에 좀더 나은 방법을 찾아야 했었는데 그 때 찾아봤던 자료가 있어서 정리를 해보려한다 시간 복잡도, 그리고 Big - O 란? 시간복잡도는 알고리즘을 처리하는데 얼마의 시간이 걸리는지 말해준다, 이런 알고리즘의 시간복잡도는 주로 Big - O 로 표시를한다 Big - O 란 알고리즘의 성능을 수학적으로 표현해주는 표기법이다. 이를 통해 알고리즘의 시간과 공간 복잡도를 표현가능하다 Big - O 는 알고리즘을 실제처리하는 시간을 말해주는것이 아닙니다. 데이터나 사용자 증..

What is Vanilla JS?

What is Vanilla JS? 외부 라이브러리나 프레임워크를 사용하지않은 순수 JavaScript 를 말한다 사용자를 위해 정의된 라이브러리나 프레임워크 일체를 사용하지않기때문에 당연히 다른 라이브리러나 프레임워크를 사용했을때보다는 빠르고 호환성이 좋다 고수면 고수일 수록 별의별 기능을 구현할 수 있다 (실력의 척도?...) Characteristics 순수 자바스크립트의 특성상 라이브러리를 사용했을때 간단하게 사용한 코드가 라이브러리를 사용하지않으면 코드가 길어진다 $('li').css('color','red') jQuery 를 사용해서 이렇게 표현할수있는것을 document.querySelectorAll('li').forEach(item => item.style.color='red') 이런식으로..

JavaScript DataStructure

자료구조(Data Structure) 데이터에 편리하게 접근하고 변경하기위해 데이터를 저장하거나 조직적으로 만드는 방법 (알고리즘은 저장된 데이터들을 처리하는 과정을 말한다) 1. 단순구조 (Primitive Data Structure) - 프로그래밍에 사용되는 기본 데이터 타입 - JS의 원시타입에는 string, number, boolean, null, undefined 가 존재한다 2. 비단순 구조 (Non-Primitive Data Structure) - 여러 데이터를 목적에 맞게 효과적으로 저장하는 자료 구조 - JS의 참조타입에는 object, array, function 이 존재한다 3. 선형 구조 (Linear Data Structure) - 저장된 자료의 전후 관계가 1:1 인 경우 4...

ES6 , Map(), Set()

Set() Set은 value 들로 이루어진 컬렉션 new Set()은 새로운 set 을 만든다 Set은 인덱스로 데이터를 조회할수 없다 set.size 는 set 이 가지고있는 데이터의 개수를 조회한다 set.has(value) 는 value가 set 안에 존재한다면 true 를 반환한다 indexOf()로 데이터를 찾는것보다 Set이 더 빠르다 set.add(value) 는 value 를 set 안 에 추가한다 Set에는 같은 데이터가 2번 존재할수가 없다, 같은 데이터가 추가되는 경우 추가되지않는다 set.delete(value) 는 value 를 set 에서 제거한다 set.clear() 는 set 안의 모든 데이터를 제거한다 set.keys(), set.values(), set.entries()..

JavaScript Syntax Basics

1.변수 변수는 값을 할당하고 저장된 값을 참조하기위해 사용한다 . 한번쓰고 버리는값이 아니고 유지할 필요가 있는 값은 변수에 할당한다 변수이름을 통해 값의 의미를 명확하게 할수있어 코드 가독성 또한 좋아진다 변수는 위치를 기억하는 저장소다. 위치란 메모리 상의 주소를 뜻한다 . 변수란 메모리 주소에 접근하기위해 사람이 이해할수있는언어로 지정한 식별자다 변수를 선언할때 var 키워드를 사용하고, 할당 연산자 = 는 변수에 값을 할당하기 위해서 사용한다 (여기서 잠깐 ES5 이후로 var 은 사용하지않는다 , let 이나 const 를 주로 사용함 자세한건 추후에 다루겠음) let x; x = 3; 2.값 let str = 'Hello World'; 위 예제는 str이라는 이름의 변수를 선언하고 문자열 리..

How does a browser works?

브라우저 동작원리 구글의 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임환경(Runtime Environment)인 Node.js 의 등장으로 자바스크립트는 웹브라우저를 벗어나 서버사이드 애플리케이션 개발에서도 사용되는 범용 개발언어가 됬다 그래도 자바스크립트가 가장많이 사용되는 분야는 역시나 웹 브라우저 환경에서 동작하는 웹 페이지/ 애플리케이션이다. 대부분의 프로그래밍 언어는 운영체제 위에서 실행되지만 웹 애플리케이션의 자바스크립트는 브라우저에서 HTML,CSS와 함께 실행된다 브라우저 환경을 고려할때 보다 효율적인 자바스크립트 프로그래밍이 가능하다 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청하고, 서버의 응답을 받아 브라우저에 표시한다 브라우저는 서버로부..