WinNux(Windows+Linux)에서 웹 개발 환경 설정

지난 블로그에서 나는 개발 환경을 신속하게 시작하는 묘책을 공유했다.그러나 우리는 언제든지 로컬 설정을 해야 한다.윈도우즈의 개발은 그다지 좋지 않다.대형 프로젝트를 처리할 때, 리눅스를 사용해서 일을 완성해야 한다.이를 위해서는 가상 시스템과 Linux 릴리스가 필요합니다.그러나 윈도우즈는 윈도우즈 리눅스 서브시스템(WSL)을 도입해 윈도우즈에서 리눅스를 실행할 수 있게 했다.이 블로그에서 우리는 웹 개발 환경을 구축하여 생산급 응용 프로그램을 구축할 것이다.

시작해보도록 하겠습니다.


프런트엔드
편집기, 브라우저 등 전방 도구를 설정합니다.

VScode 설정
Visual Studio 코드는 지금까지 프런트엔드 개발에 사용된 최고의 코드 편집기입니다.그럼 here에서 설치하겠습니다.

권장 확장:

태그 자동 이름 바꾸기#

미화#

에스린트#

이 더 예뻐요. - 코드 포맷 프로그램#

바베타 자바스크립트#

확장 옵션:

이미지 미리보기#

컬러 하이라이터#

재료 아이콘 테마#

브라우저
JavaScript 디버그 권장 브라우저 - Google Chrome

디자인 및 CSS 권장 브라우저 - Firefox developer edition

이 브라우저는 모든 디자인 요소의 궁극적인 무기이다.

나는 이곳의 주요 특징들을 좋아한다 -

스타일 편집기 - Firefox를 사용하면 스타일 편집기를 사용하여 CSS를 빠르게 테스트할 수 있습니다.이 편집기에서 원소의 모든 CSS를 작성할 수 있습니다. 마음에 들면 복사해서 항목에 사용하십시오.이렇게 하면 CSS를 변경할 때마다 페이지를 다시 로드할 필요가 없습니다.

시각 편집 - Firefox가 이 도구를 만드는 것은 애니메이션 작가와 시각 디자이너를 돕기 위해서이다.

권장 브라우저 확장 -

디버그 CSS#

JSON 브라우저 Professional#

백엔드
백엔드의 경우 VScode는 소규모 프로젝트에 적용됩니다.그러나 대규모 프로젝트Jet brains에는 IDE가 유용합니다.

WSL2 설정
Windows Linux 서브시스템(WSL)은 Windows에서 Linux 작업을 수행하기 위해 도입된 기능입니다.WSL2는 WSL1의 더 빠른 버전으로 더 많은 기능을 제공합니다.이것은 아날로그가 아니라 Windows의 진정한 Linux 커널입니다.
요구 사항,

Windows 10 버전 2004 이상(Build 19041 이상) 또는 Windows 11을 실행해야 합니다.

WSL을 설치하려면

Windows 업데이트가 완료되었는지 확인합니다.

Powershell 열기 및 실행

wsl --install

WSL 기능을 활성화해야 합니다.

검색 표시줄에 Windows 기능 켜기 또는 끄기

를 입력합니다.

Windows Subsystem for Linux 를 검색하고 확인란을 선택하여 활성화합니다.

지금 재부팅합니다.이렇게 WSL이 활성화되었습니다.
알림: 또는 이 명령을 실행할 수 있습니다.

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

이제 WSL과 함께 사용하기 위해 Linux 릴리스를 다운로드해야 합니다.모든 버전을 설치할 수 있지만, 특별한 지원이 있기 때문에 Ubuntu를 추천합니다.
Ubuntu 릴리스를 설치하려면

Microsoft 스토어를 열고 "Ubuntu 20.04.4"검색 -> "가져오기"-> 설치

클릭

WSL2로 업그레이드
업그레이드하려면 이 명령만 실행하면 됩니다.

wsl --set-version <distro-name> 2

릴리스로 교체<distro-name>.우리로서는

wsl --set-version Ubuntu-20.04.4 2

팁: Windows 파일 시스템을 탐색하고 싶다면.디렉토리를 마운트해야 합니다.

$ cd ~
$ cd /mnt/c

이렇게!이제 Windows에서 멋진 리눅스 동작을 모두 완성할 수 있습니다.
선택 사항

Windows 터미널# - Windows 터미널을 사용하여 브라우저 탭과 같은 다양한 터미널의 인스턴스를 열 수 있습니다.

읊다, 읊조리다

#

원격-WSL - 통합 터미널에서 WSL을 여는 VScode 확장자입니다.

#
Docker 및 Docker 데스크톱

Docker는 소프트웨어를 쉽게 구축, 게시 및 공유할 수 있는 도구입니다.그것은 대형 프로젝트에 광범위하게 응용된다.하지만 작은 프로젝트에는 의미가 없을 수도 있다.
이렇게!이런 설정은 완전한 사이트를 구축하기에 충분하다.
자네도 이런 블로그를 좋아하겠지만,

너는 또 무엇을 보충하고 싶니?댓글을 꼭 공유해 주세요.
더 많은 관심.좋은 하루 되세요!!!