코딩공부
-
모던 자바스크립트 Deep Dive # 2Javascript& React study 2021. 11. 21. 05:38
자바스크립트 개발환경과 실행방법 자바스크립트 실행환경 자바스크립트는 브라우저 환경 또는 Node.js 환경에서도 실행할 수 있다. 브라우저에서 동작하는 코드는 Node.js환경에서도 동일하게 동작한다. 브라우저와 Node.js는 용도가 다르다. 브라우저: HTML,CSS,자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 목적 Node.js: 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적이다. 브라우저와 Node.js 모두 자바스크립트 코어인 ECMAScript를 실행할 수 있다. ECMAScript이외에 추가로 제공하는 기능은 호환되지 않는다. 💡 브라우저는 DOM API를 기본적으로 제공한다. 💡 Node.js는 DOM API를 제공하지 않는다. 브라우저 외부 환경에..
-
모던 자바스크립트 Deep Dive # 1Javascript& React study 2021. 11. 20. 09:26
컴파일러는 개발자의 언어와 컴퓨터의 언어를 모두 이해하는 번역가이다. 프로그래밍의 목적은 문제 해결이다. const number = "string"; // 문법적으로는 문제가 없지만 의미적으로는 문제가 있다. console.log(number*number);// NaN 자바스크립트의 변수에는 어떠한 타입의 값도 할당할 수 있다. number라는 이름의 변수에는 숫자를 할당하는 것이 의미적으로는 옳다. 작성된 코드는 해결 방안의 구체적인 구현물이다. 프로그래밍의 언어의 문법에 부합하는 것은 물론이고 수행하고자 하는 바를 정확하게 수행하는 것 즉 요구사항이 실현되어야 의미가 있다. 💡 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후 그 흐름을 제어하는 것이다. 렌더링(Re..
-
[JAVASCRIPT-모던자바스크립트] 객체를 원시형으로 변환하기Javascript& React study 2021. 11. 14. 19:01
obj1 + obj2처럼 객체끼리 더하는 연산을 하게 되거나 obj1-obj2처럼 객체끼리 빼는 연산을 하게 되면 어떤 일이 벌어질까? alert(obj)로 객체를 출력할때는 무슨 일이 발생될까? 이 모든 경우에 자동 형 변환이 일어나게 된다. 객체는 원시값으로 변환되며 그 후 의도한 연산이 수행된다. 형 변환 챕터에서는 객체의 형 변환은 다루지 않았지만 원시형 자료가 어떻게 문자나 숫자 그리고 논리형으로 변환이 되는지 알아보았는데 메서드와 심볼에 대한 지식을 갖추게 되었으니 본격적으로 이러한 공백을 매꾸는 것을 해보도록 하자. 객체는 논리 평가시 true를 반환하게 된다. 단 하나의 예외도 없다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다고 생각하면 된다. 숫자형으로의 형 변환은 객체끼리..
-
[JAVASCRIPT-모던자바스크립트] 심볼형5Javascript& React study 2021. 11. 13. 21:50
전역 심볼 레지스트리 안에 있는 심볼은 전역 심볼이라고 한다. 애플리케이션에서 광범위하게 사용해야 하는 심볼이라고 할 경우에는 전역 심볼을 사용하는 것이 좋다. Roby랑 비슷하다? Ruby 등의 몇몇 언어에서는 이름이 같을 경우 심볼도 같을 경우가 많다. 자바스크립트에서는 전역 심볼에서만 이런 특징이 적용된다고 볼 수 있다. Symbol.keyFor 전역 심볼을 찾을 때 사용되는 Symbol.for(key)에 반대되는 메서드도 있다. Symbol.keyFor(sym)를 사용하게 되면 이름을 얻을 수 있다. // 이름을 이용해 심볼을 찾음 let Sym = Symbol.for('name'); let Sym = Symbol.for('id'); // 심볼을 이용해 이름을 얻음 alert( Symbol.key..
-
[JAVASCRIPT-모던자바스크립트] 심볼형3Javascript& React study 2021. 11. 7. 05:44
심볼은 for...in에서 배제됩니다. 키가 심볼인 프로퍼티는 for ... in 반복문에서 배제됩니다. let id = Symbol("id"); let user = { name : "John", age : 30, [id] : 123 }; for (let key in user) alert(key); // name과 age만 출력되고 심볼은 출력되지 않는다. // 심볼로 직접 접근하면 잘 작동합니다. alert( "직접 접근한 값:" + user[id] ); Object.keys(user)에서도 키가 심볼인 프로퍼티는 배제된다. '심볼형 프로퍼티 숨기기'라고 불리는 이런 원칙 때문에 외부 스크립트나 라이브러리에서는 심볼형 키를 가진 프로퍼티에 접근하지 못한다고 할 수 있다. 그런데 Object.assign..
-
[JAVASCRIPT-모던자바스크립트] 심볼형2Javascript& React study 2021. 11. 6. 18:34
숨김 프로퍼티 심볼을 이용하게 되면 '숨김(hidden)' 프로퍼티를 만들 수 있다. 숨김 프로퍼티는 외부 코드에서 접근이 불가능하고 값도 덮어쓸 수 없는 프로퍼티이다. 서드파티 코드에서 가지고 온 user라는 객체가 여러 개 있고 user를 이용해 어떤 작업을 해야 하는 상황이라고 가정해보자. user에 식별자를 붙여주도록 하자. 식별자는 심볼을 이용해서 만들도록 한다. let user = { // 서드파티 코드에서 가져온 객체 name : "John" }; let id = Symbol("id"); user[id] = 1; alert( user[id] ); // 심볼을 키로 사용해 데이터에 접근할 수 있다. 문자열 "id"를 키로 사용해도 상관은 없는데 Symbol("id")을 사용하는 이유는? use..
-
[JAVASCRIPT-모던자바스크립트] 옵셔널 체이닝 '?.'2Javascript& React study 2021. 10. 30. 22:28
옵셔녈 체이닝을 남용하지 말아야 하는 이유 ?.의 경우 존재하지 않아도 괜찮은 대상에서만 사용을 하는 것이 좋다. ?. 앞의 변수는 꼭 선언이 되어있어야 한다. 변수 user가 선언되어 있지 않는다고 한다면 user?.anything 평가시 에러가 발생합니다. // error user?.address; user?.anything을 사용하게 되면 let이나 const,var를 사용하여 user를 정의해야 한다. 이렇게 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작하게 된다. 단락 평가 ?.는 왼쪽 평가대상에 값이 없게 된다고 한다면 즉시 평가를 멈추게 된다. 이런 평가방법을 단락 평가 (short-circuit)라고 부른다. 그렇기 때문에 함수 호출을 비롯하여 ?. 오른쪽에 있는 부가 동작은 ?.의..
-
[JAVASCRIPT-모던자바스크립트] 옵셔널 체이닝 '?.'Javascript& React study 2021. 10. 24. 05:00
최근에 추가됨 스펙에 추가된지 얼마 되지 않은 문법이다. 구식 브라우저의 경우 폴리필이 필요하다 옵셔널 체이닝 (optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 자바스크립트를 배우기 시작했다고 한다면 옵셔널 체이닝이 등장하게 된 배경 상황등을 직접 겪어보지 않았을 것이라 생각한다. 여기서 몇 가지 사례를 재현하면서 옵셔널 체이닝이 등장했는지 알아보는것이 좋다. 사용자가 여러 명 있는데 몇 명은 주소 정보를 가지고 있지 않다고 가정한다면 이럴 때 user.address.street를 사용해서 주소 정보에 접근하게 되면 에러가 발생할 수 있다. let user = {}; // 주소 정보가 없는 사용자. aler..