웹 사이트를 구축 할 계획이라고 가정 해 보겠습니다. 시작하기 전에 생활을 더 쉽게 할 수 있는 몇 가지 도구를 설정해야 합니다. 

하지만 어떤 도구가 있어야 합니까?

자바 스크립트 생태계는 너무 빠르게 변화하여 사용할 최고의 도구를 선택하는 것이 압도적 일 수 있습니다. 이 문제를 해결하기 위해 이 문서에서는 처음부터 프런트 엔드 프로젝트를 설정하는 방법을 안내합니다.

필수 편집기 확장, 프로젝트에 JavaScript 라이브러리를 추가하는 방법, 프런트 엔드 개발을 수행하려는 경우에도 Node.js를 사용하는 이유, 생성 할 애플리케이션 번 들러를 설정하는 방법 등을 다룰 것입니다. 브라우저에서 코딩 할 때 실시간 미리보기.

코드 편집기를 선택하는 방법 

기초부터 시작하겠습니다. 웹 개발자는 대부분 텍스트를 편집하므로 좋은 편집기가 필요합니다. 그렇다면 어느 것을 사용해야 합니까?

편집자를 선택하는 것은 대부분의 편집자가 매우 유사한 기능을 가지고 있기 때문에 개인적 선호도에 따라 크게 달라집니다.

개인적인 취향이 없다면 VS Code를 적극 권장합니다. 최근에 VS Code는 웹 개발을 위한 사실상의 표준 편집기가되었습니다.

다음은 State of JS 설문 조사의 최신 버전의 차트입니다. 이 설문 조사에서는 23,000 명 이상의 개발자가 웹 개발에 대한 선호도에 대해 질문했습니다. 대다수는 VS 코드를 선택했습니다.

이전에 State of JS 설문 조사를 확인하지 않았다면 확인하는 것이 좋습니다. JavaScript로 최신 트렌드에 대한 훌륭한 개요를 제공 할 수 있습니다. 사람들이 사용하기를 좋아하는 도구 및 라이브러리와 곧 포기할 도구 및 라이브러리를 확인할 수 있습니다.

모든 주류 편집자의 가장 큰 특징 중 하나는 확장 기능을 추가 할 수 있다는 것입니다. 꼭 필요한 두 가지 확장 프로그램을 살펴 보겠습니다.

VS Code에서 코드 형식을 자동으로 지정하는 방법 

Prettier는 코드를 더 읽기 쉽고 일관성 있게 만드는 확장입니다.

Stack Overflow에서 무언가를 복사하여 붙여 넣었는데 읽기 어렵다고 가정 해 보겠습니다. 표가 꺼져 있고 줄이 너무 깁니다. 그런 다음 파일을 저장하면 마술처럼 모든 것이 정상적으로 보입니다.

이것이 Prettier가하는 일입니다. 모범 사례에 따라 코드 형식을 지정합니다. 표를 수정하고 줄을 감싸는 것이 아닙니다. 또한 코드 가독성을 높이기 위해 괄호를 추가하고 따옴표와 일치하는지 확인하는 등의 작업을 수행합니다.

작동하려면 먼저 Prettier 확장을 설치해야 합니다. VS Code에서 Extensions 패널로 이동하여 Prettier를 검색 한 다음 설치합니다.

확장 프로그램을 설치해도 기본적으로 저장시 파일 형식이 자동으로 지정되지는 않습니다. 기본 동작은 확장을 설치 한 후 파일 내에서 마우스 오른쪽 버튼을 클릭 한 다음 문서 서식을 선택하는 것입니다. 또는 파일의 일부를 선택한 다음 형식 선택을 선택합니다.

이 작업을 처음 수행 할 때는 기본 포맷터를 선택해야 합니다. VS Code에는 이미 포맷터가 있지만 Prettier만큼 강력하지는 않습니다. 이제 두 개의 포맷터가 있으므로 VS Code에 향후 포맷팅과 관련하여 Prettier를 사용하고 싶다고 알려야 합니다.

저장시 파일 형식을 자동으로 지정하려면 설정을 변경해야 합니다.

VS Code 기본 설정의 설정으로 이동하여 저장시 형식 옵션을 검색합니다. 기본적으로 이것은 false이므로 체크 박스를 선택해야 합니다. 그 후에는 파일을 저장할 때마다 자동으로 서식이 지정됩니다.

하지만 포맷팅은 논란이 될 수 있습니다. 대부분의 경우, 특히 초보자에게는 기본 설정을 적극 권장합니다. 그러나 다른 스타일을 선호하는 경우 사용자 정의 할 수 있습니다.

주석으로 표시하여 특정 행을 무시할 수 있으며 기본 설정을 나열 할 수 있는 rc 파일을 만들 수 있습니다.

프로젝트의 루트 폴더에서 .prettierrc라는 파일을 만들고 몇 가지 옵션을 추가 할 수 있습니다. 일반적인 옵션은 파일에서 큰 따옴표 대신 작은 따옴표를 선호하는 경우입니다. 또는 줄 끝에 세미콜론을 사용하지 않으려는 경우.

이 구성을 사용하면 파일을 저장하면 다른 결과를 볼 수 있습니다.

물론 더 많은 옵션이 있습니다. 더 자세히 알고 싶다면 Prettier의 문서를 확인하세요.

프런트 엔드 프로젝트에 노드가 필요한 이유는 무엇입니까? 

두 번째 필수 확장 프로그램에 도달하기 전에 몇 가지 다른 사항을 설정해야 합니다. 먼저 Node.js에 대해 이야기해야 합니다. Node는 무엇이며 프론트 엔드 개발자로 일하더라도 왜 필요합니까?

노드는 종종 백엔드 개발과 관련이 있지만 전적으로 사실이 아닙니다.

그들이 Node 개발자를 찾고 있는 직업 설명을 본다면 아마도 그들은 실제로 백엔드 개발자를 찾을 것입니다.

그러나 프론트 엔드 개발을 하더라도 노드를 사용할 것입니다.

그렇다면 Node는 무엇이며 사람들이 백엔드 개발을 위한 것이라고 생각하는 이유는 무엇이며 왜 프론트 엔드 개발자로서도 필요합니까?

Node는 JavaScript 런타임입니다. 브라우저 외부에서 JavaScript 파일을 실행합니다. JavaScript 코드를 실행하는 방법에는 두 가지가 있습니다. 웹 사이트의 일부로 사용하고 브라우저에서 전체 웹 사이트를 실행하거나 Node.js를 사용하여 JavaScript 파일 만 실행합니다.

이 예에는 Hello World를 콘솔에 인쇄하는 매우 간단한 JavaScript 파일이 있습니다.

Node가 설치되어 있으면 터미널로 이동하여 이 파일이 있는 폴더로 이동 한 다음 다음과 같이 Node로 실행할 수 있습니다. 파일이 실행되었고 결과가 콘솔에 표시되는 것을 볼 수 있습니다.

이것이 바로 Node가 실제로 JavaScript 파일을 자체적으로 실행하는 도구입니다.

JavaScript는 대부분 두 경우 모두 동일한 방식으로 작동합니다. 그러나 JavaScript가 브라우저에서 수행 할 수 있는 작업과 Node.js와 함께 실행되는 경우에도 차이가 있습니다.

예를 들어, 브라우저에서 실행할 때 JavaScript는 HTML 요소에 액세스하고 수정할 수 있습니다. 이것이 자바 스크립트를 처음 사용하는 요점입니다.

Node에는 JavaScript가 액세스 할 수 있는 주변 HTML 파일이 없습니다. JavaScript는 자체적으로 실행됩니다.

반면 Node에서 JavaScript는 파일 시스템에 액세스하여 파일을 읽고 쓸 수 있습니다.

예를 들어, 프로젝트 스켈레톤을 생성하는 스크립트를 머신에서 실행할 수 있습니다. 파일을 검사하고 실수를 자동으로 수정할 수 있습니다. 또는 테스트 파일을 실행할 수 있습니다.

간단히 말해, Node를 사용하면 삶을 더 쉽게 만드는 스크립트를 실행할 수 있습니다.

노드를 설치하려면 nodejs.org로 이동하여 LTS로 표시된 최신 안정 버전을 설치하십시오. 이미 Node가 있는지 여부가 확실하지 않은 경우 터미널로 이동하여 node -v를 실행하여 확인할 수도 있습니다. 버전 번호를 받으면 Node.js가있는 것입니다.

그렇다면 질문에 답하기 위해 사람들은 왜 Node를 백엔드 개발과 연결합니까? 백엔드 코드가 JavaScript로 작성된 경우 서버는 브라우저 없이 코드를 실행할 수 있는 방법이 필요하기 때문입니다. 예, JavaScript를 사용하는 백엔드 개발자라면 Node.js를 사용할 것입니다. 하지만 Node는 그 이상입니다.

프로젝트를 실행하는 방법 

이제 Node가 설치되었으므로 번들러를 설치할 수 있습니다. 번들러란 무엇입니까? 번들러는 모든 파일을 브라우저에서 실행할 수 있는 깔끔한 패키지로 변환하는 도구입니다.

브라우저에서 파일을 실행할 수 없는 이유는 무엇입니까? 일반 HTML, CSS 및 JavaScript 파일을 사용한다면 맞습니다. 번 들러가 필요하지 않을 수도 있습니다.

그러나 웹 개발 도구는 발전했으며 더 고급 기능을 사용하는 순간 브라우저는 파일을 이해하지 못합니다.

React를 사용하고 있습니까? HTML처럼 보이는 React의 JSX 구문은 JavaScript 구문의 일부가 아닙니다. 그것을 평범한 JavaScript로 바꾸는 도구가 필요합니다. 그렇지 않으면 브라우저에서 실행되지 않습니다.

SCSS 또는 다른 CSS 방언을 사용하고 있습니까? 그런 다음 브라우저가 이해할 수 있도록 일반 CSS로 바꿔야 합니다.

번들러를 사용하려는 또 다른 이유는 코딩 할 때 웹 사이트의 실시간 미리보기를 생성 할 수 있기 때문입니다. 파일을 저장할 때마다 브라우저에서 바로 결과를 볼 수 있습니다.

그렇다면 번들러를 선택하는 방법은 무엇입니까? 몇 가지 옵션이 있습니다. 현재 가장 많이 사용되는 번들러는 웹팩입니다. Webpack은 다양한 구성 옵션이 있는 매우 강력한 도구입니다. 그러나 이러한 많은 옵션도 약점입니다. 설정은 처음 사용하는 경우 쉬운 일이 아닙니다.

최근 인기를 얻은 또 다른 훌륭한 옵션은 Parcel입니다. Parcel에는 webpack과 유사한 기능이 있습니다. 어떤면에서는 더 좋습니다.

좋은 점은 일단 설치하면 구성이 필요 없다는 것입니다. Parcel은 자동으로 무엇을 사용하고 있는지 파악하고 파일을 해석합니다.

React를 사용하고 있습니까? 문제 없습니다. Parcel은 이를 인식하고 JSX를 해석합니다. SCSS를 사용하고 있습니까? 문제 없어요. 소포는 무엇을 해야 하는지 알고 있습니다.

Parcel을 설치하려면 터미널에서 명령을 실행해야 합니다. 노드 패키지 관리자 인 npm을 사용하여 설치하겠습니다. npm은 Node.js와 함께 제공되는 도구입니다. Node를 설치했다면 npm도 있습니다.

-----

https://www.freecodecamp.org/news/how-to-set-up-a-front-end-development-project/