2022. 3. 10. 07:50ㆍUX Engineer 이야기
들어가며
pxd 홈페이지의 웹 접근성 인증 마크를 획득하기 위해 그룹원 모두가 리뉴얼 작업에 참여하게 되었습니다. 그룹원 모두가 동일한 개발 환경에서 개발할 수 있도록 Docker를 사용하게 되었는데요 오늘은 Docker 적용 기를 간략히 써볼까 합니다.
Docker란 무엇인가
Docker가 무엇인지, 어떻게 사용하는 것인지에 대한 정보는 참고할 수 있는 문서나 동영상 등이 많기 때문에 이번 글에서는 Docker 공식 홈페이지에 링크와 wiki에 정의된 글을 가져왔습니다.
도커 컨테이너는 일종의 소프트웨어를 소프트웨어의 실행에 필요한 모든 것을 포함하는 완전한 파일 시스템 안에 감싼다. 여기에는 코드, 런타임, 시스템 도구, 시스템 라이브러리 등 서버에 설치되는 무엇이든 아우른다. 이는 실행 중인 환경에 관계없이 언제나 동일하게 실행될 것을 보증한다.
Docker를 사용하게 된 이유
1. 그룹원들의 node 환경이 전부 다르다
현재 진행 중인 프로젝트를 수행하면서 pxd 홈페이지 리뉴얼 작업을 원활하게 스위칭 할 수 있는 환경을 구성해야 했습니다.
그룹원들의 개발 환경은 현재 진행 중인 프로젝트에 맞는 node 환경으로 구성되어 있습니다. 어떤 프로젝트는 node 12, 어떤 프로젝트는 node 14 등으로 구성되어 있죠.
현재 pxd 홈페이지는 Nuxt로 구성되어 있습니다. Nuxt에서 요구하는 node 환경이 정의되어 있기 때문에 요구사항에 맞는 node 버전을 동일하게 사용해야 했습니다.
동일한 node 버전을 사용하지 않으면 발생할 수 있는 문제들이 존재합니다.
- Nuxt가 설치된다 하더라도 Nuxt에서 사용되는 패키지에서 문제가 발생할 수 있습니다.(패키지가 요구하는 최소한의 node 버전)
- node 버전이 다르기에 npm 버전도 달라서 패키지를 설치할 때 오류가 발생할 수 있습니다.
- npm 버전에 따라서 package-lock.json에서도 문제가 발생할 수 있는데요
희원 주임이 잘 정리해 주셨습니다. package-lock.json 과연 제대로 알고 있을까? 에서 확인해주세요.
2. nvm으로 node 버전을 관리하기에는 한계가 있다.
다수의 프로젝트를 수행하는 상황에서 nvm을 사용해서 node 버전을 관리하기에는 한계가 있었습니다. 프로젝트가 10~20개가 넘어간다면 10~20개의 노드 버전이 존재해야 한다는 의미이고, 각 프로젝트가 모두 다른 node 버전을 가지고 있지 않을 수도 있기 때문이죠.(서로 다른 프로젝트가 같은 node 버전을 사용할 수도 있습니다.)
Docker로 구성하면 한번 사용하고, 당분간 사용하지 않는다면 삭제하고, 다시 필요하다면 설치해서 사용할 수 있기 때문에 nvm보다는 훨씬 더 유연하게 사용할 수 있습니다.
3. Docker 경험해보기
Docker를 경험해 보지 못한 그룹원들을 위해 Docker를 미리 사용해 보면서 찍먹(?) 해볼 수 있는 기회를 만들고 싶었습니다.
어려웠던 점
1. Windows 사용자의 Docker 환경 구성하기
windows에서 Docker의 성능을 향상하고, Mac 유저와의 충돌 없이 사용하기 위해서는 wsl2(Windows Subsystem For Linux 2) 설치가 필수입니다.
windows에서 wsl2가 무엇인지 개념을 알아야 하는 단계가 필요한데, Docker를 사용하기 위해 한 가지 넘어야 하는 걸림돌이 될 수도 있었습니다.
다행히도 그룹원들이 wsl 개념을 큰 어려움 없이 습득했기 때문에 어려움을 해결할 수 있었습니다.
2. dev-container에서 windows의 성능 저하
vscode + Docker의 결합으로 프로젝트에 필요한 모든 환경 구성(vscode-extension 설정, Docker 설정)을 만들 수 있는데요,
그룹원들 전부 vscode를 사용하고 있기 때문에 dev-container로 개발 환경을 업그레이드를 하려고 했으나 windows 환경에서 성능 문제(컴퓨터 멈춤, 컴퓨터 폭발 직전)로 적용하지 못했습니다.
windows에서의 최적화를 하는 방법이 있는데 적용해 보지 못했지만 아래 방법을 통해 적용해 보면 좋을 것 같네요.
- https://code.visualstudio.com/remote/advancedcontainers/improve-performance
- https://betterprogramming.pub/optimizing-vs-code-dev-containers-on-windows-6d3411ba76b5
마치며
pxd 홈페이지 리뉴얼 작업에서 Docker를 적용할 때 느꼈던 점들을 정리해 봤습니다.
다양한 node 환경에서 프로젝트를 진행해야 하는 특징을 가진 그룹 특성을 Docker를 통해 조금 더 유연하게 작업할 수 있는 환경을 만들 수 있었습니다.
현재 XE 그룹의 장비를 Windows에서 Mac으로 전환 중에 있습니다. 기존에는 Mac을 사용하는 작업자와 windows 작업자가 혼재되어 있었기 때문에 개발 환경 구성에 있어 사전 작업이 필수였는데, Mac 전환을 통해 개발환경 구성, Docker를 사용하는데 조금 더 자유로워지지 않을까 합니다.
읽어주셔서 감사합니다.