머가필요해

Flutter는 Google이 출시한 Cross-Platform GUI Application Framework이다.

그냥 쉽게 말하자면, 소스코드 하나로 안드로이드, iOS, Web, Windows, macOS, Linux 어플리케이션을 만들 수 있는 것이다.

아직까지는 주로 안드로이드와 iOS 앱을 같이 만들기 위해 사용한다.

하지만, Flutter SDK만 가지고 가능한 것은 아니고,

Android Studio와 Xcode도 같이 필요하기 때문에

Windows 개발환경에서는 Xcode를 설치할 수 없어서 안드로이드 앱만 빌드 가능하고,

macOS 개발환경이어야지 안드로이드 앱과 iOS 앱을 같이 빌드 할 수 있다.

그러면 실제 코딩을 하는 IDE는 뭘 써야 할까?!

이론적으로 메모장으로 코딩을 해도 무관하지만,

IDE를 이용한 다양한 편의 기능을 위해 Android Studio 환경을 사용하는 것을 권장한다.

하지만, 왠지 쓰라는대로 쓰기에는 자존심이 상한다. (왜?)

우리의 만능 IDE 도구인 Visual Studio Code를 사용하면 안될까!?

된다 !

그것도 아주 잘 된다.

다만 몇 가지 Android Studio와 차이점이 있어서 좀 찾아보기는 해야 한다.

-----------------------------------------

Flutter 개발환경 구축하는 것은 아래 포스팅을 참고하도록 하자.

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

- macOS 환경에서 Flutter 설치하기 : https://www.whatwant.com/entry/Flutter-Install-MacOS

- VSCode를 Flutter 개발환경으로 만들기 : https://www.whatwant.com/entry/Flutter-with-Visual-Studio-CodeVSCode

이번 포스팅에서 설명하고자 하는 것은 Flutter 신규 프로젝트를 생성하는 방법이다.

1. Organization 등록

  - 앱을 만들 때에는 앱의 고유 domain을 사용해야 한다.

  - 웹 주소가 반대로 되어 있는 형태로 사용된다 (예: com.whatwant.www)

    . 이 때, 'com.whatwant' 부분이 organization(또는 company) 영역이고

    . 'www' 부분이 앱의 명칭이 된다.

  - 신규 프로젝트(앱)을 생성하기에 앞서서 organization 정보를 미리 설정을 해놓지 않으면 나중에 엄청 귀찮다.

  - 'Preference - Settings' 메뉴를 실행하자.

  - 검색 필드에 'flutter create organization'을 타이핑 하면 검색된 설정 항목이 보인다.

  - 하단 링크로 보이는 'Edit in settings.json'을 클릭하자.

  - 'dart.flutterCreateOrganization' 부분에 원하는 내역으로 입력하고 저장하면 된다.

2. New Project

  - 이제 프로젝트를 생성하면 된다.

  - 'Command Palette (Command+Shift+p / Ctrl+Shift+p)'를 실행한 뒤

  - 'Flutter: New Project' 선택

  - 프로젝트 유형으로는 'Application'을 고르면 된다 (앱 개발이 아니라면, 적합한 것으로 고르면 된다)

  - 저장 위치는 프로젝트를 저장할 디렉토리가 생성될 위치를 고르면 된다 (프로젝트 디렉토리는 자동으로 생성한다)

  - 그리고, 프로젝트 이름을 지어주면 된다

  - 'android - app - build.gradle' 파일을 열어보면

     앞에서 설정한 organization 이름과 프로젝트 이름이 잘 반영되어 있는 것을 볼 수 있다.

만약에 organization 설정을 미리 해놓지 않으면 어떻게 될까?!

'com.example'과 같은 기본값으로 반영이 되었을 것이다.

나중에 앱스토어 등에 등록하고자 한다면 문제가 될 것이다.

그러면, 수정을 해줘야 할텐데... 문제는 여러 곳에 있는 내용을 찾아서 전부 변경을 해줘야 하는 불편함이 발생한다.

물론, 하면 되는데 ... 깔끔하게 미리 설정해서 반영하는 것이 보다 편하지 않을까!?

꽤 오랜 역사를 갖고 있지만,

최근 들어서 갑작스레 많은 관심을 받고 있는 Web-IDE & Cloud-IDE 이야기를 해보고자 한다.

학계(?), 업계(?)에서 명확히 구분해서 사용하고 있는 명칭은 아니지만

개인적으로 Web-IDE와 Cloud-IDE는 다음과 같이 구분을 하고 있다.

Web-IDE

- 웹 기반으로 소스코드 편집을 지원하는 IDE를 제공하는 서비스

- workspace(terminal) 환경을 제공하지 않는다.

Cloud-IDE

- Web-IDE 서비스 포함

- workspace(terminal) 환경도 포함

즉, `GitHub Codespaces` 서비스는 Cloud-IDE로 분류할 수 있다.

- https://github.com/features/codespaces

아는 사람만 알고 있는 github.dev 서비스는 Web-IDE이다.

- https://www.whatwant.com/entry/githubdev (블로그 홍보^^)

최근에 preview로 공개한 github.dev의 사촌관계인 vscode.dev 서비스 역시 Web-IDE이다.

- https://vscode.dev/

많은 분들이 알고 있을 구름IDE는 Cloud-IDE 서비스이다.

- https://ide.goorm.io/

구름IDE는 아래 포스팅 내용 중에 소개한 적도 있다.

- https://www.whatwant.com/entry/한빛미디어-알쏭달쏭-C언어-180제

이번 포스트는 뭐 그냥 그렇다는 ...

그냥 기록용~

아는 사람만 알고 있다는 숨어있는(?) github.dev 서비스를 알고 있으신가요?

- https://github.dev/

- https://docs.github.com/en/codespaces/the-githubdev-web-based-editor

안냇말을 잘 보면 어!? 하게 된다.

`.` 단축키를 이용하면 된다고!?

위와 같이 github.com의 특정 repository에서 키보드의 `.` 키를 누르면 된다.

그러면 github.dev 사이트로 이동하면서

해당 repository의 파일 내용과 함께 IDE 환경이 주어진다.

VSCode 환경에서 소스코드 편집을 할 수 있게 된 것이다.

수정 후에 git commit 및 push를 할 수도 있다.

아쉽게도 workspace(terminal) 환경은 제공되지 않는다.

workspace(terminal) 환경까지 필요하다면 codespaces 서비스를 돈 주고 사용해야 한다.

하지만,

무료로 VSCode를 웹으로 편하게 사용할 수 있다는 것만으로도 충분히 행복한 환경이다.

나만 그렇게 생각하나?!

VSCode를 웹으로 접근해서 사용할 수 있도록 해주는 code-server를 소개한 적이 있다.

- Web based Visual Studio Code (Online VSCode)

공식적으로 제공해주는 docker image가 있긴 하지만,

이번에는 Kubernetes에 올려서 사용하기 위한 나만의 docker image를 만들어보려고 한다.

0. 작업 환경

  - 이하 과정을 진행한 환경은 다음과 같다.

    . OS: Ubuntu 18.04 Desktop

    . Docker: Docker version 20.10.7, build f0df350

  - Docker 설치는 다음 포스팅을 참고하기 바란다.

    . Docker Install (Ubuntu Server 20.04 - 64bit) - using Download

  - 지금 포스팅을 작성하는 시점에서의 최신 버전은 다음과 같다.

    . containerd.io_1.4.8-1_amd64.deb

    . docker-ce-cli_20.10.7~3-0~ubuntu-focal_amd64.deb

    . docker-ce_20.10.7~3-0~ubuntu-focal_amd64.deb

1. Dockerfile & Scripts

  - 아래 내용은 다음 링크를 참조했다.

    . https://git.nofla.me/k8s-projects/codekube

  - 위 내용 중 필요한 부분만 뽑아내고 재구성을 한 내용을 전체 공유하면 아래와 같다.

    . Dockerfile

FROM ubuntu:20.04

RUN apt-get update && apt-get upgrade -y
RUN DEBIAN_FRONTEND="noninteractive" apt-get install -y \
    wget \
    vim \
    curl \
    dumb-init \
    zsh \
    htop \
    locales \
    man \
    nano \
    git \
    procps \
    openssh-client \
    sudo \
    jq \
    openssl \
    bash-completion \
    dnsutils \
    lsb-release

RUN apt-get install -y python3 python3-pip python3-dev build-essential

RUN update-alternatives --install /usr/bin/python python /usr/bin/python3 1
RUN update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

RUN apt-get install -y apt-utils locales
RUN locale-gen ko_KR.UTF-8
ENV LC_ALL ko_KR.UTF-8


RUN addgroup --gid 1000 code && \
    adduser --uid 1000 --ingroup code --home /home/code --shell /bin/bash --disabled-password --gecos "" code && \
    adduser code sudo
RUN chmod g+rw /home && \
    mkdir -p /home/code/workspace && \
    chown code:code /home/code/workspace -R


RUN echo '%sudo ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers;


RUN USER=code && \
    GROUP=code
RUN curl -SsL https://github.com/boxboat/fixuid/releases/download/v0.5/fixuid-0.5-linux-amd64.tar.gz | tar -C /usr/local/bin -xzf - && \
    chown root:root /usr/local/bin/fixuid && \
    chmod 4755 /usr/local/bin/fixuid && \
    mkdir -p /etc/fixuid && \
    printf "user: $USER\ngroup: $GROUP\n" > /etc/fixuid/config.yml


RUN CODE_SERVER_VERSION=3.11.0 && \
    curl -sSOL https://github.com/cdr/code-server/releases/download/v${CODE_SERVER_VERSION}/code-server_${CODE_SERVER_VERSION}_amd64.deb && \
    sudo dpkg -i code-server_${CODE_SERVER_VERSION}_amd64.deb


RUN cat /usr/lib/code-server/lib/vscode/product.json \
    | jq '.extensionAllowedProposedApi[.extensionAllowedProposedApi | length] |= . + "ms-vsliveshare.vsliveshare" \
        | .extensionAllowedProposedApi[.extensionAllowedProposedApi | length] |= . + "ms-vscode.node-debug" \
        | .extensionAllowedProposedApi[.extensionAllowedProposedApi | length] |= . + "ms-vscode.node-debug2"' \
    > /usr/lib/code-server/lib/vscode/product.json_ \
    && mv /usr/lib/code-server/lib/vscode/product.json_ /usr/lib/code-server/lib/vscode/product.json


RUN mkdir /opt/default_home
ADD warehouse/.bashrc /opt/default_home


ENV PASSWORD=${PASSWORD:-password}
EXPOSE 8080

ADD warehouse/restart-codekube.sh /usr/local/bin/restart-codekube
ADD warehouse/code.sh /usr/local/bin/code
ADD warehouse/startup.sh /startup.sh


RUN chmod a+x /usr/local/bin/*

ENTRYPOINT ["/bin/bash", "/startup.sh"]

  - 필요한 스크립트 파일은 다음과 같다.

    . .bashrc

# ~/.bashrc: executed by bash(1) for non-login shells.
# see /usr/share/doc/bash/examples/startup-files (in the package bash-doc)
# for examples

# If not running interactively, don't do anything
case $- in
    *i*) ;;
      *) return;;
esac

# don't put duplicate lines or lines starting with space in the history.
# See bash(1) for more options
HISTCONTROL=ignoreboth

# append to the history file, don't overwrite it
shopt -s histappend

# for setting history length see HISTSIZE and HISTFILESIZE in bash(1)
HISTSIZE=1000
HISTFILESIZE=2000

# check the window size after each command and, if necessary,
# update the values of LINES and COLUMNS.
shopt -s checkwinsize

# If set, the pattern "**" used in a pathname expansion context will
# match all files and zero or more directories and subdirectories.
#shopt -s globstar

# make less more friendly for non-text input files, see lesspipe(1)
[ -x /usr/bin/lesspipe ] && eval "$(SHELL=/bin/sh lesspipe)"

# set variable identifying the chroot you work in (used in the prompt below)
if [ -z "${debian_chroot:-}" ] && [ -r /etc/debian_chroot ]; then
    debian_chroot=$(cat /etc/debian_chroot)
fi

# set a fancy prompt (non-color, unless we know we "want" color)
case "$TERM" in
    xterm-color|*-256color) color_prompt=yes;;
esac

# uncomment for a colored prompt, if the terminal has the capability; turned
# off by default to not distract the user: the focus in a terminal window
# should be on the output of commands, not on the prompt
#force_color_prompt=yes

if [ -n "$force_color_prompt" ]; then
    if [ -x /usr/bin/tput ] && tput setaf 1 >&/dev/null; then
    # We have color support; assume it's compliant with Ecma-48
    # (ISO/IEC-6429). (Lack of such support is extremely rare, and such
    # a case would tend to support setf rather than setaf.)
    color_prompt=yes
    else
    color_prompt=
    fi
fi

if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w\$ '
fi
unset color_prompt force_color_prompt

# If this is an xterm set the title to user@host:dir
case "$TERM" in
xterm*|rxvt*)
    PS1="\[\e]0;${debian_chroot:+($debian_chroot)}\u@\h: \w\a\]$PS1"
    ;;
*)
    ;;
esac

# enable color support of ls and also add handy aliases
if [ -x /usr/bin/dircolors ]; then
    test -r ~/.dircolors && eval "$(dircolors -b ~/.dircolors)" || eval "$(dircolors -b)"
    alias ls='ls --color=auto'
    #alias dir='dir --color=auto'
    #alias vdir='vdir --color=auto'

    alias grep='grep --color=auto'
    alias fgrep='fgrep --color=auto'
    alias egrep='egrep --color=auto'
fi

# colored GCC warnings and errors
#export GCC_COLORS='error=01;31:warning=01;35:note=01;36:caret=01;32:locus=01:quote=01'

# some more ls aliases
alias ll='ls -alF'
alias la='ls -A'
alias l='ls -CF'

# Add an "alert" alias for long running commands.  Use like so:
#   sleep 10; alert
alias alert='notify-send --urgency=low -i "$([ $? = 0 ] && echo terminal || echo error)" "$(history|tail -n1|sed -e '\''s/^\s*[0-9]\+\s*//;s/[;&|]\s*alert$//'\'')"'

# Alias definitions.
# You may want to put all your additions into a separate file like
# ~/.bash_aliases, instead of adding them here directly.
# See /usr/share/doc/bash-doc/examples in the bash-doc package.

if [ -f ~/.bash_aliases ]; then
    . ~/.bash_aliases
fi

# enable programmable completion features (you don't need to enable
# this, if it's already enabled in /etc/bash.bashrc and /etc/profile
# sources /etc/bash.bashrc).
if ! shopt -oq posix; then
  if [ -f /usr/share/bash-completion/bash_completion ]; then
    . /usr/share/bash-completion/bash_completion
  elif [ -f /etc/bash_completion ]; then
    . /etc/bash_completion
  fi
fi

    . restart-codekube.sh

#!/bin/bash
kubectl get pods "$HOSTNAME" || (
    echo "Use kubens to switch to the namespace of this instance and try again!"
    echo "(we can't do this for you since we don't know the namespace name)"
    exit 1
)
kubectl delete pod "$HOSTNAME"

    . code.sh

#!/bin/bash
# Script that mimics the open-from-stdin functionality of VSCode
if [ "$1" == "-" ]; then
    TEMP=$(mktemp /tmp/stdin_XXXXXX)
    cat > "$TEMP"
    exec code-server -r "$TEMP"
    exit 0
fi;

# Pass through everything else to `code-server`
# Shellcheck SC2068 = quoting variables to prevent globbing - we want that here.
# shellcheck disable=SC2068
exec code-server $@

    . startup.sh

#!/bin/bash
[[ -f /home/code/.homedir-initialized ]] || (
    echo "Remove this file to re-copy files from /etc/skel /opt/default_home at next container startup" > /home/code/.homedir-initialized
    # dotglob to catch files like `.bashrc`
    shopt -s dotglob
    cp -r /etc/skel/* /home/code
    cp -r /opt/default_home/* /home/code
    shopt -u dotglob
    # install kubernetes ext
    #su code --login -c "/usr/bin/code-server --install-extension ms-kubernetes-tools.vscode-kubernetes-tools"
)
# make workspace dir if it doesn't exist
[[ -d /home/code/workspace ]] || mkdir /home/code/workspace
# chown stuff to kube:kube
chown code:code /home/code -R
# generate env whitelist from su using.. a blacklist, pretty much.
env_whitelist=$(env | cut -d = -f 1 | grep -v -e HOSTNAME -e PWD -e HOME -e TERM -e SHLVL -e LC_ALL -e ^_$ | tr "\n" "," | head -c -1)
# configure kubectl so vscode's kubernetes extension works
# su code --login -w "$env_whitelist" -c "/usr/local/bin/generate-kubeconfig.sh"
# start code-server
# su code --login -w "$env_whitelist" -c "/usr/bin/code-server --bind-addr 0.0.0.0:8080 /home/code/workspace" # --enable-proposed-api [\"ms-vsliveshare.vsliveshare\",\"ms-vscode.node-debug\",\"ms-vscode.node-debug2\"]
runuser code --login -w "$env_whitelist" -c "/usr/bin/code-server --bind-addr 0.0.0.0:8080 /home/code/workspace" # --enable-proposed-api [\"ms-vsliveshare.vsliveshare\",\"ms-vscode.node-debug\",\"ms-vscode.node-debug2\"]

2. 설명

  ① Ubuntu 20.04를 기준으로 했다.

    . 18.04도 가능할 것으로 보이지만, `startup.sh` 내용 中 마지막 라인에 있는

    . `su` 또는 `runuser`의 `-w` 옵션이 18.04에서는 적용되지 않아서 지금은 20.04로 했다.

    → 18.04에서도 적용 가능하도록 연구해보겠다 (언제가 될지는...^^)

  ② 개발환경으로 사용되기에 기본적인 패키지들을 설치했다.

    . 추후 필요에 따라 추가하면 된다.

    . `DEBIAN_FRONTEND="noninteractive"` 부분이 없으면 설치 중간에 사용자 입력을 기다리기도 한다. (설치 오류)

  ③ Python3 설치 (pip 포함)

    . 일단 python3 개발환경으로 맞췄다.

    . 다른 언어 또는 라이브러리가 필요하다고 하면 자유롭게~

  ④ 한글 환경 설정 (locale)

    . 이 부분이 없으면 한글 처리에 문제가 발생한다.

    . 참고: 한글 지원되는 Ubuntu Docker Image 만들기

  ⑤ 사용자 계정 만들기 (code)

    . `code`라는 사용자 계정을 생성해서 이를 기준으로 맞추고자 했다.

    . 패스워드 없이 sudo 사용할수 있도록 했다.

    . `fixuid`를 이용해서 `code` 계정의 uid를 전체적으로 맞추도록 했다.

  ⑥ code-server 설치

    . 현재 시점의 최신 버전 `3.11.0`이 설치하도록 했다.

  ⑦ (예정) LiveShare 적용 준비

    . 지금은 아니지만, 나중에 LiveShare Extension 사용하도록 하기 위해 집어넣은 부분이다.

    . 아직은 분석이 필요한 단계

  ⑧ default home 준비

    . `code` 계정을 생성하면서 `/home/code` 디렉토리가 만들어졌는데,

    . 사용 중에 `/home/code` 디렉토리가 사라지면

    . 이를 다시 생성할 때 필요한 `.bashrc` 파일 같은 것을 넣어놓기 위한 과정이다.

  ⑨ 패스워드 및 포트 설정

    . `code-server` 접근할 때 필요로 하는 password를 지정하는 부분이다.

    . 외부에 노출되는 포트는 `8080`으로 했다.

  ⑩ 스크립트 복사

    . 필요에 따라 만들어진 스크립트들을 복사해 넣는 부분이다.

  ⑪ 실행

    . 실행 명령어 지정

3. build Image

  - 이미지 만들기는 다음과 같다.

    . 당연히 알겠지만, `-f Dockerfile` 부분은 생략 가능하다. (다른 파일명을 사용하는 경우에만 필요)

$ docker build -t code-server:v0.1 -f Dockerfile .

4. run Docker

  - Docker로 실행해 볼 수 있다

$ docker run -it -p 8080:8080 --name code -e PASSWORD="0000" code-server:v0.1

다행히 잘 동작한다.

주석만 작성해도, function 이름만 적어줘도 AI가 코드를 대신 작성해준다고 하는 Copilot !!!

광고/홍보를 그렇게 해놓고는...

한정된 사람들만 사용할 수 있게 해주는 불친절한 GitHub !! 아니 MS !!!

뭐 어떻게 어떻게 사용해볼 수 있기 기회를 얻어서

다음과 같이 사용해보았다.

내 본캐 계정에서는 아직도 대기중인데...

GitHub 웹사이트에서 바로 사용하는 것은 말이 안되기에 어떤 방식으로 제공해주나 했는데...

Visual Studio Code Extension 형태로 제공해준다 !!!

Extension 설치 !!!

21만명이 사용하고 있나보다.

별점이 4개 밖에 안되네!? ㅋㅋㅋ

당연하게도 GitHub 로그인 과정을 거쳐야 한다!!!

열기 하니까 잘 되었다.

잘 안되는 사람들은 아래에 나오는 방식으로 진행하면 되겠죠 ?!

사용법은 간단하다.

함수 이름 작성 하고 파라미터 정의하고 `{` 입력하면 회색으로 갑자기 딱! Suggestion을 보여준다.

마음에 들면 `Tab`키 누르면 되고,

마음에 안들면 `Alt + [` 또는 `Alt + ]` 누르면 다른 suggestion 들을 보여주게 된다.

그런데, 속도 이슈인지 `Alt + [` 또는 `Alt + ]` 눌렀을 때에 전환이 잘 안되는 경우가 많았다.

Suggestion 목록을 한 번에 보고 싶으면 `Ctrl + Enter`를 누르면 된다.

위 그림과 같이 오른쪽에 suggestion 목록을 전체 보여준다.

속도 이슈로 한번에 나오지 않더라도 기다리면 주르륵 나온다.

`Alt + [` 또는 `Alt + ]`는 다른 suggestion이 없는 것인지 아직 로딩 중인지 알 수 없어서 불편한데

차라리 그냥 `Ctrl + Enter`를 이용해서 전체를 보고 하는 것이 좋을 것 같다.

함수 이름만으로는 의도를 제대로 전달하기 어려울 수 있다.

그럴 때에는 주석을 앞에 적어주면 된다.

함수만 지원하는 것도 아니다.

Express server를 사용하겠다라는 주석만으로도 코드를 제안해준다.

지금까지 알아본 과정은 GitHub에서 제공해주는 Start Guide로 진행해보았다.

- https://github.com/github/copilot-preview/blob/main/docs/gettingstarted.md

혹시 웹 관련된 JS만 잘되는 것 아닐까?

확장자가 `*.py`인 파일을 만들고

`Authentication to GitHub Enterprise instance`와 같이 주석을 작성해보았다.

와우! stackoverflow 검색 보다는 훨씬 빠르게 코드를 찾아준다.

다만, 내용을 살펴보니 내가 원하는 실제 사용가능한 수준으로까지는 없었다.

주석 내용을 조금 더 디테일하게... 구체적으로 적어줘야 원하는 내용을 제안해줄 것으로 보인다.

한글도 지원을 잘 해줄까!?

위 그림과 같이 잘 해준다 !!!

한글로 된 주석이 github.com에 그다지 많지 않을거라

제한적인 상황에서만 유용할 것 같지만,

여하튼 한글도 된다 !!!

업로드 한 사람의 잘못이긴 하겠지만

위 그림과 같이 secret 값들도 그대로 suggestion 된다.

이런 부분은 주의해야할 것 같다.

결론적으로 원하는 사항에 대해서 잘 정의할 수 있으면

최소한 Stackoverflow 검색하는 것보다 빠른 시간 안에 code를 suggestion 받을 수 있는 재미있는 기능이다.

실무에서도 유용할 지에 대해서는 직접 프로젝트를 진행하면서 사용해봐야 할 것이고,

최소한 PoC 하거나 처음 해보는 사항에 대해서 접근할 때에는 상당히 유용할 것으로 보인다.

기본적인 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 ]

최근 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"

실제로 설치를 진행하자

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

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

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

"http://127.0.0.1:8080"

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

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

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

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

나온다 !!!

우와~~~~~ ^^

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

install.sh 파일 내용을 보면

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

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

일단 파일을 내려 받자

이제는 설치를 하면 된다.

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

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

[ 3. Docker ]

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

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

권한이 적용될 수 있도록

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

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

웹으로 접속하면 된다.

"http://127.0.0.1:8080"

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

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

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

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

우앙~ 힘들다!

일단 여기서 끊고 가겠다.

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