NodeJs.CRUD 흐름도

목차

1. 흐름도(Flow-Chart)

2. Create

3. Read

4. Update

5. Delete

6. 인덱스(Index)

 

 

1. 흐름도(Flow-Chart)

 

<그림 1>

 

게시판 만들기 프로젝트를 위해서 남겨놓았던, 게시판 흐름도이다.

 

D를 맡고있는 Delete 기능은 저기중에서 List나 View에 해당 Index를 찾아 비우기만 하면된다.

 

자세히 들여다 보도록 하자.

 

 

---

2. Create

 

게시판 작업시 글을 생성하는 파트이다.

 

우선, 홈페이지에서 리스트로 들어가야한다.

 

< 그림 2> Home에서 List로 넘어가기

 

리스트에 들어와 글 작성하기 버튼을 눌러 write 페이지로 넘어가보자.

 

<그림 3> Write에서는 Index를 생성한다.

Index의 생성

글 작성 페이지에서 글 작성 완료버튼을 눌렀을 때, 방금 쓴 글을 구별할 수 있도록 식별자를 넣어 주어야한다.

 

만들고 난 후 View 페이지로 화면을 이동시키고, View 화면은 Index를 url에서 구분할 수 있도록한다.

 

/board/view?index=1

 

위의 url 예시처럼 index값을 1로 넣어 주면, 이 글을 불러올 때 저 값이 식별자가 되어 불러올 수 있다.

 

 

---

3. Read

 

Create에서 받은 Index를 담아 데이터를 생성하여 List와 View페이지에서 구분을 할 수 있도록한다.

 

list에서는 각 목록에 Index를 가지고 있고, view페이지는 리스트에서 한 줄을 클릭하면 해당 Index에 해당하는 글을 화면에 띄울 수 있다.

 

이 모든 것은 식별자(Index)가 있기 때문에 가능하다.

 

<그림 4> List와 VIew

 

 

---

4. Update

 

글의 수정을 담당하는 modify 페이지이다.

 

view 페이지에서 Index를 가지고와 해당 글을 수정하는데, 내용만 수정하고 글의 인덱스는 수정할 수 없도록 하면된다.

 

그러면 인덱스가 바뀌지 않아 글의 내용만 바뀐다.

 

수정 화면 자체는 글 쓰기 화면과 거의 흡사, 유사하므로 어려울 점은 없다.

 

<그림 5> View와 Modify

 

---

5. Delete

 

글의 삭제부분이다.

 

삭제 역시 인덱스를 가지고 시작해야된다.

 

여기서 인덱스를 가지고 있는 두 페이지, List와 View를 통해서 지우는 것이 일반적이다.

 

어느 페이지에 삭제를 구현해 놓을지는 개인취향이지만,

 

나는 리스트와 뷰 모두에 삭제를 구현해놓는 것이 좋다고 생각한다.

 

데이터의 관리 측면에서, 리스트에서 지우는 것이 좋기도 하지만, 직접 해당글을 보면서 지우는 것도 좋아보이기 때문이다.

 

삭제 구현의 방법은 간단하다. 아래 그림에는 없는 삭제버튼을 만들고, 버튼에는 인덱스를 구분할 수 있도록 해둔다.

 

해당 인덱스의 데이터를 없애기만 하면 삭제는 쉽게 구현된다.

 

<그림 6> 삭제의 구현

 

---

6. 인덱스(Index)

 

페이지와 페이지간의 이동핵심은 Index가 아닐까 싶다.

 

Index를 만들어 줘야하고, Index를 이용해 각 글을 구분하고, 구분된 글을 수정하고, 삭제할 수 있기 때문이다.

 

Index의 역할을 생각하고, Index의 흐름을 생각하면서 게시판을 구성하는 것이 바람직하지 않나 싶다.