Polpid's Pensieve

html 태그로 표현되어있는 문법을 createElement 로 변환해준다.

const vdom = <p>
  <h1>헤더</h1>
  <ul>
    <li style="color:red">첫번째</li>
    <li style="color:blue">두번째</li>
  </ul>
</p>

위에 있는 코드가 아래와 같이 변환이 된다.

"use strict";

const vdom = /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("h1", null, "\uD5E4\uB354"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
  style: "color:red"
}, "\uCCAB\uBC88\uC9F8"), /*#__PURE__*/React.createElement("li", {
  style: "color:blue"
}, "\uB450\uBC88\uC9F8")));

출처 : https://babeljs.io/ 에서 변환함.

왜 저렇게 변환이 필요한가?? 

// app.js
const vdom = createElement(
  "p",
  {},
  createElement("h1", {}, "헤더"),
  createElement(
    "ul",
    {},
    createElement("li", { style: "color:red" }, "첫번째"),
    createElement("li", { style: "color:blue" }, "두번째")    
  )
);

// react.js
export function createElement(tag, props, ...children) {
  props = props || {}
  return {
    tag,
    props,
    children,
  };
}

JSX 를 사용하지 않으면 위와같이 코드를 작성해줘야 한다. 하지만 위보다는 html 태그 구조가 눈에 더 잘 들어온다.

한가지 더 기본적으로 JSX 가 변환을 할때에 메소드를 보면 React.createElement를 사용한다. 하지만 위에 작성된 코드에서는 createElement를 사용하고 있다. 이걸 변경해주려면 다음과 같이 표시해 주면된다. 변환된 코드는 아래와 같다.

/* @jsx createElement */
// app.js
const vdom = createElement(
  "p",
  {},
  createElement("h1", {}, "헤더"),
  createElement(
    "ul",
    {},
    createElement("li", { style: "color:red" }, "첫번째"),
    createElement("li", { style: "color:blue" }, "두번째")    
  )
);

실제로 babel 사이트에서 변환된 것을 봐도 변경된 것을 알수 있다.

"use strict";

// app.js
const vdom = createElement("p", {}, createElement("h1", {}, "헤더"), createElement("ul", {}, createElement("li", {
  style: "color:red"
}, "첫번째"), createElement("li", {
  style: "color:blue"
}, "두번째")));

여러가지 배열 연산 형태 
함수 형태나 쓰임이 많다보니 코드를 봤을때 대체 무슨 의미인지 파악이 어려워서 공부하다가 형태를 기억하면 좋을것 같아서 남겨놔봤다. 

type Book = {
    title: string;
    copyright?: string;
    author?: string;
};

const books: string[] = [
    "헨리 6세",
    "리처드 3세",
    "실수 연발",
    "말괄량이 길들이기",
    "헨리 8세",
];

// foreach 문
books.forEach((book: string, idx: number, books: string[]) => {
    console.log(book, idx);
})

// map 사용1
const bookObject: Book[] = books.map((book:string) =>{
    return {
        title:book,
        author: undefined,
    };
});

console.log(bookObject); 
/*  [ { author: undefined, title: '헨리 6세' },
  { author: undefined, title: '리처드 3세' },
  { author: undefined, title: '실수 연발' },
  { author: undefined, title: '말괄량이 길들이기' },
  { author: undefined, title: '헨리 8세' } ] */

// map 사용2
const ShakespeareOneBooks: Book[] = books.map((book: string) => ({
    title:book
}))
.map((book: Book) => ({
    ...book,
    author: "William Shakespeare"
}));

console.log(ShakespeareOneBooks);

// map 사용2 와 형태가 다르지만 동일 동작임.
const bookTitleToBookObject = (book: string) => ({title:book});
const makeAuthor = (name: string) => (book: Book) => ({
    ...book,
    author: name
});

const shakespeareTwoBooks: Book[] = books
.map(bookTitleToBookObject)
.map(makeAuthor("William Shakespeare"));

console.log(shakespeareTwoBooks);

// filter
const henry: Book[] = shakespeareTwoBooks.filter((book: Book) =>
    book.title.includes("헨리")
);

console.log(henry);

// reduce
// reduce 는 함수와 초기화 값을 넘겨줌
// 함수에는 2개의 인자를 넘겨주는데 첫번째에는 초기값, 두번째는 배열의 값을 넘겨줌
// 함수가 반복되면서 첫번째 인자에는 다시 결과값을 계속 넣어주게됨.
// 0, 10 -> 10, 5 -> 15, 3 .. 이런 형태로 값이 들어감.
const someNumbers: number[] = [10,5,3,14,56];
const someNumber = someNumbers.reduce((a:number, b:number) => a + b , 0)

console.log(someNumber);	// 88

type SomeObject = {
    [key: string]: string | number;
};

// reduce object
const someObjects: SomeObject[] = [
    { border: "none"},
    { fontSize: 24},
    {className: "box sm-box"},
];

const someObject: SomeObject = someObjects.reduce(
    (a: SomeObject, b: SomeObject) => ({...a, ...b}),
    {}
);
console.log(someObject) // { border: 'none', className: 'box sm-box', fontSize: 24}

(출처 : 패스트 캠퍼스 - 김민태의 프론트엔드 아카데미 : https://fastcampus.co.kr/dev_academy_kmt1)

매일 봐도 까먹는 자바스크립트 함수형태들...

function fn(x){
	return x + 100;
}

const result = fn(10);

# 이름없는 함수
const fn2 = function (){
	return 100;
};

fn2();

# 즉시 실행 함수
(function(){
	console.log('test')
})();

# Arrow 함수
const fn3 = () => {
	return 100;
}

const fn4 = () => 100;

# Generator 함수
# 최초 호출하면 함수가 실행되지 않고 실행 준비상태로 만듬. 
# 그리고 객체를 반환하며 이 객체에는 함수를 실행할 도구가 담겨져 있다.
# 도구를 이용해서 함수를 실행하고 멈추고 할수 있음.
function* fn5(){
	yield 10; 
	yield 20;
	return 30;
}

const g = fn5();
g.next();  // {value: 10, done: false}
g.next();  // {value: 20, done: false}
g.next();  // {value: 30, done: true}


# 비동기 함수
async function fn6(){
    
}

---

JavaScript Cookbook

저자

셸리 파워즈 지음

출판사

한빛미디어 | 2011-12-26 출간

카테고리

컴퓨터/IT

책소개

전문가의 검증된 코드로 배우는 자바스크립트 문제 해결 노하우어떤...

글쓴이 평점  

---

우리가 자주 쓰는 자바스크립트에 대한 문제와 해결책에 관한 내용이 시작 부터 끝까지 가득 담겨있는 책이다. 챕터의 내용도 문자열, 정규표현식, 날짜, 숫자 관련등으로 해서 주제별로 잘 분류해놓은것 같다. 항상 구글링을 해서 어디서 듣보잡 코드를 복사해서 붙였던 것을 이제는 제대로 알고 사용할수 있을 정도의 내공을 실어줄수 있는 책이다. 

이 책 전에 Javascrpit+Jquery 입문 책을 봐서인지 몰라도 내용들이 무척 친근하다. 앞의 책이 기초라고 한다면 이책은 약간 상급자 레벨정도. 그렇다고 책이 어렵거나 소스코드가 보기 어렵지는 않다. 소스코드에 결과 화면까지 아주 자세히 보여주고 있기때문에 그냥 따라하기만 해도 충분히 이해할 수 있을정도의 난이도라고 생각이 된다. 그리고 내가 관심을 가지고 있는 정규표현식이 따로 나와있어서 정말 반가웠다. 개인적으로 좋아하는 파트인데 이렇게 따로 나눠져있다니 그저 좋을 뿐이다. ^^

그리고 자바스크립트 하면 빠지지 않는 날짜와 시간 관련된 부분도 상당히 많이 다루고 있어서 왠만한 소스는 다 있는것 같다. 그리고 충분히 응용할 수 있을 정도의 내용이기때문에 앞으로도 정말 잘 써먹을것 같다는 느낌이 들었다. 그리고 자료 화면으로 쓰인 그림들이 맥북 화면인것 같아서 좋았다. 다른 책들은 보통 윈도우 화면인데 맥북을 사용하는 나에게는 그런것 하나가 더 좋아보였다. 단지 아쉬운점은.. 역시나 책이 너무 딱딱하다는 느낌을 감출수가 없다. 정말 이건 프로그래밍 책이구나.. 라는 느낌이 팍팍 든다. 알록달록하면 읽기가 더 산만해지긴 하지만 약간은 컬러가 들어갔으면 하는 아쉬움이 있다. 

---

JavaScript jQuery 입문

저자

윤인성 지음

출판사

한빛미디어 | 2011-12-14 출간

카테고리

컴퓨터/IT

책소개

[출판사서평]1. 이 책이 제시하는 핵심 내용 자바스크립트 기초...

글쓴이 평점  

---

많은 프로젝트에서 java, spring, jsp, 등등의 기술을 많이 사용한다. 이런 기술들과 마찬가지로 Javascript 또한 상당히 많이 사용되고 있다. RIA기반 툴들도 사용문법이 Javascript기반으로 되어있고 이래저래 사용빈도가 상당히 높다. 그럼에도 불구하고 보통 Javascript는 따로 공부한다기 보다는 그때그때 인터넷 찾아서 붙여넣기 하는 경우가 대부분이다. 그래서인지 인터넷 상에는 수많은 소스코드가 있고 그중에는 검증되지 않은 코드들도 많이 존재한다. 그리고 어떤 것이 표준에 맞는 내용인지 조차 구분이 안가는 코드들이 많이 있다.이책은 그러한 기본들을 공부하기에 좋은 책이라고 생각이 된다. 기초부터 고급과정까지 많은 예제 소스들과 함께 설명을 해주고 있다. 

장점

- 무엇보다도 예제가 정말 많다. 거의 페이지마다 1개 이상의 예제소스가 있어서 쉽게 따라 할수가 있었다.

- 해당 소스에 대한 적절한 설명과 그림 추가로 인해서 이해가 쉬웠다.

- Javascript뿐만 아니라 JQuery나 모바일 분야까지 설명을 해줘서 연결해서 공부하기 편하다.

- 정규화등을 뒤에 부록으로 해놔서 보기 편하다.

단점

- 소스코드 관련해서 폰트가 너무 큰것 같다. 코드 자체가 약간 넓게 펼쳐져 보이는 느낌이다

- 표현상 실제 표기로 사용해도 될것 같은데 한글로 표기해서 좀 당황스러웠다. 대표적인것. "불리언"

처음 나오는 부분들은 거의 모든 언어에서 나오는 기본들이 나와서 초보자가 아닌 사람들에게는 약간 지루할수도 있겠지만 그부분 넘어가면 바로 재미있게 적용해볼수 있는 코드들이 많이 나오기때문에 기초를 익히고 기술을 읽히기에 적당한 책인것 같다.