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"
}, "두번째")));

개요

• node.js 문법을 써야 한다.
• entry 에 있는 명령어를 읽어서 변환과정을 거쳐서 output 으로 전달함.
• entry -> module -> plugin -> output 으로 전달됨

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  devServer: {
    compress: true,
    port: 9999,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "2.3 setup webpack & babel",
      template: "index.html"
    }),
  ],
};

• loader
  • 특정 모듈을 변환하는대 사용한다.
  • .js 파일을 babel-loader 를 사용해서 변환해라. /node_modules/ 폴더는 제외하고!!
• plugin
  • 플러그인을 사용하면 번들을 최적화 하거나 애셋을 관리하고 환경변수등을 주입하는게 가능하다.
  • require 를 통해서 플러그인을 요청한다.
  • 다른 목적을 위해 플러그인을 여러번 사용할수 있기 때문에 new 를 사용해서 인스턴스를 만들어야 한다.

참고

https://webpack.kr/concepts/

구글이 제공하는 다양한 기능들을 사용해 왔지만 공부를 해봐야겠다는 생각을 했던적은 없었던것 같다. 파워포인트나 엑셀과 비슷한 기능을 이용해서 문서작성만 간단히 하고 그 이상을 활용해본적은 없었다. 그래서 이책에서 보여주는 다양한 스크립트를 활용해서 기능을 사용할수 있다는 것을 처음 알게 되었다.

우선 이 책은 600 페이지가 넘는다. 총 23개의 챕터로 이루어져 있는데 목차를 살펴보면 스크립트 관련 내용이 많다. 자바 스크립트와 비슷한 형태이지만 분명 차이점이 있는 언어이다. 그렇기 때문에 프로그래밍을 하거나 자바스크립트를 할줄 아는 분들은 쉽게 이해를 할수 있을 것이다. 그리고 모르는 분들도 책 내용에 처음부터 끝까지 언어에 대한 설명과 예제를 보여주고 있으니 부담 갖을 필요는 없다.

이런 사전 지식들이 바탕이 되어서 다음 챕터들에서 나오는 지메일이나 스프레드시트, 드라이브등 구글의 서비스들을 스크립트를 통해서 조작이 가능해진다. 

책을 읽으면서 느꼈던 점은 스크립트를 통해서 어떻게 조작하느냐도 중요하지만 이런 것들을 어떻게, 또는 어떤 부분을 자동화해서 편하게 사용할수 있을지를 더 고민해 봐야겠다는 생각을 했다. 

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

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

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(){
    
}

오랜만에 다시 읽게 되는 알고리즘 책이다. 이 책에 나오는 주요 알고리즘에 대한 내용은 다음과 같다. 

문제해결, 알고리즘 분석
해싱, 힙, 정렬, 이진트리, 그래프

우리가 알고리즘 공부를 할때 기본적으로 배워야 하는 알고리즘 들이다. 약간 전공서적 같은 느낌이 들긴 하지만 그것보다는 내용이 좀더 친절하게 나와 있다.

히자만 읽다보면 어려운 내용들이 많이 섞여 있다. 기초에 관련된 책이긴 하지만 난이도는 있는 책이다. 그리고 주요 코드들은 파이썬으로 되어있는데 파이썬을 모른다고 하더라도 크게 문제가 될것 같지는 않다. 코드 부분에 대한 설명은 거의 라인 단위로 설명을 해주고 있기 때문에 어떤 언어든 프로그래밍을 해본 사람이면 이해할수 있을 것이다. 

복습 차원에서 각 장 마지막에 있는 연습문제들은 한번씩 스스로 풀어보면 도움이 많이 될것이다. 어찌됐건 알고리즘 관련된 내용들은 이해도 이해 이이지만 한번씩 스스로 풀어보는게 중요하기 때문이다. 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

소프트웨어 아키텍처 Hard Parts 의 내용을 정리한 내용입니다.

• BASE 분산 트랜잭션 특유의 속성
  • BA (Basic availavility)
    • 분산 트랜잭션의 모든 서비스 또는 시스템이 분산 트랜잭션에 참여할 수 있으리라고 기대하는것.
  • S (Soft state)
    • 분산 트랜잭션이 진행중이고 원자적 비지니스 요청이 미 완료된 상태.
    • 고객 프로필 정보에서 Profile 테이블에는 데이터카 커밋 됐지만 다른 연관 테이블에는 커밋되지 않은 상태.
  • E (Eventual Consistency)
    • 충분한 시간이 지나면 언젠가는 결국 분산 트랜잭션이 완료되고 모든 데이터가 서로 동기화 된다는 의미.
    • 백그라운드 동기화 패턴 (Background synchronization pattern) - 326p
      • 별도의 외부 서비스나 데이터 소스를 주기적으로 체크해서 데이터 소스를 서로 동기화 한다.
      • 장점
        • 서비스가 디커플링 된다.
        • 응답성이 좋다.
      • 단점
        • 데이터 소스가 결합돤다.
        • 구현부가 복잡해진다.
        • 경계 콘텍스트가 무너진다.
        • 비지니스 로직이 중복될 수 있다.
        • 최종 일관성을 맞추려면 시간이 걸린다.
    • 오케스트레이티드 요청 기반 패턴 (Orchestrated request-based pattern) - 329p
      • 오케스트레이터가 전체 분산 트랜잭션을 관리한다.
      • 장점
        • 서비스가 디커플링 된다.
        • 데이터를 적시에 동기화 할수 있다.
        • 원자적 비지니스 요청이 가능하다.
      • 단점
        • 응답이 느리다.
        • 에러처리가 복잡하다
        • 보상 트랜잭션이 필요하다.
    • 이벤트 기반 패턴 (Event-based pattern) 333p
      • 이벤트나 커맨드 메세지를 이벤트 형태로 비동기 발행 해서 게시하면 구독하는 다른 서비스들이 이벤트를 받아 적절히 응답하는 페턴
      • 장점
        • 서비스가 디커플링 된다.
        • 데이터를 적시에 동기화 할수 있다.
        • 응답이 빠르다
      • 단점
        • 복잡한 에러처리

아키텍처 관련 책들을 요즘 많이 읽어보고 있다. 책을 읽는다고 완벽하게 습될수 있는 범위는 아니지만 여러번 읽으면 좋아지겠지라는 생각으로 읽고 있다. 

이 책은 아래와 같이 등장인물이 나온다. 그리고 그들의 시스템을 변경시켜가는 과정을 아키텍처 이론과정과 함께 설명을 하고 있다. 아마도 우리가 관리 또는 개발하는 시스템을 변경하려 할때 이 등장인물들이 겪는 경험을 하게 되지 않을까 생각이 든다. 

등장인물들의 대화를 통해서 요구사항과 현재 시스템의 상황들을 파악할 수 있다. 아마도 이부분이 다른 책들과 큰 차이점인것 같다. 딱딱한 이론만 있는것보다는 시나리오가 있는 이야기가 있다보니 이해를 잘 할수 있다. 각 챕터마다 처음 시작과 끝에 위와 같은 대화들을 주고 받는 내용들이 나온다. 이 이야기 속에서 나오는 내용들만 이해를 한다면 각 챕터를 잘 공부를 했다고 생각해도 될것 같다. 

그리고 어떤 책이든 글과 그림이 적절히 섞여 있어야 이해하기가 쉽다. 특이 아키텍처 책들에서는 내용이 어렵다 보니 그림이나 도표를 활용한 설명들이 독자들에게는 중요한 참고 자료들이다. 

내용을 이해하면서 읽어야 했기 때문에 전체를 다 읽은 상황은 아니다. 하지만 그만큼 시간을 투자해서 꼼꼼히 읽어야 하는 내용이기 때문에 급하게 읽을 필요는 없다고 생각된다. 아키텍트를 공부하는 분들은 한번쯤 읽어보면 실력향상에 도움이 될 책이다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

Python Virtualenv

• 프로젝트별 종속성 문제를 해결하기 위해서 가상환경을 제공한다.

• 동시에 여러개의 프로젝트 진행시 각각의 파이썬 버전이 다를경우 사용한다.

• virtualenv 환경 구성

  pip install virtualenv
  
  D:\STUDY\study_python>virtualenv py3.8-env
  created virtual environment CPython3.8.5.final.0-64 in 6461ms
    creator CPython3Windows(dest=D:\STUDY\study_python\py3.8-env, clear=False, global=False)
    seeder FromAppData(download=False, pip=bundle, setuptools=bundle, wheel=bundle, via=copy, app_data_dir=C:\Users\SDS\AppData\Local\pypa\virtualenv)        \Local\pypa\virtualenv)
      added seed packages: pip==22.2.2, setuptools==49.6.0, wheel==0.37.1
    activators BashActivator,BatchActivator,FishActivator,PowerShellActivator,PythonActivator,XonshActivator

  • 1라인 : virtualenv 를 pip 를 이용해서 설치한다.

  • 3라인 : 가상환경을 생성한다.

  • 가상환경을 실행하기 위해서는 activate 명령어를 실행하면 된다. (window 의 경우 Script 폴더에 있고 리눅스인경우 bin 폴더 안에 생긴다.)

    (py3.8-env) D:\STUDY\study_python\py3.8-env\Scripts>

    가상환경을 실행하면 위와 같이 환경 이름이 앞에 붙는다.

  • 가상환경을 종료하기 위해서는 deactivate 명령어를 실행한다.

• virtual 환경에 구성된 패키지 export

  pip freeze > req.txt
  
  req.txt
  certifi==2022.9.24
  charset-normalizer==2.1.1
  idna==3.4
  requests==2.28.1
  urllib3==1.26.12

• req.txt 를 인스톨 하려면 다음과 같이 하면 된다.

  pip install -r req.txt