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 위의 하나의 코드만으로도 세가지의 차이점을 명확하게 알..

로컬에 있는 텍스트파일의 내용을 읽어서 웹페이지에 표시하는 스크립트를 짰는데, 안타깝게도 firefox의 정책이 바뀐 듯하다. 분명 설명에는 firefox에서는 로컬의 파일을 읽어서 사용할 수 있다고 했는데, 해당 책이 좀 시간이 지나서인지는 모르겠는데, 동일출처정책에 위반된다는 에러때문에 아예 읽어올 수 조차 없었다. 처음 설명을 보면서 브라우저에서 로컬파일을 읽는다고? 해서 갸우뚱하지만 편하게 진행될거라 여겼는데, 역시나 다른 루트의 파일을 읽어오는 건 불가능했다. 뭐 firefox가 업데이트되면서 최신정책으로 바뀌면서 그렇게 된 걸 수도 있다. 이렇게 되면 예제를 실행시킬 수가 없게 되는데, 그래서 찾게 된 방법이 완전 초간단한 임시서버를 운용해서 거기서 나의 html예제를 실행시켜보려고 했다. 우..

모던 자바스크립트 입문 이라는 책에서 15장 마지막 예제가 있는데, (그림판을 만드는 예제이다.) 예제 파일에 있는 코드가 난독화되어있다. 아마 설명을 보고 직접 작성하라는 뜻이겠지만... 답답해서 먼저 복호화 시켰다. 아래는 코드 난독화를 다시 복호화시킬 수 있는 사이트이다. www.strictly-software.com/unpack-javascript Javascript Unpacker Tool - Strictly Software This Javascript unpacker tool has now been upgraded to allow it to unpack multiple eval statements. So if your packed code has itself been packed a few t..

버튼 cancelable 값을 alert 로 찍어보는 예제이다. 그런데 해당 예제를 실행하는 와중에 이해가 안되는 동작이 존재했다. 우선 처음 실행했을 때 동작은 다음과 같다. 보다시피 alert 창으로 cancelable 프로퍼티의 값이 찍히게 된다. 내가 설정한 false 값으로 잘 출력되는 것을 볼 수 있다. 그리고 여기서 확인을 누르면 다음과 같이 표시된다. button 태그를 body에 정의해놓았다. 그런데 여기서 버튼을 다시 클릭하게 되면 다음과 같은 결과를 확인할 수가 있다. 맨 처음의 cancelable 의 값이 찍힌 건 false 였다. 스크립트에서 event.initEvent("click",true,false); 에서 세번째의 인수인 cancelable에 false를 잘 전달했는데, 갑..

노드를 생성하는 메서드들을 살펴보던 중 createDocumentFragment()라는 메서드를 발견했다. 다른 메서드들은 무난하게 설명이 이해가 됬는데, 이 메서드는 설명란에 도큐먼트 프래크먼트 라고만 적혀 있었다. 그래서 찾아보게 되었다. 해당 블로그에서 많은 도움을 얻었다. 출처: programmer-seva.tistory.com/60 DocumentFragment 노드를 생성해서 사용하면 라이브DOM 트리 외부에 경량화된 문서 DOM을 만들 수 있다. 마치 라이브 DOM 트리처럼 작동하되, 메모리상에서만 존재하는 빈 문서 템플릿으로 생각하면 된다. 자식 노드를 메모리상에서 손쉽게 조작한 후 라이브 DOM에 추가하는 것도 가능하다. 라고 설명 되어있는데, 해당 블로그의 코드들을 살펴보고 설명을 계속..

Navigator 객체를 살펴보던 중 재밌는 메서드를 발견했다. vibrate() 메서드인데, 단말기를 진동시키는 메서드이다. 웹 브라우저에서 직접 디바이스를 컨트롤할줄은 몰랐는데, 진동을 시킬 수 있다는 게 신기했다. 그리고 검색해보니 이 메서드가 hoax 계열의 광고에서 자주 사용한다는 것을 알게 되었다. 가끔 웹서핑을 하다가 이상한 사이트에 접속하거나 하게 되면, 갑자기 배터리가 부족? 하다거나 바이러스에 감염되었다거나 디바이스에 치명적인 손상이 있다는 둥 갑자기 번쩍거리는 이펙트와 함께 진동이 울리면서 창들이 막 뜨게 되는 경우가 있다. 그런데 이 허위 광고에 속는 사람들도 꽤 많아서 아직까지 많이 쓰이고 있다고 한다. 그리고 여기서 바로 진동 이펙트를 주기 위해서 vibrate() 메서드를 사용..

servlet&jsp 을 배우고나서 spring 까지 어떤 식으로 다루는지 살펴보는 시간을 가졌다. 대략 한달 반 정도 걸린것 같다. 라는 책이 그렇게 좋다고 소문이 자자해서 괜찮겠다 싶어서 공부했는데, 정말 소문이 85%정도는 맞는 것같다. 조금 호불호가 갈리는 부분이 있었는데, 그건 지극히 주관적인 관점이었다. 아무튼 그렇다 치고 spring을 더 깊게 파보려고 생각하다가 지금은 그럴 때가 아니라는 생각이 들어서 자바스크립트를 한번 훑어보려고 했다. 이라는 책을 사서 공부중인데, 솔직히 말해서 살짝 어색한 감이 있다. 자꾸 C 혹은 JAVA에서는 허용안되는 개념들이 등장하면서 이것도 따로 외워야하겠다는 생각이 들면서 헷갈릴 수도 있겠다는 생각이 들었다. 여타 다른 언어들과는 살짝 다른 면이 보였다. ..