프런트 엔드 개발을 위한 Pop!_OS 설정

최근에 Pop!_OS에 대한 잡담을 모두 듣고 사용해 보고 싶었다면 여기 프런트 엔드 개발 시스템 설정에 대한 좋은 가이드가 있습니다.

상대적으로 Linux를 처음 사용하고 방금 사용해 본 경우 Virtual Machine에서 빌드하는 것이 좋습니다. installing Pop!_OS in a virtual machine here에 대한 전체 지침이 있습니다. 이것은 컴퓨터를 크게 수정하지 않고 발가락을 담그는 가장 좋은 방법입니다.

계속해서 Pop!_OS를 사용하여 프런트 엔드 개발 시스템을 설정할 수 있습니까? 전적으로! 설정하기 가장 쉬운 환경 중 하나이며 그 과정에서 속도, 안정성 및 멋진 모습을 제공합니다. 방법은 다음과 같습니다.

기본 도구 가져오기

개발자 시스템을 시작하려면 몇 가지 기본 사항이 필요합니다. 몇 가지 핵심 도구를 설치해 보겠습니다.

일반적으로 이 튜토리얼에서는 첫 번째 단계로 Git 설치를 제안하지만 Pop!_OS에는 이미 기본적으로 Git이 설치되어 있습니다!

다음으로 Node와 NPM을 설치합니다.

sudo apt install nodejs npm

다음 명령을 실행하여 설치되었는지 확인하십시오.

node -v
npm -v

완벽한. 빠른 반응 앱을 설치해 봅시다.

npx create-react-app hello world

이것은 create-react-app 을 사용하여 새로운 React 애플리케이션을 스캐폴딩합니다.

cd hello-world
npm start

멋진 Feact 앱이 있습니다. 자, 그럼 이제 툴링을 해봅시다.

팝에서 일부 도구를 설치하십시오! 가게

팝을 클릭하세요! 가게



먼저 Git Kracken을 설치합니다. 이것은 Git을 위한 편리한 시각화 도우미입니다.



다음으로 Postman을 설치합니다.



물론 Visual Studio Code도 마찬가지입니다.



여기에서 deb와 Flatpack 중에서 선택할 수 있습니다. 많은 소프트웨어 패키지가 Pop!_OS에서 이러한 선택을 제공합니다.

Serve는 제가 오랫동안 사용해 온 도구 중 하나입니다. 이제 React, Angular 또는 Vue로 작업하는 경우 웹 서버가 내장되어 있습니다. 다른 모든 것에는 Serve를 사용합니다.

sudo npm install -g serve

Serve를 사용하면 어떤 폴더에서든 HTTP 서버를 실행합니다.



일회성 프로젝트에 매우 편리합니다.

프로젝트 폴더

프로젝트 폴더를 설정하는 방법은 다음과 같습니다.

cd ~
mkdir libraries

그런 다음 다음과 같이 폴더를 설정합니다.

mkdir css
mdir javascript

CSS 폴더

cd css

여기 Bootstrap에서 복제하고 싶습니다.

git clone https://github.com/twbs/bootstrap.git

및 순풍

git clone https://github.com/tailwindcss/tailwindcss.git

예, NPM에 이러한 항목을 포함할 수 있다는 것을 알고 있지만 저는 항상 여기 내 하드 드라이브에 사본을 두는 것을 좋아합니다. 무언가를 테스트하기 위해 가져갈 수 있고 최신 상태인지 쉽게 확인할 수 있습니다.

자바스크립트 폴더

내 JavaScript 라이브러리에서 나는 큰 프레임워크의 복사본과 프로젝트에 집어넣고 싶은 다른 JS 항목을 보관하는 것을 좋아합니다.

cd ../javascript

여기에서 큰 세 가지를 복제합니다.

git clone https://github.com/facebook/react.git
git clone https://github.com/angular/angular.git
git clone https://github.com/vuejs/vue.git

그런 다음 프로젝트 폴더를 만듭니다. 이것은 내가 다른 프로젝트를 생성한 다음 Git으로 초기화하고 다른 곳으로 푸시할 수 있는 곳입니다.

cd ~
mkdir Projects

나는 일반적으로 출력 폴더를 만듭니다. 이것은 기본적으로 Serve를 실행할 수 있는 artifacts(dist) 폴더입니다. 미리 테스트하고 어떤 모습일지 확인하는 훌륭한 방법입니다. 나중에 그냥 클리어합니다.

mkdir Projects/output

VS 코드 구성

이제 Visual Studio Code가 설치되었으므로 도움이 되는 몇 가지 플러그인을 추가하겠습니다.



설치하겠습니다prettier



Javascript ES6 code snippets



Angular snippets by John Papa



또는 Angular Extension Pack을 사용하여 다양한 각도를 얻을 수 있습니다.

요약

Pop!_OS는 사용하기 매우 재미있고 훌륭하게 작동합니다. 이것은 제가 요즘 대부분의 프론트엔드 개발을 하고 있는 OS입니다. 이 설정이 완료되면 모두 사용할 수 있습니다. Mac이 없어도 Mac에서 개발하는 느낌입니다! 아직 Pop!_OS를 사용해보지 않았다면 적극 추천합니다.

그리고 프런트 엔드 개발 기술을 향상시키려면 Pluralsight에서 다음과 같은 멋진 과정을 확인하십시오.

Angular

React

Vue

프런트 엔드 개발에 Pop!_OS를 사용하고 있습니까? 어떻게 생각해? 문제가 있습니까? Let me know!