기본적인 Flutter 개발환경은 아래 글을 통해 설치해보았다.


  - https://www.whatwant.com/entry/Flutter-Install-Flutter-설치하기-Windows




하지만, 요즘 유행인 Visual Studio Code를 이용하고픈 사람들도 있을 것이다.


이런 요구사항이 높았는지... Flutter에서도 공식적으로 가이드를 제공해주고 있다.


  - https://flutter.dev/docs/development/tools/vs-code




그래서 직접 한 번 해보았다.



1. Visual Studio Code 설치


  - https://code.visualstudio.com/







2. Install Extension


  - Flutter Extension을 설치해주면 된다.

    - 유사품에 주의하고 'Dart Code'에서 제공해주는 것을 install 하면 된다.

    - 자동으로 Dart Extension도 같이(몰래) 설치된다.



  - Restart VSCode




3. Check


  - "Ctrl+Shift+P" 또는 "View > Command Palette..." 실행해서 'flutter'를 타이핑 해보자

  - "Flutter: Run Flutter Doctor" 고르면 된다.



  - 그런데, 아래와 같이 2번째 항목에서 [!] 발견 !!!





4. Accept Android Licenses


  - 위 메시지에서 보이는바와 같이 친절하게 해결 방법도 알려 준다.

  - "View -> Terminal" 또는 "Ctrl+`", 아니면 그냥 TERMINAL 탭 선택

  - "> flutter doctor --android-licenses" 실행

    - 무조건 y 엔터






5. New Project


  - 이제 아래와 같이 Flutter Project를 생성하면 된다.



반응형

 

앞에서 Visual Studio Code를 웹으로 사용하는 방법도 알아보았고,

 

Web based Visual Studio Code (Online VSCode)

https://www.whatwant.com/entry/Web-based-Visual-Studio-Code-Online-VSCode

 

 

Python 개발을 위한 환경도 꾸며보았다.

 

Visual Studio Code for Python (VSCode Python 개발환경 만들기)

https://www.whatwant.com/entry/Visual-Studio-Code-for-Python-VSCode-Python-개발환경-만들기

 

 

 

 

[ Powerline fonts in zsh ]

 

 

그런데, Terminal을 보면 뭔가 글자들이 깨진 것처럼 보인다.

 

 

 

필자의 경우 Ubuntu에 Shell 환경을

zsh로 꾸미면서 테마를 예쁘게 하다보니

일반적인 폰트를 사용하지 않기 때문이다.

 

일명 powerline 폰트 !!!

 

그냥 Terminal 화면에서는 아래와 같이 정상적으로 출력이 된다.

 

 

 

 

 

zsh 환경을 만들 때 아래와 같은 명령어를 통해 font를 설치했었다.

 

> sudo apt-get install fonts-powerline

 

※ Windows에서는 다음 링크에 있는 폰트를...

github.com/Falkor/dotfiles/tree/master/fonts

 

 

 

 

[ Visual Studio Code ... Conflict ]

 

 

하지만, VSCode 에서는 위의 폰트를 그대로 사용할 수 없단다,

 

VSCode는 "monospace fotns"만 지원한단다.

 

그래서 VSCode의 Terminal이 아래와 같이 깨진 폰트로 출력이 된다.

 

 

 

 

 

[ Setting Font ]

 

Settings의 Terminal 항목에서

"Integrated: Font Family"에 다음과 같이 셋팅하자.

 

'Ubuntu Mono', 'PowerlineSymbols'

 

 

※ Windows 에서는 다음과 같이 : 'SourceCodePro+Powerline+Awesome Regular'

 

 

 

Terminal 화면을 보면 알겠지만, 예쁘게 잘 나온다.

 

 

우와~ 깔끔하게 해결~!!!

 

 

반응형


앞에서 Visual Studio Code를 웹으로 사용하는 방법을 알아보았다.


Web based Visual Studio Code (Online VSCode)

https://www.whatwant.com/entry/Web-based-Visual-Studio-Code-Online-VSCode




그러면 이번에는 Python Code를 작성하기 위한 과정을 살펴보자.





아! 기본 운영체제는 Ubuntu 18.04 이다.






[ Python ]


Python을 설치하자.

2.x 와 3.x 모두 설치해버리자.


❯ sudo apt install python python-pip virtualenv

❯ sudo apt install python3 python3-pip python3-venv







[ Extension ]


VSCode를 실행하고...

왼쪽 제일 아래 아이콘을 클릭하면 VSCode의 Extension을 고를 수 있는 화면이 나온다.





검색어를 넣어서 검색을 해도 좋고,

보이는 것을 클릭해도 된다.


Python 관련 여러개의 Extension이 보이겠지만,

Microsoft에서 제공해주는 아이로 설치하자.


오른쪽에 나오는 화면의 "Install"을 클릭하면 된다.





설치가 되었지만, 바로 적용되는 것은 아니다.


"Reload Required"를 클릭해버리면 된다.








[ File ]


Python 파일을 만들기에 앞서서,

작업을 할 디렉토리가 먼저 준비되어야 한다.


미리 생성해놓을 수도 있고

VSCode에서 생성을 할 수도 있다.





원하는 디렉토리를 고르면 된다.





그리고, "New File"을 선택해서 파일 이름을 정해주면 된다.










[ Error ]


간단한 Python 파일을 만들고 실행을 해보기 전에,

어떤 버전의 Python을 사용할 것인지를 선택해보자.





왼쪽 아래에 나오는 "Python 3.6.9 64-bit" 부분을 클릭했더니...

에러가 발생했다.


"command 'python.setInterpreter' not found"


필요한걸 찾을 수가 없단다.



지금 code-server로 구동되고 있는 VSCode와 Extension의 궁합이 맞지 않아 발생하는 에러로 보인다.

(이걸 알아내기 위해 정말 오랫동안 삽질을... ㅠㅠ)









[ Extension Downgrade ]


왼쪽 아래 아이콘을 눌러서 Extension 메뉴로 간 뒤에

왼쪽 Installed 항목에 있는 Python에서

기어(Gear) 모양의 버튼을 누르고

"Install Another Version..." 메뉴를 선택하자.





주르륵 나오는 버전 중에서

"2020.5.86806"

버전을 고르자





"Reload Required"

눌러서 재시작~





못보던 아래와 같은 화면이 나오면 성공~!!!











[ Select Linter ]



Python Coding Style을 검사할 엔진(?)을 고르는 것이다.


위에 나오는 화면에서 "Select Linter"를 선택하거나


[Ctrl + Shift + P]를 눌러서 나오는 화면에서 "Linter" 타이핑해서

"Python: Select Linter"를 선택하자.





개인적으로는 "flake8"을 선호한다.


그러면 끝~!!








[ Run ]


이제, 다시 진행해보자.


왼쪽 아래에 나오는 "Python 3.6.9 64-bit" 부분을 클릭해보자.





Python 2.x를 사용할지

Python 3.x를 사용할지

고르면 된다.


소스 코드에서

마우스 오른쪽 버튼을 누르고

메뉴 중에서

"Run Python File in Terminal"

클릭~





아래와 같이 실행 결과가

Terminal 윈도우에 나온다.





끝~




반응형


[ Visual Studio Code ]


최근 SW 개발用 에디터는 "Visual Studio Code"가 거의 시장을 평정한 것 같다.



이름이 저렇다고 해서

예전의 Visual Studio를 생각하면 안된다.


주위의 일부 고인물(^^)들이

VSCode가 Visual Studio의 최신판일줄 알고선

C나 C++ 개발이 아니라는 이유로

VSCode를 멀리하는데... ^^



VSCode는 그냥 똑똑한 에디터이다.

Extension(Plugin)이 엄청나게 많이 제공되는

Coding할 때 아주 많이 유용한...


음... 사실 에디터로 부르기 보다는

IDE (Integrated Development Environment)라고

부르는 것이 더 맞는 것 같다.


한국말로는 통합개발환경 ?!




[ Remote IDE / Cloud IDE ]


일반적으로 이러한 IDE는 Local PC에 설치를 하고

GitHub와 같은 형상관리 도구와 연계를 해서 소스코드를 내려받고

Local에 구축한 빌드환경에서 빌드를 해보는 것이

일반적인 개발 환경일 것이다.


그런데, 아래와 같은 상황에서는 환경 구축에 애로사항이 좀 있을 수 있다.


노트북이 없고 데스크탑밖에 없는데,

여기저기 이동(출장)을 다니며 코딩을 해야하는 경우


내가 지금 개발하고 있는 것을

다른 개발자와 같이 보면서 리뷰를 하고 싶은 경우


내 데스크탑은 Windows인데

빌드 환경으로 Linux 환경이 필요한 경우


전혀 다른 빌드 환경의 개발을

동시에 2개 이상을 해야하는 경우


빌드 환경 구축이 까다로운데

여러 명이 같이 개발을 하는 경우

심지어 초짜 개발자가 계속 투입되는 경우



이럴 때 사용할 수 있는 여러가지 방법 中

최근 내가 관심을 갖고 있는 것은 Remote IDE/Cloud IDE 이다.


빌드 환경을 포함한 VSCode를

웹 인터페이스로 제공을 해주는 것이다.



대표적으로는 얼마전에 살펴봤던

Goorm IDE

https://ide.goorm.io/







[ Visual Studio Codespaces ]


MS에서는 이러한 요구를 해결하기 위해서

"Visual Studio Online"

이라는 서비스를 제공했었고,


지금은

"Visual Studio Codespaces"
라는 이름으로 변경해서 서비스하고 있다.



방금 한 번 해봤는데... Azure DevOps랑 연계되어 있어서

그냥 편하게 막 쓰기엔 좀 귀찮았다.


하지만... 멋지다!







[ Own Remote IDE ]


뭐 지금까지 기본적인 배경 사항들에 대해서 알아봤다.


하지만, 지금 내가 하고 싶은 것은

내가 지금 사용하고 있는 Local 환경 (PC 또는 Server)에서

나만의 VSCode를 웹으로 띄우고 싶은 것이다.


나만 이런 생각을 하는 것이 아니기에...

훌륭한 분들이 먼저 그 길을 걸었다!!!


Coder라는 회사에서

https://coder.com/ )

관련 솔루션을 Opensource로 오픈했다.

https://github.com/cdr/code-server )


회사에서 오픈한 프로젝트라서 그런지

운영도 활발히 잘되고

문서화도 깔끔하다.



"code-server"를 이용하면

지금 내 데스크탑을 VSCode Server로 사용할 수가 있는 것이다.






[ code-server 설치하기 ]


쓸만한 성능을 보이기 위해서는


1 GB RAM

2 cores


정도의 스펙이 필요하다고 한다.

참고!!!



Local PC 또는 서버에 바로 설치할 수도 있고,

AWS 또는 GCP에 설치할 수도 있다고 한다.

참고!!!



설치하는 방법은 다양하게 제공된다.


1. curl 을 통해 install.sh를 실행하는 방법

2. 배포판에 따라 설치파일을 이용해 설치하는 방법

3. Docker를 이용하는 방법






[ 1. install.sh ]


"curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run"


설치가 잘 될지 한 번 가볍게 테스트 해보고


❯ curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

Ubuntu 18.04.5 LTS

Installing v3.4.1 deb package from GitHub releases.


+ mkdir -p ~/.cache/code-server

+ curl -#fL -o ~/.cache/code-server/code-server_3.4.1_amd64.deb.incomplete -C - https://github.com/cdr/code-server/releases/download/v3.4.1/code-server_3.4.1_amd64.deb

+ mv ~/.cache/code-server/code-server_3.4.1_amd64.deb.incomplete ~/.cache/code-server/code-server_3.4.1_amd64.deb

+ sudo dpkg -i ~/.cache/code-server/code-server_3.4.1_amd64.deb


To have systemd start code-server now and restart on boot:

  systemctl --user enable --now code-server

Or, if you don't want/need a background service you can run:

  code-server



"curl -fsSL https://code-server.dev/install.sh | sh"


실제로 설치를 진행하자


❯ curl -fsSL https://code-server.dev/install.sh | sh

Ubuntu 18.04.5 LTS

Installing v3.4.1 deb package from GitHub releases.


+ mkdir -p ~/.cache/code-server

+ curl -#fL -o ~/.cache/code-server/code-server_3.4.1_amd64.deb.incomplete -C - https://github.com/cdr/code-server/releases/download/v3.4.1/code-server_3.4.1_amd64.deb

######################################################################## 100.0%##O=#  #                                                                      

+ mv ~/.cache/code-server/code-server_3.4.1_amd64.deb.incomplete ~/.cache/code-server/code-server_3.4.1_amd64.deb

+ sudo dpkg -i ~/.cache/code-server/code-server_3.4.1_amd64.deb

[sudo] xxx의 암호: 

Selecting previously unselected package code-server.

(데이터베이스 읽는중 ...현재 175469개의 파일과 디렉터리가 설치되어 있습니다.)

Preparing to unpack .../code-server_3.4.1_amd64.deb ...

Unpacking code-server (3.4.1) ...

code-server (3.4.1) 설정하는 중입니다 ...


To have systemd start code-server now and restart on boot:

  systemctl --user enable --now code-server

Or, if you don't want/need a background service you can run:

  code-server



부팅할 때 자동으로 실행되도록하기 위해서는 다음의 명령어를 실행하면 된다.


"systemctl --user enable --now code-server"


❯ systemctl --user enable --now code-server

Created symlink /home/xxx/.config/systemd/user/default.target.wants/code-server.service → /usr/lib/systemd/user/code-server.service.



이제 웹브라우저로 확인해보자.


"http://127.0.0.1:8080"



패스워드는 위 화면에서 알려주는 것 처럼

아래 경로에 가면 알 수 있다.


"~/.config/code-server/config.yaml"


❯ cat  ~/.config/code-server/config.yaml

bind-addr: 127.0.0.1:8080

auth: password

password: 0f8015b4dbd5db86079f739a

cert: false


저기있는 패스워드를 입력하면 된다.



나온다 !!!


우와~~~~~ ^^






[ 2. 배포판에 따른 설치 ]


install.sh 파일 내용을 보면

다른 배포판에 대해서도 알아볼 수 있을 것이다.


여기에선 Ubuntu에서의 내용만~^^


일단 파일을 내려 받자


> wget https://github.com/cdr/code-server/releases/download/v3.4.1/code-server_3.4.1_amd64.deb


이제는 설치를 하면 된다.


> sudo dpkg -i code-server_3.4.1_amd64.deb

[sudo] chani의 암호: 

Selecting previously unselected package code-server.

(데이터베이스 읽는중 ...현재 175469개의 파일과 디렉터리가 설치되어 있습니다.)

Preparing to unpack code-server_3.4.1_amd64.deb ...

Unpacking code-server (3.4.1) ...

code-server (3.4.1) 설정하는 중입니다 ...


부팅할 때 자동 실행을 위해서...


❯ systemctl --user enable --now code-server

Created symlink /home/xxx/.config/systemd/user/default.target.wants/code-server.service → /usr/lib/systemd/user/code-server.service.


나머지는 위의 내용과 같다.






[ 3. Docker ]


docker가 먼저 설치되어 있어야 한다.


> sudo apt -y install docker.io


사용자 계정 권한으로 docker를 실행할 수 있도록 하자.


> sudo usermod -aG docker $USER


권한이 적용될 수 있도록

로그아웃/로그인 또는 재부팅을 하도록 하자.


그리고... 이제 docker를 실행하자 !!!


> docker run -it -p 127.0.0.1:8080:8080 \

  -v "$PWD:/home/coder/project" \

  -u "$(id -u):$(id -g)" \

  codercom/code-server:latest

info  Wrote default config file to ~/.config/code-server/config.yaml

info  Using config file ~/.config/code-server/config.yaml

info  Using user-data-dir ~/.local/share/code-server

info  code-server 3.4.1 48f7c2724827e526eeaa6c2c151c520f48a61259

info  HTTP server listening on http://0.0.0.0:8080

info      - Using password from ~/.config/code-server/config.yaml

info      - To disable use `--auth none`

info    - Not serving HTTPS


웹으로 접속하면 된다.


"http://127.0.0.1:8080"



어?! 그런데, 패스워드는 어떻게 확인하지 ?!


docker container 안으로 들어가서 확인해보자.


docker 실행을 하고 있는 터미널 말고

터미널 하나 더 띄워서 실행하면 된다.



❯ docker ps -a

CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS              PORTS                      NAMES

235751eb3ebb        codercom/code-server:latest   "dumb-init fixuid -q…"   4 minutes ago       Up 4 minutes        127.0.0.1:8080->8080/tcp   dreamy_haibt


❯ docker exec -it 23575 /bin/bash


coder@235751eb3ebb:~$ ls -al

total 32

drwxr-xr-x 1 coder coder 4096 Aug 12 14:55 .

drwxr-xr-x 1 root  root  4096 Jun  4 10:59 ..

-rw-r--r-- 1 coder coder  220 Jun  4 10:59 .bash_logout

-rw-r--r-- 1 coder coder 3526 Jun  4 10:59 .bashrc

drwxr-xr-x 3 coder coder 4096 Aug 12 14:55 .config

-rw-r--r-- 1 coder coder  807 Jun  4 10:59 .profile

drwxr-xr-x 2 coder coder 4096 Aug 12 14:55 project


coder@235751eb3ebb:~$ cat ./.config/code-server/config.yaml 

bind-addr: 127.0.0.1:8080

auth: password

password: 665b7519d76a99e5bbcccac2

cert: false




우앙~ 힘들다!


일단 여기서 끊고 가겠다.


여력이 되면 추가로 꾸미는 것들 계속 해보겠다.


반응형

+ Recent posts