개발업계의 미래의 트렌드!
01 VS CODE로 DEV CONTAINER 시작하기
0) VS CODE, DOCKER 켜고 VS CODE에 DEV CONTAITNER EXTENTION 깔기
1-1) 작업하고 싶은 폴더를 VS CODE에 열기/만들기
1-2) 사용하고 싶은 환경이 따로 있다면 git hub에서 찾아서 git clone으로 가져오기
2) VS CODE 좌측 하단 민트색 칸 클릭하면 REMOTE와 관련된 선택지가 상단 중간의 Command Pallette(ctrl+shift+P)에 뜬다 / WSL, DEVCONTAINER 등..
- ADD Dev Container Configuration Files: 내가 직접 완전 새로운 데브컨테이너 만들기
* Dev Container Configuration File = devcontainer.json 파일을 지칭하는 것으로 개발환경에 필요한 도구, 라이브러리, 확장 프로그램, 이미지, 환경변수 등을 정의하고 컨테이너를 시작 및 연결하는 방법을 설명하는, 즉 DEV CONTAINER를 설정하는 파일
- Dev Container Rebuild : 기존에 있었던 데브 컨테이너의 볼륨(호스트 컴퓨터에 연동되어 저장된 파일)은 놔두고 Dev Container 다시 만들기
- Open Folder in Container : 이미 나한테 있는 폴더를 Dev Container로 열고 싶을때 >> 1-0) 에서 git clone해온 파일들을 사용하고 싶을 때 이걸 쓴다.
(https://velog.velcdn.com/images/rune_kkk/post/4b8b85e8-cf70-4de5-8d64-f3c78d5bc2a3/image.png)
3) 컨테이너 기본 설정 선택지들이 뜨며 선택할 수 있게 해준다.
1. Workspace 또는 User Data Folder:
선택한 옵션에 따라 Dev Container가 접근할 수 있는 파일들이 달라지는 것
- Workspace는 현재 프로젝트가 위치한 폴더를 선택하는 옵션입니다. 이 옵션을 선택하면, 현재 프로젝트의 파일과 폴더가 Dev Container에 마운트되어 개발 환경에서 사용할 수 있습니다. 이는 프로젝트의 파일을 Dev Container 내에서 쉽게 접근하고 수정할 수 있게 합니다
- User Data Folder는 사용자의 데이터 폴더를 선택하는 옵션입니다. 이 옵션을 선택하면, Dev Container에 사용자의 데이터 폴더가 마운트되어 개발 환경에서 사용할 수 있습니다. 이는 개인 설정이나 사용자 데이터를 Dev Container에서 사용할 수 있게 합니다
2. 기본 설치 프로그램(Basic Installers):
여기서 개발에 필요한 가장 기본이 되는 조건 1개를 선택할 수 있다.
예를 들어, Node.js, Python, Java 등 기본적인 개발 환경을 포함한 설정 파일이 제공됩니다.
여기서 언어를 선택한다면, 한 언어로만 돌리는 간단한 작업일 경우
여기서 운영체제 (ubuntu 등)을 선택한다면, 언어 외에 다양한 작업을 해야하는 경우.
3. 특정 언어 또는 프레임워크에 맞춘 옵션:
이 옵션에서는 특정 프로그래밍 언어나 프레임워크에 맞춘 컨테이너 설정 파일을 선택할 수 있습니다. 예를 들어, TypeScript, Ruby, Go, .NET 등 다양한 언어와 그에 맞는 환경을 선택할 수 있습니다.
각 언어 또는 프레임워크에 맞는 최적화된 설정이 포함되어 있어, 해당 환경에서 쉽게 개발을 시작할 수 있습니다.
4. 특정 툴이나 런타임 환경:
이 옵션은 특정 개발 도구나 런타임 환경을 제공하는 컨테이너 설정 파일입니다. 예를 들어, Docker, Kubernetes, Azure, GitHub Codespaces 등 특정 툴이나 플랫폼에서 작업하는 데 최적화된 환경을 선택할 수 있습니다.
4) 모든 선택지를 다 만들면 devcontainer.json 파일이 만들어진 것을 확인 할 수 있다
5) 해당 container로 접속하기
devcontainer.json 파일이 있는 폴더에서 왼쪽 하단의 '><' 아이콘을 클릭하거나, Command Palette (Ctrl+Shift+P)를 열고 “Remote-Containers: Reopen in Container” 명령을 실행
로딩시간이 좀 걸리고 나서
좌측 하단에 DEV CONTAINER로 접속했다고 뜨고
TERMINAL의 내용도 LOCAL과 달라지면서 접속이 되었다는 것을 볼 수있다.
6) 해당 Dev container에서 나가기
Command Palette (Ctrl+Shift+P)에서
1. Reopen Folder Locally:
이 옵션을 선택하면 현재 작업 중인 폴더를 로컬 환경에서 다시 엽니다.
이 명령은 VS Code가 현재 원격 컨테이너나 서버에서 로컬 파일 시스템으로 전환하도록 합니다.
개발 컨테이너 내부에서 작업하던 것을 종료하고, 로컬 파일로 돌아가고 싶을 때 유용합니다.
2. Close Remote Connection:
이 옵션은 현재 활성화된 원격 연결 자체를 종료합니다.
원격 컨테이너나 서버와의 연결을 끊고, VS Code는 원격 환경과의 상호작용을 중지합니다.
로컬 환경으로 돌아가거나 다른 원격 연결로 전환할 때 사용됩니다.
02 devcontainer.json 자세히 보기
- name: 이 컨테이너의 이름
- image: 이 컨테이너에 사용된 기본 이미지.
mcr.microsoft.com/devcontainers/base:jammy는 Microsoft가 제공하는 기본 개발 컨테이너 이미지 중 하나로, Ubuntu 운영체제를 사용하고 있습니다 - feature: 추가로 베이스 이미지 위에다 깔고 싶은 것들.
여기선 파이썬과 git lfs가 사용됨 - postCreateCommand : 위의 feature과 다를 세팅을 위해 최초로 깔아야하는 것들
여기선 dvc와 gif lfs를 사용하기 위해 install을 해줬다. - customizations : 각종 플러그인들을 설정해준다.
03 Code Formatter
Code Formatter: 정해진 규칙(코딩 컨벤션)에 맞추어 코드를 자동으로 정렬/꾸며주는 도구. 가독성과 효율!
Linter(Lint): 코드에 오류나 버그가 있는지, 정해진 코딩 컨벤션을 잘 지키고 있는지 알려주는 플러그인/프로그램. 코딩 컨벤션에 위반하는 코드를 쓰면 빨간줄 등을 통해 error/warning을 표시한다.
- black: 파이썬 코드 포매터로 일관된 스타일로 코드를 자동정렬해줌. 기본은 PEP 8, 커스터마이징 가능.
- isort: 파이썬의 import문을 자동 정렬해줌.
- flake8: 파이썬 PEP 8 표준 가이드를 따르는지를 검사하고 에러를 잡아주는 LINTER
