JavaScript 학습 시작: 무료로 해야 하는 이유와 방법

게시 됨: 2022-04-23

JavaScript 학습을 시작하고 싶지만 어디서부터 어떻게 시작해야 할지 모르십니까? 이 게시물에서는 인기 있는 프로그래밍 언어로 자신을 교육하는 데 필요한 지침을 제공합니다.

우리는 어려움과 직업 전망 모두에서 JavaScript 학습을 고려하는 이유에 대해 이야기할 것입니다. 그 후, 이 게시물은 시작하는 방법을 다루게 될 것입니다. 종종 무료로 제공됩니다. 완료되면 JavaScript를 처음부터 스스로 시작하는 방법을 잘 이해하시기 바랍니다.

JavaScript 란 무엇이며 왜 배워야합니까?

JavaScript 교육을 시작하는 방법에 대해 알아보기 전에 그렇게 하는 이유에 대해 이야기해 보겠습니다. 이를 위해 프로그래밍 언어를 사용할 수 있는 용도를 아는 것이 유용합니다.

JavaScript용 애플리케이션

먼저 웹 디자인에 대해 이야기합시다. 웹사이트 구축과 관련하여 JavaScript는 웹사이트를 대화형으로 만드는 부분입니다. HTML은 골격과 콘텐츠를 제공하고 CSS는 사이트의 레이아웃과 디자인을 정의하지만 JavaScript는 기능과 동작을 추가하기 위해 존재합니다. 드롭다운 메뉴, 팝업 및 기타 모달, 문의 양식, 애니메이션 및 대화형 지도의 일부로 가장 일반적으로 찾을 수 있습니다.

자바스크립트 애플리케이션의 예: 대화형 지도

HTML 및 CSS와 마찬가지로 JavaScript도 모든 브라우저에서 이해하고 처리할 수 있는 것입니다.

WordPress에서도 JavaScript의 적용이 증가하고 있습니다. Calypso, WordPress.com용 데스크탑 앱은 완전히 JavaScript, 특히 React 및 Node.js를 기반으로 합니다.

Calypso 스택: 자바스크립트 학습을 시작하는 이유 중 하나
Calypso는 최신 JavaScript 스택을 기반으로 합니다.

2018년 기본 작성 인터페이스로 클래식 WordPress 편집기를 대체한 구텐베르크 편집기도 JavaScript를 주요 기술로 사용합니다.

wordpress 구텐베르크 편집기: 자바스크립트 응용 프로그램의 예

원래 클라이언트 측 언어(사용자 브라우저에서 해석 및 처리됨을 의미)였지만 Node.js 덕분에 이제 서버 측에서도 실행할 수 있습니다. 또한 React Native와 Iconic은 모바일 장치로, Electron은 데스크톱으로 가져왔습니다.

결과적으로 JavaScript의 응용 프로그램은 웹을 훨씬 뛰어 넘습니다. 이를 사용하여 웹 앱 및 백엔드 제품을 만들고 스마트 TV, 사물 인터넷 장치 및 기본 모바일 앱을 실행할 수 있습니다. 또한 플랫폼 간 호환이 가능하기 때문에 어디에서나 작동하는 데스크탑 앱에 전원을 공급할 수 있습니다.

자바스크립트의 장점과 단점

JavaScript를 사용할 수 있는 용도를 아는 것 외에도 장단점을 검토하는 데 도움이 됩니다.

자바스크립트 전문가

프로그래밍 언어로서의 JavaScript의 장점부터 시작하겠습니다.

  • 다 용성 — 위에서 JavaScript의 응용 프로그램의 무수한 영역에 대해 이미 언급했습니다. 웹 사이트, 모바일 및 데스크톱 앱에서 스마트 장치와 게임, 심지어 기계 학습에 이르기까지 사용할 수 없는 것이 거의 없습니다. JavaScript는 또한 프론트엔드와 백엔드 모두에 적합하며 다른 프로그래밍 언어와도 잘 작동합니다. 요컨대, JavaScript는 다재다능한 강국입니다.
  • 초보자 친화성 — JavaScript의 구문은 배우기 쉽습니다. 또한 개발 환경을 구축할 필요가 없으며 브라우저에서 코딩을 시작하기만 하면 됩니다. 또한 이 언어에는 조언과 지원을 위한 대규모 온라인 커뮤니티가 있습니다. 또한 JavaScript는 다른 언어에도 적용되는 기본 개념(예: 객체 지향 프로그래밍)을 배우기에 좋습니다. 마지막으로, 당신에게 도움이 될 수 있는 많은 프레임워크가 있습니다.
  • 속도 — 다른 프로그래밍 언어, 특히 PHP와 같이 서버 측에서 실행되는 언어와 비교할 때 JavaScript는 일반적으로 더 빠르게 실행됩니다. 서버를 컴파일하거나 다시 말할 필요 없이(외부 리소스가 필요하지 않는 한) 브라우저에서 직접 실행할 수 있기 때문에 놀라운 일이 아닙니다. 또한 서버에 대한 수요가 감소합니다. 따라서 상호 작용이 많은 앱이나 사이트를 선택하는 경우가 많습니다.

자바스크립트의 단점

JavaScript에 단점이 있습니까? 물론 완전히 단점이 없는 것은 거의 없습니다. 이 경우 생각해 볼 사항은 다음과 같습니다.

  • 보안 문제 — JavaScript는 사용자 브라우저 내에서 실행되기 때문에 악의적인 의도로 이를 악용할 수 있습니다. 그렇기 때문에 일부 사람들은 기본적으로 브라우저에서 이 기능을 끄도록 선택합니다.
  • 브라우저 간 지원 — 서버 측 스크립트와 달리 브라우저마다 동일한 JavaScript 코드를 다르게 해석하는 경우가 있습니다. 이는 브라우저 간 호환이 가능한 코드를 작성하기 어렵게 만들 수 있습니다.
  • SEO — 검색 엔진이 JavaScript를 얼마나 잘 크롤링할 수 있는지 완전히 명확하지 않으므로 잠재적인 SEO 문제가 있습니다. 어쨌든 SEO 친화적인 방식으로 JavaScript를 구현하는 방법을 배워야 합니다.

직업 전망

최근 몇 년 동안 프로그래밍 언어가 점점 더 대중화되었습니다. 2021년 스택 오버플로 개발자 설문조사에서 전문 개발자들 사이에서 가장 인기 있는 프로그래밍 언어로 선정되었습니다. 9년 연속!

스택 오버플로 개발자 설문 조사 2021 가장 인기 있는 언어

또한 상위 5개 웹 프레임워크도 모두 JavaScript 프레임워크입니다.

스택 오버플로 개발자 설문 조사 2021 가장 인기 있는 웹 프레임워크

언어가 새로운 영역으로 이동함에 따라 점점 더 많은 직업 기회가 열립니다. Devskiller는 2019년에 모든 회사의 72%가 JavaScript 개발자를 찾고 있음을 발견했습니다. 프로그래밍 언어는 인터뷰에서 가장 일반적으로 테스트되는 기술이기도 합니다.

풀스택 개발자의 프론트엔드가 되고 싶다면 JavaScript를 아는 것이 이 과정과 거의 비슷합니다. 또한 게임 개발, 기계 학습 또는 인공 지능에 입문하려는 경우 JavaScript를 아는 것도 유용합니다.

또한 JavaScript에 능숙한 사람들은 좋은 급여를 받을 수 있습니다. 인디드닷컴에 따르면 미국 자바스크립트 개발자의 평균 연봉은 11만1278달러다. 초보자도 $90,000부터 시작할 수 있습니다.

자바 스크립트 개발자 급여 미국 2021

또한 LinkedIn에서 JavaScript를 검색하면 미국에서만 400,000개 이상의 채용 정보가 표시됩니다. 따라서 귀하의 벨트 아래에 JavaScript 기술이 있으면 좋은 일자리 기회와 보수가 좋은 기회 모두에 직면하게 됩니다.

JavaScript는 초보자가 배우기 쉽습니까?

더 나아가 JavaScript의 장점 중 하나는 배우기 쉽다는 것입니다. 그것이 사실임을 보여주기 위해 이제 몇 가지 기본적인 JavaScript 개념과 코드를 살펴보겠습니다. 그렇게 하면 스스로 의견을 형성할 수 있습니다.

코멘트

먼저 댓글에 대해 알아보겠습니다. 대부분의 프로그래밍 언어와 마찬가지로 JavaScript를 사용하면 브라우저에서 실행하지 않는 방식으로 코드에 주석을 달고 주석을 표시할 수 있습니다. 그렇게 하면 오류를 일으키지 않고 작업을 문서화할 수 있습니다.

JavaScript는 한 줄과 여러 줄의 두 가지 유형의 주석을 알고 있습니다. 작성 방법은 다음과 같습니다.

 // Nothing in this line will be executed /* Neither Will Any of This */

PHP에 익숙한 사람들은 두 언어가 같은 방식으로 주석을 표시하기 때문에 집처럼 편안하게 느낄 것입니다.

데이터 출력

JavaScript를 시도하는 가장 간단한 방법 중 하나는 alert() 를 사용하는 것입니다. 이를 사용하여 브라우저 내부의 팝업 창에 메시지를 출력할 수 있습니다.

자바 스크립트 학습 시작 알림 방법

위의 내용을 얻으려면 브라우저 개발자 도구에서 콘솔을 열고 다음 코드를 붙여넣기만 하면 됩니다.

 alert("With JavaScript, it's really easy to make this box appear.");

꽤 이해하기 쉽죠? 이제 Enter 키를 누르면 위와 같은 메시지가 표시되어야 합니다.

alert() 는 사용자에게 데이터를 출력하는 JavaScript 메소드입니다. 괄호 안의 문자열(텍스트 의미)은 팝업의 내용입니다. 코드 줄이 완료되었음을 나타내려면 끝에 세미콜론이 필요합니다.

이 지식으로 이미 스스로 시험해 볼 수 있습니다. 대괄호 안의 문자열을 변경하기만 하면 됩니다(따옴표로 묶어야 함).

콘솔이 있는 자바스크립트 경고 방법 예제

DOM 조작

웹 디자인에서 가장 자주 JavaScript를 사용하여 사용자 인터페이스 또는 DOM을 변경합니다. DOM은 "Document Object Model"의 약자이며 기본적으로 웹 페이지를 구성하는 HTML 요소의 트리입니다. 개발자 도구로 모든 페이지를 검사할 때 확인할 수 있습니다.

브라우저 개발자 도구에서 html 검사

JavaScript는 변경할 수 있는 다양한 옵션을 제공합니다. 어떻게 그렇게 할 수 있고 어떻게 생겼는지 보여주는 예를 살펴보겠습니다.

 <!DOCTYPE html> <html> <body> <h2>Start Learning JavaScript Demo Page</h2> <p></p> <script> document.getElementById("target").innerHTML = "With JavaScript, it's really easy to manipulate the DOM."; </script> </body> </html>

위에서 간단한 HTML 페이지를 만들었습니다. 보시다시피 제목과 ID가 target 인 빈 단락 요소가 있습니다(HTML 클래스와 ID에 대해 모르는 경우 여기에서 자세히 알아볼 수 있습니다).

하단에는 JavaScript 스크립트도 있습니다. 브라우저에서 인식할 수 있도록 <script> 태그로 래핑되었습니다. 그것이하는 일을 이해하기 위해 그것을 분해합시다.

  • document — 웹 페이지인 문서 객체에 액세스합니다.
  • getElementByID("target") — ID에 따라 요소를 찾습니다. 대괄호에는 따옴표를 찾을 ID가 포함됩니다.
  • innerHTML — 요소의 내부 HTML을 변경합니다.

그것들을 합치면 스크립트는 기본적으로 웹 페이지에서 target ID를 가진 요소를 검색하고 내부 HTML에 추가합니다. 그 자리에 포함되어야 하는 것은 큰따옴표 안의 등호 뒤에 있습니다. 결과적으로 브라우저에서 위의 코드로 파일에 액세스하면 다음과 같이 표시됩니다.

자바 스크립트로 dom 조작 배우기 시작

이해하기 어렵지 않죠? 위의 내용이 JavaScript 구문이 작동하는 방식에 대한 빠른 인상을 주었길 바랍니다. 이 JavaScript 치트 시트에서 더 많은 기본 팁을 찾을 수 있습니다.

프레임워크는 어떻습니까?

JavaScript를 배우기 시작하면 프레임워크에 대해 많이 듣게 될 것입니다. 이 용어에 익숙하지 않은 경우 프레임워크는 거의 코드 라이브러리 모음입니다. 여기에는 웹 페이지, 애플리케이션 또는 목표로 하는 모든 것의 공통 기능과 요소가 포함됩니다. 이를 통해 처음부터 작성하지 않고도 이러한 요소와 기능을 만들고 사용할 수 있습니다.

따라서 JavaScript 프레임워크가 삶을 훨씬 더 쉽게 만든다면 바로 사용을 시작해야 하지 않겠습니까?

이것은 실제로 개발자들 사이에서 열띤 토론의 일부입니다. 어떤 사람들은 프레임워크 이전에 기본(일반 의미) JavaScript를 배워야 한다고 말합니다. 다른 사람들은 기초를 다지기 위해 즉시 프레임워크를 시작해야 한다고 생각합니다.

여기에서 이에 대한 확실한 답을 드릴 수는 없지만 분기하기 전에 최소한 JavaScript의 기본 사항을 배우는 것은 항상 좋은 생각일 것입니다. 그렇게 하면 자신이 하고 있는 일을 더 잘 이해하고 더 나은 개발자가 될 수 있습니다.

JavaScript를 무료로 배우려면 어떻게 해야 합니까?

이것은 비용을 지불하지 않고 정확히 어디에서 JavaScript 학습을 시작할 수 있는지에 대한 질문만 남깁니다. 다음은 여정을 시작하는 데 사용할 수 있는 여러 무료 리소스입니다.

  • MDN 웹 문서 — Mozilla 개발자 네트워크는 웹 디자인 지식을 위한 주요 리소스 중 하나로 간주됩니다. CSS를 통한 HTML부터 웹 양식, 접근성 등에 이르기까지 모든 것에 대한 최고 수준의 자습서로 가득합니다. 또한 무료로 볼 수 있는 JavaScript 학습을 위한 광범위한 가이드가 있습니다.
  • W3Schools — MDN과 유사하게 W3Schools에는 JavaScript에 대한 완전한 소개가 있습니다. 실습 예제가 많이 포함된 간단한 강의로 제공됩니다. 이 사이트는 조회 리소스로도 좋습니다. 또한, 좀 더 구조화된 접근 방식을 원하고 비용을 지불할 의향이 있다면 유료 과정을 시도할 수 있습니다.
  • JavaScript.info — 직접 클릭할 수 있는 완전한 JavaScript 온라인 과정입니다. 많은 정보, 시각 자료 및 팁(예: 사용할 코드 편집기 포함). 또한 독자가 질문을 하거나 토론하거나 코드 조각을 공유할 수 있는 댓글 기능이 있습니다.
  • Eloquent JavaScript — 원래 인쇄된 책이었던 Eloquent JavaScript는 온라인과 전자책으로 전체를 무료로 사용할 수 있습니다. 밀도가 높아 중급 개발자에게 더 적합할 수 있습니다.

더 많은 것을 찾고 있다면 학습 자료가 포함된 기사도 있습니다. 또한 Team Treehouse, Udemy 및 Skillshare와 같은 유료 과정이 있습니다.

그렇다면 2022년부터 자바스크립트를 배워야 할까요?

JavaScript는 현대 웹의 필수적인 부분입니다. 웹사이트와 애플리케이션의 많은 기능은 이 동적 프로그래밍 언어 없이는 생각할 수 없습니다. 또한 게임 및 기계 학습과 같은 다른 많은 영역으로 확장되었습니다.

이 게시물에서 우리는 자바스크립트 학습을 시작해야 하는지 그리고 어떻게 시작할 수 있는지에 대한 질문에 답하려고 노력했습니다. 언어가 어떤 역할을 하는지, 무엇을 할 수 있는지, 직업과 급여 기회를 보면 JavaScript에 입문하는 것이 현명한 길이라는 것을 쉽게 알 수 있습니다. WordPress 영역의 누군가 또는 특히 여기에서도 발전하고 있기 때문에 의미가 있습니다.

발을 담그고 싶다면 JavaScript 학습을 시작할 수 있는 무료 온라인 리소스가 많이 있습니다. 바로 시작할 수 있습니다.

공유할 JavaScript 학습을 위한 다른 시작 리소스가 있습니까? 그렇다면 아래 댓글로 해주세요!