함께 성장하는 프로독학러

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

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 자바스크립트의 조건문 중 하나인 switch 문에 대해서 알아보도록 하겠습니다. switch 문의 표현식은 다음과 같습니다. switch (expression) { case value1: //Statements executed when the result of expression matches value1 [break;] case value2: //Statements executed when the result of expression matches value2 [break;] ... case valueN: //Statements executed when the result of expression matches valueN [break;] default..

안녕하세요, 프로독학러 입니다. 무릎 부상 때문에 거의 2 주간 러닝을 하지 못했었는데요, 오늘은 그간 했던 재활 운동의 효과가 있는지 볼 겸 가볍게 달리고 왔습니다. 달리기를 할 때 저는 '나이키 런 클럽' 어플리케이션을 이용하는데요, 오늘 보니 '러닝 가이드' 라는게 있더라구요. 저는 원래 위의 메뉴 중 바로 시작을 통해서만 어플을 이용했었습니다. 그도 그럴것이 어플을 실행하면 제일 먼저 나오는 화면이 바로 시작 이었거든요. 이런게 있는줄도 몰랐어요... 그런데 오늘은 어플을 실행하고 나오는 첫 화면이 러닝가이드 이더군요. 이게 새로 생긴건지 아니면 원래부터 있었는지는 사실 잘 모르겠지만 오늘 저는 러닝 가이드 중 'FIRST RUN - 회복 러닝' 을 실시하였습니다. 기존에 사용하던 바로 시작을 통..

안녕하세요, 프로독학러입니다. 이번 포스팅에서는 저번 포스팅에서 알아본 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 에 코드를 작성해 두면, 해당 코드를 호출하..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 다이소에서 2000원에 구매 가능한 대리석 시트지를 이용해 식탁을 리폼하는 방법에 대해서 알아보겠습니다. 일단, 먼저 완성된 사진부터 보실까요? 실제로 보면 대리석같은 느낌이 뿜뿜! 비교를 위해 작업전 식탁의 모습을 살펴 보겠습니다. 하이그로시로 된 식탁인데요, 흰 식탁이어서 그런지 뭐가 묻으면 바로 티가 납니다. 지못미... 검은색은 염색약이 묻어서 착색이 돼 버렸구요, 빨간 자국은 김치국물인 것 같습니다. 코팅이 되어 있지만 김치국물 같은것은 바로 닦아내지 않으면 위 사진처럼 착색이 돼 버리네요. 해서 이 녀석을 구제해 줄 시트지를 다이소에서 공수해 왔습니다! 다이소에서 개당 2000원에 구입할 수 있는 대리석 시트지(50x80)입니다! 제가 리폼할 ..

안녕하십니까 여러분, 프로독학러 입니다. 저번 포스팅에 이어 전화번호부 어플리케이션을 만들어 보도록 하겠습니다.*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..