모든 자바스크립트 개발자가 알아야 할 33가지 기본 사항

 

모든 자바스크립트 개발자가 알아야 할 33가지 기본 사항 

 

React를 배웠고, npm 설치를 마스터했으며, webpack.config.js를 다룰 수 있습니다. 모듈만 있다면 무엇이든 할 수 있고, 모든 것을 위한 모듈이 있는 것처럼 보입니다. 하지만 모듈을 찾을 수 없다면 어떻게 될까요? 스택 오버플로에서 답을 찾을 수 없을 때 어디로 가야 할까요? 탄탄한 개발자가 된 것 같지만 속 한구석에서 무언가 갉아먹는 듯한 느낌이 듭니다. 당신은 그것에 대해 생각하고 싶지 않지만 거기에 있습니다. 사실... 이 중 많은 부분이 여러분에게는 마법과도 같습니다. 예시가 없다면 어떤 경우에는 어떻게 해야 할지 전혀 모를 수도 있습니다.

 

어떻게 해야 할까요? 누군가 알게 되면 어떻게 하나요? 화이트보드가 무서운 진짜 이유가 여기에 있지 않을까요? 더 이상 걱정하지 마세요. 우리 모두 겪어본 적이 있습니다. 해결책이 바로 눈앞에 있는데도 여러분은 이를 회피하고 있다는 것을 잘 알고 있습니다. 이제는 자바스크립트를 제대로 이해하고 컴퓨터 과학을 조금이라도 배워야 할 때입니다. 

 

수행해야 할 작업은 다음과 같습니다: 

 

1. JavaScript와 같은 고급 코드 줄이 호출 스택에서 스택 프레임으로 변환되고 실행되는 방식을 이해합니다(고급 언어에서 머신 코드까지).
2. 주소, 할당된 공간, 이진 표현(가수라는 단어를 접하지 않았다면 아직 충분히 알지 못합니다)에 이르기까지 다양한 기본 유형이 메모리에 저장되는 방식을 이해합니다.
3. 값 유형과 참조 유형의 차이점, 값 할당과 포인터 할당을 이해합니다.
4. 암시적 타이핑, 명시적 타이핑, 명목 타이핑, 구조적 타이핑, 덕 타이핑을 이해합니다.
5. == 대 === 대 typeof를 이해합니다.
6. 함수 범위, 블록 범위, 어휘 범위를 이해합니다.
7. 표현식과 명령문의 차이점과 표현식을 평가하는 것이 무엇을 의미하는지 이해합니다.
8. 표현식이 평가되고, 인수가 전달되고, 결과가 반환될 때 메모리/호출 스택에서 무슨 일이 일어나는지(또는 일어나지 않는지)와 변수에서 값이 할당되거나 검색될 때를 이해합니다.
9. IIFE, 모듈, 네임스페이스를 이해합니다. 그리고 ES6 모듈과 블록 범위가 IIFE를 완전히 대체하지 못하는 이유를 이해합니다.
10. JavaScript에서 메시지 큐와 이벤트 루프가 구체적으로 어떻게 작동하는지, 타이밍, 멈춤, 비동기 등에 어떤 영향을 미치는지 이해합니다.
11. (브라우저) setTimeout, setInterval, requestAnimationFrame을 이해합니다.
12. 어떤 작업이 더 비용이 많이 들고 그 이유가 무엇인지 이해합니다(비용이 많이 든다는 것은 처리 시간이나 메모리가 더 많이 든다는 의미입니다). 반복 횟수가 실제로 성능에 가장 큰 영향을 미치는가(일반적으로)? Big O 표기법은 실제로 무엇을 말해주는가? jsperf와 performance.now를 사용하여 몇 가지 테스트를 실행하고 알아냅니다.
13. opts와 deopts가 무엇인지, 그리고 다양한 JavaScript 엔진에서 최신 정보를 유지하는 방법을 이해합니다.
14. JavaScript와 다른 언어에서 숫자를 2진수, 16진수, 10진수, 과학적 표기법 등으로 표현하는 방법을 이해합니다.
15. 비트 연산자, 형식화된 배열, 배열 버퍼가 작동하는 방식을 이해합니다. RGBA를 이해하여 2진 데이터를 조작하는 방법을 이해합니다.
16. (브라우저) 메모리 내 DOM과 레이아웃 트리가 어떻게 빌드되고 수정되는지, 리플로우/레이아웃, 합성 및 리페인트가 언제/어떻게 트리거되는지 이해합니다.
17. new, constructor, instanceof, 그리고 instantiate를 이해합니다. 프로토타입 상속과 프로토타입 체인을 이해합니다. 그리고
18. JavaScript가 클래스를 사용하더라도 여전히 클래식 상속을 달성하지 못하는 이유.
19. Object.create와 Object.assign의 차이점을 이해합니다.
20. 팩토리와 클래스를 이해하고 이러한 접근 방식이 어떻게 다른지 이해합니다.
21. 멤버 속성과 프로토타입의 속성의 차이점을 이해합니다.
22. 순수 함수, 부작용, 상태 변형을 이해합니다.
23. 거의 모든 for/while 루프를 map/reduce/filter로 대체할 수 있는 방법과 그 이유를 이해합니다.
24. 람다가 무엇인지(예: C#의 LINQ)와 map/reduce/filter + 화살표 함수가 코드에 대한 생각을 어떻게 바꾸는지 이해합니다.
25. 클로저가 어떻게 작동하는지, 호출 스택에서 어떻게 보이는지 이해합니다.
26. 고차 함수가 어떻게 작동하는지, 언제 사용해야 하는지 이해합니다.
27. 추상 데이터 구조가 무엇인지, JavaScript에서 추상 데이터 구조를 만드는 방법, 그리고 일반적인 사용 사례를 이해합니다.
28. 재귀를 이해하고 추상 데이터 구조를 만드는 방법을 이해합니다.
29. 많은 일반적인 문제를 해결하는 알고리즘이 존재한다는 것을 이해하고 Google에서 필요한 알고리즘을 찾을 수 있을 만큼 충분히 알고 있어야 합니다. 아무도 모든 것을 기억하지 못하기 때문입니다. 아니면 대부분을 기억하지도 못할 것입니다.
30. 상속, 다형성, 코드 재사용과 관련하여 is a와 has a 관계의 차이점을 이해합니다.
31. 일반적인 디자인 패턴과 JavaScript에서 어떤 것이 사용되는지 알아봅니다.
32. 부분 함수, 커링, 작성, 파이프를 이해합니다. 그리고 단항 함수가 왜 그렇게 유용한지 이해합니다.
33. JavaScript에서 리플렉션이 강력하게 유형이 지정된 컴파일 언어와 어떻게 다른지, 그리고 그 이유를 이해합니다.

이제 알겠습니다. 신비화 해소의 열쇠입니다. 뭔가 놓친 게 있나요? 그렇다면 아래에 댓글을 남겨주세요.

 

록 스타 개발자가 지적한 제가 잊은 것:

 

34. 에리카 리터는 대리자를 이해하는 것이 중요하다고 상기시켜 주었습니다. 프로토타입의 맥락에서 위임이 무엇인지 뿐만 아니라, 이것과 관련된 위임과 bind, call, apply가 작동하는 방식을 이해합니다. 보너스: (브라우저) 이벤트 위임이 무엇인지, 그리고 '위임자'라는 용어를 세 가지 용도로 사용했을 때 모두 같은 내용을 말하고 있다는 점을 이해해 보세요. 

 

 

1. Understand how a line of high-level code like JavaScript turns into and gets executed as a stack frame on the call stack (from high level languages to machine code).
2. Understand how different primitive types are stored in memory, down to the addresses, space allocated, and binary representation (if you haven’t run into the word mantissa you’re not far enough).
3. Understand the difference between value types and reference types, and assigning values vs assigning pointers.
4. Understand implicit typing, explicit typing, nominal typing, structural typing, and duck typing.
5. Understand == vs === vs typeof.
6. Understand function scope, block scope, and lexical scope.
7. Understand the difference between an expression and a statement, and what it means to evaluate an expression.
8. Understand what happens (or doesn’t) in memory/on the call stack when an expression is evaluated, argument passed, result returned, etc. vs when a value is assigned or retrieved from a variable.
9. Understand IIFE’s, modules, and namespaces. And why ES6 modules and block scope don’t fully replace IIFE’s.
10. Understand how the message queue and event loop work in JavaScript specifically, and how it affects timing, hang, async, etc.
11. (browser) understand setTimeout, setInterval, and requestAnimationFrame.
12. Understand which operations are more expensive and why (expensive meaning cost more processing time or memory). Are number of iterations really the most impactful on performance (typically)? What does Big O notation really tell us? Use jsperf and performance.now to run some tests and find out.
13. Understand what opts and deopts are, and how to keep up to date on the across the different JavaScript engines.
14. Understand how to represent numbers in binary, hex, dec, scientific notation, etc. in JavaScript and other languages.
15. Understand how bitwise operators, typed arrays, and array buffers work. Use understanding RGBA as a way to understand how to manipulate binary data.
16. (browser) understanding how the in-memory DOM and layout trees are built and modified, when/how reflows/layouts, composites and repaints are triggered.
17. Understand new, constructors, instanceof, and instances.
18. Understand prototypical inheritance and the prototype chain. And how even with class JavaScript still doesn’t achieve classical inheritance.
19. Understand the differences between Object.create and Object.assign.
20. Understand factories and classes, and how these approaches differ.
21. Understand the difference between member properties and properties on the prototype.
22. Understand pure functions, side effects, and state mutation.
23. Understand how almost every for/while loop can be replaced with a map/reduce/filter, and why.
24. Understand what lambdas are (LINQ in c# as an example), and how map/reduce/filter + arrow functions change the way you think about your code.
25. Understand how closures work, and how they look on the call stack.
26. Understand how high order functions work, and when to use them.
27. Understand what abstract data structures are, how to build them in JavaScript, and typical use cases for them.
28. Understand recursion and how to use them to build abstract data structures.
29. Understand that algorithms to solve many common problems exist, and be familiar enough with them to find the one you need on Google because nobody remembers all of them. Or even most of them.
30. Understand the difference between the is a and has a relationship when it comes to inheritance, polymorphism, and code reuse.
31. Become familiar with the common design patterns, and which ones have uses in JavaScript.
32. Understand partial functions, currying, compose, and pipe. And understand why unary functions are so useful.
33. Understand how reflection is different in JavaScript than in strongly typed, compiled languages, and why.

There you have it. The key to demystification. Did I miss something? If so, feel free to comment below.

Stuff I forgot that rock star developers pointed out:

 

34. Erika Ritter reminded me it’s important to understand delegates. Not only what delegation is in the context of the prototype, but delegation as it pertains to this and understanding how bind, call, and apply work. Bonus: (browser) Understand what event delegation is, and how all three uses of the term delegate are saying the same thing.

 

 

 

https://youtu.be/WrjlQstaCwo?si=dQ_PQGHNkC6oHMhu