재미있는 실험으로 JavaScript 학습을 향상시킵니다

이 기사는 Mark Brown이 동료 검토했습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다!

웹 개발 분야에서의 학습은 끝이 없습니다. 우리 산업은 끊임없이 업데이트되고 개선되었습니다. 불행히도 트렌드를 따라 잡는 것은 소진 될 수 있지만 그럴 필요는 없습니다. 이 기사에서는 작은 실험이 새로운 지식을 배우는 재미 있고 효과적인 방법이 될 수있는 방법을 보여주고 배우고 최신 정보를 얻는 것이 항상 재미 있는지 확인할 것입니다.

키 포인트

작은 실험은 웹 개발 및 JavaScript에서 새로운 지식을 배우는 흥미롭고 효과적인 방법이 될 수 있습니다. 업무 준비, 작업 예약, 마감일을 피하고 즐겁게 할 시간을주는 것과 같은 규칙을 설정함으로써 학습은 더 즐겁고 소진 할 수 있습니다.

실험을 검토하면 기술과 지식을 향상시키는 데 도움이 될 수 있습니다. 더 나은 준비로 실행 중에 문제가 발생하는지 또는 실행 된 작업의 품질을 향상시키는 방법이 귀중한 통찰력을 제공 할 수 있는지 스스로에게 물어보십시오. 영감과 학습을위한 수많은 리소스와 도구가 있습니다. Codepen, Dribbble 또는 Behance와 같은 시각적 자원에서 Node.js, Electron, Cordova 및 React Native와 같은 JavaScript Runtimes, API, 라이브러리, 프레임 워크 및 Raspberry Pi, Arduino 및 Lego® Mindstorms®와 같은 물리적 세계 도구까지. JavaScript 기술을 향상시키는 데 도움이되는 다양한 옵션이 있습니다.

실험의 재미를 유지하십시오
사이드 프로젝트를 했습니까? 당신이 그렇게한다면, 나는 당신이 처음에는 매우 흥미로운 프로젝트를 가지고 있다고 생각하지만, 그것은 빠르게 엉망으로 바뀌 었습니다. 곤경에 처한 것은 재미 있지 않으며 부업 프로젝트와 일의 동기를 심각하게 손상시킬 수 있습니다. 그 주된 이유는 일반적으로 범위 나 스트레스의 확산이기 때문에 여가 시간에 휴식을 취해야합니다. 몇 가지 규칙을 시행함으로써 우리는 불쾌한 놀라움을 발견하지 못하도록 할 수 있습니다.
• <.> 일을 준비하십시오. 실험이 얼마나 큰지 정확히 알고 있는지 확인하십시오. 너무 많으면 관리하기 쉬운 덩어리로 나누어 각각 시작과 끝이있는 또는 포기하십시오.
<.> 작업을 예약하십시오. 매일 밤 늦게까지 머물지 마십시오. 일주일에 1 ~ 2 회, 매번 1-2 시간을 예약하십시오.
• 마감일이 없습니다. 당신을 포함한 모든 사람들은 긴장을 풀어야합니다. 목표를 설정해도 괜찮으며, 그들을 놓치는 것은 괜찮을 것입니다.
자신에게 엔터테인먼트 시간을주십시오. 당신은 미루지 말아야하지만, 인생은 할 일 목록에서 단순히 똑딱 거리는 것 이상입니다. 노동의 과일을 즐기기 위해 시간을 보내십시오.

작은 실험을한다고해서 더 큰 프로젝트의 일부가 될 수 없다는 것을 의미하지는 않습니다. 예를 들어, 데이터 시각화 프로젝트를 예로 들어 보겠습니다. 시간이 좀 걸릴 수 있지만 작은 작업으로 나누기가 쉽습니다.

건설 워크 플로우 를 설정하십시오 흥미로운 데이터를 찾아서 얻으십시오 (이것은 당신에게 영감을 줄 수있는 멋진 API 목록입니다) <.> Node.js를 사용하여 데이터를 얻고 처리하고 ES2015 기능을 사용합니다 데이터를 시각화하기 위해 기술 (Canvas, WebGL, Dom/SVG) 또는 라이브러리 (D3.JS, P5.JS, Three.JS)를 비교하고 선택하십시오. 선택 도구로 데이터를 시각화하십시오
• 나는 Trello 보드를 사용하여 모든 실험을 추적합니다. 그곳에서 실험을 시작하기 전에 나열하고 계획하고 관련 정보를 추가 할 것입니다. 대규모 프로젝트의 경우 프로젝트를 위해 특별히 새로운 보드를 만들고 각 작업에 대한 카드를 추가하는 경향이 있습니다. 모든 대안은 충분합니다. 물건을 녹음하면 내 마음의 소음이 제거 될 수 있습니다! 검토 실험
실제 작업을 통해 학습하는 것 외에도
• 새로운 것들이 실험은 자신을 향상시킬 수있는 훌륭한 기회입니다. 실험을 검토하고 다음 질문을 스스로에게 물어보십시오.
더 나은 준비로 실행 중에 문제가 발생할 수 있습니까? 그렇다면 어떻게해야합니까?
• 실행 된 작업의 품질은 무엇이며 어떻게 개선 할 수 있습니까?
실험을보다 효과적으로 준비 할 수 있습니까?
우리가하는 일을 검토하고 향상시키는 것은 우리에게 경험을 가져다 줄 것입니다 - 그것은 우리 업계에서 매우 중요합니다. 커뮤니케이션과 녹음도 마찬가지입니다. 많은 실험 리뷰는 훌륭한 블로그 게시물을 구성합니다. JavaScript와는 거의 관련이 없지만, 특히 흥미로운 실험 중 하나는 Sass에서 벡터 그래픽을 만드는 것입니다. 여기서 좌표 그래프를 경로로 변환하고 단일 픽셀 박스 그림자로 변환합니다. 이전에 익숙하지 않은 SASS 기능에 대해 배웠을뿐만 아니라 알고리즘도 연구해야했습니다.

영감을 찾고있는 다음에 무엇을 배워야하는지 잘 모르겠다면 영감을 얻기 위해 일부 자원을 유지하는 것이 가장 좋습니다.

시각 효과와 예술을 좋아한다면 Codepen은 시작하기에 좋은 곳입니다. 선택된 작품은 종종 그들이 어떻게 작동하는지 자세히 살펴볼 자격이있는 놀라운 브러시 스트로크로 가득 차 있습니다. 더 모험적인 느낌이 들면 Dribbble 또는 Behance를 사용해보십시오.

sitepoint는 다양한 배경의 많은 저자들에 의해 구동됩니다. 따라서 JavaScript 채널은 모든 종류의 JavaScript 에센스로 가득합니다. 런닝 타임 환경 당신은 이미 JavaScript가 브라우저에서 실행될 수 있다는 것을 알고 있을지 모르지만 JavaScript가 브라우저 밖에서 실행될 수 있다는 것을 알고 있습니까?

전자를 사용하면 기존 HTML, CSS 및 JavaScript를 사용하여 크로스 플랫폼 데스크톱 응용 프로그램을 구축 할 수 있습니다. Cordova를 사용하면 HTML, CSS 및 JavaScript를 사용하여 모바일 애플리케이션을 구축 할 수 있습니다.
• React Native를 사용하면 React 프레임 워크를 사용하여 모바일 애플리케이션을 구축 할 수 있습니다.
• 브라우저 API
지난 몇 년 동안 많은 새로운 API가 브라우저에 도입되어 모든 종류의 흥미로운 일을 할 수 있습니다.
Service Worker API는 오프라인 지원 제공과 같은 다양한 작업을 수행 할 수있는 대규모 API입니다.
WEBRTC는 다른 컴퓨터와 실시간 연결을 설정하고 오디오 및 비디오 데이터를 통과 할 수있는 API입니다.
일부 API를 사용하면 센서를 읽거나 장치가 특정 작업 (예 : 진동)을 수행하도록하는 장치 하드웨어를 사용할 수 있습니다.
주변 조명 센서는 웹 사이트 또는 응용 프로그램을 조정하는 데 사용할 수있는 주변 조명의 밝기에 대한 정보를 제공합니다.
배터리 상태는 매우 자명합니다. 무거운 응용 프로그램은이를 사용하여 전력 저장 모드를 가능하게 할 수 있습니다.
• 지리적 위치는 사용자의 위치에 대한 정보를 제공합니다.
우리는 네트워크 정보를 사용하여 클라이언트에 작은 파일을 제공 할 수 있습니다.
• 알림은 채팅 애플리케이션과 같은 많은 응용 프로그램에 매우 유용합니다.
마우스를 사용하여 입력하는 게임을 구축하고 있습니까? 포인터 잠금 장치는 친구입니다.
근접 센서를 사용하면 사용자와 장치 사이의 거리를 이해할 수 있습니다. 어쩌면 이것은 포옹을 감지하는 데 사용될 수 있습니까?

장치 방향을 통해 방향의 변화를 감지 할 수 있습니다.

진동을 통해 우리는 장치를 진동시킬 수 있습니다. 이는 게임에 적합합니다.
• 라이브러리 및 프레임 워크 대부분의 라이브러리는 작업을 쉽게 수행하도록 설계되었으므로 항상 작업을 경험하는 것이 좋습니다. Angular 및 React와 같은보다 인기있는 라이브러리 및 프레임 워크는 작업을위한 필수품 일 수도 있습니다. 한두 가지 실험은 또한 인터뷰를 준비하는 좋은 방법이 될 수 있습니다.
라이브러리와 프레임 워크의 수명이 제한되어 있음을 알고 있습니다. 그것들은 유용하지만, 당신은 그들이 해결하는 문제를 이해하고 그것들없이 문제를 해결할 수 있어야합니다.

• 구조

  Angular는 많은 팀이 여전히 사용하고있는 MVC 프레임 워크입니다.
  React는 뷰를 렌더링하기위한 라이브러리입니다.
  • 중합체는 웹 구성 요소를 만드는 라이브러리입니다.
  lodash.js, inderscore.js 및 ramda.js는 모두 기능적 프로그래밍 라이브러리입니다. 일부 팀은 사용을 좋아하지만 많은 팀은 그렇지 않습니다. 어느 쪽이든, 기능 프로그래밍을 잘 이해하는 것은 매우 인기있는 기술입니다.
  • 비주얼
  d3.js는 SVG 또는 HTML을 사용하여 그래픽을 렌더링하려는 경우 매우 잘 작동하는 그래픽 및 DOM 작동 라이브러리입니다.
  • p5.js는 처리에서 영감을 얻은 라이브러리 (유연한 소프트웨어 스케치북 및 "& gt; 시각 예술의 맥락에서 코딩하는 방법을 배우는"언어)입니다. 모양을 그리고 계산을 수행 할 수있는 풍부한 일련의 기능이 있습니다.
  Three.js는 WebGL의 어려운 부분을 추상화하기위한 고급 3D API입니다.
  물리적 세계 개인적으로, 나는 물리적 세계에서 일을하기 위해 소프트웨어를 쓸 수있을 때 정말 흥분했습니다. 그렇다면 다음 세트 중 하나를 구매하는 것을 고려하십시오.

  Raspberry Pi는 신용 카드 크기이며 교육 또는 학습에 완벽한 단일 보드 컴퓨터입니다.

  • Arduino는 Raspberry Pi와 유사하지만 전자 측면에 더 중점을 둡니다.
  LEGO® MINDSTORMS®는 LEGO 하드웨어를 제어 할 수있는 마이크로 컴퓨터입니다. 당신은 무엇을 좋아하지 않습니까?
  • Johhny-Five는 Arduino 또는 이와 유사한 장치에 설치할 수있는 로봇 공학 및 사물 인터넷을위한 JavaScript 프레임 워크입니다.
  • 위의 모든 내용은 JavaScript로 프로그래밍되거나 JavaScript를 실행할 수 있습니다.
  결론

  작은 실험은 새로운 것을 배우는 훌륭한 연습입니다. 또 다른 이점은 업계에서 귀중한 일을 개선하는 데 도움이된다는 것입니다. 우리는 몇 가지 규칙을 시행함으로써 실험을 흥미롭게 유지하고 더 많은 것을 배우고 더 나아 지도록 동기를 부여 할 수 있습니다.

  곤경에 처한 사람들을 위해이 기사가 새롭고 흥미로운 실험을 시작하도록 영감을주기를 바랍니다. 다음에 무엇을 다룰 것인지 잘 모르는 사람들에게는이 기사가 당신에게 영감을주기를 바랍니다. 아니면 실험에 대한 좋은 아이디어가 있습니까? 아니면 내가 뭔가를 놓치고 있을까요? 어느 쪽이든, 나는 아래 의견에서 당신을 듣고 싶습니다.

  JavaScript 학습 실험에 대한 자주 질문

  JavaScript 기술을 향상시키기 위해 어떤 실용적인 프로젝트를 수행 할 수 있습니까?
  JavaScript 기술을 향상시키기 위해 할 수있는 실용적인 프로젝트가 많이 있습니다. 예를 들어 간단한 계산기, 디지털 시계 또는 날씨 응용 프로그램을 만들 수 있습니다. 이 프로젝트는 JavaScript가 HTML 및 CSS와 상호 작용하여 기능적 웹 응용 프로그램을 만드는 방법을 이해하는 데 도움이됩니다. 또한 할 일 목록 애플리케이션을 작성해 볼 수도 있습니다.이 응용 프로그램은 JavaScript를 사용하여 DOM (Document Object Models)을 조작하는 방법을 이해하는 데 도움이됩니다.
  • Google 실험에서 JavaScript를 어떻게 사용합니까?

    Google 실험은 JavaScript 기술을 테스트하고 시연 할 수있는 플랫폼입니다. JavaScript를 사용하여 대화식 실험을 만들어 세계와 공유 할 수 있습니다. Google 실험에서 JavaScript를 사용하려면 JavaScript의 작동 방식과 웹 요소를 조작하는 방법에 대한 기본적인 이해가 필요합니다.

    대화식 웹 페이지를 만드는 데 JavaScript의 역할은 무엇입니까?

    JavaScript는 대화식 웹 페이지를 만드는 데 중요한 역할을합니다. 사용자 작업을 기반으로 웹 페이지에서 요소를 조작 할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭하거나 웹 페이지의 애니메이션 요소로 JavaScript를 사용하여 웹 페이지의 내용을 변경할 수 있습니다.

    JavaScript를 사용하여 애니메이션을 만드는 방법은 무엇입니까?

    JavaScript는 웹 페이지에서 애니메이션을 만드는 다양한 방법을 제공합니다. requestAnimationFrame 메소드를 사용하여 부드러운 애니메이션을 만들 수 있습니다. 이 메소드는 브라우저에 애니메이션을 실행하도록 지시하고 브라우저가 지정된 기능을 호출하여 다음 리 그리기 전에 애니메이션을 업데이트하도록 요청합니다.

    웹 개발에서 JavaScript의 중요성은 무엇입니까?

    JavaScript는 웹 개발의 기본 구성 요소입니다. 웹 페이지에서 요소를 조작하여 대화식 및 동적 웹 페이지를 만들 수 있습니다. JavaScript가 없으면 웹 페이지가 정적이며 사용자 작업에 응답하지 않습니다.

    JavaScript 코딩 기술을 어떻게 개선합니까?

    JavaScript 코딩 기술을 향상시키는 가장 좋은 방법은 연습입니다. 계산기 또는 할 일 목록 응용 프로그램을 만드는 것과 같은 다양한 프로젝트를 수행하여 기술을 연습 할 수 있습니다. 코드펜과 같은 플랫폼의 코딩 문제에 참여하여 기술을 테스트 할 수도 있습니다.

    JavaScript를 배우기위한 리소스는 무엇입니까?

    JavaScript를 배우는 데 사용할 수있는 많은 리소스가 있습니다. Codecademy, Freecodecamp 및 Mozilla Developer Network와 같은 웹 사이트는 JavaScript의 무료 자습서와 가이드를 제공합니다. YouTube에서 많은 비디오 자습서를 찾을 수도 있습니다.

    JavaScript 코드를 어떻게 디버그합니까?

    브라우저 개발자 도구에서 콘솔을 사용하여 JavaScript 코드를 디버그 할 수 있습니다. 콘솔을 사용하면 메시지를 기록하고 오류를 표시하며 실시간으로 JavaScript 코드를 실행할 수 있습니다.

    프론트 엔드 개발에서 JavaScript의 역할은 무엇입니까?

    JavaScript는 프론트 엔드 개발의 핵심 부분입니다. 대화식 및 동적 웹 페이지를 만들고 사용자 입력을 확인하고 웹 서버와 통신 할 수 있습니다.

    JavaScript를 사용하여 웹 서버와 어떻게 상호 작용합니까?

    JavaScript를 사용하여 웹 서버에 요청을 보내고 응답을받을 수 있습니다. 이것은 Fetch API 또는 XMLHTTPREQUEST 객체를 사용하여 수행됩니다. 이를 통해 전체 페이지를 다시로드하지 않고 페이지의 일부를 업데이트 할 수 있습니다.

위 내용은 재미있는 실험으로 JavaScript 학습을 향상시킵니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!