Daehyunii's Dev-blog

오늘은 모듈을 마지막으로 자바스크립트 모던 딥 다이브라는 책을 1회독 마쳤다. 우선 모듈에 대해서 생각해보자면, 모둘은 하나의 도구인것 같다. 자바스크립트는 ESM이 등장하기 이전에는 도구를 만들 수 있는 방법을 제공하지 못했지만, 그 이후 ESM의 등장으로 도구를 만들어 독립적인 파일로 만들고 독립적인 스코프를 갖게해서 도구를 함부로 변경할 수 없게 해서 유지하고, 도구의 내용들중 외부에서 필요한 부분만 사용할 수 있게 해주는 것이다. 이는 굉장히 유용할 것 같다는 생각이 들었다. 계속해서 반복적으로 사용되는 것들은 미리 하나의 모듈로 만들어 놓고 필요할때 마다 사용하면 되는 일이니 시간과 비용을 모두 단축시킬 수 있는 좋은 기능이라는 생각이 들었다. 또한 키워드들도 export, import가 딱 알..

오늘은 에러 처리에 대해서 공부했다. 에러 처리에 대해서는 파이썬에서도 try...catch 문을 한 번 공부했었기 때문에 어렵게 다가오지는 않았다. 개념 자체도 쉬운 개념인것 같다. 개발자는 사람이고 코드는 사람이 작성하는 것이니 실수는 언제나 발생할 수 밖에 없다. 그치만 그 실수를 했을때 이를 방어하고 빠르게 바로 잡는것은 굉장히 중요한 일이다. 그런 의미에서 에러 처리는 코드를 작성함에 있어 제일 중요한 부분 중 하나가 아닐까 하고 생각한다. 물론, 코드를 작성하고 테스트없이 바로 서버에 띄우는것은 아니겠지만, 코드를 작성하고 테스트를 하는 과정에서도 인지하지 못한 에러가 발생하면 이를 고치는 일은 생각보다 쉬운일이 아닐 것이다. 또한 에러 처리를 적절하게 잘 활용한다면 이로인해 시간과 비용이 많..

오늘은 제너레이터와 async/await에 대해서 공부했다. 제너레이터 함수에 대해서는 어느 정도 이해할 수 있었으나, async와 await에 대해서는 개념 정도만 이해할 수 있었고, 그 외의 모든 것들은 이해할 수 없었다. 제너레이터, async/await 개념 모두 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있게 도와주는 기능들인것은 알겠으나, 동기처리와 비동기처리에 대해서도 개념만 알고 있을뿐 정확하게 머리속에 정리가 된 것 같지는 않다. 그래서 이해한 부분까지만 정리를 하고 끝냈다. 생각보다 쉽지 않은 내용에 적지않게 당황했고, 조금은 짜증이 나기도 한 공부였던것 같다. 분명 앞서 배운 내용들을 열심히 공부하고 왔음에도 불구하고 이해하지 못하는 스스로가 조금은 답답하기도 했다. 하지만 반..

오늘은 Promise에 대해서 공부했다. Promise는 비동기 처리를 위한 패턴으로 ES6에서 정의된 표준 빌트인 객체다. 기존의 비동기 처리를 위한 콜백 패턴의 단점인 콜백 헬과 에러 처리의 한계점으로 등장하게 된 기능이다. Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는다. 오늘 공부한 내용 중에 정확하게 이해한 부분이 있다면 위의 3줄이 전부이다. 비동기 처리가 무엇인지는 사전적인 개념정의는 알겠으나, 비동기 처리를 왜 하는것인지?, 비동기 처리를 함으로서 얻게 되는 이점은 무엇인지? 에 대해서 전혀 인지하지 못하고 있는 상태인것 같다. 그래서 이와 관련 개념들을 배울때마다 기존 콜백 패턴의 단점을 보완하기 위해 한다는것은 알겠으나, 이게 도대체 실제로 어떤 이점이 ..

오늘은 REST API를 공부했다. 무슨 말인지 모르겠다.. 로이 필딩이라는 사람에 의해 HTTP관련 기준을 만들어 낸것 같고, 이를 잘 지켜내서 프로그래밍한 것을 "RESTful"이라고 표현다는것, 그리고 설계시 URI는 명사를 사용해서 리소스를 식별해야하고 리소스에 대한 행위는 HTTP 요청 메서드 즉, 동사로 표현해야 한다는 정도로만 이해를 한 것 같다. 후반부로 갈수록 글을 읽어도 내용을 파악하기 어려운 내용들이 정말 많은 것 같다. 조금 답답함 감이 없지 않아 있지만 REST API의 설계 원칙이라는게 있고 그 원칙에는 기본적인 두 가지 원칙이 있다는 것만 명확하게 알고 REST API 관련 내용은 2회독과 함께 다시 한번 봐야할 것 같다. 오랜만에 벽이 느껴진것 같다. 앞에 개념을 공부할때는 ..

오늘은 비동기 프로그래밍에 대해서 배웠다. 자바스크립트 엔진은 하나의 태스크 즉 업무만 처리할 수 있는 싱글 스레드로 동작하기 때문에 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식으로 동작한다. 비동기 처리 방식으로 동작하는 함수들은 해당 태스크가 종료되어야 다음 태스크가 실행되는 것이 아니라 다음 태스크가 바로 실행되고, 비동기 함수의 콜백 함수 등은 태스크 큐에 일시적으로 보관되었다가 콜 스택이 비어 있으면 이벤트 루프에 의해서 콜 스택으로 이동하여 실행된다. 오늘 공부한 내용의 이해한 부분을 정리하면 딱 위의 4문장으로 정리 할 수 있을것 같다. 솔직하게 오늘 공부한 내용은 전체적으로 두루뭉실하게는 이해가 가지만, 자세하게 이해하기는 어려웠다. 그래서 또 머리를 싸매고..

오늘은 DOM에 대해서 공부했다. DOM은 결국 HTML을 파싱하여 생성된 결과물이다. DOM은 노드들로 구성되며, 이 노드들은 서로 중첩적인 관계를 지니고 있다. 또 DOM은 계층적인 구조를 가지고 있는데 최상위 계층에 있는 노드가 바로 루트 노드이다. 부모 노드가 없는 노드이며, 그 아래 요소 노드와 요소 노드의 자식 노드인 텍스트 노드가 있고, 요소 노드와 형제 노드는 아니지만 연결되어 있는 어트리뷰트 노드가 있다. DOM은 결국 CSSOM의 필요한 노드들과 결합하여 렌더 트리를 만들고 레이 아웃되어 페인팅되서 시각적으로 표현된다. 또 DOM은 API 즉, 프로퍼티와 메서드를 제공하여 DOM의 노드들을 컨트롤할 수 있는 기능을 제공한다. 이러한 DOM은 렌더링 엔진에 의해서 만들어진다. 프로그래밍을..

오늘 공부한 내용은 브라우저의 렌더링 과정이다. 나는 과거에 '인터넷 주소'라는 생각에 컴퓨터가 인터넷을 통해 해당 페이지에 직접 찾아간다고만 생각했었다. 하지만 실제로는 서버로부터 정보를 받아와서 내 컴퓨터가 그림을 그려주는 구조로 돌아간다는 것을 최근에 알게 되었고, 오늘 더 자세하게 어떤식으로 동작하는지도 알게 되었다. 브라우저는 렌더링 엔진과 자바스크립트 엔진을 통해 HTML, CSS, 자바스크립트를 파싱하여, DOM과 CSSOM을 통해 렌더링에 필요한 노드들로만 구성한 렌더트리를 구성하고, 레이아웃해서 페인팅하고 자바스크립트는 파싱하여 AST를 만들고 인터프리터가 실행시킬 수 있게 바이트코드로 변환하여 실행한다는 것을 알 수 있었다. 그리고 자바스크립트 코드에 DOM API를 사용하여 생성된 D..