책 읽기

이것저것

  • 책의 내용을 시작하기 전에 이것저것 설명이 나오는데 이 중에서 웹 퍼블리셔라는 용어가 나온다.
    • Q. 저는 웹 퍼플리셔로 일하고 있는데 프런트 엔드 개발자로 커리어를 전향하고 싶어요. 이 책이 도움이 될까요?
    • 프런트 엔드 개발자는 뭔 줄 알겠는데, 웹 퍼플리셔라는 용어를 처음 들어봐서 정리.
    • 웹 퍼블리셔에 대한 설명은 웹 퍼블리셔의 역할 - 프론트 앤드 개발자와 차이점를 방문해서 확인해 보면 쉽게 그림으로 되어 있다.
    • 간단히 정리하면, 예전에 디자이너가 그림을 그리고, 개발자가 코딩을 해야 할 때 중간에 HTML화(?) 시키는 영역이 발전했다고 보면 된다고 한다.
    • 최초에는 HTML화 시키는 일만 했겠지만, 지금은 웹 접근성등을 지켜야 하기 때문에 더 많은 고려를 해야 하는 영역이 되었다고 한다.
    • 하지만 웹퍼블리셔를 돌아보다라는 글을 확인해 보면, 웹 퍼블리셔가 프론트엔드 개발자와 비슷한 개념으로 혼용되고 있는듯 하기도 하다.
    • 뭐.. 암튼 그럼. ㅋ.

읽으면서 정리하기

Vue.js 필수 기술 살펴보기

Vue.js 소개

Vue.js란 무엇인가?

Vue.js의 특징

  • 20페이지 아래쪽 화면 요소를 꾸미는 HTML, CSS 코드와 데이터베이스에서 데이터를 가져와 제어하는 Java 코드가 한 파일에 섞이면서 가독성이 현저하게 떨어졌습니다. 라는 말
    • 이 문장에서 Java는 꼭, Java만들 뜻하는게 아니라, 서버사이드의 코드를 뜻하는것이라고 생각하는게 맞는것 같다. Java나 PHP 등 웹 서버쪽 코드 라고 하는게 더 좋을듯 하다.

개발 환결 설정 및 첫 번째 프로젝트

뷰 학습을 위한 개발 환경 설정하기

Hello Vue.js! 프로젝트 만들기

  • 37 페이지 중간, 뷰 개발자 도구쪽에서 아래와 같이 '파일 URL에 대한 엑세스 허용' 체크 박스에 체크합니다. 라는게 있는데, 요즘에 크롬이 업데이트 되어서 화면이 좀 다르다.
  • 아래의 그림을 참고하여 켜 주면 된다.
  • 옵션을 키고나면 아래와 같이 Toolbar에 Vue 아이콘이 활성화 되고, 개발자 도구 영역에 Vue 라는게 생긴다. 그리고 Vue의 데이터 상태 같은 것도 확인할 수 있다.

화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트

뷰 인스턴스

  • 46 페이지 마지막 단락 부분에 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않습니다. 라는 말
    • 이 말을 이해하는데 오래 걸렸다.
    • 여기서 설명하는 부분은 beforeUpdate 이벤트(?) 이다.
    • 원래 일반적인 동작에서는 값을 변경하면 화면을 새로 그려야 한다.
    • 이 시점은 아직 새로 그리기 직전이니, 원래 그릴려고 하는 값을 강제로 변경하는 코드를 넣는다고 하더라도, 바뀐 값을 이용해 1번만 그린다. 즉, 원래 값을 강제로 바꾸었다고 해도, 다시 그릴려고 시도하지는 않는다. 는 의미로 받아들이면 될 듯 하다.
    • 책을 읽을때도 좀 이해하기 어려웠는데, 이걸 글로 표현하려고 하니... 어렵네? ㅋ
    • 음... 좀 이상하다. 실제로 beforeUpdate에서 message 값을 변경해 보면, 무한루프 에러가 발생한다. ;; 음.. 아직 뭔 말인지 이해가 잘 되지 않는다. ;;;
    • 여기에서 설명하는 그려지지 않습니다.라는 말은, 가상 DOM에 node를 추가하는것인지, Real DOM에 node를 추가하는것인지 모르겠다. ;;; 암튼 그려준다라는 말의 용어가 좀 더 명확해야 할 듯 하다. 뒤의 내용을 차츰 읽어 가면서, 추후 이 내용에 대한 업데이트를 하겠다.

뷰 컴포넌트

뷰 컴포넌트 통신

상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신

뷰 라우터

뷰 HTTP 통신

화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성

뷰 템플릿

  • 102 페이지 둘째, 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 합니다. 라는 부분.
    • 간단한 연산 결과만 표시하는것을 권장합니다.라고 읽는게 좋다.
    • 안되는게 아니고, 권장하는것이기 때문에 결과만 표시해야 합니다.라는 말이 정확하지 않다.
    • 물론 그 다음 페이지인 103페이지 두번째 단락에서는 뷰에서 이러한 방식을 권하는 이유는 이라고 설명이 적혀 있긴 하다.

뷰 프로젝트 구성 방법

Vue.js 실전 투입!

실전 애플리케이션 만들기

할 일 관리 앱 살펴보기

프로젝트 생성하고 구조 확인하기

컴포넌트 생성하고 등록하기

  • 137 페이지의 중간 부분에 보면, components를 등록하는 부분이 있다.
    • 그런데 그것만 코드를 넣으면 에러가 난다.
    • 그 페이지 제일 마지막에 있는 import 관련 코드도 같이 적어야 한다.
    • 이 책의 설명이 좋긴 한데, 한 개의 코드 덩어리에서 설명해야 하는 부분을, 두개 이상의 덩어리로 나눠서 설명하는 경우가 있다. 이런 부분이 책을 좀 읽기 어렵게 만드는 경향이 있다.

컴포넌트 내용 구현하기

  • 151 페이지의 아래쪽 예제에서 <li v-for='todoItem in todoItems'>{{ todoItem }}</li> 부분
    • vue 2.2.0 이상에서는 v-bind:key필수로 있어야 한다.
    • 그러므로 vue 2.2.0 이상을 쓰면 아래와 같이 코드를 바꿔야 한다.
    • <li v-for='todoItem in todoItems' v-bind:key='todoItem'>{{ todoItem }}</li>

기존 애플리케이션 구조의 문제점 해결하기

더 나은 사용자 경험을 위한 기능 추가하기

  • 페이지 171의 중간에 있는 :key 속성은 v-for 디렉티브를 사용할 때 지정하는 게 좋습니다. 부분
    • 이미 바로 위인 151 페이지의 내용에 대한 설명에 적어 두었다. vue 2.2.0 이상에서는 :key속성은 필수이다.

Vue.js 고급 개발자 되기

뷰 중.고급 레벨로 올라가기 위한 지식

뷰 개발을 위한 웹팩

뷰 개발을 위한 ES6

뷰 CLI에서 사용하는 NPM

지금 당장 실무에서 써 먹는 Vue.js

뷰와 제이쿼리를 같이 사용해도 되나요?

개발 기간이 너무 짧은데 기존 레거시 고드에 어떻게 뷰를 바로 적용하죠?

뷰에 UI 라이브러리와 차트를 어떻게 연동할까요?

뷰로 프로그레시브 웹 앱을 개발하려면 어떻게 시작해야 하죠?

[도서]Do it! Node.js 프로그래밍

정재곤 저
이지스퍼블리싱 | 2017년 03월

내용     편집/구성     구매하기

책 읽기

  • 책 자체는 크기도 크고 두껍기도 하다. 하지만 안의 글자 크기가 작아서 많은 양의 정보가 담겨 있다. 아마도 책을 좀 작게 만들었거나, 읽기 쉽도록 글자를 좀 크게 했으면, 소위 "바이블"이라고 불리는 책 두께가 되었을듯...
  • 책 초반에는 아주 작은 정보까지 책에 나오고는 있으나, 그 작은 정보들을 아주 간단한 설명으로 퉁쳐 버리거나 설명하지 않은 부분에 대해서도 많은 단어들을 등장 시킨다.
    • 예를 들면 18 페이지의 작은 "주의" 박스에서는 "세션"이나 "쿠기"등의 단어를 사용하는데. 여기에 대한 설명은 없다. 그 전에는 "용어"칸을 통해서 조금 어렵다고 생각되는 단어들을 모두 설명하고 있는데 말이다.
    • 초보자들을 위한 책이라서, 세세한 설명이 달려 있는거 치고는, 설명이 부족하다. 그렇다고 설명이 안 달려 있는것도 아니니.
    • 만약 초보자가 해당 책을 읽는다면, 잘 모르는 단어가 나왔을때는 그냥 과감히 무시하고 넘어 가는것이 좋겠다. 설명 자체는 세세하게 잘 되어 있으니, 모르는 단어들은 아마도 책 뒷 부분에 설명이 나올듯 하다.

이것저것

읽으면서 정리하기

31페이지

  • 31페이지에 보면, 이런 문제를 해결하기 위해서 만든게 노드입니다라는 말이 있는데, 이 설명은 좀 이상하다고 생각된다. 노드의 특성이 비동기 입출력이지, 비동기 입출력을 위해서 노드를 만들었다고 적혀 있으니 말이다. 뭐.. 내가 모르는 무언가가 있는건가?

78 페이지

  • basename()에 대한 설명으로 파일 패스에서 파일의 확장자를 제외한 이름을 반환합니다.라고 되어 있는데 잘못된 설명이다. 기본적으로 basename은 파일의 반환하는 함수이고, 두번째 인자에 따라서 확장자를 제거해 주던지 아니면, 그대로 두던지 한다. 심지어 80페이지의 실제 출력 결과물에서도 확장자가 제거 되지 않고 nodepad.exe가 출력 된다.

84 페이지

  • 그리고 문자열은 큰 따옴표(" ") 또는 작은 따옴표(' ')를 사용하여 표기합니다. 라고 되어 있다. 이쪽 세상에서는 큰 따옴표보다는 작은 따옴표를 훨씬 더 많이 쓴다. 이 책에서 나오는 예제들도 대부분(?) 작은 따옴표를 사용하고 있다.

94 페이지 ~ 96 페이지

  • 94 페이지부터 96페이지까지 있는, push, pop, shift, unshift 관련 예제들은 의도를 제대로 표현하지 못한다. 이 함수들은 배열에 어느곳을 기준으로 아이템을 추가/삭제하는지가 중요한데, 예제에서는 단순히 배열의 count 만 하고 있다. 정확하게 동작하는지 확인해 보려면, 최소한 push, pop, unshift 를 사용하기 직전과, 사용한 직후에 console.dir(Users); 라도 있어야 확인할 수 있다.
  • 96 페이지 이후에 나오는 delete, splice, slice 의 경우에는 console.dir(Users); 로 화면에 객체 정보를 출력해 해당 함수들이 잘 동작하는지 확인하도록 예제가 만들어져 있다.

105 페이지

  • 사소하긴 하지만, 예제의 제일 아래쪽줄 바로 윗줄에 '객체의 walk(10)을 호출합니다.' 라고 되어 있는 부분에서 객체의 앞에 공백이 하나 들어가야 한다. 107 페이지의 결과에서는 Person.name 과 '객체의' 라는 글자 사이에 공백이 있다.

107 페이지

  • prototype에 대한 설명이 너무 퉁 쳐서 되어 있다. 메모리를 효율적으로 관리한다라고 하기에는 내부 동작이 복잡하기 때문에 이해하고 넘어 가는 것이 좋다. 오승환님의 글 : [Javascrip] 프로토타입 이해하기 라는 글을 보면 이해하기 쉽게 잘 설명 되어 있다. 물론 초보자라면 읽어도 이해하기 어려울 수 있으니, 그 때는 그냥 패스.

109 페이지

  • 이 작업을 쉽게 할 수 있도록 노드에서 미리 만들어둔 모듈이 url 모듈입니다. 라는 말이 있다. 실제로 url 모듈이 이러한 역할을 하지만, url 모듈에서는 "한글 도메인"을 "영문 도메인"으로 바꾸는 다른 기능들도 가지고 있다. 그러므로, 정확하게 바꾸자면 노드에서 미리 만들어 둔 url 모듈을 사용하면 이 작업을 쉽게 할 수 있다. 고 되는게 정확하겠다. 맞다. 그냥 꼬투리 잡는거다. ㅋㅋ.

119 페이지, 120 페이지

  • readFile(filename, [encoding], [callback]) 이라고 되어 있는데, 정확한 스펙은 readFile(filename, [options], callback) 이다. options에는 encoding을 적을 수 있기 때문에 그 부분은 적당히 맞다고해도, callback은 반드시 필요한데, [callback]으로 표시해서 마치 생략할 수 있는 것 처럼 표기 했다. 그러므로 수정되어야 한다. writeFile, open, read, write, close 모두 callback을 생략해서는 안된다.

127 페이지

  • 주의 상자에 기존 output2.txt 파일을 삭제한 후 output.txt 파일을 output2.txt 파일로 복사하는 과정이 비동기 방식으로 처리되므로 화면에 출력되는 순서는 다를 수 있습니다. 라고 되어 있는데.. 단순히 출력만 다른게 문제가 아니다.
  • 파일을 삭제하는 fs.unlink 역시 비동기로 동작된다. 즉, 언제 파일이 지워질지 모르는 상태에서 다음 코드인 infile.pipe(outfile)을 수행하게 된다. 이 때 fs.unlink보다 infile.pipe(outfile)이 먼저 실행 완료되면, 파일을 "복사"를 한 뒤, 파일을 "삭제"하게 되므로 복사가 제대로 되지 않을 수 있다.
  • 그러므로 단순이 출력만 다른 문제가 아니라, 코드 자체가 오류를 일으킬 수 있도록 되어 있다는것이 문제다.
  • 제대로 수정할 것이라면, fs.unlink의 callback 함수 안에서 복사하는 동작을 넣어야 한다고 생각된다.
  • 아님 말고. ㅋ

137 페이지

  • server.listen(port, host, '50000', function() { ... 부분에서 좀 잘못 된 부분이 있다. 물론, '50000'의 위치에 들어가야 하는 정보는 backlog 라는 값이 되어야 하는데, API 정의상에서는 이 값이 <number>여야 한다.
  • 물론 코드를 동작시켰을때, 잘 동작할 수도 있다. javascript의 오묘한 형 변환이 있기 때문이다. ㅎ. 물론 난 실제로 코드를 동작시켜서 확인해 보지는 않았다. ㅎㅎ.

145 페이지

  • 이 파일을 실행한 후 웹 브라우저에서 요청을 보내면 같은 결과를 볼 수 있습니다. 라고 되어 있다. 같은 결과를 볼 수 있는것이지 실제로 같은 응답을 보낸것은 아니다.
  • pipe를 이용해서 데이터를 바로 쏴 버리면, 현재 보내는 파일의 content-type을 보내지 않게 되므로, 웹 브라우져가 알아서 보여주는것이다.
  • 헤더 정보가 없는 응답

  • 그렇기 때문에 책에서도 이 방법으로 코딩을 했을때 헤더를 설정할 수 없는 등의 제약이 생기므로 필요할 때만 사용하길 권합니다. 라고 적어 둔 것이다.

  • 헤더도 제대로 셋팅하고 파일도 전달 하고 싶다면, infile.pipe(res); 바로 윗 줄에 res.writeHead(200, {'Content-Type': 'image/png'});를 추가해 주면 Content Type 헤더도 제대로 전달 할 수 있다.

  • 헤더 정보가 잘 추가 되어 있는 응답

149 페이지

  • 정박사의 한마디 부분 중 GET 방식은 헤더 부분에 요청 정보들을 넣어 보내고라는 부분이 있다. 정확하게 말하면 GET 방식은 URL 부분에 요청 정보를 전달하는것이다.
  • GET 이던 POST던 상관없이(심지어 PUT이나 DELETE에도) 헤더 부분에 요청 정보를 넣어 보낼 수 있다.
  • 초보를 위한 책이기 때문에, 이 모든것을 구체적으로 설명할 수 없다는것을 독자는 이해해야 한다.
  • 클라이언트에서 어떤 Method를 쓰던 request 헤더에 부가적인 정보를 보내고, 서버에서 그 정보를 받아서 처리하겠다고 약속하면 된다.

164 페이지

  • 첫 번째 코드 예제 중에서 app.use('/public', static(path.join(__dirname, 'public'))); 부분이 잘못 되었다.
  • 코드의 직전 설명에서는 [public] 폴더에 있는 모든 파일을 웹 서버의 루트 패스로 접근할 수 있도록 만들고 싶다면 이라고 표현되어 있다. 이 말대로 동작하려면 코드는 app.use(static(path.join(__dirname, 'public'))); 이 되어야 할 것이다.
  • 다음 페이지의 3번째 예제는 설명이 제대로 되어 있다.
  • 167 페이지의 예제에서도 app.use('/public', static( ... ) )으로 되어 있는데, 이 역시 app.use( static( ... ) )로 되어야 한다.
  • 그리고 static 이라는 이름의 변수를 쓰는건 좋지 않다. 오해를 일으킬 수도 있고, 추후 TypeScript 등을쓰게 되면 또 문제가 된다. 그러므로 static이라는 이름의 변수는 피하도록 하자.
  • 참고로 Express 4.x 이후로는 express.static 미들웨어를 기본으로 제공한다고 한다. 그래서 코드를 쓸 때 그냥, app.use(express.static('public')); 형태로 쓰면 된다. 여러 디렉토리를 설정할 수도 있다고 한다.
  • express.static

168 페이지

  • 아래쪽을 보면 서버 코드에서 use() 메소드로 설정한 함수는 login.html 문서에 접근했을때는 호출되지 않습니다. 라고 되어 있다. 근데... 잘은 모르지만... 아마도... 이 설명은 잘못 되었다.
  • 서버 코드에서 app.use( '/public', static(...)) 부분이 실행되었기 때문에, public 디렉토리에서 login.html을 찾아서, 웹 브라우져로 내려 주었기 때문에, 웹브라우저에서 해당 HTML을 볼 수 있게 된 것이다.
  • 그러므로 정확하게 말하면 서버코드에서 app.use( static(...) ) 메소드로 설정한 함수가 동작했고, 그 다음 app.use() 함수는 호출 되지 않습니다. 라고 이해하는게 좋겠다.
  • 그렇다면 왜, app.use(static(...)) 다음에 우리가 정의한 미들웨어는 실행되지 않는가? 바로, static(...) 함수 안에서 error가 나지 않는 이상 next() 함수를 호출하지 않도록 코드가 만들어져 있다. 관심이 있다면 직접 소스 코드를 확인해 보자.

262 페이지

  • 세번째 줄 I accept th license terms -> I accept the license termse가 빠진 듯 하다.

276 페이지 277 페이지

  • 276 페이지 select ?? from ?? where id = ? and password = ? 부분과 227페이지 SQL문 안에 들어 있는 ?? 또는 ? 기호를 대체한 후 다음과 같은 SQL 문을 만들어 냅니다. 에서 어떤때는 ?? 를 쓰고, 어떤때는 ?를 쓰는데 이건 오타가 아니다.
  • ?? 는 '' 없이 그냥 값이 대체 될 때 사용되고, ?는 ''를 감싸서 대체 된다.
  • 277 페이지 중간에 있는 select id, name, age from users where id = 'test01' and password = '123456' 을 보면 잘 알 수 있다.

348 페이지

  • 마지막 예제에서 <h2><% = title %></h2>가 있는데 %=를 붙여 적어야 한다. 즉, <h2><%= title %></h2> 가 되어야 함.
  • 그 외, 다른 곳에서도 <% =와 같이 띄워쓰는 코드들이 보이는데 이것은 모두 오타이다. 그러므로 다 붙어 있다고 생각하면 된다.
  • 그리고 여기에서 <%를 쓰는 경우와 <%=를 쓰는 경우가 있는데, 이것에 대한 자세한 사용법은 ejs홈페이지 에서 Tags 부분을 확인해 보면 좋다.

8장 뷰템플릿 적용하기...

  • 뷰 템플릿은 ejs와 pug에 대한 설명이 나온다.
  • 기존에 HTML을 알고 있는 사람이라면 ejs가 훨씬 더 직관적이다. 반면 pug는 pug만의 문법을 따라야 한다는 불편함이 있다.
  • 물론 pug가 HTML tag를 모두 적지 않아도 된다는 장점이 있지만, 요즘에는 대부분 IDE 툴에서 HTML 자동 완성을 제공해 주므로, 크게 차이가 나지 않을 것으로 보인다.
  • 암튼 난 ejs 가 훨씬 더 편해 보인다. 예전에 php를 해서 그런지 ejs가 훨씬 더 익숙해 보인다.

373 페이지

  • 두번째 예제 박스에서 passport.use(new LocalStrategy( 부분은 passport.use('local', new LocalStratgy(로 바꾸는것이 책을 읽는데 좀 더 수월하다. 다음장인 374 페이지의 윗 부분 그림에도 스트래티지 설정이라는 부분에 보면 'local'을 설정해 둔 것을 볼 수 있다.
  • 다만 'local'을 생략했다고 해서 잘못 동작하는것은 아닌데, passport.use()함수를 호출할 때, Strategy의 이름을 설정해 주지 않는다면, Strategy에서 name 값을 얻어와 셋팅하도록 되어 있기 때문이다.
  • https://github.com/jaredhanson/passport/blob/master/lib/authenticator.js
  • LocalStrategy의 코드를 보면 자신의 name 값을 설정하는 코드를 찾을 수 있다.
  • https://github.com/jaredhanson/passport-local/blob/master/lib/strategy.js
  • 그러므로 passport.use(new LocalStrategy(로 설정했다고 해도, 가져다 쓸 때는 passport.authenticate('local', ...) 으로 호출 할 수 있게 된다.

427 페이지

  • attach(httpServer, options)는 정확하게 하면, attach(httpServer[, options])이다. 즉, Options는 생략 가능. 물론 책에서 일일이 설명하기 어려우니 생략했을 것이라고 생각한다. 글쓴이보고 뭐라고 하지 말길...
  • 그 아래에 있는 listen(httpServer, options) 역시 마찬가지다.

431 페이지

  • 예제 중에서 socket.on(... 부분의 코드에서 들여쓰기가 잘못 되어 있으니 주의해서 볼 것.

435 페이지

  • 예제나 책 설명 중에 recepientrecipient의 오타이다. 하지만 책 전반에 걸쳐 오타인 recepient를 사용했으니, 실제 코드에서는 별 문제가 없을 것으로 예상된다.
  • 나도 자주 틀리는 단어라.. ㅎㅎ. 이해가 된다. ㅋㅋㅋㅋㅋ.

481 페이지

  • 이 callback 함수는 두 개의 파라미터를 전달받을 수 있는데, 첫 번째 파라미터는 오류 전달을 위해 사용하고 두번째 파라미터는 정상적인 데이터를 전달 할 때 사용합니다. 라고 설명되어 있다.
  • 487 페이지에 실제로 에러가 난 상황을 가정하고, 첫번째 파라미터에 "정보"를 넘기고 있는것을 볼 수 있다. 481 페이지의 내용을 대충 읽으면, 487 페이지의 내용을 이해하기 어려울 수 있을것 같아, 기록해 둔다.

484 페이지

  • 제일 아래 표에서 result : 응답 데이터가 배열 객체로 들어 있습니다. 라고 되어 있다.
  • 여기서는 성공한 경우에 대한 정보만 표로 나타내고 있다. 실패한 경우에는 error이라는 속성에 정보가 채워져 있다. 이 내용은 489 페이지에 설명되어 있다.
  • 다만 실패한 경우에 대한 설명은 표로 설명되어 있지 않아 놓치기 쉬울 것 같이 기록해 둔다.

621 페이지

  • 예제의 하단을 보면 Entities : Entities 부분이 있다.
  • 또한, 622 페이지 ejs 예제를 보면 var entities = new Entities(); 코드가 있다.
  • 뜬금 없이 갑자기 Entities를 사용하고 있는데, 이건 책에 코드가 누락되어 있기 때문이다.
  • 619 페이지 코드에서 제일 윗 줄에 .... 위치에 다음의 코드가 들어가야 한다. var Entities = require('html-entities').AllHtmlEntities;.
  • 인터넷에세 예제를 다운로드 받아보면 추가 되어 있으나, 책에서는 생략되어 있어 의아하게 생각할 수 있는 부분이다.
  • 책에서는 Entitites에 대한 설명을 아예 없다.
  • html-entities 모듈은 HTML을 인코딩/디코딩 시켜주는 역할을 한다. 설치는 npm install html-entities --save로 설치 할 수 있다.


[도서]타입스크립트 마스터 2/e

나단 로젠탈 저/김유성 역
에이콘출판사 | 2018년 03월

내용     편집/구성     구매하기

서두

자바스크립트를 공부하고, 실제로 사용하려고 했지만, 너무나 어려웠다. 가장 어렵다고 생각한 부분이 "자동완성"을 제대로 지원하지 않는것.

Type이 정확하지 않기 때문에, 내가 parameter로 전달해야 하는것도 명확하지 않았고, 모든것을 다 알고(혹은 외우고) 호출해야 하는 일이 어려웠다.

그래서 타입스크립트를 공부해 보기로 결심.

에이콘 출판사의 "타입스크립트 마스터 2/e - 예제로 배우는 타입스크립트"를 구매 했다.

출판사에 있는 정오표에 표시된 것 말고도 잘못 된 곳이 보여, 이곳에 정리해 두고자 한다. 지금 발견한건 딸랑 하나라.. 나중에 더 추가 될 수 있을지 모르겠다.

책을 다 읽었다. 당근 완벽하게 모든 내용을 이해한건 아니다. ㅋㅋ 아래 내용중 내가 잘 모르는 상태로 "잘못됐다"라고 이야기 하는것도 있으니, 이 글을 읽는 사람이 잘 가려서 읽기를 바란다.

책 후기

  • TypeScript의 문법은 거의 java와 비슷하다. 좀 다른게 있다면.

    • 변수나 함수의 type을 정의 할 때, 변수명 뒤 쓰는 형태 public id : string;
    • interface 정의에 field도 정의할 수 있음 interface A { id:string }
    • field에 접근할 때, get set 키워드를 통해서 hooking 할 수 있음 get id() { return this._id; }
    • 읽기 전용 속성은 final 대신, readonly readonly name: string;
    • 여러개의 type을 받고 싶을때는 Object 대신 any var a : any = "aa"
    • 여러개의 정해진 type(Union)을 받고 싶을때는 Object 대신 | var a : string|number;
    • 함수의 파라미터에서 같은 타입의, 다른 갯수에 대한 오버로딩시 모두 각각 정의하는 대신 ? 사용 funnction a( b: string, c?: string, d?: string) { ... }
    • 함수의 파라미터에서 타입이 다른 오버로딩시 모두 각각 정의하는 대신 아래 문법 사용

        function a ( b: string, c: string) : string;
        function a ( b: number, c: number) : number;
        function a ( b: any, c: any) : any {
            // code
        }
      
    • 상속 받은 클래스의 생성자에서는 반드시 super()를 수동으로 불러줘야 한다. Java에서는 super()가 자동으로 호출 되지만, 타입스크립트는 그렇지 않음. 자동으로 호출해 주자는 건의(?)가 많았지만, JavaScript의 super-set이라는 등의 이유로 안된듯 하다.

정오표 및 이해하기 어려운 곳 설명

3장 인터페이스, 클래스, 상속

216 페이지

  • Simple Class는 id, name의 속성과 -> Simple Class는 id 속성과
    • Simple Class에는 name 속성이 없다.

156 페이지

  • myClosure; -> myClosure();
    • 예제 소스에서 의도한것은 myClosure라는 함수가 실행되는것을 의도한 것이다(p157페이지의 상단 설명). 그러므로 함수 실행을 위해서 마지막에 () 를 붙여 주어야 한다.

159 페이지

  • 제일 아래의 예제 처음에 아래의 코드 추가

    enum PersonCategory {
        Audlt,
        Infant,
        Child
    }
    
    interface IPerson {
        Category: PersonCategory;
        canSignContracts(): boolean;
        printDetails(): void;
    }
    
  • 아마도 PersonCategory에 관한 enum과, IPerson이라는 interface 관련 코드가 아예 빠진것 같다. p160 내용이나, 그 뒤의 예제 결과등을 참고하면, 위의 코드가 있어야 될 듯 하다.

174 페이지

  • 제일 아래의 예제 코드에서 static staticName: string; -> static name: string;
    • 다음페이지에 나오는 출력 결과물과, 설명을 보면 코드상의 속성 이름이 staticName이 아니라 name이 되어야 한다.

203 페이지 (오타아님)

  • 유창한 구문으로 함수에 프라미스를 -> 플루언트 구문으로 함수에 프라미스를
    • Fluent의 번역을 "유창한"이라고 했다. 그래서 오히려 이해하기 어렵다. fluent 에 대한 개념은 여러 라이브러리의 사용에서 나오므로, 그냥 "플루언트"라고 그대로 적는게 어떨까 싶다. "데코레이트"도 그대로 사용했으니깐. 324페이지에도 "유창한"이라고 적혀 있으니, 이후에 나오는건 모두 걍 fluent라고 생각하면 된다.

226 페이지

  • containsErros 메서드와 ErrorHelper.trace 메서드를 -> ErrorHelper.containsErrors 메서드와 ErrorHelper.trace 메서드를
    • ErrorHelper는 containsError와 trace 메소드를 모두 가지고 있는데, 한쪽에만 ErrorHelper의 메소드인것 처럼 적어 두었다.

261 페이지

  • 정의에 모델 속성을 할당하려면 model: NoteModel 구문이나 -> 정의에 모델 속성을 할당하려면 model = NoteModel 구문이나
    • 260페이지의 마지막에서 이미 model: NoteModel은 오류가 발생한다고 적혀 있다. 그러므로 261페이지의 내용은 model = NoteModel 이 되어야 한다.

274, 463 페이지 (오타아님)

  • MVC는 모델-뷰-컨트롤러의 두 문자 집합으로 -> MVC는 모델-뷰-컨트롤러의 앞 글자의 집합으로
  • 객체지향 모범 사례의 두 문자를 모은 SOLID 디자인 -> 객체지향 모범 사례의 앞 글자를 모은 SOLID 디자인
    • 두 문자는 머리 두(頭)를 이야기 한 것으로 보인다. 그러므로 읽기 쉽게 "앞 글자" 라고 적어두는게 더 읽기 좋겠다.

323 페이지

  • Jasmine uses a simple format for writing tests. Consider the following TypeScript code: -> 삭제
    • 이미 위에 한글로 해석이 되어 있는데, 코드 쪽으로 설명이 내려와 있다. 그러므로 삭제

334 페이지, 335 페이지

  • doCallback 함수 -> doCallBack 함수
    • 예제에서는 "B"지만, 설명에서는 어떤 때는 "B", 어떤 때는 "b"로 사용한다. 그러니 잘 읽어내도록 하자. 심지어, 334페이지 아래쪽에는 let doCallback 으로 변수를 하나 만들어서 쓰고 있어서 더 혼동이 될 수 있다. 예제를 만들때 요런 점도 좀 고려해서 만들었으면 좋았을 텐데...

341 페이지, 342 페이지

  • jasminjquery -> jasmin-jquery
    • 라이브러리 이름이니 정확하게 "-"를 포함해서 적어야 한다.

363 페이지

  • Id: 0, DisplayName: "none"}}); -> { Id: 0, DisplayName: "none"}});
    • SelectedItem의 값으로 Id와 DisplayName을 넣는 Struture를 넣어야 하는것으로 보인다. 그렇게 되려면 "{"를 제일 앞에 추가해 줘서 객체(?) 형태로 만들어야 한다.

09장 타입스크립트 호환 프레임워크 테스트 는 생략함

  • TypeScript 자체를 공부하기 위해서 책을 보는것이라. 지금 당장은 테스트용 프레임워크를 열심히 볼 필요는 없다고 판단. ㅋ. 그래서 걍 이 부분은 읽지도 않고 패스함.ㅋ.

417 페이지

  • mod1.print(); -> m1mod1.print();
    • 첫번째 예제에서 let m1mod1 으로 정의해서 쓰고 있기 때문에, 다음줄에 있는 코드는 당연히 m1mod1.print(); 가 되어야 한다.

426 페이지 (오타아님)

  • 글 내용을 보면, "main.js파일에서는..." 이런 내용이 나오는데, 어디에도 그 main.js 파일을 찾을 수 없다. 그냥 작가가 있다고 생각하고 이야기 한 것인지 모르겠다. 그래서 책 내용을 읽을때, 독자도 상상력을 가지고 읽으면 될 것 같다.

429 페이지

  • 항목 이름은 'jasmineboot'로 -> 항목 이름은 'jasmine-boot'로
    • 소스코드에서는 물론이고, 직전의 설명에서도 'jasmine-boot'로 설명 되고 있다.

432 페이지

  • 다음 AMD 오류인 filenot-found 오류일 수 있다. -> 다음 AMD 오류인 file-not-found 오류일 수 있다.
    • 이전 설명에서도 file-not-found 와 같이 중간에 모두 - 을 넣어 두었다.

436 페이지 (오타아님)

  • 중간에 보면 http-server를 실행하고 결과를 보여주는 설명이 있는데, http-server를 설치하는 방법은 설명도 안 해 줬다. ( 설마.. 9장에서 해 줬나? ). http-server를 설치하려면 console(cmd)창에서 아래의 명령을 입력해 주면 된다.
  • npm install http-server -g
  • 그 이후 http-server를 실행시키면 된다.

448 페이지, 451 페이지, 565 페이지 등 (오타이님)

  • {{{body}}}

    • handlebars 템플릿은 일반적으로 {{ }} 처럼, 이중 괄호를 2개만 쓴다. 그런데 예제에서는 {{{ }}} 에 대한 설명 없이 body만 {{{body}}}로 사용중이다.
    • handlerbars는 {{ }} 를 사용하게 되면, 단순 String으로 치환하는것 이외에, HTML Tag와 관련되는것들을 모두 화면에 출력할 수 있도록 치환해 준다. 예를 들어 title이 "제목은 귀여워 >_<" 와 같다면, "제목은 귀여워 &gt;_&lt;" 와 같이 치환한다.
    • 하지만 {{{ }}} 를 사용하면 치환하지 않고, 그대로 String이 들어가게 된다. 여기에서는 {{{body}}} 영역에 각종 HTML 코드(<p> 나 <br>등)가 들어가야 페이지 HTML 페이지 구성을 할 수 있기 때문에 {{{ }}}를 사용한 것이다.


+ Recent posts