SMU개발자

JSX란? 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. 예를 하나 들어봅시다. function App(){ return{ Hello react }; } 이렇게 작성된 코드를 다음과 같이 변환됩니다. function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null, "react")); } 만약 컴포넌트를 랜더링할 때마다 JSX 코드를 작성하는 것이 아니라 위와 같은 코드로 매번 React.createElement를 호출해야 한다면 매우 불편할 ..

import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 위와 같은 코드는 리액트 프로젝트를 처음 실행했을 때 src/App.js에서 볼 수 있는 코드다. 나와 같이 리액트를 처음 접하는 사람들은 생소한 코드다. 이제부터 하나씩 이 코드들을 이해해 볼 것이다. import React from 'react' 이 코드는 리액트를 불러와서 사용할 수 있게 해줍니다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성이 되는데, 프로..

이터레이터 이터레이터는 '지금 어디 있는지' 파악할 수 있도록 돕는다는 면에서 일종의 책갈피와 비슷한 개념입니다. 배열은 이터러블 객체의 좋은 예입니다. 책에 여러 페이지가 있는 것처럼 배열에는 여러 요소가 들어 있으므로, 책에 책갈피를 끼울 수 있듯 배열에는 이터레이터를 사용할 수 있습니다. 책과 책갈피의 비유를 계속 사용해 봅시다. book이란 배열이 있고, 이 배열의 각 요소는 책의 한 페이지를 나타내는 문자열이라고 합시다. 지면을 생각해서 루이스 캐럴의 이상한 나라의 앨리스에서 발췌한 '반짝 반짝 작은 박쥐' 원문을 사용하겠습니다. 한 페이지에 문장 하나씩만 들어 있는 어린이용 동화책을 상상해 보세요 const book = [ "반짝 반짝 작은 별", "아름답게 비치네", "서쪽 하늘에서도", "..

Error 객체 자바스크립트에는 내장된 Error 객체가 있고 이 객체는 에러 처리에 간편하게 사용할 수 있습니다. Error 인스턴스를 만들면서 에러 메시지를 지정할 수 있습니다. const err = new Error("invalid email"); 이렇게 인스턴스를 만드는 것만으로는 아무일도 일어나지 않습니다. 이 인스턴스는 에러와 통신하는 수단입니다. 좀더 유효하게 사용하는 예제를 보도록 합시다. function validateEmail(email){ return email.match(/@/)? email : new Error(`invalid email: ${email}`); } const email = 'jane@doe.com'; const validatedEmail = validateEmail..

상속 프로토타입을 이해하면서 우리는 이미 상속의 일면을 봤습니다. 클래스의 인스턴스는 클래스의 기능을 모두 상속합니다. 상속은 한 단계로 끝나지 않습니다. 객체의 프로토타입에서 메서드를 찾지 못하면 자바스크립트는 프로토타입의 프로토타입을 검색합니다. 프로토타입 체인은 이런식으로 만들어 집니다. 클래스의 계층 구조를 만들 때 프로토타입 체인을 염두에 두면 효율적인 구조를 만들 수 있습니다. 즉 프로토타입 체인에서 가장 적절한 위치에 메서드를 정의하는 겁니다. 예를 들어 자동차에는 deployAirbags란 메서드가 있을 수 있습니다. 이 메서드를 운송 수단 클래스에 정의 할 수도 있겠지만, 에어백이 달린 보트는 없으므로 자동차에 정의하는게 맞고 보트나 차는 승객을 태울 수 있으므로 addPassenger ..

배열과 마찬가지로 자바스크립트 객체 역시 컨테이너지만, 크게보면 다음 두 가지 측면에서 배열과 다릅니다. 배열은 값을 가지며 각 값에는 숫자형 인덱스가 있습니다. 객체는 프로퍼티를 가지며 각 프로퍼티에는 문자열 이나 심볼 인덱스가 있습니다. 배열에는 순서가 있습니다. 하지만 객체에는 그런 순서가 보장되지 않습니다. obj.a가 obj.b보다 앞에 있다고 말할 수는 없습니다. 객체를 순회하기 좋은 루프중에 for...in등이 있는데 주의할 점은 일반적인 배열에서는 for루프나 forEach를 사용하는게 더 유용합니다. Object.keys 객체에서 나열 가능한 문자열 프로퍼티를 배열로 반환합니다. 예를 들어 객체에서 x로 시작하는 프로퍼티를 모두 가져온다면 다음과 같이 할 수 있습니다. const o = ..

배열의 기초 배열은 객체와 달리 본질에서 순서가 있는 데이터 집합이며 0으로 시작하는 숫자형 인덱스를 사용합니다. 자바스크립트의 배열은 요소가 모두 같은 타입일 필요는 없습니다. 배열안에 다른 배열이나 객체도 담을 수 있음 배열 리터럴은 대괄호를 만들고, 배열 요소에 인덱스로 접근할 때도 대괄호를 사용합니다. 모든 배열에는 요소가 몇 개 있는지 나타내는 length 프로퍼티가 있습니다. 배열에 배열 길이보다 큰 인덱스를 사용해서 요소를 할당하면 배열은 자동으로 그 인덱스에 맞게 늘어나며, 빈 자리는 undefined로 채워집니다. Array생성자를 써서 배열을 만들 수 있지만 그렇게 해야하는 경우는 별로 없습니다. 위 내용을 숙지하면 자바스크립트의 배열을 더 자유롭게 다를 수 있을 것이다. 배열 요소 조..

변수 숨김 { //외부블록 let x = 'blue'; console.log(x); { //내부 블록 let x = 3; console.log(x); } console.log(x); } 내부 블록의 x는 외부 블록에서 정의한 x와는 이름만 같을 뿐 다른 변수이므로 외부 스코프의 x를 숨기는 효과가 있습니다. 여기서 이해해야 할 중요한 점은, 실행 흐름이 내부 블록에 들어가 새 변수 x를 정의하는 순간, 두 변수가 모두 스코프안에 있다는 겁니다. 변수의 이름이 같으므로 외부 스코프에 있는 변수에 접근할 방법이 없습니다. 클로저 함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에서 정의하는 경우 스코프를 함수 주변으로 좁히는 것. let globalFunc; //정의되지 않은 전역 함수 { let..