Study
-
fragmentStudy/React 2020. 6. 4. 12:47
fragment React의 패턴은 Component가 여러 요소를 반환하는 것이 일반적입니다. Fragements 를 사용하면 DOM 노드에 추가하지 않고 하위의 목록을 그룹화 할 수 있습니다. render() { return ( ); } 새롭게 짧은 구문도 나왔지만, 아직 많은 툴에서 지원하지 않고 있습니다. Motivation 일반적인 패턴은 아래와 같이 컴포넌트가 자식리스트를 반환하는 것 입니다. class Table extends React.Component { render() { return ( ); } } 렌더링 된 HTML이 유효하려면 가 여러 엘리먼트만 반환해야 합니다. 의 render() 안에 부모 div로 자식들을 감싼다면 렌더링 된 HTML은 유효하지 않습니다. class Colum..
-
옵셔널 체이닝 '?.'Study/JavaScript 2020. 6. 3. 16:40
**스펙에 추가된 지 얼마 안된 문법입니다. 구식 브라우저는 폴리필이 필요합니다.** 옵셔널 체이닝(optional chaining) ?. 을 사용하면 properties가 없는 중첩 객체에도 에러없이 안전하게 접근 할 수 있다. 옵셔널 체이닝이 필요한 이유 이제 막 자바스크립트를 배우기 시작했다면 옵셔널 체이닝이 등장하게 된 배경 상황을 직접 겪어보지 않았을 것이다. 몇 가지 사례를 재현하면서 왜 옵셔널 체이닝이 등장했는지 살펴보자. 사용자가 여러 명 있는데 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정해보자. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소정보가 없는 사용자 alert(user.address..
-
'new' 연산자와 생성자 함수Study/JavaScript 2020. 6. 3. 15:01
'new' 연산자와 생성자 함수 객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있다. 그런데 개발을 하다보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇다. "new"연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. 생성자 함수(constructor function) 생성자 함수(constructor function)와 일반함수에 기술적인 차이는 없다. 다만 생성자 함수는 아래 두 관례를 따른다. 함수 이름의 첫 글자는 대문자로 시작한다. 반드시 "new"연산자를 붙여 실행한다. function User(name) { this.name = name; this.isAdmin = fal..
-
method and thisStudy/JavaScript 2020. 6. 2. 22:46
객체는 사용자(user), 주문(order)등과 같이 실제 존재하는 개체 (entity)를 표현하고자 할 때 생성된다. let user = { name: "John", age: 30 }; 사용자는 현실에서 장바구니에서 물건선택하기, 로그인하기, 로그아웃하기 등의 행동을 한다. 이와 마찬가지로 사용자를 나타내는 객체 user도 특정한 행동을 할 수 있다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해준다. 매서드 만들기 객체 user에게 인사할 수 있는 능력을 부여해 보자. let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); //안녕하세요! 함..
-
‘for…in’ 반복문Study/JavaScript 2020. 6. 2. 14:09
for..in 반복문을 사용하면 객체의 모든 키를 순회할 수 있습니다. for..in은 앞서 학습했던 for(;;) 반복문과는 완전히 다릅니다. for (key in object) { // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다. } 아래 예시를 실행하면 객체 user의 모든 프로퍼티가 출력됩니다. let user = { name: "John", age: 30, isAdmin: true }; for (let key in user) { // 키 alert( key ); // name, age, isAdmin // 키에 해당하는 값 alert( user[key] ); // John, 30, true } for..in 반복문에서도 for(;;)문처럼 반복 변수(looping varia..
-
크롬으로 디버깅하기Study/JavaScript 2020. 6. 2. 12:23
크롬으로 디버깅하기 디버깅 (debugging) 디버깅은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다. 모던 브러우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴을 구비해 놓는다. 디버깅 툴을 이용하면 디버깅이 훨씬 쉬워지고, 실행단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있다. Sources 패널 Chrome을 사용해 예시 페이지를 엽니다. f12 (MAC : Cmd+Opt+I) 를 눌러 개발자 도구를 연다. sources 탭을 클릭해 sources 패널을 연다. sources 패널을 처음 열면 아래와 같은 화면이 보인다. 토글 버튼 을 누르면 navigator가 열리면서 현재 사이트와 관련된 파일들이 나열됩니다. 파일 목록에서 hello.js를 클릭해 아..
-
함수선언식 vs 함수표현식Study/JavaScript 2020. 6. 2. 10:28
함수선언식 (Function Declaration) function sayHi() { alert( "Hello" ); } 함수는 값이기 때문에 alert를 이용하여 함수 코드를 출력할 수도 있다. function sayHi() { alert( "Hello" ); } alert( sayHi ); // 함수 코드가 보임 alert( sayHi() ); // Hello sayHi옆에 괄호가 없으면 함수는 실행되지 않고, 자바스크립트에서 함수는 값처럼 취급할 수 있기때문에 함수 소스 코드가 문자형으로 바뀌어 출력되었다. 함수는 또한 sayHi() 처럼 함수의 값을 출력할 수도 있다. 본질은 값이기 때문에 값에 할 수 있는 일을 함수에도 할 수 있다. 변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해 다른..