JavaScript27 [Javascript] 자료구조 - Stack 1. stack이란? stack은 후입선출(LIFO, Last In First Out)의 원칙에 따라 동작하는 자료구조이다. 실생활에서 자주 볼 수 있는 stack 요소들에 기반하여 만들어졌다. 책이나 접시를 한 줄로 쌓아올리는 경우, 쌓아올리고 난 후에 그것들을 사용하려면 가장 위에 있는 것부터 순차적으로 꺼내서 사용할 수 있다. 새롭게 추가된 책 또는 접시 곧 데이터는 항상 가장 위에 위치한다. 이러한 후입선출 원리를 컴퓨터의 자료구조로 만든 것이다. 2. stack이 사용되는 사례 프론트엔드 개발을 하다보면 익숙한 call stack이라는 이름에서 알수 있듯 call stack또 stack으로 만들어진 것이다. stack은 여러가지 사용 사례가 있는데 주로 함수 호출 시 지역변수를 저장하는데 사용.. 2024. 3. 26. [Javascript] 프로토타입과 상속 1. 프로토타입이란? Javascript에서는 모든 객체가 다른 객체에 대한 참조인 프로토타입을 가지고 있다. 객체는 프로토타입을 통해 다른 객체로부터 속성과 메서드를 상속받는다. Javascript에는 원래 클래스라는 개념이 없어서 기존 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다. 2. 프로토타입 체인의 역할과 작동방식 프로토타입 체인이란 어떤 프로퍼티나 메서드를 찾을 때, 해당 객체에 그 속성이나 메서드가 없다면 그 원형이 되는 프로토타입을 체인처럼 따라 올라가며 상위 객체에서 그 프로퍼티, 메서드를 찾는 것이다. 예를 들어서 아래와 같은 코드가 있을 때 // 부모 객체 let animal = { name: "Animall", sayHello: function() { conso.. 2024. 3. 21. [Javascript] 자바스크립트 모듈에 대해 1. 모듈이란? 프로그래밍에서 모듈은 코드를 논리적으로 구분하고 구조화하는 독립적인 단위이다. 보통 특정 기능, 객체, 변수 또는 클래스와 같은 코드의 묶음을 말하는데 이렇게 모듈로 코드를 쪼개서 정리하면 다른 코드와의 결합성을 낮추고 재사용성을 높인다. 2. ES6에서 모듈시스템 Javascript는 ES6에서 모듈시스템에 대한 표준이 도입되었다고 한다. export와 import라는 키워드를 통해 모듈화한 코드를 내보내고, 가져올 수 있게 되었다. 이 이전에는 AMD, CommonJS 등의 모듈시스템을 사용해왔지만 점점 사라지고 있는 추세이다. Export: 모듈 안에 선언한 변수, 함수 등을 다른 모듈에서 사용하고 싶을 때 export라는 키워드를 붙여서 내보낸다. import: 다른 모듈에 선언.. 2024. 3. 20. [Javascript] Babel과 트랜스파일링 1. 트랜스파일러란 무엇일까? 트랜스파일러는 특정 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어로 변환하는 도구를 말한다. 보통 트랜스파일러는 원시 코드를 다른 언어의 동등한 코드로 변환해서 해당 언어의 특정 플랫폼이나 환경에서 실행할 수 있게 해준다. Babel이 대표적으로 널리 사용되는 트랜스파일러이다. 2. Babel이란? Babel은 Javascript 코드를 변환해주는 트랜스파일러인데, 주로 최신 ECMAScript 표준에 따라 작성된 코드를 구식 브라우저에서 지원되는 호환 가능한 코드로 변환되는 데 사용한다. 브라우저별로 제조사가 다르고, 그에 따른 렌더링엔진 및 Javascript를 파싱하는 엔진 등등의 세부스펙이 다르다. 그래서 같은 코드라고 하더라도 브라우저에 따라 다르게 동작할 .. 2024. 3. 18. [Javascript] 메모리 누수를 방지하는 방법 1. 메모리 누수란? 메모리 누수는 프로그램이 메모리를 사용하고 나서, 더 이상 필요하지 않은 메모리를 해제하지 않는 상황을 말한다. 일반적으로 프로그램이 동적으로 할당한 메모리를 제대로 해제하지 않을 때 발생한다. 메모리 누수는 프로그램의 성능에 부정적인 영향을 미치며, 장기적으로는 메모리 부족으로 인해 프로그램이 불안정해질 수 있게 한다. 2. Javascript에서 메모리 누수가 일어나는 사례 JavaScript에서 메모리 누수가 발생하는 여러 가지 케이스가 있는데 이를 방지하기 위해서는 코드를 작성하고 관리하는 방법에 주의 해야한다. 메모리 누수가 발생되는 여러 상황들은 아래와 같은 경우들이 있다. 1) 참조가 계속 유지될 때 더 이상 필요하지 않은데도 객체나 변수에 대한 참조가 계속 유지되는 경.. 2024. 3. 8. [Javascript] Promise가 어떻게 동작하는가? 1. Promise 란? Promise는 Javascript에서 제공하는 비동기 작업을 처리하기 위한 내장객체 이다. 비동기 처리는 보통 네트워크 요청을 통해 데이터를 받아오거나, 파일 로딩, 데이터베이스 조회 등과 같이 시간이 걸리는 작업을 수행할 때 사용된다. Promise는 이러한 작업이 완료되었거나 또는 실패할 경우의 결과를 반환하고 관련 작업을 처리할 수 있도록 도와준다. Promise 객체는 아래와 같이 세 가지 상태를 가질 수 있다. 1. 대기(pending): 작업이 아직 완료되지 않은 상태 2. 이행(fulfilled): 작업이 성공적으로 완료된 상태 3. 거부(rejected): 작업이 실패한 상태 Promise 메서드로 then(), catch(), finally()가 있는데, 특징은.. 2024. 3. 7. 이전 1 2 3 4 5 다음
