Razelo 기술노트

최근 회사에서 웹 프론트 작업을 하면서 JS/TS를 많이 사용했다. 학부에서 두 언어를 거의 써본 적 없었다. 책 한권을 읽고 기본적인 개념을 파악했는데 그것도 시간이 지나서 희미해졌다. 이후 회사에서 업무를 하면서 레거시 프로젝트에는 자바스크립트를, 새로운 프로젝트에는 타입스크립트를 사용했다. 두 언어를 사용하면서 들었던 개인적인 생각을 정리하고자 한다. 자바스크립트를 공부하다보면 신기한 개념을 많이 접한다. 클로저, 프로토타입, this 등 타 언어와 다른 개념이 있다. 때문에 언어가 실용성과는 별개로 어딘가 나사가 하나 빠진 듯한 느낌이 들곤 한다. 예상치 못한 동작이 언어에 포함되어있다. (물론 이마저도 익숙해질 수 있긴하다.) 타입이 없다는 단점을 보완하기 위해 타입스크립트를 사용하지만 자바스크..

// 이 코드는 모던 자바스크립트 입문(徹底マスターJavaScriptの教科書) 에서 인용한 것입니다. // [ISBN #978-4797388640]. Copyright 2017 by 磯博 모던 자바스크립트 입문 중에서 8장 (함수) 의 8-22 예제를 첨부한다. 원래예제와는 조금 다르게 선이 뻗어나갈때마다 색이 바뀌도록설정했다. 재밌는 예제다. 위처럼 랜덤으로 선이 뻗어나간다. 시간이 별로 없어서 책을 빠르게 읽었는데 중간에 있던 예제들은 그냥 지나칠 수가 없어서 하나 하나 전부 만들어봤는데 정말 재밌는 예제가 많다. 서평이 굉장히 좋은 책이었는데 맞는것같다. (물론 무슨 코드지? 하고 한동안 들여다본 코드들도 있다. 특히 좌표관련 코드이다. 그것들도 막 이해가 안되는 그런게 아니라 좀 들여다보면 이해가..

call은 그냥 인수를 콤마로 하나씩 전달하면 된다. apply는 배열로 던져주면 된다. bind는 영구히 this값을 고정하고 싶을 때 해당 객체를 인수로 주면 된다. call과 apply는 결국 어떤 this값을 사용하고 싶을 지를 결정한다고 보면 된다. this 값이 핵심이다. 어떤 특정 함수에서 this값이 필요없는 경우가 있는데, 이 경우에는 call과 apply의 인수로 null을 준다. null대신 어떤 값이든 줘도 상관없다. 어차피 this 지정이 필요없기 때문이다.

자바스크립트에 대해 궁금한 걸 몇개 검색하다보니 with 문이라는 구문이 눈에 들어왔다. 처음 보는 구문이라 자세히 살펴보니 재밌는 기능이라는 생각이 들었다. 어려운 기능도 아니다. 쉽다. { } 안에 있는 수식들을 잘 살펴보면 Math 가 빠져있다. 그 이유는 이미 with 에서 Math를 생략하고 써도 된다고 말해주고 있기 때문이다. 결과도 y값 찍어보면 잘 나오는 걸 확인할 수 있다. 반복적으로 사용하는 경우에 코드를 줄일 수 있는 좋은 방법인 것 같다.

자바스크립트의 함수는 1급 객체이다라는 말이 있다. 이 말은 무슨 말일까? first-class-citizens 라고 할 수 있다. 보통 다른 객체들에게 적용 가능한 연산을 모두 지원하는 객체를 말한다. 이러한 연산에는 매개변수로 전달되고, 함수에서 반환되고, 수정되고, 변수에 할당되는 작업이 포함된다. 쉽게 말해서 프로그래밍 언어에서 type을 전달, 반환, 할당할 수 있는 경우 해당 type을 1급 객체로 간주한다. 그러므로 javascript에서 함수는 다음과 같은 조건을 만족하므로 1급 객체라고 할 수 있는 것이다. 1. 함수를 변수나 데이터에 할당할 수 있다. 2. 함수를 인자로 전달할 수 있다. 3. 함수를 리턴할 수 있다.

모던 자바스크립트 입문을 공부하는 도중 좀 복잡한 코드를 마주하게 되었다. 코드를 읽다가 도움이 될 수 있는 단서를 하나 발견했는데, 바로 가중 산술 평균이다. 가중 산술 평균은 가중 산술 평균은 자료의 평균을 구할 때 자료 값의 중요도나 영향 정도에 해당하는 가중치를 반영하여 구한 평균값이다. 라고 위키에 정의되어 있다. 그리고 아주 아주 친절한 부가설명도 존재한다. 출처: ko.wikipedia.org/wiki/%EA%B0%80%EC%A4%91_%EC%82%B0%EC%88%A0_%ED%8F%89%EA%B7%A0 딱 한번만 읽어봐도 이해가 될 정도로 간단한 예제이다. 즉 가중치를 분모로 잡아서 모두 더하고, 분자에는 해당 값들과의 곱을 더해서 평균을 구하는 것이다. 따라서 위처럼 픽셀의 정중앙의 값을 ..

브라우저의 동작에 대해서 아주 잘 설명해놓은 글이 있어 이를 읽고 간단하게 정리해보고자 한다. 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원의주소는 URI로 표현된다. 최근 브라우저들이 표준 명세를 따르고 있기 때문에 호환성 문제가 줄어들었다. 브라우저의 기본 구조 브라우저의 기본 구조는 아래와 같다. 각 구성을 간단하게 설명하면 아래와 같다. 1. 사용자 인터페이스: 우리가 브라우저를 쓸때 보이는 화면이다. 이전버튼, 다음 버튼, 페이지 창 등이 있는 곳이다. 2. 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 3. 렌더링 엔진: 사용자가 요청한 컨텐츠를 표시한다. HTML같은 걸 파싱해서 화면에 표시한다고 보면 된다. 4. ..

모던 자바스크립트 입문의 17장에는 생명 게임 시뮬레이터 예제가 있다. 이 예제에서 화면의 view에 나타낼 픽셀을 배열로써 생성하는 파트가 있다. 코드는 다음과 같다. // 격자의 크기 state.nx = nx; state.ny = ny; // 셀의 상태를 저장하는 2차원 배열을 생성하고 초기화한다 state.cells = new Array(ny); for(var ix=0; ix

최근에 모던 자바스크립트 입문이라는 책을 통해 자바스크립트를 공부 중인데, 17장에 보면 MVC 모델을 기반으로 하여 생명 게임 시뮬레이터를 실습하는 부분이 있다. 상당히 퀄리티 좋은 예제이고, 챕터 전체가 한 예제를 다루는 (입문으로 치면) 꽤 난이도 괜찮은 예제이다. 예제 중에서 특정 객체의 메소드가 이해가 되지 않아서 직접 어떻게 동작하는 지 그려보면서 알아봤는데, 이런 방법도 있구나 하고 놀라게 되었다. 해당 코드는 다음과 같다. state.getSumAround = function(ix,iy) { var dx = [ 0, 1, 1, 1, 0,-1,-1,-1]; var dy = [ 1, 1, 0,-1,-1,-1, 0, 1]; // 주기적 경계 조건 for(var k=0,sum=0; k

예제를 진행하면서 자주 등장하는 이 세가지의 기능이 무엇이 다른지 궁금해서 알아보았다. // HTML 이 다음과 같다고 가정할 때, Keep Calm and Drink Coffee Sometimes, Tea // JavaScript const statement = document.querySelector('#statement'); statement.innerHTML; // Keep Calm and Drink CoffeeSometimes, Tea statement.innerText; // Keep Calm and Drink Coffee statement.textContent; // Keep Calm and Drink CofeeSometimes, Tea 위의 하나의 코드만으로도 세가지의 차이점을 명확하게 알..