javascript11 자바스크립트 언어에서의 비동기 경험 선결론 : 제대로 사용할 줄만 안다면 큰 도움이 된다. 서론 자바스크립트 언어는 위키백과의 말을 빌리자면 다음과 같습니다. JavaScript is high-level, often just-in-time compiled, and multi-paradigm 파이썬과 같은 사람들이 사용하는 일상 용어와 비슷하면 high-level 이라고도 합니다. 즉, 기계언어, machine language 와 비슷해질 수록 low-level 로 불리죠. 여기에 속하는 언어들은 C 가 있죠. 더 들어가면 Machine Language, 거의 이진수를 사용하는 수준과 사람들이 그나마 이해할 수 있는 단어들이 존재하는 Assembly Language 가 있습니다. 사실 위 정의를 굳이 언급하지 않아도 자바스크립트를 사용하시는.. 2022. 5. 31. React Core Concepts 선결론 : React Core Concepts 들을 알고 가면 편리하다 React... 무엇??? 정의 : React is a JavaScript library for building user interfaces. ...가 공식문서에 나와 있는 정의다. 여기에서 제일 먼저 보이는 건 자바스크립트 라이브러리라는 것이고, UI (유저 인터페이스)를 만들 때 사용한다는 것이다. 흠... 일단, 그냥 쉽게 해주는 도구로 인식을 해도 될만큼 굳이 그렇게 거창한 정의는 아니라고 판단이 내려진다. 그만큼 사용하는 사람들이 손쉽게 이용할 수 있도록 해준다는 말 같기도 하고...(?) 그리고 일단은 페이스북이 만든거라 커뮤니티도 꽤 크고 여러모로 효율성이 상당히 좋은 편에 속한다는 소식들이 있다. 물론 React가 다가.. 2022. 5. 31. ES6 Classes and Super...? 선결론 : Sugar Coating 되어 버린 ES6 클래스 문법을 이용하면 편리하다 자바스크립트는 사실 클래스의 뚜렷한 기반이 있는 언어가 아니다. 처음부터 지금까지 자바스크립트는 OOP가 아닌 객체 지향 언어일 뿐이다. 그렇기에 꽤 오랜 시간동안 클래스를 활용하기 위한 몸부림치는 노력들이 있었으며 그 노력들은 일종의 임시 방편이나 일시적인 해결책에 지나지 않았다. 결국에는 ES6라는 문법에 Class 와 상속이 가능한 Super 가 등장하게 되면서 그 이후로 언어를 접하는 사람들은 자바스크립트가 객체 지향 프로그래밍 이라는 착각을 할 수도 있다. 허나, class 나 super 등의 문법은 사실 기존에 사용했던 상속 및 클래스 생성 방법들을 깔끔하게 정리해준 것 뿐 그 이하도 이상도 아니다. 자 그럼.. 2022. 5. 31. this의 세계 선결론: this를 이해하려면 많은 시간이 필요할 듯 하다 일단 기본적으로 this는 총 다섯 가지의 경우로 나눌 수 있다고 한다. 1. Global Reference 이 경우에는 window 혹은 global을 가리키는 this로 쓰일 때인데 그냥 바로 this를 찾게 되면 여기로 뜬다. 2. Free Function Invocation 이 경우에도 마찬가지로 window 혹은 global로 바인딩이 된다. 1번이나 2번이나 그다지 유용하지는 않지만 그래도 this의 출발점은 되어주기도 한다. 3..call or .apply invocation 이 두 가지의 경우인 .call과 .apply에서는 자바스크립트에서 사용할 수 있는 방법이다. 인자로 this를 수동적으로 넘겨주게 되면서 this를 지정할 수.. 2022. 5. 30. 비동기적 호출 - [setTimeout, setInterval] 선결론 : 비동기적 호출, asynchronous call은 이해하기 쉽지는 않지만 그만큼의 재미가 있다 여태까지 자바스크립트에서 배운 코딩은 동기적 호출이었다. 간단하게 풀자면 하나씩 부르는 형식이다. console.log("Hello") console.log("World") console.log("!") // returns // "Hello" // "World" // "!" 위처럼 콘솔에는 하나하나씩 실행을 하게 된다 하지만 이를 비동기적으로, 즉 시간을 동시가 아닌 다르게 해서 호출을 하고자 한다면, 이를 가능하게 해주는 것이 setTimeout과 setInterval이다. console.log("Hello") setTimeout(function() { console.log("World") }, 1.. 2022. 5. 30. Document Object Model (DOM) 선결론 : DOM은 html과 js를 이어주는 편리한 도구이고 기능이 많다. 한국어로는 "문서 객체 모델" 이며 HTML과 XML 문서 등에 대한 프로그래밍 인터페이스이다. 아래는 MDN에서 찾은 설명이다: 문서에 대한 구조적 정보를 제공하고 문서 구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수 있는 방법을 제공합니다. DOM은 프로퍼티와 메소드를 가지는 객체와 노드의 트리형 구조로 표현됩니다. 웹 페이지를 스크립트나 다른 개발 언어로 접근할 때 필수 적입니다. 즉 자바스크립트를 웹에서 적용시키거나 활용할 때 DOM을 통해 접근을 할 수 있다. 예를 들어 아래와 같은 HTML 파일이 있다고 하자. Hi I'm Bob 그리고 연결되어 있는 script의 "example.js" 파일에서 자바스.. 2022. 5. 30. super()를 이용한 class 상속 방법 (ES6) 선결론 : super()를 이용하면 편리하지만 인터넷 익스플로어와는 호환성 문제가 있다. 클래스를 만들면 거기에 속한 속성들을 이용해서 다른 클래스에게 속성을 상속시킬 수 있다. 이 글에서는 ES6 문법을 이용해 class를 만들어 super로 상속하는 방법에 대한 내용이다. class Polygon { constructor(height, width) { this.name = 'Polygon'; this.height = height; this.width = width; } sayName() { console.log('Hi, I am a ', this.name + '.'); } } 위와 같은 코드를 상속받는 다른 class를 작성할 때에 super를 이용해 상위 class의 속성들을 받을 수 있다. cla.. 2022. 5. 30. Javascript의 Class 활용법 선결론 : 나는 ES6의 class 문법을 선호한다. 자바스크립트에서 class은 크게 두 가지 방법으로 나눌 수 있다. 첫번째 방법은 : function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } Person.prototype.greeting = function() { return "Hello, " + this.firstName } 인데 위처럼 실행하게 되면 Person이라는 클래스를 생성하게 되고 그 함수 내에 있는 것들을 생성자 함수라고 부른다. 만약에 method를 추가하고 싶다면 해당 클래스의 prototype을 접근 후 새로운 method를 추가해.. 2022. 5. 30. 이전 1 2 다음
