Windows 10에서 VSCODE 개발환경의 설정

VSCODE를 이용한 파이썬 개발

image

설치

  • 우선 파이썬이 아나콘다 패키지로 설치되어 있을 것을 권장한다.
  • VSCODE를 설치해야 한다.
  • 그리고 VSCODE 파이썬 플러그인을 설치해야 한다.

가상환경과 디버깅

  • 파이썬 프로젝트의 실행환경을 위해서 다음처럼 프로젝트 폴더에서 터미널을 킨 후 가상환경을 구축할 수 있다.

    1
    python -m venv venv

  • 하지만 기본 터미널인 파워쉘에서는 여러 에러가 나기 때문에 관리자 모드로 파워쉘을 한 번 실행한 후 Set-ExecutionPolicy Unrestricted 실행시킨다. 그러면 가상환경 실행에 무리가 없다.

  • 디버깅을 할 때 .vscode 폴더에 settings.json을 만들고 아래와 같이 하면 가상환경 없이 디버깅이 된다.

    1
    2
    3
    {
        "python.terminal.activateEnvironment": false
    }

  • 디버깅을 할 때 .vscode 폴더에 settings.json을 만들고 아래와 같이 하면 가상환경으로 디버깅이 된다. “venv” 이름으로 가상환경 폴더를 만들었을 경우이다.

    1
    2
    3
    {
        "python.pythonPath": "venv\\Scripts\\python.exe"
    }

  • 다른 프로젝트 개발을 하게 될 때 ‘deactivate’를 해서 가상환경에서 빠져나온다.

  • 가상환경에 설치된 패키지들은 다음의 방법으로 기록하였다가 설치할 수 있다.

    1
    2
    3
    4
    (example) C:\\project\example>pip list
    (example) C:\\project\example>pip freeze > requirements.txt
    (example) C:\project\example>pip install -r requirements.txt
    (example) C:\project\example>pip uninstall -r requirements.txt

  • 가상환경의 관리를 GUI로 하고자 한다면 ANACONDA.NAVIGATOR 화면의 왼쪽 메뉴의 Environments 탭을 이용하는 것이 좋고 또 권장된다. 이 경우 해당 프로젝트 폴더 내에서 conda init을 한 번 실행시켜야 한다.
    image

VSCODE를 이용한 플러터 개발

image

JAVA JDK, ANDROID STUDIO와 FLUTTER SDK 설치

  • 우선 JAVA jdk가 필요하고 jre은 안 된다.

  • 그 후 JAVA_HOME 환경변수(C:\\Program Files\Java\jdk1.8.0_241) 설정과 CLASSPATH 환경변수(%JAVA_HOME%\lib) 설정이 필요하다.

  • 그 후 ANDROID STUDIO 설치가 반드시 필요하다. 설치 후 FLUTTER 패키지를 설치해야 한다.

  • 그리고 FLUTTER SDK를 설치한 후 PATH 환경변수에 ‘flutter\bin‘ 폴더가 포함되도록 해야 한다.

flutter doctor 실행과 VSCODE FLUTTER PLUGIN 설치

  • 그리고 flutter doctor를 수행하면 나오는 에러를 제거해야 하고 설명을 그대로 따르면 되는데 jdk 라이센스를 동의하는 것과 Visual Studio C++ 등을 추가로 설치해야 하는 점 등에 유의해야 한다.

  • VSCODE에서 플러터 관련 플러그인을 설치한다.

  • 여기까지 되면 시스템을 다시 시작해야 한다.

VSCODE를 이용한 HEXO 방식 GITHUB.IO 블로그 운영

image

Git, Node, Hexo 설치

  • 깃을 설치한다.

  • 우선 깃허브 가입 후 새 리포지토리를 {자신의 아이디}.github.io 이름으로 만든다.

  • 그리고 node를 설치하고 npm을 설치한 후 npm install hexo-cli -g 실행하여 hexo를 설치한다.

  • 그 다음 블로그 폴더를 생성할 곳으로 이동해서 터미널로 hexo init {블로그 폴더 이름}을 수행한다.

  • 그리고 그 블로그 폴더로 이동하여 터미널에서 다음을 입력한다.

    1
    npm install

Hexo Theme

  • 그 후 자신이 인터넷에서 다운로드 받은 theme을 theme 폴더 안에 복사한다. (NexT theme을 추천)
  • 그리고 블로그 폴더에 형성된 _config.yaml 속 theme 설정 부분을 theme 폴더 속에 복사한 theme 폴더의 폴더명으로 적어준다.

Github Flavored Markdown 예시

  • 일단 Github Flavored Markdown 글을 시도해본다.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    *기울임*<br/>
    **굵게**<br/>
    ~아래첨자~<br/>
    ~~취소선~~<br/>
    ***기울이고 굵게***

    | 제목1 | 제목2 |
    |:---:|---:|
    | 내용1 | 내용2 |
    | 내용3 | 내용4 |

    `inline code`

    기울임

    굵게

    아래첨자
    취소선

    기울이고 굵게

    제목1 제목2
    내용1 내용2
    내용3 내용4

    inline code

Github 가입과 블로그용 레포 준비

  • 깃허브에 배포하기 위해서 다음의 준비를 한다.

    • _config.yaml 수정

      1
      2
      3
      4
      deploy:
          type: git
          repo: {저장소 주소(예: https://github.com/{자신의 아이디}/{자신의 아이디}.github.io.git)}
          branch: {master 또는 main (어느 것인지는 깃허브에서 확인)}

배포

  • 배포용 프로그램 설치

    1
    npm install --save hexo-deployer-git

  • 배포

    1
    2
    3
    hexo clean
    hexo generate
    hexo deploy

  • 이상은 리포지토리에 푸시하는 깃의 작동과는 관계가 없다. 이 점에서 Jekyll과 다르며 결국 hexo의 경우 버전 관리는 로컬에서 VSCODE GIT으로 하면 된다. 이를 위해서는 블로그 폴더에서 터미널을 통해 다음을 한 번 수행해야 한다.

    1
    git init

구글 Adsense 설정

  • 구글 애드센스의 설정 방법을 설명한다.

    • 우선 애드센스에 가입하여 세금 정보 등을 입력하고 사이트 주소를 등록한다.
    • 그리고 애드센스에서 광고 단위를 위한 코드 스니펫을 찾아 복사한다.
    • 그 다음 themes/next/layout/_layout.njk 파일 속 <body> 직전에 그 스니펫을 붙여넣는다.
    • 단, 광고 단위 삽입용이 아닌 자동광고 생성용 스니펫의 경우에는 이런 방식의 삽입이 어려운 것으로 여겨진다.

수학식 입력을 위한 MathJAX 설정

  • 수학식 입력을 위해서 다음의 작업을 해준다.

    • 우선 HEXO의 렌더러를 교체한다.

      1
      2
      {blog-folder}>npm uninstall hexo-renderer-marked --save
      {blog-folder}>npm install hexo-renderer-pandoc --save

    • 그리고 LaTeX 서버사이드 렌더러를 설치한다.

      1
      2
      {blog-folder}>npm install hexo-filter-mathjax
      {blog-folder}>hexo clean

    • 마지막으로 _config.yaml에서 다음을 기입한다.

      1
      2
      3
      4
      5
      6
      7
      mathjax:
        tags: none # or 'ams' or 'all'
        single_dollars: true # enable single dollar signs as in-line math delimiters
        cjk_width: 0.9 # relative CJK char width
        normal_width: 0.6 # relative normal (monospace) width
        append_css: true # add CSS to pages rendered by MathJax
        every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter

    • 이제 다음과 같이 글머리를 시작하면 된다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      ---
      title: On the Electrodynamics of Moving Bodies
      categories: Physics
      date: 1905-06-30 12:00:00
      mathjax: true
      ---

      아래는 center mode:
      $$
      i\hbar\frac{\partial}{\partial t}\psi=-\frac{\hbar^2}{2m}\nabla^2\psi+V\psi
      $$

      아래는 inline mode:
      <center>inline mode: $\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$</center>

      (...)

center mode:
$$ i\hbar\frac{\partial}{\partial t}\psi=-\frac{\hbar^2}{2m}\nabla^2\psi+V\psi $$
inline mode: $\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$

VSCODE에서 사용하는 DOCKER

image

  • 아래 영상으로 끝이다.

    가장 쉽게 배우는 도커

  • docker run -it node

  • docker images

  • docker ps

  • docker ps -a

  • docker exec it <PROCESS NAME> bash

  • docker -v

  • docker pull <image name>{:<tag name>}

  • docker create {option} <image name>{:<tag name>}

    • -d
    • -it
    • -p<host port no>:<container port no>
    • -rm (remove when termination)
    • -v <host folder>:<container folder>

  • docker start <container id or name>

  • docker build

  • docker build -t <image name>

  • docker-compose up

  • docker stop $(docker ps -aq)

  • docker system prune -a

  • docker run –name <image name> -v $(pwd):/home/nde/app -p 8080:8080 <image name>