반응형

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

 

728x90
반응형
반응형

개요

  • 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/

728x90
반응형
반응형

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

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)

728x90
반응형
반응형

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

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

 

 

728x90
반응형
반응형

소프트웨어 아키텍처 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
        • 이벤트나 커맨드 메세지를 이벤트 형태로 비동기 발행 해서 게시하면 구독하는 다른 서비스들이 이벤트를 받아 적절히 응답하는 페턴
        • 장점
          • 서비스가 디커플링 된다.
          • 데이터를 적시에 동기화 할수 있다.
          • 응답이 빠르다
        • 단점
          • 복잡한 에러처리
728x90
반응형
반응형

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
728x90
반응형
반응형

Ubuntu 에서 파이썬 설치 위치 확인

DESKTOP-MBRI3VL:~$ python --version
Python 2.7.17
DESKTOP-MBRI3VL:~$ python3 --version
Python 3.6.9

파이썬을 설치하다 보면 2.X 도 있고 3.X 도 있다. 위와 같이 각각의 버전을 확인해보면 설치된 버전을 확인할 수 있다. Ubuntu를 설치하면 기본적으로 2.7을 path 로 설정한다.

아래와 같이 명령어를 실행 하면 설치된 파이썬 목록들이 나완다. (정말 이것 저것 많다.)

DESKTOP-MBRI3VL:~$ ls /usr/bin | grep python

python-config
python2
python2-config
python2.7
python2.7-config
python3
python3-config
python3-jsondiff
python3-jsonpatch
python3-jsonpointer
python3-jsonschema
python3.6
python3.6-config
python3.6m
python3.6m-config
python3.7
python3.7m
python3m
python3m-config
x86_64-linux-gnu-python-config
x86_64-linux-gnu-python2.7-config
x86_64-linux-gnu-python3-config
x86_64-linux-gnu-python3.6-config
x86_64-linux-gnu-python3.6m-config

그래서 update-alternatives를 사용해서 파이썬에 대한 버전을 변경해보려고 한다. update-alternatives는 심볼릭 링크를 관리해 주는 리눅스 프로그램이다.

DESKTOP-MBRI3VL:~$ ls -al  /usr/bin | grep python
lrwxrwxrwx  1 root   root           26 Mar 27  2018 dh_pypy -> ../share/dh-python/dh_pypy
-rwxr-xr-x  1 root   root         1056 Apr 16  2018 dh_python2
lrwxrwxrwx  1 root   root           29 Mar 27  2018 dh_python3 -> ../share/dh-python/dh_python3
lrwxrwxrwx  1 root   root           23 Jul  2 00:56 pdb2.7 -> ../lib/python2.7/pdb.py
lrwxrwxrwx  1 root   root           23 Jun 29 20:45 pdb3.6 -> ../lib/python3.6/pdb.py
lrwxrwxrwx  1 root   root           23 Dec 10  2021 pdb3.7 -> ../lib/python3.7/pdb.py
lrwxrwxrwx  1 root   root           31 Oct 25  2018 py3versions -> ../share/python3/py3versions.py
lrwxrwxrwx  1 root   root           26 Mar 27  2018 pybuild -> ../share/dh-python/pybuild
lrwxrwxrwx  1 root   root            9 Apr 16  2018 python -> python2.7
lrwxrwxrwx  1 root   root           16 Apr 16  2018 python-config -> python2.7-config
lrwxrwxrwx  1 root   root            9 Apr 16  2018 python2 -> python2.7
lrwxrwxrwx  1 root   root           16 Apr 16  2018 python2-config -> python2.7-config
-rwxr-xr-x  1 root   root      3624880 Jul  2 00:56 python2.7
lrwxrwxrwx  1 root   root           33 Jul  2 00:56 python2.7-config -> x86_64-linux-gnu-python2.7-config
lrwxrwxrwx  1 root   root            9 Oct 25  2018 python3 -> python3.6

위에서 보면 python의 심볼릭 링크는 python2.7 로 되어있고 python3 에 대한 링크는 python3.6 으로 되어있다. 이것을 변경하려고 한다.

DESKTOP-MBRI3VL:~$ sudo update-alternatives --config python
update-alternatives: error: no alternatives for python
DESKTOP-MBRI3VL:~$ sudo update-alternatives --install /usr/bin/python python /usr/bin/python2.7 1
update-alternatives: using /usr/bin/python2.7 to provide /usr/bin/python (python) in auto mode
DESKTOP-MBRI3VL:~$ sudo update-alternatives --install /usr/bin/python python /usr/bin/python3.6 2
update-alternatives: using /usr/bin/python3.6 to provide /usr/bin/python (python) in auto mode
DESKTOP-MBRI3VL:~$ sudo update-alternatives --install /usr/bin/python python /usr/bin/python3.7 3
update-alternatives: using /usr/bin/python3.7 to provide /usr/bin/python (python) in auto mode

1번 라인 : python 버전을 변경하는 명령어 인데 현재는 등록되어 있는게 없기 때문에 에러가 난다.

3번 라인 : python 명령어를 2.7로 연결하고 1번으로 할당했다.

5번 라인 : python 명령어를 3.6로 연결하고 2번으로 할당했다.

7번 라인 : python 명령어를 3.7로 연결하고 3번으로 할당했다. (2.7, 3.6, 3.7 이 설치되어있었다.)

DESKTOP-MBRI3VL:~$ update-alternatives --config python
There are 3 choices for the alternative python (providing /usr/bin/python).

  Selection    Path                Priority   Status
------------------------------------------------------------
* 0            /usr/bin/python3.7   3         auto mode
  1            /usr/bin/python2.7   1         manual mode
  2            /usr/bin/python3.6   2         manual mode
  3            /usr/bin/python3.7   3         manual mode

Press <enter> to keep the current choice[*], or type selection number: 3

다 등록을 하고 1번 라인에 썼던 명령어를 다시 실행하면 위와 같이 나와서 사용할 버전을 선택할 수 있다.

DESKTOP-MBRI3VL:~$ python --version
Python 3.7.5

버전을 확인해 보면 위와 같이 나온다.

728x90
반응형

'Development > Python' 카테고리의 다른 글

Python 가상환경  (0) 2022.10.27
파이썬 입력값 받기  (0) 2021.08.25
파이썬 배열 초기화  (0) 2021.08.25
Python 으로 파일 내용 변경 하기  (0) 2020.10.20
python django 프로젝트 시작하기  (0) 2020.10.05
반응형
PS C:\Users> wsl -l -v
  NAME                   STATE           VERSION
* docker-desktop-data    Stopped         2
  docker-desktop         Stopped         2
  Ubuntu-18.04           Running         2

위와 같이 배포버전이 여러개 일 경우 default 로 설정되는 배포버전으로 변경하기 위해서는 다음과 같이 설정하면 된다.

 C:\Users> wsl --setdefault Ubuntu-18.04

그럼 다음과 같이 변경이 된다.

 C:\Users> wsl -l -v
  NAME                   STATE           VERSION
* Ubuntu-18.04           Running         2
  docker-desktop         Stopped         2
  docker-desktop-data    Stopped         2

이것을 찾아봤던 이유는 VS Code 에서 remote로 WSL 로 접속하려고 하니 계속해서 docker-desktop-data 로 연결을 시도하면서 실패를 했다. 연결하려는 타겟이 ubuntu 가 되어야 할것 같은데 docker-desktop-data 로 계속 시도를 했다. 그래서 위와같이 디폴트 배포버전을 변경하니 정상적으로 연결됐다.

 

728x90
반응형
반응형

React 에서 Key 가 필요한 이유

  • Map 사용시 고유한 Key 가 필요하다.
  • React 는 상태를 메모리에 저장하고 있다가 변경된 부분만 렌더링 한다.
  • Key 값이 없으면 모든 데이터를 비교해야 하지만 Key 가 있으면 Key만 비교하면 된다.
  • <ul>
      {props.users.map((user) => (
        <li key={user.id}>
          {user.username} ({user.age} years old)
        </li>
      ))}
    </ul>

Map 에서 index 를 Key로 하면 안되는 이유

  • 0번의 index 가 삭제되면 React 가 변경을 감지하여 리렌더링 되고 0번 부터 다시 매핑한다.
  • 1번 인덱스가 0번으로 매핑이 된다.
  • 결론적으로 인덱스가 추가되거나 삭제되면 값이 바뀌기 때문에 index 를 key 로 사용하는것은 안좋다.
728x90
반응형

+ Recent posts