We need to talk about JavaScript or releases or versions
it's really important to know about how JavaScript releases work and how we can use them.
The real world we usually use the term ECMAScript to refer to the standard, while JavaScript is used when we talk about the language in practice,
as it's implemented in browsers.
우리가 보통 ECMA스크립트라는 용어를 사용하여 표준을 참조하는 반면 자바스크립트는 실제로 우리가 언어에 대해 이야기할 때 사용된다.
브라우저에 구현되어 있습니다.
Now fast forward to 2009, after a lot of complications and disagreements about where the language should be headed, ES5 was released with a lot of great new features. And then finally, another six years later, the much awaited new version ES6 was launched in June, 2015.
2009년으로 되돌아 가보면, 언어가 어디로 향해야 하는지에 대한 많은 복잡함과 의견 불일치 후에 ES5는 많은 훌륭한 새로운 기능들과 함께 출시되었습니다. 그리고 마침내, 또 다른 6년 후, 대망의 새로운 버전 ES6가 2015년 6월에 출시되었습니다.And this was the single biggest update to the language ever. So it contained a ton of new exciting features, which we will explore throughout this entire course.
This was, and still is a really big deal for JavaScript and for the whole web developer community.
Now you will also see ES6 being called ES2015,
which has actually the official name, but most people just call it ES6.
And so that's what I'm gonna do here as well. And actually the reason for ES6 being called ES2015 officially is that in 2015, ECMAScript changed to an annual release cycle.
이제 ES6가 ES2015라고 불리는 것을 보게 될 것입니다.
사실 공식 명칭이 있지만, 대부분의 사람들은 ES6라고 부른다.
그래서 여기서도 그렇게 할 겁니다. 그리고 실제로 ES6가 공식적으로 ES2015로 불리게 된 이유는 2015년에 ECMA스크립트가 연간 릴리즈 사이클로 변경되었기 때문입니다.
So right now there's gonna be a new release every single year. The reason for that is that they prefer to just add a small number of new features per year, instead of shipping a huge new version every couple of years, like it happened with ES6.
그래서 지금 새로운 릴리스는 매년 있다. 그 이유는 바로 그들은 단지, 대신 그것과 같은 ES6이 일어났는지년의 모든 부부는 커다란 새로운 버전 선적률이 매년 새로운 기능의 작은 번호를 추가하는 것을 선호한다.
And so this way, it's gonna be much easier for everyone to keep up to date. And so according to this new annual release cycle, in 2016 ES2016 or ES7 was released ES2017 and 2017.
이렇게 하면 모두가 최신 정보를 얻기가 훨씬 쉬워질 것입니다. 따라서 이 새로운 연간 출시 주기에 따라 2016년에 ES2016 또는 ES7이 ES2017 및 2017년에 출시되었습니다.
And like this, it will continue until the end of time or something like that.
Now there is one particularity about JavaScript releases, which is pretty unique for any programming language and that's backwards compatibility all the way to ES1.
그리고 이렇게 시간이 끝날 때까지 계속됩니다. 자바스크립트 릴리스에 대한 한가지 특수성이 있는데, 이는 모든 프로그래밍 언어에서 매우 독특하며 ES1과 하위 호환성입니다.
if you were to take some JavaScript code written back in 1997 and put it in a modern browser with a modern JavaScript engine today, it would still work just the same.
만약 당신이 1997년에 쓰여진 자바스크립트 코드를 가져와서 그것을 현대 자바스크립트 엔진과 함께 현대 브라우저에 넣는다면, 여전히 똑같이 작동하겠지
So again, the JavaScript engine that's in our browser today is able to understand old code written 25 years ago, without having to rely on version numbers or anything like that. It just works. And it works this way because of the fundamental principle that's baked into the JavaScript language and its development, which is to not break the web.
그래서 오늘날 우리의 브라우저에 있는 자바스크립트 엔진은 25년 전에 쓰여진 오래된 코드를 이해할 수 있습니다. 버전 번호나 다른 것에 의존하지 않아도 말이죠. 그냥 되는 거야. 그리고 이것은 자바스크립트 언어로 만들어진 기본 원칙과 웹을 깨지 않는 그것의 개발 때문에 이렇게 작동합니다.
This means that there is almost never anything removed from the language, but only added in new versions. And actually we cannot really call them new versions even, because they do not contain breaking changes like when other languages moved to a new version.
이것은 언어에서 제거되는 것이 거의 없고 새로운 버전에서만 추가된다는 것을 의미한다. 그리고 실제로 우리는 그것들을 새로운 버전이라고 부를 수 없습니다. 왜냐하면 그것들은 다른 언어들이 새로운 버전으로 옮겨갔을 때처럼 변화된 변화를 포함하지 않기 때문입니다.
Instead new versions are always just incremental updates, which add new stuff.
And so I like to call them releases and not versions. The ECMAScript committee who works on updating the language, does all this. So that old websites basically keep working forever.
대신 새로운 버전은 항상 새로운 내용을 추가하는 증분 업데이트에 불과합니다.
그래서 저는 그것들을 버전이 아닌 출시라고 부르고 싶습니다. 언어를 업데이트하는 일을 하는 ECMA 스크립트 위원회가 이 모든 것을 한다. 그래서 그 오래된 웹사이트들은 기본적으로 영원히 작동한다.
just imagine they removed some important feature that made a website from 2008, work just fine. If you then want it to visit that page, it will be broken. And that's why we fortunately have to don't break the web principle.
그들이 2008년에 웹사이트를 만든 중요한 기능들을 제거했다고 상상해보세요. 잘 작동하죠. 그런 다음 해당 페이지를 방문하려면 해당 페이지가 손상됩니다. 그리고 그것이 우리가 다행히도 웹의 원리를 깨지 말아야 하는 이유이다.
Now, of course, this comes with problems because there are tons of old bugs and weird things and the language. Remember that Brendan Eich made the very first version in just 10 days and no one back then could even imagine what JavaScript would be used for one day.
물론 여기에는 문제가 있습니다. 왜냐하면 수많은 오래된 버그들과 이상한 것들이 있고 언어들이 있기 때문입니다. Brendan Eich가 단 10일 만에 첫 번째 버전을 만들었고 그 당시 그 누구도 자바스크립트가 하루 동안 사용될 것이라고 상상조차 할 수 없었다는 것을 기억하라.
The initial goal of JavaScript was just to add some simple dynamics to pages, not to write whole web applications in a browser like we do today. But anyway, these bugs and weird quirks in the language have been giving the language a bad reputation among many programmers who can really take JavaScript serious because of this.
자바스크립트의 초기 목표는 단지 페이지에 간단한 역학을 추가하는 것이지, 오늘날과 같은 브라우저에 전체 웹 애플리케이션을 작성하는 것이 아니다. 그러나 어쨌든, 언어의 이러한 버그와 이상한 기묘한 점은 이것 때문에 자바스크립트를 진지하게 받아들일 수 있는 많은 프로그래머들 사이에서 그 언어를 나쁜 평판을 주고 있다.
But here's the thing, we can actually go around many of this weird stuff by simply learning the modern JavaScript that matters today and just ignore most of the old weird stuff. And so that's exactly what we're gonna do in this course. So next time your friends start hating on JavaScript and believe me, this actually happens.
하지만 중요한 것은, 오늘날 중요한 현대 자바스크립트를 배우는 것만으로 이런 이상한 것들을 할 수 있다는 것입니다. 그리고 오래된 이상한 것들은 대부분 무시합니다. 그리고 이것이 바로 우리가 이 과정에서 할 일입니다. 그래서 다음에 여러분의 친구들이 자바스크립트를 싫어하고 제 말을 믿으면, 이런 일이 실제로 일어납니다.
Then just tell them about the amazing things that you can build with it. Okay. But now, there is one more thing that we need to talk about here, and that is forwards compatibility.
그리고 나서 그들에게 여러분이 그것으로 만들 수 있는 놀라운 것들에 대해 말해보세요. 좋습니다. 하지만 여기서 한 가지 더 짚고 넘어가야 할 것이 있습니다. 바로 호환성입니다.
So what do you think would happen if we took this totally made up code from the year 2089 and try to run it in today's browsers?
Well, you're probably right.
It would not work at all.
There would be errors left and right. And nothing would work.
That's why we say that JavaScript is notforwards compatible,
그렇다면 만약 우리가 2089년부터 이 완전히 만들어진 코드를 오늘날의 브라우저에서 실행하려고 한다면 어떻게 될 것 같습니까?
글쎄, 네 말이 맞을거야.
그것은 전혀 효과가 없을 것이다.
왼쪽과 오른쪽에는 오류가 있을 것이다. 아무 것도 안 먹힐 거야
그것이 우리가 자바스크립트가 forwards compatible이 아니라고 말하는 이유이다.
basically because current browsers do not understand code from the future. And this actually brings us to our next topic, which is how can we use modern JavaScript today? Because browsers that users are using might be old and there's no forwards compatibility.
기본적으로 현재 브라우저는 미래의 코드를 이해하지 못하기 때문이다. 이제 다음 주제로 넘어가겠습니다. 현대 자바스크립트를 어떻게 사용할 수 있을까요? 사용자가 사용하는 브라우저가 오래되었을 수 있고 정방향 호환성이 없기 때문입니다.
So to answer the question, how we can use modern JavaScript today, we need to consider two distinct scenarios, development and production. So the development phase is simply when you're building the site or application on your computer.
그래서 오늘날 우리가 어떻게 현대 자바스크립트를 사용할 수 있는지에 대한 질문에 답하기 위해, 우리는 개발 및 제작이라는 두 가지 다른 시나리오를 고려할 필요가 있다. 따라서 개발 단계는 단순히 컴퓨터에 사이트나 응용 프로그램을 구축하는 단계입니다.
To ensure you can use the latest JavaScript features in this face. All you have to do is to use the most Up ToDate version of the Google Chrome browser. This will then ensure that all the features I show you in his course will work for you as well.
이 화면에서 최신 JavaScript 기능을 사용할 수 있습니다. Google Chrome 브라우저의 최신 버전을 사용하기만 하면 됩니다. 그러면 이 과정에서 보여드린 모든 기능이 귀사에 도움이 될 것입니다.
The second scenario is production
which is when your web application is finished. You deploy it on the internet and it's then running in your users' browsers. And this is where problems might appear, because this is the part that we actually can't control.
두 번째 시나리오는 production입니다.
웹 응용 프로그램이 종료되는 시기입니다. 인터넷에 배포하면 사용자의 브라우저에서 실행됩니다. 여기서 문제가 발생할 수 있습니다. 왜냐하면 이 부분은 우리가 통제할 수 없는 부분이기 때문입니다.
We cannot control which browser the user uses. And we also can't assume that all our users always use the latest browsers, Now, the solution to this problem is to basically convert these modern JavaScript versions back to ES5 using a process called transpiling and also polyfilling.
사용자가 사용하는 브라우저를 제어할 수 없습니다. 또한 모든 사용자가 항상 최신 브라우저를 사용한다고 가정할 수도 없습니다. 이 문제에 대한 해결책은 기본적으로 이러한 현대 자바스크립트 버전을 ES5로 변환하는 것입니다. transpiling과 polyfilling이라는 프로세스를 사용합니다.
We will use a tool called Babel later in the course to transpile or code.
But for now, during the course, we won't need that.
Again, because you're using the most Up ToDate browser during development, transpiling back to ES5 is only necessary after your app is developed and you want to ship it to your users.
All right. So now let's take a look
at how different JavaScript releases can be used today.
So first off ES5 is of course fully supported in all browsers today, all the way down to internet Explorer nine from 2011.
So we can assume that ES5 is safe to be used at this point, which is the reason why we use it as a target for transpiling.
좋아요. 이제 어떻게 다른 JavaScript 릴리스를 사용할 수 있는지 살펴보겠습니다.
따라서 첫 번째 ES5는 물론 현재 모든 브라우저에서 완벽하게 지원되며, 2011년부터는 인터넷 익스플로러 9까지 지원됩니다.
그래서 우리는 ES5를 이 시점에서 사용하는 것이 안전하다고 가정할 수 있습니다. 이것이 우리가 ES5를 transpiling의 대상으로 사용하는 이유입니다.
Now about the newer releases, ES6, ES7 and all the way to ES2020, as of mid-2020, they are actually quite well supported already in all modern browsers.
And we usually call all the current versions together,
ES6 plus. So right now that's from ES6 to ES2020, and basically all together, they are the modern JavaScript.
새로운 릴리스인 ES6, ES7, 그리고 ES2020에 이르기까지, 2020년 중반에는 모든 최신 브라우저에서 이미 상당히 잘 지원되고 있습니다. 그리고 우리는 보통 모든 최신 버전을 함께 불러요.
ES6 플러스. 그래서 지금은 ES6에서 ES2020에 이르기까지, 기본적으로 모두 현대 자바스크립트입니다.
Now it's in this modern JavaScript. So in this ES6 plus where transpiling comes in, as I mentioned earlier. Again, because it's not safe to assume that all our users are using these modern browsers and we don't want to break or app for them, right?
이제 그것은 이 현대 자바스크립트에 있습니다. 앞서 언급했듯이, 이 ES6 플러스에서 트랜스페일이 사용됩니다. 다시 말하지만, 우리의 모든 사용자들이 이러한 최신 브라우저를 사용하고 있고, 우리는 그것들을 망가뜨리거나 앱으로 만들고 싶지 않다고 생각하는 것은 안전하지 않기 때문입니다.
And by the way, if you want to stay up to date with what features are currently supported in which browser you can check out the ES6 compatibility table.
It's really interesting. The link is actually on my resources page on jonas.io.
Next, there are also the future releases of the language like ES2021, ES2022 and so on. And these future releases together are many times called ESNext.
참고로 현재 지원되는 기능을 최신 상태로 유지하려면 ES6 호환성 표를 참조하십시오.
정말 재미있어요. 이 링크는 실제로 jonas.io의 내 리소스 페이지에 있습니다.
다음으로, ES2021, ES2022 등과 같은 미래의 언어 릴리스도 있습니다. 그리고 이러한 미래의 릴리스는 여러 번 ESNext라고 불립니다.
Now, why is this even relevant?
Well, because most browsers actually start implementing new features even before they enter the official ECMAScript specification.
That's possible because as new features are proposed, they have to go through four stages, starting with stage one,
자, 왜 이것이 관련이 있을까요?
대부분의 브라우저는 ECMA 스크립트 사양에 들어가기 전부터 실제로 새로운 기능을 구현하기 시작합니다.
새로운 기능이 제안되면 1단계부터 4단계를 거쳐야 하기 때문에 가능합니다.
where they are first admitted all the way to stage four, at which point they enter the language officially.
But when a feature is at stage three, browsers can be pretty sure it will eventually pass to stage four. And so they're gonna start implementing that feature
그들은 4단계까지 처음으로 받아들여지고, 그 시점에서 그들은 공식적으로 그 언어에 들어간다.
그러나 어떤 기능이 3단계에 있을 때 브라우저는 그것이 결국 4단계로 넘어갈 것이라고 꽤 확신할 수 있다. 그리고 그들은 그 기능을 구현하기 시작할 것이다.
while still in stage three. And there is a lot more to be said about this.
And actually I find this really fascinating, but I'm gonna stop here. because there will be no drastic changes to the language like ES6 was.
아직 3단계에 있을 때. 그리고 이것에 대해 더 할 말이 많다.
사실 저는 이것이 정말 흥미롭다고 생각합니다. 하지만 여기서 마치겠습니다. ES6처럼 언어에 급격한 변화는 없을 것이기 때문입니다.
Okay. And now to finish,
let's quickly talk about how versions or releases are taught in this course.
So, as I said earlier, I will teach you a modern JavaScript,
right from the beginning of the course. Now I used to teach this course starting with ES5 and then moving to ES6 in the middle of the course.
자, 이제 마무리를 하자면
이 과정에서 버전 또는 릴리스가 어떻게 학습되는지 간략히 살펴보겠습니다.
그래서, 내가 앞에서 말했듯이, 나는 너에게 현대 자바스크립트를 가르칠 것이다.
코스의 시작부터 바로 지금은 ES5부터 시작해서 중간에 ES6로 옮겨서 강의를 하곤 했습니다.
But now after a couple of years, it was time to fully move to modern JavaScript.
However, it's also super important to learn how some things used to be done before we had this fancy modern JavaScript.
For example, in this section, I already showed you the modern const and let for variable declarations, but also how we used to use Vue before.
And there will be many more examples like this, but why butter with ES5 at all? You might ask?
그러나 몇 년이 지난 지금, 완전히 현대 자바스크립트로 옮겨갈 때가 되었다.
하지만, 우리가 이 멋진 현대 자바스크립트를 갖기 전에 어떤 것들이 어떻게 이루어졌는지를 배우는 것 또한 매우 중요합니다.
예를 들어, 이 섹션에서는 변수 선언에 대한 현대적인 constandlet을 이미 보여드렸으나 이전에 Vue를 어떻게 사용했는지도 보여드렸습니다.
그리고 이와 같은 예는 더 많을 것입니다. 그런데 왜 ES5로 버터를 바르는 걸까요? 물어볼 수도 있어?
Well, here is why, first, you will better understand how some features
in JavaScript actually work behind the scenes.
For example, ES6 classes, which had all the implementation details of object oriented programming in JavaScript. Also many tutorials and example code that you will find online are still written in ES5 today.
자, 그 이유는 첫째, 어떤 기능들이
자바스크립트에서는 실제로 뒤에서 작동한다.
예를 들어 ES6 클래스는 자바스크립트에서 객체 지향 프로그래밍의 모든 구현 세부 사항을 가지고 있었다. 또한 온라인에서 찾을 수 있는 많은 튜토리얼과 예제 코드는 오늘날에도 ES5에 여전히 작성되어 있습니다.
Plus, as a developer, in many jobs, you will actually have to work on older code bases. And it's totally possible that, that code base might still contain a lot of ES5 code.
게다가, 개발자로서, 많은 직업에서, 당신은 실제로 오래된 코드 베이스에서 작업해야 할 것이다. 그리고 그 코드 베이스는 여전히 많은 ES5 코드를 포함하고 있을 가능성이 있다.
시마이!!