함께 성장하는 프로독학러

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 프론트앤드에 React.js 를 사용하고, 백앤드에는 Node.js(Express) 를 사용하는 프로젝트의 초기 설정법에 대해서 알아보도록하겠습니다. 사실 본 카테고리의 첫 번째 포스팅에서 리액트 환경을 설정하는 법에 대해 다뤄본 적이 있었는데요, 해당 포스팅에서는 프로젝트를 production 모드로 빌드하고 실제로 서비스하기위한 코드가 빠져있었습니다. (백앤드에 대한 설정도 빠져 있습니다) 따라서 새로운 프로젝트를 빠르게 만들어가면서 알아보도록 하겠습니다. 1. 프로젝트 디렉토리 생성 가장 먼저 해야할 작업은 프로젝트 디렉토리를 생성하는 것입니다. 명령창에서 mkdir 을 이용하여 새로운 디렉토리를 생성하고, cd 를 이용하여 해달 디렉토리에 접근하도..

안녕하세요, 프로독학러입니다. 이번 포스팅에서는 저번 포스팅에 이어 Counter 어플리케이션을 만들어보도록 하겠습니다. *velopert 님의 Youtube 강의를 정리한 내용이라고 보시면 될 것 같습니다. (5강) 리덕스를 이용한 상태관리 프로젝트의 순서는 다음과 같다고 했습니다. 1. 액션 타입 생성 (action 은 객체이며, type 속성을 반드시 가지고 있어야 한다.)2. 액션 생성 함수 정의 (액션 생성 함수를 통하여 action 객체를 빠르게 만들 수 있도록 도와줌)3. 실질적으로 변화를 일으키는 함수인 리듀서 정의 (인자로는 prevState와 action이 들어옴, 들어오는 action 객체의 타입에 따라 어떤 변화를 일으킬지 정의)4. 스토어 생성 (3에서 만든 리듀서를 포함하여 cr..

안녕하세요, 프로독학러입니다. 이번 포스팅에서는 저번 포스팅에서 알아본 Redux 를 이용해 Counter 어플리케이션을 만들어보도록 하겠습니다. *velopert 님의 Youtube 강의를 정리한 내용이라고 보시면 될 것 같습니다. (5강) 먼저 우리가 만들 어플리케이션의 모습을 보고 어떻게 만들어야 할 지 구상해 보도록 하겠습니다. 간단한 모양새를 하고 있습니다.가장 윗 부분에 숫자가 나와 있습니다.그리고 아래의 +버튼을 누르면 숫자가 1씩 증가하고, -버튼을 누르면 1씩 감소합니다.그리고 Randomize Color 버튼을 누르면 배경색이 랜덤하게 바뀝니다. 위의 그림처럼 말이죠. 그럼 만들어야 할 컴포넌트를 구성해 보도록 합시다. 가장 큰 컴포넌트는 모든 컴포넌트를 렌더링하는 Counter 컴포넌..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 리덕스를 사용하는 이유와 리덕스의 개념을 정리해 보겠습니다. * 이번 포스팅의 내용은 velopert 님의 '리덕스 왜 쓸까?' 포스팅을 정리한 내용입니다. 리덕스를 이해하기 위해서 먼저 리덕스를 사용하지 않는 환경의 단점을 먼저 파악해 보겠습니다. 간단한 예를 통해 살펴보겠습니다. 만약 다음 그림과 같이 세 개의 컴포넌트가 있다고 합시다.A 컴포넌트는 B 와 C 컴포넌트의 부모 컴포넌트입니다. B 컴포넌트는 A 의 상태를 변경하는 함수를 실행하는 컴포넌트입니다. (A의 상태를 변경하는 메소드 _increase 를 increNum 프롭스로 전달받습니다.) C 컴포넌트는 A 컴포넌트의 상태(state)를 렌더링하는 컴포넌트입니다.(A의 상태를 numValu..

안녕하세요, 프로독학러 입니다. 이번 포스팅 이후부터는 React 의 Redux 에 대해서 알아가 볼 예정입니다.따라서 이번 포스팅에서는 Redux 를 위한 세팅 및 코드 작성에 도움을 주는 세팅을 하겠습니다. 먼저 Redux 에 필요한 패키지파일들을 설치하겠습니다. 터미널 프로그램의 루트폴더에서 아래의 명령어를 입력해 줍니다. npm install --save redux react-redux 패키지를 통해 설치된 파일들의 사용은 추후에 개념과 함께 알아가도록 하겠습니다. 다음으로 코드 작성에 도움을 주는 몇 가지 세팅들을 해 보도록하겠습니다. 1) Atom 에디터의 Snippets 기능 Atom 에디터에는 Snippets 라는 기능이 있습니다.Snippets 에 코드를 작성해 두면, 해당 코드를 호출하..

안녕하십니까 여러분, 프로독학러 입니다. 저번 포스팅에 이어 전화번호부 어플리케이션을 만들어 보도록 하겠습니다.*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 를 이용하면 목록에 새로운 전화번호 정보를 추가 할 수 있습니다. 위의 어..