목록2018/04 (45)
함께 성장하는 프로독학러
안녕하세요, 프로독학러 입니다. 저번 포스팅에 이어 전화번호부 어플리케이션을 만들어 보도록 하겠습니다.*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 를 이용하면 목록에 새로운 전화번호 정보를 추가 할 수 있습니다. 위의 어..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 Component Lifecycle 에 대해서 알아보도록 하겠습니다. Component Lifecycle 은 리액트가 내부적으로 작동하는 순서이며, 이를 활용해 각 단계 마다 원하는 동작을 취하게 할 수 있습니다.Component Lifecycle 은 컴포넌트가 생성되었을 때, 프롭스가 변경되었을 때, 스테이트가 변경 되었을때, 컴포넌트가 삭제 되었을 때 각각 다른 순서로 작동합니다. 전체적인 Component Lifecycle 의 구성은 다음과 같습니다. 가장 왼쪽의 그림부터 살펴보겠습니다. 컴포넌트가 생성 되었을 때 리액트가 동작하는 방식입니다.1) 컴포넌트를 초기화 합니다. (constructor를 통해 state를 초기화, 기본 프롭스값)2) co..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 props 에 이어 컴포넌트에서 데이터를 처리하는 개념중 하나인 state 에 대해서 알아보도록 하겠습니다. 저번 포스팅에서 props 를 '정적인 데이터'라고 했습니다.그 이유는 props 를 전달받아 사용하는 하위 컴포넌트에서 이 props 를 수정할 수 없기 때문이죠. 반면 state 는 컴포넌트 안에 존재하며, 수정할 수 있는 데이터입니다.그리고 state 가 수정되면 컴포넌트는 다시 렌더링 됩니다. (다음 포스팅이 될 예정인 Component Lifecycle 에서 더 자세히 살펴보겠습니다. 지금 단계에서는 스테이트가 수정되면 다시 렌더링 된다는 점만 기억해주세요) 먼저 state 의 선언부터 알아보겠습니다. 코드와 함께 살펴보도록 하겠습니다.프..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 React.js의 중요한 개념 중 하나인 props 에 대해서 알아보도록 하겠습니다. props 는 간단히 말하면 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 것입니다.그 전달을 HTML 의 properties 와 비슷한 방식으로 하는 것을 의미합니다.HTML 의 properties 방식과 바슷하여 props라고 이름이 지어진게 아닐까 생각도 되어집니다. 먼저, props의 기본 개념부터 살펴보겠습니다. 예제를 통해서 살펴보도록 합시다.우리는 이전 포스팅에서 만들었던 Test_comp 컴포넌트 하위에 Test_props 컴포넌트를 만들어 값을 전달해 줄 것입니다. 이를 위해 먼저 Test_props 컴포넌트를 만들어 보겠습니다.src/component..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 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 ..
안녕하세요, 프로독학러입니다. 이번 포스팅 부터 React.js 에 대해서 알아가 보도록 하겠습니다. 가장 먼저 배울 내용은 React Component 입니다. React 프로젝트는 컴포넌트 단위로 구성됩니다.여러 개의 컴포넌트 들이 모여 페이지를 구성하게 됩니다.컴포넌트 별로 파일을 만들어 사용하기 때문에 한 번 정의한 컴포넌트를 프로젝트 내의 다른 곳에서 재사용하기도 편리합니다. 그럼 저희의 프로젝트에서 컴포넌트를 하나 만들어 보도록 하겠습니다. 루트 폴더의 하위 src 폴더의 아래에 components 폴더를 하나 만들어 보겠습니다.(앞으로 만들 컴포넌트들은 모두 이 폴더에 저장할 것입니다)그리고 생성된 components 폴더에 Test_comp.js 파일을 만들고 아래의 코드를 복사, 붙여넣기..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 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..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 자바스크립트의 생성자 함수와 prototype 객체에 대해서 알아보도록 하겠습니다. 먼저 prototype 객체에 대해서 알아보겠습니다. 일단 이름부터가 무시무시합니다. 저도 처음에 프로토타입 객체니 생성자니 this니 constructor니... 하는 용어들에 압도된 적이 있었는데요, 천천히 알아가 보도록 합시다. 자바스크립트에는 여러가지 데이터 형태가 있습니다.Boolean, Number, String, Null, undefined, Object, Array, Function 등 여러가지의 데이터 타입이 있습니다.이 데이터 타입을 크게 기본 타입과 객체로 나누어 볼 수 있습니다. 기본 타입 : Number, String, Boolean, undefin..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 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)..