함께 성장하는 프로독학러

안녕하십니까 여러분, 프로독학러 입니다. 저번 포스팅에 이어 전화번호부 어플리케이션을 만들어 보도록 하겠습니다.*velopert 님의 Youtube 강의를 정리한 내용이라고 보시면 될 것 같습니다. (4강) 이번 포스팅이 전화번호 어플리케이션 만들기의 마지막 포스팅입니다.이번 포스팅까지 열심히 따라하고, 이해하고, 반복하셔서 리액트와 좀 더 친해지길 바라겠습니다!물론 저두요...! 이번 포스팅에서 추가적으로 구현해 볼 기능은 총 세 가지 입니다.살펴보시죠. 1) Create new user , Edit user 를 할 때 입력후 엔터를 쳤을 때 기능이 동작하도록 하기 Create new user 나 Edit user 를 할 때 input 창에 값을 입력한 뒤, (지금까지는) button 을 눌러 추가, ..

안녕하세요, 프로독학러 입니다. 저번 포스팅에 이어 전화번호부 어플리케이션을 만들어 보도록 하겠습니다.*velopert 님의 Youtube 강의를 정리한 내용이라고 보시면 될 것 같습니다. (4강) 이번 포스팅에서는 전화번호부 어플리케이션의 목록 삭제와 수정 기능을 구현해 보겠습니다. 1) 데이터 삭제 먼저 데이터 삭제기능을 구현해 보도록 하겠습니다.데이터 삭제는 ContactDetail 컴포넌트에서 remove 버튼을 누르면 동작하도록 만들것입니다. 따라서, 먼저 ContactDetail 컴포넌트에 remove 버튼을 추가하겠습니다. (./src/components/ContactDetail.js) 123456789... Detail information {this.props.isSelected ? de..

안녕하세요, 프로독학러 입니다. 저번 포스팅에 이어 전화번호부 어플리케이션을 만들어 보도록 하겠습니다.*velopert 님의 Youtube 강의를 정리한 내용이라고 보시면 될 것 같습니다. (4강) 1) 개념 - 원본 state 를 훼손해서는 안되는 작업 이번 포스팅에서 구현할 기능은 Contact 컴포넌트의 state.contactData 에 새로운 전화번호부를 추가하는 내용입니다.이번 포스팅에서는 전화번호부를 추가, 다음포스팅에서는 수정 및 삭제 기능을 구현 할 예정인데, 놓치지 말아야 할 중요한 개념이 있습니다.추가, 수정, 삭제 모두 state 를 변경하는 작업인데요, 이 작업들은 모두 원본 state 를 직접변경해서는 안됩니다.이전 포스팅에서 selectedKey 나 keyword 와 같은 st..

안녕하세요, 프로독학러 입니다. 저번 포스팅에 이어 전화번호부 어플리케이션을 만들어 보도록 하겠습니다.*velopert 님의 Youtube 강의를 정리한 내용이라고 보시면 될 것 같습니다. (4강) 이번 포스팅에서는 저번 포스팅에서 구현한 Contact 컴포넌트의 목록(ContactInfo 컴포넌트)을 클릭하면 아래에서 세부 정보를 표현해 주는 기능을 구현하겠습니다. 먼저 Contact 클래스의 state 에 selectedKey 속성을 초기화 하겠습니다.state.selectedKey 는 선택된 ContactInfo 컴포넌트가 어떤 컴포넌트인지 구분하는 역할을 합니다. (./src/components/Contact.js) 12345678910111213... class Contact extends Co..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 지난 포스팅 까지 배웠던 개념들을 가지고 간단한 웹 어플리케이션을 만들어 보도록 하겠습니다.*velopert 님의 Youtube 강의를 정리한 내용이라고 보시면 될 것 같습니다. (4강) 먼저 우리가 만들 웹 어플리케이션의 완성된 모습을 보고 어떻게 구현해야 할지 생각해 보도록 하겠습니다. 우리가 만들 Contact 어플리케이션은 전화번호부 어플리케이션입니다.Contact 목록에서 사람을 클릭하면, Detail information 창에 정보가 표시되고, 아래에 있는 Edit, Remove 버튼을 이용해 정보를 수정하거나 삭제 할 수 있습니다.맨 아래의 Create new user 를 이용하면 목록에 새로운 전화번호 정보를 추가 할 수 있습니다. 위의 어..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 삼항 조건 연산자(conditional ternary operator)에 대해서 알아보도록 하겠습니다. 삼항 조건 연산자는 if 문의 축약 형태 입니다.표현식 부터 살펴 보겠습니다. condition ? expr1 : expr2 condition 은 조건을 나타내는 표현식이 들어가는 자리입니다. (조건문의 결과는 true, false 둘 중 하나가 나오는 표현식)expr1 은 조건문이 참일때 반환되는 표현식이고, expr2 는 조건문이 거짓일 때 반환되는 표현식 입니다. 간단한 예를 살펴보겠습니다. 123var age = 29;var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under ..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6 의 강력한 기능 중 하나인 class에 대해서 알아보겠습니다. class는 생성자 함수의 업그레이드 버전이라고 보면 됩니다.생성자 함수에 대해서 간단하게 살펴보도록 하죠. 1234567891011121314151617181920function person (name, job) { this.name = name; this.job = job;}; person.prototype.getName = function(){ console.log(this.name);}; function korean (name, job) { person.apply(this, arguments);}korean.prototype = new person(); var man_1 = ne..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 property shorthand(단축 속성명)에 대해서 알아보록 하겠습니다.property shorthand는 객체를 정의 할 때 객체의 key값과 value의 값이 같으면, key 와 value 값을 각각 표기하지 않고 한 번만 표기하는 것을 의미합니다. 코드를 통해 살펴보도록 하겠습니다. var a = "foo", b = 42, c = {}; var o = { a: a, b: b, c: c };먼저 선언부에서 변수 a, b, c, 에 각각 "foo", 42, {} 를 할당했습니다.그리고 변수 o 에 객체를 할당하는데, 해당 객체의 key 'a' 는 변수 a의 값("foo")을 value 값으로 가지고, key 'b' 는 변수 b의 값(42)..

죠>안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 비구조화 할당, destructuring assignment에 대해서 알아보겠습니다. 비구조화 할당 이라는 말이 쉽게 이해되는 말은 아니라고 생각합니다.간단히 말하자면 배열이나 객체의 요소를 해체하여 별개의 변수로 추출할 수 있도록 하는 것입니다.이 말도 와닿지 않으신가요? 괜찮습니다. 코드를 통해서 살펴보도록 하죠. var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20위의 코드의 첫 줄에서 변수 a, b, rest를 선언했습니다. (선언만 하고 아직 할당하지 않은 상태)그리고 두 번째 줄에서 이름 없는 배열 두 개가 같다고 표현했습니다.왼쪽 항에 있는 배열은 a,..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 method shorthand에 대해서 알아보겠습니다. 표현식부터 살펴보도록 하겠습니다. // 단축 메서드명 (ES6) var o = { property([parameters]) {}, get property() {}, set property(value) {}, * generator() {} };위와 같이 객체 안에서 메서드를 지정할 때 function을 생략할 수 있습니다. 이해를 돕기위해 예제를 살펴보겠습니다. 1234567891011var obj = { add: function (a, b){ return a+b; }, mult: function (a, b){ return a*b; }} console.log(obj.add(10, 5)); //..