에이미의 성장기록

객체형 프로그래밍은 자바스크립트를 공부하면서 조금씩은 봤지만, 함수형 프로그래밍은 자세히 공부한적이 없었다. 비교 영상이나 글은 많이 보았지만, 함수형 프로그래밍의 특성만 조금 더 자세히 알고 싶어서 오늘은 함수형 프로그래밍으로 정했다. 프로그래밍 패러다임? 프로그래머에게 프로그래밍의 관점을 갖게하고 코드를 어떻게 작성할 지 결정하는 역할을 한다. 새로운 프로그래밍 패러다임을 통해서는 새로운 방식으로 생각하는 법을 배우고, 이를 바탕으로 코드를 작성한다. 크게 2가지로 구분한다. 1) 명령형 프로그래밍 - 무엇을 할것인지(What) 나타내기보다는 어떻게 할건지(How)를 설명하는 방식 절차지향 프로그래밍: 수행되어야 할 순차적인 처리 과정을 포함하는 방식(C, C++) 객체지향 프로그래밍: 객체들의 집합..

자바스크립트 스터디를 위한 자료 준비. 이번 챕터는 실행 컨텍스트 중에서 생성 과정에 대해 공부했다. 실행 컨텍스트가 실행할 코드에 대한 환경 정보들을 모아놓은 객체라는 말이 와닿지 않았는데, 콜스택을 직접 그려보면서, 표로 EC(creation phase와 execution phase)에 뭐가 담기는지 그려보니, 식별자(변수 등) 및 this 등이 EC에 담기는구나를 알 수 있었다. 그리고 자바스크립트의 콜스택은 실행 컨텍스트가 어떻게 담기는지, 자료 구조상 함수가 쌓이고 가장 top에 있는 코드부터 실행되고, 결국 전역 컨텍스트가 사라지면서 어플리케이션이 종료되는 과정까지 그림으로 그려보았다. 호이스팅은 var의 선언부과 함수 선언식을 통째로 끌어올리는 것이다. 함수의 실행 컨텍스트가 생성되는 생성단..

ES6에 새로 도입된 여러가지 문법이 있다. 그 중 익숙한 let, const, spread operator 같은 것들 외에, 처음 들어본 비구조화 할당 개념에 대해 공부했다. 비구조화 할당은 뭔가 번역이 어색하지만(?) 정의는 이렇다. 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 배열에서는 이렇게 사용할 수 있다. ES5에서, vegetable 이라는 배열의 값을 각각 변수에 할당해주었다. const vegetable = ["onion", "mushroom", "pepper", "cabbage","potato"]; let yangpa = vegetable[0]; let baechu = vegetable[3]; let gochu = vegetable[..

CSS 관련해서 정의나 개념을 공부해 본 적은 없었다. 클론코딩할때 아이템들을 가로로 배열하고 싶을때 display: flex 쓰고, 수평정렬하려고 align-items: center, jusitify-content: center 만 썼던것이 다였다. Box model 모든 HTML 요소는 박스모양으로 구성되며, 이것을 박스모델이라고 한다. 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. ✨padding, border, margin, content로 구성 되어있다. content: 박스의 실질적인 부분, 색상을 가질 수 있고, width, height 속성을 가진다. padding: border 안쪽에 위치하는 영역으로, ..

자바스크립트의 메모리 힙이나 콜스택 등의 용어와 작동원리를 공부해봐야지 하다가 날 잡고 한번 유튜브 보고 공부해야겠다 생각이 들어서, 유튜브 보면서 그림으로 이해하니 좀 잘 되었다. 우리밋 님의 유튜브를 보면서 공부했다. 간단한 예제를 보면서 보니까 이해가 좀 쉽긴한데, 태스큐외에도 마이크로태스크 큐, 잡 큐 등이 더 있다고 한다. 더 딥하게 공부해봐야 할 것 같다. 자바스크립트 엔진 구조 자바스크립트의 엔진은 Memory Heap과 Call Stack으로 구성되어 있다. 가장 유명한 것은 구글의 V8 엔진 자바스크립트는 단일 스레드 프로그래밍 언어 , 즉 Call Stack이 하나라는 뜻, 따라서 여러 작업을 여러개로 분산하지 않고 하나씩 하나씩 처리한다. - 메모리힙: 메모리 할당이 일어나는 곳 ( ..

코어 자바스크립트의 마지막 챕터 클래스는... 왜 ES6에서 클래스 문법이 도입됬는지 뼈저리게 느낄 수 있었던 챕터였다. ES5에서 프로토타입으로 상속을 구현하는 것 자체가 너무 복잡하고... (주륵) ES5에서 클래스를 정의하고 상속하는 방법 중에 Object.create() 라는 메소드가 있다. 상속하고자 하는 프로토타입 객체를 매개변수로 넣고, 상속받는 하위 클래스를 만들어내는 장점이 있지만, 하위 클래스의 프로토타입 생성자가 만들어지지 않는 단점이 있다. 따라서, constructor가 해당 하위클래스를 바라보게 하려면, 아래처럼 코드를 추가해주면 된다. 하위클래스.prototype= Object.create(상위클래스.prototype); 하위클래스.prototype.constructor = 하..