Buang

계산된 프로퍼티(Computed property) let a = 'age'; const user = { name : 'Mike', age : 30, } 위의 코드에서 age는 아래처럼 작성해도 된다. let a = 'age'; const user = { name : 'Mike', [a] : 30, } 이렇게 대괄호로 묶어주면 a라는 문자열이 아니라 변수 a에 할당된 값이 들어간다. let a = 'age';를 보니 현재 변수 a에 할당된 값은 age이다. [a]는 a 변수에 할당된 값을 의미한다고 했으니 [a] 는 age를 의미한다. [a]를 계산된 프로퍼티라고 한다. 객체 안에서 계산된 프로퍼티 사용하기 const test = { [1+2] : 3, ['계산된' + '프로퍼티'] : '계산된프로퍼티',..

1. var와 let의 차이 var name = 'Buang'; console.log(name); //Buang var name = 'Owl'; console.log(name); //Owl var는 한번 선언된 변수를 다시 선언할 수 있다. 위의 코드를 보면 var name = 'Buang';를 통해서 name이란 변수에 Buang란 값을 넣어줬다. 그런데 아래를 보면 var name = 'Owl'; 이렇게 name이란 똑같은 변수 이름으로 Owl이란 값을 넣어줬다. 똑같은 이름의 변수를 선언해줬음에도 문제없이 Buang 과 Owl이 출력되는 걸 확인할 수 있다. 즉 var를 사용하면 똑같은 이름의 변수를 선언해도 문제없다. 하지만 let은 다르다. var name 대신 let name으로 수정하고 코드..

1. this의 정의 this는 '이것'이란 뜻을 가지고 있다. 내가 손가락으로 책상을 가리키면서 '이것'이라고 하면 '이것' = 책상이 된다. 필통을 가리키면서 '이것'이라고 하면 '이것' = 필통이다. 즉 내가 무엇을 가리키는지에 따라 '이것'의 의미도 달라지듯이 this는 함수가 어떻게 호출되느냐(=손가락으로 무엇을 가리키느냐) 에 따라서 this의 값도 달라진다.(=책상을 가리키면 this는 책상이고, 의자를 가리켰다면 this는 의자이고) 지금부터 this가 어떤 상황에서 어떻게 달라지는지 살펴보고자 한다. 1. this가 단독으로 쓰일 땐 전역객체 window를 가리킨다. 2. this가 함수 안에 쓰일 땐 전역객체 window를 가리킨다. 3. this가 메소드 안에서 쓰일 땐 해당 메소드를..

전역객체 Window란? "브라우저 상에서 모든 객체의 최상위 객체인 window를 전역객체라 한다." 뜻을 봐도 무슨 말인지 모르겠다. 전역객체에 대한 이해를 돕기 위해 신기한 걸 한 개 보여주고자 한다. a라는 변수에 Hello라는 문자열을 넣어줬다. console.log(a);를 입력하면 Hello가 출력될 것이다. 여기까진 쉬운 부분이다. 그런데 console.log(window.a);를 입력했는데 똑같이 Hello가 출력된 걸 확인할 수 있다. 이게 도대체 무슨 일인 걸까? 어째서 이런 일이 일어났는지 바로 알려주기 앞서 다른 신기한 상황을 한개 더 보여주고자 한다. var welcome = "Hi"; var name = "Buang"; console.log(welcome + " " + name..

1. 생성자 함수 등장 배경 2. 생성자 함수 생성 과정 * 코딩앙마님의 '자바스크립트 기초' 강의를 필기한 글입니다. 1. 생성자 함수 등장 배경 생성자 함수는 자바스크립트에서 사용되는 일반 함수와 비슷하다. 다만 생성자 함수는 첫 글자를 대문자로 하고, new 연산자를 사용한다는 게 특징이다. 생성자 함수를 알아보기 전에 왜 이 생성자 함수를 사용하는지 알면 생성자 함수에 대해 보다 쉽게 이해할 수 있어 생성자 함수 등장 배경에 대해 소개하고자 한다. let user1 = { name: 'Mike', age: 30, } 쇼핑몰 사이트를 운영하고 있다고 해보자. 쇼핑몰 사이트를 운영할 땐 회원의 이름(name)과 나이(age)를 저장해 놔야 할 것이다. 그래서 나는 위의 코드처럼 회원의 이름과 나이를 ..

1. 이벤트 핸들링 등장배경 2. 이벤트 핸들링 코드 예제 * html과 자바스크립트 기초가 있다는 가정하에 작성된 글입니다. * 리액트 컴포넌트와 props를 알고 있다는 가정하에 작성된 글입니다. 1. 이벤트 핸들링 등장배경 버튼을 클릭하면 hi라는 알람이 뜨는 코드를 작성했다. 위에서 onClick은 버튼을 클릭했을 때 이런 사건(이벤트)을 일으켜줘!란 의미로 위에선 버튼을 클릭했을 때 알람(alert)으로 hi가 뜨도록 해줘라고 작성되어 있다. 리액트 컴포넌트의 경우 props를 통해 속성을 지정해 줄 수 있었다. * 리액트의 props를 잘 모른다면? '리액트 props가 도대체 뭘까?'를 참고해 주세요! 이제 속성뿐만 아니라 이벤트 기능도 넣어주고 싶다. 위에처럼 버튼을 클릭하면 알람이 뜨는 ..

'소플의 처음만난 리액트' 강의 필기록입니다. 1. JSX가 뭘까? 자바스크립트를 영어로 JavaScript라고 한다. 이 자바스크립트를 줄여서 JS 라고 한다. JSX에서 JS는자바스크립트를 의미한다. 그렇다면 맨 마지막의 X는? X는 Extenstion에서 x를 따온 것으로 자바스크립트의 확장 문법(A Syntax extenstion to Javascript)란 뜻을 가지고 있다. 쉽게 말해 JSX는 자바스크립트와 연관되어 있으며 자바스크립트 문법을 확장시킨 게 JSX 라고 할 수 있다. 그런데 문법을 확장 시켰다는 데 뭘 확장시킨 걸까? JSX는 JavaScript 에 더해 HTML + XML 까지 합쳐진 코드를 의미한다. JSX의 예제코드를 보면 쉽게 이해가 갈 것이다. let welcomeMes..

'컴포넌트'를 알고 있다는 전제 하에 작성됩니다. 아직 컴포넌트에 대해 모르신다면 '컴포넌트는 뭐고, 왜 쓰는 걸까?'를 참고해 주시면 감사하겠습니다. 더보기 리액트 컴포넌트 1. 리액트 컴포넌트 리액트에서 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트 이 두가지로 나뉜다. 원래 리액트 컴포넌트는 클래스 컴포넌트를 사용했었는데 클래스컴포넌트가 사용하기 불편해 함수 컴포넌트가 등장했다. 2. 함수 컴포넌트(Function Componenet) function Welcome(props) { return 안녕, {props.name}; } 위의 코드는 함수 컴포넌트의 간단한 예제다. Welcome이란 이름을 가진 함수로, 하나의 props 객체를 받아서 안녕이란 인삿말이 담긴 리액트 * 생활코딩님의 React 2..

1. 배열 등장 배경 2. 배열 정의 3. 배열의 수정 4. 배열의 특징 4-1. 많은 요소 포함 4-2. push 4-3. pop 4-4. unshift와 shift 5. 배열과 for문 6. for of문 코딩앙마님의 '자바스크립트 기초 강좌' 영상을 필기한 글입니다. 1. 배열 등장 배경 한 반에 30명의 학생이 있다고 해보자. const Mike = "Mike"; const Jane = "Jane"; .... const Tom = "Tom"; 이를 자바스크립트로 나타내면 위와같이 나타낼 수 있다. 그런데 학생 이름 하나에 변수 하나를 생성해서 만드는 건 시간이 너무 오래 걸리고 코드 길이도 길어진다. 코드 길이를 줄이면서 더 빠르게 30명의 학생 이름을 정리하기 위해 '배열'이란 걸 사용하고자 한..

이전 시간에 객체에 대해서 알아봤다. 아직 객체에 대해 잘 모르시는 분께선 객체 '자바스크립트 '객체'가 뭘까?' 글을 읽고 이 글을 읽는 걸 추천드리다. 이번 시간엔 객체의 method와 this에 대해서 알아보고자 한다. *코딩앙마님의 자바스크립트 기초 강좌를 보고 필기한 글입니다. 1. 메서드 정의 2. 단축구문 3. 객체와 method의 관계 4. 객체에서의 this 사용법 1. 메서드의 정의 const superman = { name:'clark', age: 33, } 위와같은 superman 객체가 있다고 해보자. superman은 이름도 있고, 나이도 있겠지만 superman의 능력 중 하나인 '날아다니기' 능력도 있을 것이다. const superman = { name:'clark', ag..