TechNote.kr

Javascript 에는 3가지 변수 선언 방식이 있다. 재선언, 재할당 가능 여부에 따라 구별되어 사용된다. 재선언 재할당 var O O let X O const X X Javascript Code 를 실행하는 방법 참조 링크 : [Javascript] 코드 동작 확인 방법 (technote.kr) var 재선언과 재할당이 가능하다. [Code #1] var a = 1; a = 2; var a = 3; console.log(a); PS D:\workspace\node_test> node main.js 3 let 재할당은 가능하지만 재선언은 불가능하다. [Code #1] let a = 1; a = 2; console.log(a); PS D:\workspace\node_test> node main.js 2..

Javascript 는 혼자서 동작하는 script 언어라기 보다 html, css 와 같이 동작하기에 자체적인 코드 확인이 쉽지 않아 방법을 확인해 보았다. JSFiddle Node.js (with VS Code) JSFiddle JSFiddle - Code Playground Javascript 뿐만 아니라 HTML, CSS 까지 모두 테스트할 수 있다. Javascript 만으로도 코드를 작성한 후 Run 을 누르면 오른쪽 하단에 Console 창을 통해 코드 동작을 확인할 수 있다. Node.js Node.js 설치 : [Node.js] 설치 및 버전 확인 (technote.kr) 가장 많이 쓰이는 Editor 인 VS Code 기준으로 코드 동작 확인은 다음과 같이 한다. 1) 실행 후 File..

Node.js 다운로드 설치 파일 다운로드 링크 : https://nodejs.org/ 특별하게 최신 버전을 다운로드 해야 하는 상황이 아니라면 안정적인 LTS 를 선택하여 다운로드 한다. Node.js 설치 LTS 버전을 받아 설치를 하다보면 아래와 같이 Tools for Native Modules 를 선택하라는 항목이 나온다. 해당 부분은 나중에 npm을 통해 modules를 설치할 때 일부 module 에서 C/C++ compile 이 필요할 경우가 있는데 이를 위해 관련 tool 을 설치하겠느냐는 항목이다. 당장을 필요가 없으니 기본 값이 uncheck 로 넘겨도 무방해 보인다. Node version 확인 아래와 같이 terminal 에서 node -v 를 실행하면 설치된 node 의 versi..

Prettier - Code formatter - Visual Studio Marketplace python 코드를 작성하다보면 Shift + Alt + F 를 눌러 코드를 정렬해가며 코드를 작성한다. Prettier 가 해당 정렬을 도와주는 extension 이다. Prettier 의 설정 1) Extension Tab 에서 Prettier - Code Formatter 를 설치한다. 2) Ctrl + , 혹은 File > Preferences > Settings 를 선택해 설정에 진입한다. 설정 중 formatter 를 입력해 Editor: Default Formatter 를 찾아 Prettier - Code formatter를 선택한다. 다른 항목은 별다르게 수정할 필요가 없었지만 한라인 문자열 수..

styleguide | Style guides for Google-originated open-source projects 여러 명이 협업을 하다보면 가독성을 높히기 위해 같은 Coding Style 을 가지고 코드를 만들게 된다. python 관련하여 Google 에서 사용하는 Python Coding Style Guide 가 있어 VSCODE 와 연동해 보았다. Lint 설정 이후 아래 pylintrc 파일을 다운로드 받아 사용하는 workspace 바로 아래에 넣는다. https://google.github.io/styleguide/pylintrc 위 pylintrc 에 따라 pylintrc 에 따라 경고가 정상적으로 나오는 것을 확인하였고, 코드를 수정하였다. Apply pylint accordi..

Window UI 에서 오른쪽 위 X 버튼을 누르면 창이 사라지고 tray 의 Show 메뉴를 누르면 다시 나타나는 기능을 구현하고자 한다. 이를 위해 링크(API | pywebview (flowrl.com))를 검토해 보니 closing event를 처리하는 on_closing 내에서 False 를 return 하면 close 처리를 하지 않는다는 것을 확인했다. 이에 아래와 같이 on_closing 구문내에 hide 기능을 넣고 False를 return 하면 될 것으로 생각하고 구현하였지만, 해당 구문을 타게 되면 CPU 를 100%를 먹으면서 프로그램이 "응답 없음"이 되버리면서 죽어 버렸다. def webview_subprocess(conn_parent, conn_child): ... window..

pystray 로 Windows tray 를 이용하여 program을 제어할 수 있다. (pytray 아니고 pystray) pystray · PyPI [pystray 를 이용해 tray에서 Hide, Show, Quit 기능 추가] import pystray from pystray import MenuItem from pystray import Menu ... image_path = Image.open(base_path + '/res/tray_icon.png') menu = Menu(MenuItem('Hide', lambda: send_cmd_to_window(parent_pipe, 'hide')), MenuItem('Show', lambda: send_cmd_to_window(parent_pipe, ..

global을 사용하지 않고 변수를 사용할 경우 해당 변수의 scope는 함수 내로 국한된다. a = 0 def test(): # global a a = 1 test() print(a) > python .\test.py 0 반면 global을 사용할 경우 해당 변수의 scope는 전역으로 변경되어 해당 함수를 벗어나도 수정 내역이 유지된다. a = 0 def test(): global a a = 1 test() print(a) > python .\test.py 1

pywebview를 실행하면 main thread 내에서 다른 코드 수행이 불가능하다. 이에 별도의 process로 분리하여 pywebview를 수행시키면 별도의 코드를 수행할 수 있다. pywebview using subprocess · TechNoteGit/pywebview_example@540c4c9 (github.com) import webview from multiprocessing import Process, Pipe def webview_subprocess(child_pipe): window = webview.create_window('TechNote', 'https://technote.kr') webview.start(cmd_recv, [window, child_pipe], gui='cef..

pyinstaller 로 작업하다 "TypeError: an integer is required (got type bytes)" 에러가 발생하였다. 이와 같이 에러가 발생할 때는 pyinstaller의 버전을 업그레이드하면 문제가 해결된다. [pyinstaller 업데이트] PS D:\workspace\pywebview_example> pip install --upgrade pyinstaller Requirement already satisfied: pyinstaller in d:\python38\lib\site-packages (3.3.1) Collecting pyinstaller Downloading pyinstaller-4.5.1-py3-none-win_amd64.whl (1.9 MB) |█████..

git commit 시 user.email, user.name 이 설정되어 있지 않으면 에러가 발생한다. 이에 따라 git config 를 통해 설정이 필요하다. > git config --global user.email "you@example.com" > git config --global user.name "Your Name" [설정 후 파일로 저장] > git config credential.helper store [설정 후 임시로 저장, 별도 인자가 없을 경우 15분] > git config credential.helper cache > git config credential.helper 'cache --timeout=3600' [저장한 credential 삭제] > git config --uns..

1) pywebview 설치 > pip install pywebview 2) 기본 코드 작성 import webview webview.create_window('TechNote', 'https://technote.kr') webview.start() Basic webview implementation · TechNoteGit/pywebview_example@7e5b550 (github.com) 3) 실행

기본 python 환경과 별도로 사용할 수 있는 가상 환경 제공 원하는 python 버전을 설정하여 사용 해당 가상 환경만을 위한 python library 를 설치 Pipfile, Pipfile.lock (pip 설정 파일) 을 기반으로 python library 일괄 설치 pyinstaller 사용하여 변환시 꼭 필요한 library 만으로 최적화 변환 : pipenv 없이 pyinstaller로 exe 실행 환경 생성할 경우 기본 python 환경에서 수행시 설치된 python library 를 기준으로 생성하기 때문에 불필요한 library 들로 인해 변환 용량이 커짐. pipenv 를 사용하여 필요한 library 만 설치한 환경 이용시 최적화하여 변환 가능. pipenv Github : htt..

다양한 프로젝트를 동시에 진행하다 보면 작업 도중 여러 project 의 코드들을 왔다 갔다 해야 하는 경우가 있다. vs code 상에서 project 간 이동을 편리하게 해주는 "Project Manager" extention이 있어 이를 사용하면 손쉽게 프로젝트간 이동을 할 수 있다. PC 내에 임의의 폴더를 수동으로 등록하여 project 로 인식하게 할 수도 있고, git, mercurial, svn 등으로 sync 한 project 들을 자동으로 인식하게 할 수도 있다. Save any folder or workspace as a Project Auto-detect Git, Mercurial or SVN repositiories Extension tab 에서 "Project Manager"를 ..

윈도우 11이 발표됨에 따라 윈도우 11 사용이 가능한지 확인하는 다양한 방법이 소개되고 있다. 먼저 지원하는 사양은 다음과 같다. 사양만 보고서 현재 PC 가 지원 가능한지 파악하는 것은 쉽지 않기에 다음과 같은 프로그램을 이용하여 확인할 수도 있다. 1) Microsoft 에서 제공하는 PC 상태 검사 프로그램 Microsoft 에서 공식적으로 제공하는 프로그램이지만 사양을 충족시키지 못하는 부분에 대해 제대로 알려주지 않는다. 2) Github opensource 로 공개된 프로그램 Microsoft 에서 공식적으로 제공하는 PC 상태 검사보다 더 상세히 각 사양에 대해 지원 여부를 표시해 준다. 하지만 공식 프로그램이 아니어서 그런지 프로그램 다운로드/실행시 정말 수행할 것인지 보안 경고 알림 및..

Dockerfile 내에서 apt 를 사용하면 "WARNING: apt does not have a stable CLI interface. Use with caution in scripts." 문구가 출력된다. apt 명령어의 경우 사용자와의 interaction 에 중점을 둔 CLI 이기에 script 내에서 사용하기에 부적절하다는 에러로 apt-get 등의 명령어로 대체하여 사용하면 된다. apt 명령어별 대체 CLI는 apt의 manpage 에서 확인 가능하다. update (apt-get(8)) upgrade (apt-get(8)) full-upgrade (apt-get(8)) install, reinstall, remove, purge (apt-get(8)) autoremove (apt-get(..

docker image 명령어 목록 technote@TechNote:~$ docker image --help Usage: docker image COMMAND Manage images Commands: build Build an image from a Dockerfile history Show the history of an image import Import the contents from a tarball to create a filesystem image inspect Display detailed information on one or more images load Load an image from a tar archive or STDIN ls List images prune Remove unus..

Docker Image 삭제시 에러가 발생하는 경우가 있다. technote@TechNote:~/docker$ docker image ls REPOSITORY TAG IMAGE ID CREATED SIZE my-test-build latest 22b5185b193b 2 minutes ago 885MB python 3 2a93c239d591 6 days ago 885MB hello-world latest bf756fb1ae65 13 months ago 13.3kB technote@TechNote:~/docker$ docker rmi bf756fb1ae65 Error response from daemon: conflict: unable to delete bf756fb1ae65 (must be forced) ..

docker image 를 다운로드 받으려고 했을 때 아래와 같이 권한 에러가 발생하는 경우가 있다. 해당 문제는 사용자가 /var/run/docker.sock 을 접근하려고 하였지만 권한이 없어 발생하는 문제로 사용자가 root:docker 권한을 가지고 있어야 한다. technote@TechNote:~$ ls -al /var/run/docker.sock srw-rw---- 1 root docker 0 2월 15 15:16 /var/run/docker.sock root 권한을 가지고 실행하는 것은 권장되지 않으므로, 사용자를 docker group에 포함시켜주면 된다. ($USER 환경 변수는 현재 로그인한 사용자 아이디를 나타내므로 그대로 입력하면 된다.) technote@TechNote:~$ sud..

기본 테마는 하얀 바탕에 검은 글씨를 기본으로 하고 있다. 하지만 개인적인 차이로 인해 다크 테마가 눈에 편안하여 Notepad++에 다크 테마를 적용해보려고 한다. (Notepad++ 은 기본 테마 외에 별도의 테마 적용이 가능하다.) 1) 기본 설정은 아래와 같이 하얀 바탕을 기본으로 하고 있다. 2) Notepad++을 설치하면 기본 테마 외에 다른 테마는 포함되어 있지 않다. 이에 따라 적용하고자 하는 테마를 다운로드 받아 설치해야 한다. Notepad++ Dark Theme 다운로드 : Dark theme for Notepad++ and 160+ apps — Dracula (draculatheme.com) 해당 웹사이트 접속하여 Install manually > Download using Dra..

Docker 를 Ubuntu 에 설치하는 방법은 3가지가 있다. docker repository를 통해 설치하는 방법 수동으로 deb 파일을 다운로드하여 설치하는 방법 별도의 설치 스크립트를 이용하는 방법 여기서는 첫번째인 docker repository를 설정하고 이를 통해 apt로 설치하는 방법을 알아보자. 1) 기존 docker 관련 package들을 삭제 $ sudo apt-get remove docker docker-engine docker.io containerd runc Ubuntu 20.04 를 바로 설치한 직후에는 docker 관련 package 들이 설치되어 있지 않지만, 이전에 docker를 사용한 이력이 있을 경우 삭제해 준다. 2) Docker Repository 를 등록하기 위한..

독립적으로 동작하는 다수의 작은 서비스들이 상호 협업하는 구조의 아키텍처 기존 모놀리식 (Monolithic) 아키텍처와 같이 하나의 서비스로 되어 있는 구조에서 기능을 수정하거나 추가할 경우 해당 코드들이 기존의 코드들에 영향을 미칠 수 있고, 이는 점점 더 시스템의 유지 보수를 어렵게 한다. 반면, 마이크로 서비스 (Microservice) 아키텍처는 내부적으로 다수의 작은 서비스들을 가지고 있고, 각 서비스들은 상호협업 한다. 각 서비스들은 독립적이고, 자율성을 가지기 때문에 기능이 수정되거나 추가되더라도 기존 다른 서비스에 미치는 영향은 제한적이다. (각 서비스들은 네트워크 호출을 통해 통신하기 때문에 서로 다른 기술 기반으로 구현 가능하다는 특징도 있음) 마이크로 서비스 아키텍처는... 분산 시..

Use Case Model 시스템의 Functional Requirements를 표현한 모형 Actor와 Use Case(UC), 그리고 이들간의 관계(Association)를 Diagram으로 표현 (Use Case Diagram) Actor 시스템과 Interaction하는 모든 요소 개발 범위 외부에 존재 Use Case 시스템이 제공하는 기능을 의미 사용자 관점에서 개별적인 기능 단위 표현 필요 Association Actor와 Use Case 간의 관계 및 방향 Use Case 간에는 association을 쓰면 안되고, , 만 허용 임의의 UC내에 특정 UC가 있을 경우 로 표현 (공통의 부분을 떼어 내어 중복 방지를 위한 모듈화를 위함) 특정 조건에 발생하는 추가 UC의 경우 로 표현 (가변..

유지가능(Maintainable)하고 확장가능(Extensible)한 시스템을 위한 객체 지향 디자인을 위한 5가지 기본 원칙 SRP: Single Responsibility Principle OCP: Open-Closed Principle LSP: Liskov Substitution Principle ISP: Interface Segregation Principle DIP: Dependency Inversion Principle SRP: Single Responsibility Principle 하나의 모듈은 변경을 위한 하나의 이유만 있어야 한다. 모듈을 변경해야 할 이유가 두개 이상이라면 해당 모듈은 두개 이상의 책임을 가지고 있다는 의미로 SRP를 지키지 못한 것이다. OCP: Open-Closed..

어떤 자극(Stimulus)에 대해 시스템이 어떤 측정(Measure)하에 응답(Response)해야 하는지에 대한 Description ex> The game shall change view modes(response) in 사용자의 요청, 이벤트, interrupt, 에러 등. Artifact Stimulus가 전달되는 대상으로 System 전체이거나 일부분 Environment S..

Architectural Drivers (AD) SW architecture를 Design하기 위해 Architect가 파악해야 할 Key Requirements. 시스템의 Fundamental에 영향을 미침 시스템을 위한 모든 요구 사항을 의미하지는 않음 (AD는 전체 Requirement의 subset) Architectural Driver는 architectural decision에 영향을 미치기 때문에 조기 파악이 중요 Architectural Driver의 종류 Functional requirements => Use Case Model과 Use Case Specification (Scenarios)를 통해 파악 Non Functional requirements Quality attributes ..

인스턴스가 하나 뿐인 객체를 만들 수 있게 해주는 패턴 특정 클래스에 대해 객체 인스턴스를 하나만 만들 수 있다. 사용 용도> 자원 관리 Pool, 특정 하드웨어를 Control하는 디바이스 드라이버 등 비슷한 역할을 하는 전역 변수와의 비교> 전역 변수는 애플리케이션 시작될 때 생성 불필요하게 자원을 잡아먹는 경우 발생 Singleton은 필요할 때 객체 생성 [Singleton 기본 구조] public class Singleton { private static Singleton uniqueInstance; private Singleton() {} public static Singleton getInstance() { if(uniqueInstance == null) uniqueInstance = new..

[Github 에 반영하기 (git commit/push)] 에서 보았듯이 write 권한이 없는 repository 에는 직접 반영을 할 수 없다. 이에 write 권한을 가지고 있는 계정의 review를 받고 해당 계정을 통해 반영이 이루어 져야 한다. 이러한 과정을 Pull Requests 라고 하며 github 의 tab 들 중 하나에서 확인할 수 있다. Pull Request 를 위한 전반적인 Flow 에 대한 이해 Pull Request 를 올리는 실제 사례 다수 개의 Pull Request 를 올리는 방법에 대한 이해 Pull Request 를 위한 전반적인 Flow 에 대한 이해 Pull Request 는 fork 된 repository 를 통해 이루어지게 되고, 이를 위한 reposito..

git clone 하여 local PC 에 코드를 sync 한 이후 코드를 주성하여 다시 github repository 에 반영해야 하는 경우가 있다. [Github 와 연동하기 : https://technote.kr/352] 코드 반영은 Flow는 다음과 같다. 1) 코드 수정 2) [Ctrl + Shit + `] 을 눌러서 teminal 을 실행시킨 후 수정 코드 실행해서 에러 유무 확인 3) 문제가 없을 경우 왼쪽 세번째 아이콘 선택 4) 자동으로 수정된 파일들이 탐지되고, 상단에 수정 내용 작성한 후 "V" 아이콘 선택하여 commit 생성 (git commit) 5) 하단에 push 가능한 commit 의 수가 나오고 해당 버튼 누르면 github repository 로 push 진행 (git..

vscode 를 기반으로 github project 를 작업할 때 가장 먼저 진행되어야 할 것은 github repository를 local PC로 git clone 하는 것이다. cmd 로 진행시에는 아래와 같이 진행하면 되지만 vscode 와 연동시에는 vscode의 UI 를 통해 진행해야 자동으로 vscode의 workspace까지 생성된다. D:\Github>git clone https://github.com/technotekr/Sample.git Cloning into 'Sample'... remote: Enumerating objects: 4, done. remote: Counting objects: 100% (4/4), done. remote: Compressing objects: 100% ..