벌꿀오소리의 아카이브

JavaScript는 싱글 스레드이기 때문에 동기적으로 실행되지만, JS가 구현되는 런타임은 비동기적 구현이 가능한 환경이라고 했습니다. 원하는 순간에 따라 코드를 동기적으로/비동기적으로 다뤄야 할 일이 생길 겁니다. 이를 다루기 위해 어떤 걸 사용해야 하는지 알아봅시다. JavaScript는 순서대로 작동한다? 📌 동기적 처리(Synchronous) 콘솔로 코드를 한번 작성해 봅시다. 아래의 코드는 어떤 순서대로 출력될까요? console.log('log 1') console.log('log 2') console.log('log 3') 자바 스크립트는 순서대로 작동한다고 했습니다. 위의 코드도 순서대로 출력이 되었네요. 그럼 조금 다른 예시를 들어 볼게요. 아래의 코드는 어떤 순서대로 출력될까요? co..

혼자서 이해하기 위해 쉽게 풀어쓰다보니 오류가 있을 수도 있습니다! 틀린 내용이 있다면 말씀 주세요. 동기와 비동기 동기와 비동기는 일종의 수행 방식의 차이입니다. 어떠한 일을 동기적으로 처리한다, 비동기적으로 처리한다라고 이해해주시면 될 것 같아요. 컴퓨터 공학에서 동기적인 방식과 비동기적 방식이 어떻게 이루어지는지 알아봅시다. 📌 동기(Synchronous) 동기적인 방식은 요청과 결과가 순차적으로 일어납니다. 1번 요청→1번 대한 결과→2번 요청→2번에 대한 결과→(…) 이런 식으로 일을 수행하죠. 순서대로 일이 수행되니 설계 방식이 비교적 간단하고 직관적입니다. 하지만 어떠한 요청에 수행 시간이 오래 걸린다면 어떻게 될까요? 결과가 나오기 전까지 다음 요청들은 모두 대기를 해야 할 겁니다. 📌 비..

JS는 프로토타입 기반 언어(prototype-based language)이다. JS의 빠질 수 없는 개념이자, JS 그 자체라 이해가 어렵고 개념도 복잡할 것이다. 하지만 ‘프로토타입’을 한 마디로 설명하기는 조금 어렵다. 차근차근 이해하는 시간을 가져 보자. 프로토타입 기반 언어 앞서 객체 지향 언어에 대해 공부하며 클래스와 인스턴스에 대해 공부했다. 중요한 점은, JavaScript는 ‘객체 지향 패턴’으로 작성되긴 하지만, 엄밀히 말해 ‘객체 지향 언어’는 아니다. 이 말인즉슨, 객체 지향 언어에서 사용하는 class라는 개념이 없다는 말이다. 그럼 어떻게 객체 지향 패턴을 작성하느냐 → 바로 Prototype을 통해 class의 상속을 흉내내는 것이다. JS가 프로토타입 기반 언어라고 불리는 이..

절차 지향 언어와 객체 지향 언어 🎾 절차 지향 프로그래밍 초기 컴퓨터 언어인 C나 포트란 등은 ‘절차 지향 언어’였다. 절차 지향 언어들은 사용하는 코드들을 순차적으로 처리한다. 자동차 제조를 예로 들면 엔진, 차체, 핸들, 의자, 바퀴 순서대로 만드는 것. 서로 분리되거나 순서가 틀려서도 안 된다. 절차 지향 프로그래밍이 이런 방식이었다. 절차 지향 프로그래밍은 프로그램 전체가 유기적으로 연결되어 있다. 코드의 순서가 바뀌면 결과가 달라지거나(언어의 융통성이 떨어짐), 문제 해결을 위해 시스템 전체를 수리해야 하는(유지보수의 어려움) 단점이 있었다. 이를 보완하기 위해 나온 개념이 **‘객체 지향 언어’**이다. 🎾 객체 지향 프로그래밍 객체 지향 프로그래밍은 명령어를 단순히 ‘목록’으로 보는 게 아..

객체 지향 프로그래밍(Object-oriented programming) 우선 객체(object)란 두 종류의 정보를 담고 있는 집합체를 뜻한다. 즉, 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료 구조이다. 객체에 담긴 두 종류의 정보 속성(attributes, properties) : 상태(state)를 나타내는 데이터 메서드(method) : 행동(behavior)을 나타내는 데이터 객체 지향 프로그래밍은 프로그램을 ‘객체’들의 모임으로 본다. 하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다. 모델이 되는 청사진을 클래스(class), 청사진을 토대로 만들어진 객체를 해당 클래스의 인스턴스(insta..

1. 일급 객체(First-Class Citizen) 비행기의 퍼스트 클래스(First Class)를 떠올려 보자. 탑승수속, 라운지 이용, 기내식, 좌석 등 일반적인 이코노미 클래스와는 다른 서비스를 받는다. 컴퓨터 언어에서도 일급 객체(First-Class Citizen)라는 개념이 존재한다. 비행기의 퍼스트 클래스처럼, 아래와 같이 특별한 대우를 받는다. 변수에 할당(assignment)이 가능하다 다른 함수를 전달인자(argument)로 전달 받는다 다른 함수의 결과로서 리턴(return)이 가능하다. 앞서 여러 번 다뤘던 함수(function)는 위의 특징을 가지고 있으므로, JavaScript에서 일급 객체로 취급된다(C언어 등에서는 함수가 일급 객체가 아니기도 하다). 2. 고차 함수(Hig..

DOM은 문서 객체 모델(Document Object Model)의 약자로, HTML요소를 Object(JS Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, JS를 사용할 수 있으면 DOM으로 HTML을 조작할 수 있다. 이 객체 모델은 문서 내 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 웹페이지를 만들 때 토대가 되는 HTML파일, 스타일을 꾸미는 CSS 파일, 상호작용하는 JS파일을 만든다. CSS와 JS파일을 어떻게 HTML과 연결시켰을까? ... 웹 브라우저가 작성된 코드를 해석하는 과정에서 요소를 만나면, 웹브라우저는 HTML 해석을 잠시 멈추고 요소를 먼저 실행한다. 즉, 요소는 등장과 함께 실행된다. 요소는 사실 태그 앞이라면 어디에 넣어..

JS에는 JS 표준인 ECMAScript(이하 ES)이라는 버전이 존재한다. 가장 최신 버전은 ES2019(19년 출시)지만, ES6(SCMA Script6, 15년 출시)에서 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가되었다. ES6에서 추가된 기능으로 앞서 배운 let/const 키워드와 Template literals, Spread Syntax, Rest Parameter등이 있다. Spread Syntax(전개 구문)와 Rest Parameter(나머지 변수, 국내 검색 사이트에서는 주로 rest 파라미터로 통용된다) 는 둘 다 점 세개(…)로 표현할 수 있지만, 쓰임새는 완전히 다르다. Spread Syntax : 이름 그대로 배열, 객체, 문자열 등을 풀어 각각의 요소로 ..