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 의 완성된 형태를 보시겠습니다.

https://memo.vlpt.us/

* 위의 링크는 Velopert 님의 Memo 어플리케이션 완성본이지만, 저희가 만들 결과물도 같기 때문에 위의 링크를 첨부하였습니다.

그럼 어플리케이션에 어떤 기능들이 있는지 살펴보겠습니다.

Memo 어플리케이션의 기능은 크게 세 가지로 나누어 볼 수 있습니다.

1. 인증 : 회원가입, 로그인, 로그인 확인(세션을 통해), 로그아웃
2. CRUD : 메모 쓰기, 읽기, 수정, 삭제
3. 검색 : 유저 검색, 담벼락(특정 유저가 작성한 메모만을 볼 수 있는)

위의 기술된 기능의 순서로 튜토리얼을 진행할 예정입니다.

모든 튜토리얼은 컴포넌트와 컴포넌트가 서버와 통신하는 작동 순서에 따라 진행될 예정입니다.

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 함수의 인자를 컴포넌트의 상태를 통해 전달합니다.

위 그림에서 숫자는 데이터나 메소드, 상태가 이동하는 경로를 표현한 것으로 각 번호별로 이동하는 값들은 다음과 같습니다.

1. 리덕스에서 정의된 thunk 함수와 리덕스 state 를 컨테이너 컴포넌트에서 props 로 전달받은 것처럼 사용할 수 있게 connect 함. (컨테이너 컴포넌트와 리덕스를 연결)
2. 컨테이너 컴포넌트에서 thunk 함수를 실행하는 메소드를 정의하고, 하위의 컴포넌트로 전달(props 로)
3. 컴포넌트에서는 자신의 상태(컴포넌트 state)를 통해 thunk 함수의 인자로 들어갈 값을 결정해 실행
4. 인자가 들어와 실행된 thunk 는 BACK-END API 로 데이터를 전달
5. 전달받은 데이터에 따라 다른 JSON 파일을 리스폰스
6. 리스폰스값에 따라 리덕스 state 를 변경하고, 변경된 값이 컨테이너 컴포넌트로 전달됨.

튜토리얼의 본문 안에서 각 상황(기능)별로 어떤 데이터가 주고받아지는지 설명하며 튜토리얼을 진행할 예정입니다.

여기까지...

Memo app 을 만들기에 앞서 숙지해야할 내용과 개념들을 짚어보았습니다.

위에서 설명한 컴포넌트와 API 가 통신하는 방법은 정확히 이해 가지 않으셔도 괜찮습니다.

튜토리얼 안에서 계속 반복해서 설명해 드릴테니 따라오시다 보면 익숙해 질것이라 생각합니다.

다음 포스팅에서는 튜토리얼에 필요한 환경을 만들고, 디렉토리 구조에 대해서 알아보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

<React.js codelab 2016 - Velopert>

*이 포스팅이 도움이 되셨다면 다녀가셨다는 표시로 공감 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)