목차
당신뿐만이 아닙니다.
JavaScript 애플리케이션을 구축하는 것이 왜 그렇게 미친 짓입니까? ! ?
기본적으로 이것은…
웹 프론트엔드 JS 튜토리얼 JavaScript 개발이 엄청나게 상세한 코드인 이유

JavaScript 개발이 엄청나게 상세한 코드인 이유

Mar 08, 2017 pm 02:47 PM

웹 개발은 정말 재미있어요! 하지만 JavaScript는... 어렵습니다.

웹 개발의 다른 모든 것은 케이크 조각이지만 JavaScript에 대해 더 깊이 파고들면 "모두 깨어 있지만 당신은 혼자다"라는 비극적인 느낌을 지울 수 없습니다. - 남들과 마찬가지로 자신도 모르는 엄청난 기초 지식 콘텐츠는 누구나 알고 있고, 이러한 콘텐츠는 모든 지식을 이해하는 데 도움이 될 수 있습니다.

실제로 문제 해결에 있어 몇 가지 중요한 부분을 놓치고 있는 것이 사실입니다.

그리고 프론트엔드 개발도 사실상 미쳐버렸습니다.

당신뿐만이 아닙니다.

의자를 당겨 앉으세요. 이제 JavaScript 애플리케이션을 작성할 시간입니다.

첫 번째 단계는 로컬 개발 환경을 구축하고 실행하는 것입니다. 그러니 Gulp나 Grunt, 잠깐, 아니... NPM 스크립트도 마찬가지입니다!

WebPACK 또는 Browserify를 사용하시겠습니까? Require.js? ES6으로 업그레이드하시나요? 아니면 전처리에 Babel을 너무 많이 추가하고 있나요?

BDD인가요 아니면 일반 단위 테스트인가요? 어떤 주장 프레임워크를 사용해야 합니까? 물론 명령줄에서 테스트를 실행하는 것도 좋을 것이므로 PhantomJS도 작동할 수 있을까요?

Angular 또는 React? 타다 남은 것? 등뼈?

"Redux는 JavaScript 앱을 위한 예측 가능한 상태 컨테이너입니다."라는 React 문서를 읽었습니다. 당신은 확실히 그 중 하나가 필요합니다.

JavaScript 애플리케이션을 구축하는 것이 왜 그렇게 미친 짓입니까? ! ?

내가 왜 이 모든 것이 미친 짓이라고 말하는지 이해하도록 도와드리겠습니다. 예부터 시작한 다음 예쁜 그림으로 넘어가겠습니다.

React를 위한 "Hello, world!" 애플리케이션입니다.

아아아아

아직 끝나지 않았습니다.

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
  );
로그인 후 복사

여기에는 실제로 몇 가지 단계가 누락되어 있습니다. 예를 들어 browserify를 설치하고 웹에서 이를 실행하기 위해 실제로 수행해야 할 작업은 실제로 콘텐츠를 생성하지 않기 때문입니다. 웹페이지의. ̅ _(ツ)_ /̅

이 작업을 완료한 후에는 마침내 새로운 React Hello World 애플리케이션이 포함된 Bundle.js라는 파일이 필요합니다. —— 프로그램에는 19,374줄이 있습니다. 코드. 그리고 browserify, babelify 및 React-dom만 설치하고 알려지지 않은 수천 줄의 코드를 고려하면 됩니다.

기본적으로 이것은…

Marc는 "Hello World" React 앱을 구현할 준비가 거의 완료되었습니다. pic.twitter.com/ptdg4yteF1

—— Thomas Fuchs (@thomasfuchs) 2016년 3월 12일

일반 JavaScript 코드를 사용하여 Hello World 앱을 작성해 보겠습니다.

아아아아

그렇습니다. 18줄의 코드. index.html 파일을 복사/붙여넣고 두 번 클릭하여 브라우저에 로드할 수 있습니다. 마치다.

이 시점에서 "잠깐만요, React는 방금 작성한 이 작은 것보다 더 많은 일을 할 수 있고 그런 식으로 JavaScript 앱을 작성할 수 없습니다!"라고 생각하신다면 (대부분의 경우) 시간) 사실이지만 모든 것이 왜 미친지 이해하려면 여전히 작은 조치를 취해야 합니다.

약속한 사진입니다.

작업하게 될 대부분의 JavaScript 웹 애플리케이션은 종형 곡선의 중간쯤에 위치합니다. 그리고 중간에 전체 React 스택으로 시작하면 처음부터 애플리케이션을 엄청나게 과도하게 엔지니어링하게 됩니다.

그래서 모든 것이 미쳐가는 것입니다. 당신이 생각하는 이러한 도구의 대부분은 문제를 해결하는 데 필요하지만 그런 문제가 발생한 적이 없으며 앞으로도 그런 문제가 발생하지 않을 것입니다.

동일 이미지:

기본적으로 모든 사람이 자신의 앱을 과도하게 디자인하고 이를 깨닫기 때문에 Javascript 개발 상태가 너무 장황해졌습니다.

JavaScript 애플리케이션을 어떻게 시작해야 합니까? React나 Angular와 같은 도구를 사용해야 합니까? 패키지 관리자를 사용해야 하나요? 그렇지 않다면 어떻게 해야 합니까? 테스트가 필요한가요? 마크업을 Javascript로 생성해야 합니까? 이 모든 것은 기본적으로 대규모 기술 스택을 출시하기 전에 스스로에게 물어봐야 할 질문입니다.

JavaScript 애플리케이션을 시작할 때 핵심은 앱이 결국 도달할 것으로 생각되는 복잡성 수준 바로 앞에 있는 종형 곡선의 지점을 선택하는 것입니다.

거짓말이 아닙니다. 이를 확인하려면 경험이 필요합니다. 하지만 여기에는 대부분의 JavaScript 앱을 실행할 수 있는 꽤 큰 장점이 있습니다. jQuery와 클라이언트측 템플릿, 그리고 제품 파일을 연결하고 축소하기 위한 매우 쉬운 빌드 도구(백엔드 아키텍처가 아직 그렇게 하지 않는다고 가정할 경우)입니다. ).

Javascript 앱을 올바르게 구축하는 방법을 안다면 프레임워크나 npm/requir/webPack 또는 ES6를 언제, 왜 사용해야 하는지, 언제 테스트를 작성해야 하는지, 언제 앱을 작성해야 하는지 이해하기 시작할 것입니다. 로컬 실행과 브라우저에서의 실행 등을 테스트하면 이러한 모든 질문이 나타납니다.

JavaScript 개발 지식으로 이러한 격차를 메우는 데 관심이 있으십니까? 그 과정에서 JavaScript 애플리케이션을 과도하게 엔지니어링하고 압도당하는 느낌을 피하고 싶으십니까? 그건 나중에 집중적으로 다룰 예정이니 계속 지켜봐주세요!


위 내용은 JavaScript 개발이 엄청나게 상세한 코드인 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

권장되는 AI 지원 프로그래밍 도구 4가지 권장되는 AI 지원 프로그래밍 도구 4가지 Apr 22, 2024 pm 05:34 PM

이 AI 지원 프로그래밍 도구는 급속한 AI 개발 단계에서 유용한 AI 지원 프로그래밍 도구를 많이 발굴했습니다. AI 지원 프로그래밍 도구는 개발 효율성을 높이고, 코드 품질을 향상시키며, 버그 발생률을 줄일 수 있습니다. 이는 현대 소프트웨어 개발 프로세스에서 중요한 보조자입니다. 오늘 Dayao는 4가지 AI 지원 프로그래밍 도구(모두 C# 언어 지원)를 공유하겠습니다. 이 도구가 모든 사람에게 도움이 되기를 바랍니다. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot은 더 빠르고 적은 노력으로 코드를 작성하는 데 도움이 되는 AI 코딩 도우미이므로 문제 해결과 협업에 더 집중할 수 있습니다. 힘내

Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 알아보세요. Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 알아보세요. Mar 28, 2024 pm 10:00 PM

Go 언어 개발 모바일 애플리케이션 튜토리얼 모바일 애플리케이션 시장이 지속적으로 성장함에 따라 점점 더 많은 개발자가 Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 모색하기 시작했습니다. 간단하고 효율적인 프로그래밍 언어인 Go 언어는 모바일 애플리케이션 개발에서도 강력한 잠재력을 보여주었습니다. 이 기사에서는 Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 자세히 소개하고 독자가 빠르게 시작하고 자신의 모바일 애플리케이션 개발을 시작할 수 있도록 특정 코드 예제를 첨부합니다. 1. 준비 시작하기 전에 개발 환경과 도구를 준비해야 합니다. 머리

최고의 AI 프로그래머는 누구일까요? Devin, Tongyi Lingma 및 SWE 에이전트의 잠재력을 살펴보세요. 최고의 AI 프로그래머는 누구일까요? Devin, Tongyi Lingma 및 SWE 에이전트의 잠재력을 살펴보세요. Apr 07, 2024 am 09:10 AM

세계 최초의 AI 프로그래머 데빈(Devin)이 태어난 지 한 달도 채 안 된 2022년 3월 3일, 프린스턴 대학의 NLP팀은 오픈소스 AI 프로그래머 SWE-에이전트를 개발했습니다. GPT-4 모델을 활용하여 GitHub 리포지토리의 문제를 자동으로 해결합니다. SWE-bench 테스트 세트에서 SWE-agent의 성능은 Devin과 유사하며 평균 93초가 걸리고 문제의 12.29%를 해결합니다. SWE-agent는 전용 터미널과 상호 작용하여 파일 내용을 열고 검색하고, 자동 구문 검사를 사용하고, 특정 줄을 편집하고, 테스트를 작성 및 실행할 수 있습니다. (참고: 위 내용은 원문 내용을 약간 조정한 것이지만 원문의 핵심 정보는 그대로 유지되며 지정된 단어 수 제한을 초과하지 않습니다.) SWE-A

가장 인기 있는 다섯 가지 Go 언어 라이브러리 요약: 개발을 위한 필수 도구 가장 인기 있는 다섯 가지 Go 언어 라이브러리 요약: 개발을 위한 필수 도구 Feb 22, 2024 pm 02:33 PM

가장 인기 있는 다섯 가지 Go 언어 라이브러리 요약: Go 언어는 탄생 이후 광범위한 관심과 적용을 받아왔습니다. 새롭게 떠오르는 효율적이고 간결한 프로그래밍 언어인 Go의 급속한 발전은 풍부한 오픈 소스 라이브러리의 지원과 불가분의 관계입니다. 이 기사에서는 인기 있는 Go 언어 라이브러리 5개를 소개합니다. 이러한 라이브러리는 Go 개발에서 중요한 역할을 하며 개발자에게 강력한 기능과 편리한 개발 경험을 제공합니다. 동시에 이러한 라이브러리의 용도와 기능을 더 잘 이해하기 위해 구체적인 코드 예제를 통해 설명하겠습니다.

VSCode 이해: 이 도구는 어떤 용도로 사용됩니까? VSCode 이해: 이 도구는 어떤 용도로 사용됩니까? Mar 25, 2024 pm 03:06 PM

"VSCode 이해: 이 도구는 어떤 용도로 사용됩니까?" 》프로그래머로서 초보자이든 숙련된 개발자이든 코드 편집 도구를 사용하지 않으면 할 수 없습니다. 많은 편집 도구 중에서 Visual Studio Code(약칭 VSCode)는 가볍고 강력한 오픈 소스 코드 편집기로 개발자들 사이에서 매우 인기가 높습니다. 그렇다면 VSCode는 정확히 어떤 용도로 사용되나요? 이 기사에서는 VSCode의 기능과 사용법을 자세히 살펴보고 독자에게 도움이 되는 구체적인 코드 예제를 제공합니다.

웹 개발에서 PHP는 프런트엔드인가요, 백엔드인가요? 웹 개발에서 PHP는 프런트엔드인가요, 백엔드인가요? Mar 24, 2024 pm 02:18 PM

PHP는 웹 개발의 백엔드에 속합니다. PHP는 주로 서버 측 로직을 처리하고 동적 웹 콘텐츠를 생성하는 데 사용되는 서버 측 스크립팅 언어입니다. 프런트엔드 기술과 비교하여 PHP는 데이터베이스와의 상호 작용, 사용자 요청 처리, 페이지 콘텐츠 생성과 같은 백엔드 작업에 더 많이 사용됩니다. 다음으로, 백엔드 개발에서 PHP 적용을 설명하기 위해 특정 코드 예제가 사용됩니다. 먼저 데이터베이스에 연결하고 데이터를 쿼리하기 위한 간단한 PHP 코드 예제를 살펴보겠습니다.

Android 개발에 가장 적합한 Linux 배포판은 무엇입니까? Android 개발에 가장 적합한 Linux 배포판은 무엇입니까? Mar 14, 2024 pm 12:30 PM

Android 개발은 바쁘고 흥미로운 작업이며, 개발에 적합한 Linux 배포판을 선택하는 것이 특히 중요합니다. 많은 Linux 배포판 중에서 Android 개발에 가장 적합한 배포판은 무엇입니까? 이 기사에서는 이 문제를 여러 측면에서 살펴보고 구체적인 코드 예제를 제공합니다. 먼저 현재 인기 있는 여러 Linux 배포판(Ubuntu, Fedora, Debian, CentOS 등)을 살펴보겠습니다. 이들은 모두 고유한 장점과 특징을 가지고 있습니다.

Go 언어 프런트엔드 기술 탐색: 프런트엔드 개발을 위한 새로운 비전 Go 언어 프런트엔드 기술 탐색: 프런트엔드 개발을 위한 새로운 비전 Mar 28, 2024 pm 01:06 PM

빠르고 효율적인 프로그래밍 언어인 Go 언어는 백엔드 개발 분야에서 널리 사용됩니다. 그러나 Go 언어를 프런트엔드 개발과 연관시키는 사람은 거의 없습니다. 실제로 프런트엔드 개발에 Go 언어를 사용하면 효율성이 향상될 뿐만 아니라 개발자에게 새로운 지평을 열어줄 수도 있습니다. 이 기사에서는 프런트엔드 개발에 Go 언어를 사용할 수 있는 가능성을 살펴보고 독자가 이 영역을 더 잘 이해할 수 있도록 구체적인 코드 예제를 제공합니다. 전통적인 프런트엔드 개발에서는 사용자 인터페이스를 구축하기 위해 JavaScript, HTML, CSS를 사용하는 경우가 많습니다.

See all articles