ANGUK PARTNERS

pandas dataframe to and from python dictionay

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

dic_data=[{'a': 0, 'b': 'k', 'c': True},
        {'a': 3, 'b': 'a', 'c': False},
        {'a': 2, 'b': 'gd', 'c': True},
        {'a': 8, 'b': 'sa', 'c': True},
        {'a': 8, 'b': 'an', 'c': False}]

df_data = pandas.DataFrame.from_records(dic_data)

print(df_data.head())

#    a   b      c
# 0  0   k   True
# 1  3   a  False
# 2  2  gd   True
# 3  8  sa   True
# 4  8  an  False

print(df_data.to_dict('list'))

# {
# 'a': [0, 3, 2, 8, 8], 
# 'b': ['k', 'a', 'gd', 'sa', 'an'], 
# 'c': [True, False, True, True, False]
# }

dic_data_ = df_data.to_dict('list')

print(pandas.DataFrame(dic_data_))

#    a   b      c
# 0  0   k   True
# 1  3   a  False
# 2  2  gd   True
# 3  8  sa   True
# 4  8  an  False

print(df_data.to_dict('records'))

# dic_data=[{'a': 0, 'b': 'k', 'c': True},
#         {'a': 3, 'b': 'a', 'c': False},
#         {'a': 2, 'b': 'gd', 'c': True},
#         {'a': 8, 'b': 'sa', 'c': True},
#         {'a': 8, 'b': 'an', 'c': False}]

pandas : groupby == d3 js : nest == elasticsearch : collapse

javascript code for converting json to array

1. Object.entries(json)
2. Object.keys(json)
3. Object.values(json)

• Object.entries(json).slice(0, 9) // like python slicing

javascript code for handling array

1. array.forEach((i)=>{return null;})
2. array.map((i)=>{return null;})
3. array.filter((i)=>{return null;})

• json = Object.fromEntries(array)

pytorch cuda Out Of Memeory(OOM) solutions

1. before every training epoch starting:

   1	torch.cuda.empty_cache()

2. before every testing/validating epoch starting:

   1	with torch.no_grad():

3. Be sure that only after fetching batch from data loader, it should be input into cuda device

4. for cpu memory, use del variables

5. be sure about avoiding train history and test history accumulating and calculating torch in cuda

svg path d attr grammar

• move to:
  • M/m
• close at:
  • Z/z
• line:
  • L/l
  • H/h
  • V/v
• Bezier:
  • C/c
  • S/s
  • Q/q
  • T/t
• Elliptical:
  • A/a
• Math.PI

dev laptop setting

formatting and installing windows 10/11

install chrome

install vscode and set a workplace

install anaconda and conda init

install git and git init/git clone ...

admin mode: pip install --upgrade pip

pip install konlpy after installing java sdk, setting JAVA_HOME / PATH to %JAVA_HOME%/bin and downloading and installing JPype 1

download elasticsearch, unzip it under root folder and change config yaml file to security false

nori install

1

$bin/elasticsearch-plugin install analysis-nori

copy df corpus fullest and df summary fullest into saved folder

install node, vue and quasar

basic

*tqdm.tqdm wrapping iterator in for sentence

*enumerate wrapping tqdm.tqdm

pandas code using apply

*tqdm.tqdm.pandas()

*using progress_apply instead of apply

pbar in case of complex description, postfix, and update step

*with tqdm(total = :int) as pbar: wrapping for sentence

*pbar.update(:int)

*pbar.set_description_str(f"{")

*pbar.set_postfix_str(f"{}")

*pbar.write(f"{}")

vue 3 그리고 composition api

주요 특징

• composition api

• multiple root element

• suspense

• typescript support

• multiple v-model

@ 그리고 :

• @은 tag 안에서 v-on:의 alias이고 script 안에서 'scr/'의 alias

• :은 v-bind:의 alias

display 속성

inline-block

• element들의 배치에 관한 속성 중 하나

• inline에서 불가능하던 width, height, margin, padding 지정이 block 속성의 경우처럼 가능한 inline임

• 즉, 속성의 상하 간격 지정이 가능해 짐

flex

display: flex; align-items: center; justify-content: space-between;

standard browser javascript event naming

• mousemove - e.offsetX

vue 3이 html과 연결되는 지점

import { createApp } from 'vue'

let data = () => { return { title : '', text : '', pages : null }}

let method = { method1 : () = > {}, method2 : () => {} }

let obj = { data, method, }

app = createApp(obj)

app.mount('#app')

template tag 내부의 script 영역

• tag 외부: {{ }}

• tag 내부

  • vue directive 내부: " "
  • html 속성 내부: v-bind:를 추가한 " "
    • html 속성 중 class의 경우에는 아래와 같이 사용 v-bind:class = "{ fav: true }"

Array.prototype.filter( () => { })

css tips

• border-bottom: 1px solid #ddd;
• padding-bottom: 10px;
• margin: 100px auto; //(top bottom) (left right)
• border-radius: 10px;
• import './assets/global.css' //in main.js
• 태그 선택자 / 클래스 선택자(.) / 아이디 선택자(#) / 하위 선택자( ) / 자식 선택자(>) / 인접형제 선택자(+) / 일반형제 선택자(~) / 속성 선택자([...]) / 가상클래스 선택자(:)

TEMPLATE REFS

• <input type = "text" ref = "name"> ... </ ... >
• <button @click="hC">click</button>
• ... hC(){ this.$refs.name.classList.add('active')}
• ... hc(){ this.$refs.name.focus()

teleport

• <div class = "modals" /> //in index.html
• <teleport to="modals"> //in vue components

PROPS

• 부모 컴포넌트 tag 속성값 => 자식 컴포넌트 script 변수
• <Modal header= " ... " text = " ... " :abc = "['a', 'b', 'c']" /> // in 부모 컴포넌트 tag
• props: ['header', 'text', 'abc'] // 자식 컴포넌트 Modal.vue script export 영역
• <div :class = "{ sale: text === ''}">// 자식 컴포넌트 Modal.vue tag 영역

커스텀 이벤트

• <Modal @close = " ... " /> // 부모 컴포넌트 tag 영역
• this.$emit("close") // 자식 컴포넌트 script 영역

event modifier

• click.self
• click.prevent
• click.alt

SLOT

• 슬롯은 일반적으로 opening tag와 closing tag 사이의 공간을 의미
• <Modal > ... </Modal> //부모 컴포넌트
• <slot> fallback </slot> //자식 컴포넌트
• <Modal><template v-slot = "link"> ... </template></Modal>
• <slot name = "link"> fallback </slot>

vue router

• router param
  • path: '/jobs/:id
  • $route.params.id //this 영역에 있지 않음
  • <router-link :to="{name: 'Jobs', params: { id: 3}}"
• this.$router
  • this.$router.go(-1)
  • this.$router.push({ name: 'Home' })
• etc.
  • path: '/catchAll(.*)'
  • redirect: '/...'

FETCH

mounted() { fetch('...').then(res=>res.json()).then(data=>this.jobs= data).catch(err => console.log(err.message))}

math

• linear algebra

• statistics

• calculus

algorithm

• array / linked list

• priority queue

• tree

• graph

python

• pandas / numpy / matplotlib

• flask restful api server

• elasticsearch restful api client

• multiprocessing

• regex

• selenium

pytorch

• tensor

• module

• loss function

• optimizer

node

• vue

• quasar

• d3

• draggable

1. vuetify

v-card

@click

working well

2. javascript general

Object

Object.keys(obj).forEach( each => { ... })

Object.values(obj).forEach( each => { ... })

Object.entries(obj).forEach( each => { ... })

setTimeOut

LOADING SCREEN

3. 키워드 붙여써도 konlpy.Okt로 띄어쓰는 것으로 전환처리

4. google font의 vue component 적용

5. text field css font size color 변경

6. 추천 검색어 vuetify chip group 처리

7. 스크롤바 커스터마이즈

8. 판시사항 글자크기 조정

9. scrollHandler를 통한 lazy loading for vuetify v-window 구현

10. svg 일부 요소 제거

11. v-chip 줄바꿈 구현

12. vuedraggable in Collection.vue 구현

13. ref에 의한 하위 컴포넌트 메소드 접근시 하위 컴포넌트는 v-show를 사용해야 함

14. javascript string slice 메소드는 파이썬에서 slicing 기능을 대체함

Download all the files under 'html' folder with FTP

Back up DB with WP DB Manager or something like that

Check the current WP version

Initialize the hosting server

Install WP with the same version

Upload the files

Restore DB wth WP DB Manager or something like that

노드 제거 후 새로 설치

• 제어판에서 프로그램 제거할 것

• node.org에 따라서 npm 이용 LTS 버전 설치

뷰 설치

• node_modules 폴더 삭제

• vue.org에 따라서 npm 이용 LTS 버전 설치

뷰 프로젝트 생성

• 프로젝트 폴더 생성할 폴더에서 vue create {project folder name} 실행

• 설치 시 vuex 및 vue-router를 선택하고 eslint 및 babel도 선택할 것

그 다음 관련 모듈 설치

• vue add vuetify

• npm install --save axios bootstrap bootstrap-vue p5 d3 d3-scale d3-axis

마지막으로 기존 프로젝트의 public 및 src를 덮어쓰고 아래 파일도 이동

• .gitignore
• vue.config.js
• editorconfig
• Dockerfile

IntersectionObserver Class

Making elements for data should precede fetching relevant data from api

p5

• basicMaterial / normalMaterial / ambientMaterial / specularMaterial

• pointLight / directionalLight / ambientlight

• noStroke / fill

blue material with red light gives me only black

p5.js for vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<template>
  <div id="canvas" />
</template>

<script>
import createP5 from "@/plugins/p5Landing1"; // Package from npm

export default {
  name: "Canvas",
  mounted() {
    this.$nextTick(() => {
      const w = document.querySelector("#canvas").offsetWidth;
      const h = document.querySelector("#canvas").offsetHeight;
      // console.log('w');
      // console.log(w);
      // console.log('h');
      // console.log(h);
      createP5("canvas", w, h, "white");
    });
  },
};
</script>

<style>
#canvas {
  height: 65vh;
  max-height: 500px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import P5 from "p5";

// Package from npm
function createP5(parentId, w, h, backgroundColor) {
  const sketch = (p) => {
    const p5 = p;
    let angle = 0;
    let lawboto_texture;
    let lawboto;
    // const lawboto_texture = p5.loadImage('@/assets/fox-texture.png');
    // console.log(lawboto_texture);
    // const lawboto = p5.loadModel('@/assets/low-poly-fox-by-pixelmannen.obj');

    p5.preload = () => {
      lawboto_texture = p5.loadImage("fox-texture.png");
      lawboto = p5.loadModel("low-poly-fox-by-pixelmannen.obj", true);
      console.log(lawboto);
    };

    p5.setup = () => {
      p5.createCanvas(w, h, p5.WEBGL);
    };

    p5.draw = () => {
      p5.background(backgroundColor);
      p5.ambientLight(255);
      p5.directionalLight(255, 255, 255, 0, 0, 1);
      p5.rotateX(p5.PI);
      p5.rotateY(angle * 1.3);
      // p5.rotateZ(angle * 0.7);
      // p5.translate(0, 0, 0);
      // p5.translate(p5.mouseX - w / 2, p5.mouseY - h / 2, 0);

      // p5.texture(lawboto_texture);
      // p5.normalMaterial();
      // p5.model(lawboto);
      // p5.noStroke();
      // p5.noStroke();
      // p5.fill(200, 200, 200);
      // p5.torus(70, 30);
      p5.texture(lawboto_texture);
      p5.model(lawboto);
      angle += 0.005;
      // p5.clear();
      // p5.yourFunction();
    };

    // p5.yourFunction = () => {
    //   p5.fill('#111111');
    //   p5.noStroke();
    //   p5.ellipse(p5.mouseX, p5.mouseY, 40, 40);
    // };
  };

  return new P5(sketch, parentId);
}

export default createP5;

obj file and png file should be in public folder to avoid webpack loader issue