함께 성장하는 프로독학러
Memo_app 01. 시작하기에 앞서 본문
안녕하세요, 프로독학러 입니다.
이번에 진행할 튜토리얼은 'Memo 어플리케이션 만들기' 입니다.
1. intro
본 튜토리얼은 Velopert 님의 'React.js Codelab 2016' 을 기반으로 작성될 예정입니다.
여러 모듈들의 버전업에 따라 작성방법이 조금씩 달라진 코드를 버전에 맞게 수정하고, 제가 튜토리얼을 따라함에 있어 이해가 쉽지 않았던 부분에 설명을 추가하는 방식으로 진행할 예정입니다.
* Velopert 님의 원본 튜토리얼을 보고싶으신 분들은 아래의 링크를 참고해 주세요.
<React.js codelab 2016 - Velopert>
2. require
Memo 어플리케이션은 여러가지 언어들을 이용하여 만드는 하나의 서비스입니다. 아래의 리스트 중 모르는 언어나 부족한 부분이 있다면 해당 언어를 숙지하신 후 튜토리얼을 따라오시는 것도 좋습니다.
* 아니면 쭉 따라오시다 나중에 공부가 필요한 부분이 어떤 부분인지 메모해 두었다 해당 부분을 따로 공부하는 방법도 좋습니다. 편하신 방법으로 따라오시면 되겠습니다.
* 모든 언어를 완벽하게 숙지하실 필요도 없고, 가능하지도 않습니다. 어떻게 작동하는지 컨셉만 알고있으면 충분합니다. 모르는 부분은 그때그때 찾아가며 작성하면 됩니다.
- HTML / CSS
- JAVASCRIPT / ES6
- React.js / Redux / react-router (react-router-dom)
- Node.js / Express
- MongoDB / mongoose
3. 구상 및 작업 계획
먼저 우리가 만들게 될 SPA(Single page Application), Memo_app 의 완성된 형태를 보시겠습니다.
* 위의 링크는 Velopert 님의 Memo 어플리케이션 완성본이지만, 저희가 만들 결과물도 같기 때문에 위의 링크를 첨부하였습니다.
그럼 어플리케이션에 어떤 기능들이 있는지 살펴보겠습니다.
Memo 어플리케이션의 기능은 크게 세 가지로 나누어 볼 수 있습니다.
- 인증 : 회원가입, 로그인, 로그인 확인(세션을 통해), 로그아웃
- CRUD : 메모 쓰기, 읽기, 수정, 삭제
- 검색 : 유저 검색, 담벼락(특정 유저가 작성한 메모만을 볼 수 있는)
위의 기술된 기능의 순서로 튜토리얼을 진행할 예정입니다.
모든 튜토리얼은 컴포넌트와 컴포넌트가 서버와 통신하는 작동 순서에 따라 진행될 예정입니다.
4. FRONT-END 컴포넌트와 BACK_END API 가 통신하는 과정
본격적으로 튜토리얼에 들어가기에 앞서, 컴포넌트와 API 가 통신하는 과정에 대해서 알아보도록 하겠습니다.
이 통신 과정은 모든 기능에 비슷하게 적용되므로 잘 숙지할 필요가 있습니다.
그림으로 나타내자면 위와 같습니다.
찬찬히 살펴보도록 하겠습니다.
가장 먼저 살펴볼 것은 BACK-END 의 API 입니다.
API 는 특정 경로의 특정 메소드(HTTP 통신 메소드)로 들어오는 요청을 받아 요청 값에 따라 다른 결과를 response 합니다.
리스폰스하는 값은 JSON 형태를 하고있습니다.
두 번째로 살펴볼 것은 FRONT-END 의 Redux 입니다.
리덕스는 상태관리를 위한 컴포넌트별로 상태관리를 하는 것이 아닌 전역에서 상태를 관리하고, 필요한 컴포넌트에서 상태를 쓸 수 있게 하는 라이브러리 입니다.
리덕스의 상태변경은 리듀서가 진행하는데, 이 리듀서는 dispatch 함수로 부터 전달받은 action 객체의 type 에 따라 상태를 변경합니다.
또한, 리듀서로 액션객체를 보내는 dispatch 함수는 BACK-END API 와 통신을 주고받은 결과에 따라 다른 dispatch 가 실행되는데, 이를 결정하는 함수는 thunk 입니다.
즉, thunk 함수 내에서 BACK-END API 와 통신을 주고받고, 통신에 결과에 따라 다른 dispatch 함수를 리듀서로 전달하는 것입니다.
세 번째로 살펴본 것은 FRONT-END 의 Container Component 입니다.
컨테이너 컴포넌트는 라우트 컴포넌트로, 사용자가 특정 경로(url)로 들어왔을 때 보여지는 라우트 컴포넌트입니다.(View)
라우트 컴포넌트는 하위에 한 개 이상의 컴포넌트를 가지고 있으며, 리덕스와 연결되어 리덕스 state 와 thunk 함수를 사용할 수 있습니다.
네 번째로 살펴볼 것은 FRONT_END 의 component 입니다.
컴포넌트는 기능별로 구성되며, 컨테이너 컴포넌트에 종속되어 있습니다.
종속되어 있다는 것은, 컨테이너 컴포넌트로부터 상태나 메소드 등을 props 로 전달받아 사용할 수 있다는 의미입니다.
대부분의 경우, thunk 함수의 인자를 컴포넌트의 상태를 통해 전달합니다.
위 그림에서 숫자는 데이터나 메소드, 상태가 이동하는 경로를 표현한 것으로 각 번호별로 이동하는 값들은 다음과 같습니다.
- 리덕스에서 정의된 thunk 함수와 리덕스 state 를 컨테이너 컴포넌트에서 props 로 전달받은 것처럼 사용할 수 있게 connect 함. (컨테이너 컴포넌트와 리덕스를 연결)
- 컨테이너 컴포넌트에서 thunk 함수를 실행하는 메소드를 정의하고, 하위의 컴포넌트로 전달(props 로)
- 컴포넌트에서는 자신의 상태(컴포넌트 state)를 통해 thunk 함수의 인자로 들어갈 값을 결정해 실행
- 인자가 들어와 실행된 thunk 는 BACK-END API 로 데이터를 전달
- 전달받은 데이터에 따라 다른 JSON 파일을 리스폰스
- 리스폰스값에 따라 리덕스 state 를 변경하고, 변경된 값이 컨테이너 컴포넌트로 전달됨.
튜토리얼의 본문 안에서 각 상황(기능)별로 어떤 데이터가 주고받아지는지 설명하며 튜토리얼을 진행할 예정입니다.
여기까지...
Memo app 을 만들기에 앞서 숙지해야할 내용과 개념들을 짚어보았습니다.
위에서 설명한 컴포넌트와 API 가 통신하는 방법은 정확히 이해 가지 않으셔도 괜찮습니다.
튜토리얼 안에서 계속 반복해서 설명해 드릴테니 따라오시다 보면 익숙해 질것이라 생각합니다.
다음 포스팅에서는 튜토리얼에 필요한 환경을 만들고, 디렉토리 구조에 대해서 알아보도록 하겠습니다.
감사합니다.
**참고 자료 (항상 감사드립니다)
<React.js codelab 2016 - Velopert>
*이 포스팅이 도움이 되셨다면 다녀가셨다는 표시로 공감 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)
'Programming > tutorials' 카테고리의 다른 글
Memo_app 06. 메모(Memo) - Retrieve 기능 구현 (메모읽기) / 무한스크롤링 구현 (0) | 2018.06.27 |
---|---|
Memo_app 05. 메모(Memo) - Create 기능 구현 (메모작성) (0) | 2018.06.26 |
Memo_app 04. 인증(authentication) - 로그인, 로그아웃, 로그인 확인 구현 (0) | 2018.06.26 |
Memo_app 03. 인증(authentication) - 회원가입 구현 (3) | 2018.06.23 |
Memo_app 02. 작업환경 설정 및 디렉토리 구조 이해 (0) | 2018.06.22 |