코드 시를 작성하여 코딩 배우기

2008년으로 돌아가서 저는 디자인을 공부하기 시작했고 코드를 보고 얼마나 겁이 났는지 분명히 기억합니다. 코딩 수업을 몇 번 받았는데 코딩 경험이 없었기 때문에 처음 접하는 코드를 이해하는 데 어려움을 겪었습니다. 갑자기, 내가 영어에서 익숙했던 단어(예: "new", "return" 및 "throw/catch")가 완전히 새로운 의미를 갖게 되었습니다. 난해한 구문, 세미콜론, 대괄호 및 완전히 새로운 규칙은 나를 더 쉽게 만들지 않았습니다.

JavaScript를 처음 사용하거나 기술 세트에 JavaScript를 추가하는 데 어려움이 있는 경우 이러한 장벽을 극복할 수 있는 방법이 있을 수 있습니다. 당신은 확실히 혼자가 아니며 코딩을 배우는 것이 깨기 힘든 너트라고 생각할 모든 권리가 있습니다.

코딩을 배우는 것이 왜 그렇게 힘든가요?

다음은 사람들이 JavaScript(또는 모든 코딩 언어)를 배우거나 관심을 갖는 데 어려움을 겪는 이유에 대한 몇 가지 오해입니다 .

• 코드는 비밀스럽고 순전히 기능적이며 무섭습니다.
• 코드는 기계만을 위한 것이므로 사람들은 언급되거나 참여하는 느낌이 들지 않습니다.
• 코드는 사용 사례가 완전히 다르고 이전에 본 것과 매우 다르게 보이기 때문에 언어로 취급되지 않습니다.
• 사람들은 고정 관념(사악한 해커, 아마도 일부 Matrix 친구들)을 생각하기 때문에 고정관념에 자신을 동일시하지 않습니다.
  

개발자는 코드를 매우 특정한 방식으로 처리해야 합니다. 심지어는 매우 다른(매우 논리적인) 방식으로 생각하는 경우에도 마찬가지입니다. 코딩 언어는 매우 엄격하고 편협합니다. 단일 문자로 인해 시스템이 의미를 이해하지 못하고 응용 프로그램이 중단될 수 있습니다. 당신은 인간의 언어를 말하고 쓸 때 아는 어떤 것을 무시하고 무시해야 합니다. (그런데 새로운 인간 언어를 배울 때도 마찬가지입니다).

그러나 웹상의 모든 프로그래밍 언어, 문서 또는 비디오 자습서가 "인간에서 프로그래밍 언어로의 전환"을 염두에 두고 제작된 것은 아닙니다. 물론 그럴 필요는 없습니다. 결국 코드의 주요 목적은 기계에게 무엇을 해야 하는지 알려주는 것입니다.

그래도 그런 목적 때문에 비교할 기회가 없고 당신이 말하는 언어(어휘와 규칙)는 프로그래밍 언어를 배우는 데 쓸모가 없어 보입니다. JavaScript 언어에는 "사랑"이라는 단어가 없으며 "사랑합니다" 라고 말하는 것도 이치에 맞지 않습니다. 기계(또는 브라우저)는 단순히 사랑(아직?)을 알지 못하거나 관심을 갖지 않습니다. 이 "완전히 새로운" 느낌과 "어디서부터 시작해야 할지 모르겠다"는 느낌은 지옥처럼 두려울 수 있습니다.

이것이 내가 여기 있는 이유입니다. 인간 언어 지식을 유지하고 JavaScript를 다른 인간 언어처럼 취급함으로써 JavaScript를 훨씬 더 쉽고 예술적으로 배울 수 있다고 생각합니다. 작은 예를 들어 설명하겠습니다.

재미있는 사실 : 일부 프로그래밍 언어는 실제로 한 프로그래밍 언어에서 다른 프로그래밍 언어로의 전환을 염두에 두고 있습니다. 이것이 바로 하나의 언어를 배우는 것만으로도 많은 프로그래밍 언어를 배우는 것이 훨씬 더 쉬운 이유입니다.

작은 예

많은 경우에 JavaScript 코드를 실행하려고 할 때 예를 들어 HTML 요소와 상호 작용할 수 있도록 "문서"(기본적으로 웹 사이트, 사용자가 방문할 때마다 다운로드하는 것)가 준비되기를 원합니다. 순수한 JavaScript에서는 다음과 같은 것을 우연히 발견할 수 있습니다.

 (function() { // Your code goes here })();

(Yuck! 이 경우 대괄호 안에 함수를 정의하고 바로 뒤에 또 다른 대괄호를 붙여서 호출한다. 이것을 IIFE라고 한다.)

또는 때때로 다음과 같이:

 if (document.readyState === 'complete') { // Your code goes here }

첫 번째 스니펫은 확실히 설명이 필요하지만 두 번째 스니펫(그리고 아마도 약간의 환상)에서는 단지 보기만 해도 다른 일이 발생하도록 충족되어야 하는 조건이 있다는 것을 이해할 수 있습니다.

하지만 다음과 같이 상상해 보십시오.

 onceUponATime(function () { // Your code (story) goes here })

"옛날 옛적에"는 어린아이도 이해할 수 있는 것입니다. 이론적으로 동일한 작업을 수행하면서 개발자(어린 시절의 기억을 참조하여)에 대해 설명합니다. 이것이 내가 "인간에서 코딩 언어로의 전환"을 염두에 두고 생각하는 것입니다.

"기능"에 대한 간략한 참고 사항 : 기능은 기본적으로 사용자가 호출할 때까지 휴면 상태인 기술입니다. "읽기"는 function read() { … } 로, read read() ) 와 같은 것을 읽고 싶을 때 호출됩니다. 또한 "익명 함수"라고 하는 것이 있습니다. 즉 "function() { … } (위의 스니펫에서와 같이 이름 없음)은 기본적으로 기술로 간주하지 않는 "일회성/일회성 작업"입니다. , "버튼을 누르다"와 같이.

판도를 바꾸다: 메시지에서 기본으로

이 아이디어를 조금 더 살펴보겠습니다. 위의 이유와 오해를 뒤집어서 살펴보겠습니다.

작은 시.

자바스크립트로 작성되었습니다.

인간을 위해 만들어졌습니다.

두 사람의 사랑에 대해.

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

기능적이지 않습니다. 현재 기계용이 아닙니다. 읽고 이해하기 위함입니다.

시의 메시지를 받았다면 실제로 JavaScript 코드를 이해한 것입니다. 영어와 비교했을 수도 있습니다.

이제 당신은 스스로에게 이렇게 물을 수 있습니다. 나는 이것을 이해하지만 왜 이렇게 쓰여졌습니까? 이 언어의 규칙(문법)은 무엇입니까? "나"(기술적인 의미에서)의 의미는 무엇이며 이 코드가 영어와 비슷하게 보이는 이유는 무엇입니까?

규칙, 어휘 및 변수

프로그래밍 언어를 배울 때 이해해야 할 가장 중요한 것 중 하나 는 변수의 개념입니다 .

모든 인간 언어에는 규칙(문법)과 많은 어휘(미리 정의됨)가 있습니다. 분명히, 이 두 가지 모두 언어를 말할 수 있으려면 먼저 배워야 합니다.

JavaScript는 다른 많은 프로그래밍 언어와 마찬가지로 자체 규칙 집합(예 . 단어 사이 또는 if 문이 작성되는 방법)과 자체 어휘( if , document , window , Event 등)와 함께 제공됩니다. 이러한 키워드는 JavaScript(및 브라우저)에 의해 예약(또는 '사전 정의')되며 각각 고유한 목적이 있습니다.

하지만 앞서 말했듯이 영어로 알고 있는 단어와 문장을 비교할 수 있는 기회는 없는 것 같습니다. 왜냐하면 동등한 것이 없기 때문입니다.

이것은 변수가 들어오는 곳입니다. 당신(개발자)은 기계와 개발자가 무엇을 의미하는지 이해하게 하기 위해 변수를 정의할 수 있습니다(또는 심지어 해야 합니다). 변수는 다양한 형태를 가질 수 있습니다(따라서 이름). 변수는 단어와 문자(문자열)의 사슬, 숫자, 동작(함수) 또는 컬렉션(배열)일 수 있습니다. 원하는대로 말만 해.

모든 언어에는 아마도 사랑이라는 단어가 있을 것입니다. 어떤 의미인지는 알겠지만 너무 주관적이기 때문에 실제로는 그렇지 않습니다. 그러나 여전히 그것에 대한 단어가 있습니다.

그러나 JavaScript에는 "사랑"이 있다고 말할 때까지 없습니다. 원하는 대로 될 수 있습니다.

 var love = { color: 'red', duration: 365, loveTarget: 'cats', }; // a simple variable expression, // where love is an object “{ … }”, a thing // with some properties (color, duration, loveTarget).
 const love2 = { color: 'purple', duration: 'forever', loveTarget: 'dogs', };
 // 또한 변수 표현식, 여기서 love2(상수), // 재정의/완전히 덮어쓸 수 없음: // love2 = undefined; // => 작동하지 않음
 // ("undefined"는 미리 정의된 자바스크립트 키워드입니다. // 기본적으로 "값이 없습니다"라고 말합니다)

JavaScript에 사전 정의된 것(JavaScript 규칙 및 어휘)과 개발자가 실제로 사용자 정의한 것('응용 프로그램 논리' 또는 '비즈니스 논리'라고도 함)을 구별할 수 있는 것이 중요합니다.

위에 쓴 시로 돌아가면:

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

이러한 표현식은 다음 JavaScript 어휘/규칙 세트에서 가져옵니다.

 if (...) { ... } // if statement: when ... is met, do things in { ... } { inLove: true, } // an "object" with some info, some thing in the world. // can contain other info, and "skills" (functions). // "inLove" is a custom property, // "true" is pre-defined in javascript, (meaning: "yes") // and the value of "inLove". . // needed to access an objects property "my name: me.name" getDistanceTo() // an expression to "call" a function (a "skill"). // getDistanceTo is custom (not JavaScript), and a function, // so it can be executed / called upon with the "()" after. // sometimes you can pass arguments in those brackets (like "position") // to change the outcome of a function.

 me // an object, some thing in the world you // an object, some thing in the world position // an info about "you", accessed by the "." getDistanceTo // a skill of me, accessed by the "." getDistanceTo() // the skill, with javascript grammar telling: do it. getDistanceTo(position) // same, but do it with "position". setFeelings // another skill of me, accessed by the "." setFeelings({ inLove: true }); // the skill, with some instructions (an object).

 // This is how the definition of a being (me/you) could look like var me = { position: {x: 0, y: 0} // some coordinates, maybe getDistanceTo: function(position) { // calculate the distance, relative to own position }, setFeelings: function(feelings) { // handle those feelings... } } var you = { position: {x: 0, y: 0} // some coordinates, maybe } // the poem itself if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

더 큰 예: 대화형 코드 시

이것이 제 개인 프로젝트 LoveBits가 된 방법입니다. LoveBits는 코드 학습/스토리텔링 경험입니다.

다음을 통해 JavaScript/코딩에 관심이 있는 사람들을 얻으려고 합니다.

• 가독성과 인간의 언어를 최우선으로 생각합니다.
• 코드와 예술을 결합하는 것은 독자가 이미 익숙할 것입니다.

스토리적으로는 약 두 개의 비트(직사각형 존재)입니다. Bits 중 하나(blueBit)는 낭만적인 것으로 JavaScript 사랑의 시를 다른 Bit(purpleBit)에 씁니다.

LoveBits를 시작하면 여러 러브시(JavaScript로 작성) 중 하나를 선택할 수 있습니다. 각 시는 프로그래밍에 익숙하지 않은 사람들도 이해할 수 있도록 쓰여진 코드 조각을 가지고 있습니다. 유일한 요구 사항은 영어입니다.

예를 들어 "첫눈에 반한 사랑"(실제로는 LoveBits의 시 중 하나)은 blueBit이 기본적으로 "내가 당신의 위치에 충분히 가까워지면, 나는 '내 감정을 inLove: true 이다.”

이 시의 특별한 점은 아래의 "재생" 버튼을 누르기만 하면 "실행" 또는 "재생"할 수 있다는 것입니다. "첫눈에 반한 사랑"의 경우 숫자와 함께 파란색과 보라색 사각형이 표시됩니다. 이미 짐작하셨겠지만, 그것들은 시에서 언급된 두 개의 비트이며, blueBit 아래의 숫자는 실제로 blueBit과 purpleBit 사이의 거리입니다.

시에서 알 수 있듯이 blueBit이 purpleBit 사이의 거리를 줄여 사랑에 빠지도록 할 수 있습니다. 맞습니까? 그래서 당신은 무엇을 할 수 있습니까? blueBit과 상호 작용하고 끌어서 사랑에 빠지게 할 수 있습니다. 그러나 때로는 하나 이상의 결과가 있을 수 있으므로 주의하십시오.

누군가는 실제로 당신이 여기 기계라고 말할 수도 있습니다. 당신은 두 디지털 존재가 사랑에 빠지도록 행동하고 도울 수 있도록 JavaScript 코드를 해석해야 하는 사람입니다.

여기에서 어디로 가야합니까?

어려움을 겪고 있는 개발자라면 JavaScript를 인간의 언어처럼 취급하고 실제로 수행하는 작업이 아니라 먼저 수행해야 하는 코드 조각을 이해하십시오.

다음은 다음 작업을 수행하는 것이 좋습니다.

• 규칙, 어휘 및 변수를 함께 결합하여 응용 프로그램 논리를 형성하는 전체 응용 프로그램에 대한 예제와 코드를 직접 사용하는 것을 항상 선호합니다.
• 응용 프로그램 논리는 위의 코드 예제에서와 같이 공백을 채우는 데 도움이 되는 이야기를 알려줍니다. lodash 와 같은 코드 라이브러리 및 유틸리티는 JavaScript 코드를 읽고 이해할 수 있게 된 후에 도움이 될 새로운 어휘만 제공합니다.
• 기존 코드를 검토하고 해당 기능을 반영하는 이름을 가진 작은 기능으로 분해하십시오. 인간과 기계를 동일하게 다루는 코드를 작성하십시오. 문장처럼 읽을 수 있도록 코드를 작성하십시오. 필요할 때마다 주석을 사용하십시오. 생각해 보세요: 이것을 인간의 언어로 (다른 개발자에게) 어떻게 표현할까요?

결론

코드를 외계인이 발명한 것이 아니라 인간의 언어로 다루기 시작하면 코드를 배우는 것이 더 쉬워질 수 있습니다. 애플리케이션 로직을 위한 언어 기능(내장)과 변수/사용자 정의 코드를 구별하는 방법을 배우는 것이 중요합니다. 응용 프로그램 논리를 이해할 수 있으면 언어 기능을 몰라도 개선하고 변경할 수 있는 강력한 위치에 있게 됩니다.

기본 전 메시지 : 모든 코드 조각의 메시지를 이해하면 JavaScript의 기본이 자연스럽게 따를 것입니다. 누군가가 "나는 그 언어를 이해하지만 아직 말하지는 못합니다"라고 말하는 것을 얼마나 많이 들었습니까? 인간과 코딩 언어 모두를 배우는 데 적용할 수 있고 적용 해야 하는 자연스러운 과정입니다.

또한 코드에는 명확한 기능적 목적이 있지만 항상 그런 것은 아니라는 점을 항상 염두에 두십시오. 인간의 언어도 한때는 순전히 기능적이었지만, 사람들을 완전히 다른 방식으로 연결하는 시와 노래(JavaScript 노래, 누구라도?)가 나타났습니다. 여기에서도 동일하게 적용될 수 있다고 생각하거나 희망합니다.

항상 코드 프로젝트를 탐색하고 시를 직접 작성해 보십시오(아마도 다른 프로그래밍 언어로도 가능)? 나는 LoveBits 프로젝트를 만드는 것을 즐겼으며 아래 의견에서 귀하의 아이디어를 보고 싶습니다!

추가 읽기

• "헤밍웨이가 자바스크립트를 썼다면" 앵거스 크롤
  이것은 내가 LoveBits 이후에 실제로 우연히 발견한 내가 가장 좋아하는 책 중 하나입니다. 몇몇 유명한 시인과 예술가, 그리고 그들이 JavaScript 코드 조각을 어떻게 작성했는지에 관한 것입니다. 재미있다!