디자이너가 만드는 게시판 첫 번째 - 게시판이란?

아 쉽고도 어려운 개발의 세계여..

첫 시작이므로 내용이 쉬울 수도 있고 어려울 수도 있다.

퍼블리싱 작업을 많이 해본 사람이라면 쉬울 수도 있고 그저 크리에이티브 작업만 했던 사람이라면 이게 도통 한국말이 맞는가 싶을 것이다.

시작이니만큼 개요부터 언급하는 것이 좋겠다.

앞서 설명했지만 본 가이드는 html과 css는 알고 있다는 전제가 깔려 있다.

즉 html과 css를 모르는 디자이너라면 먼저 공부를 하고 오는 것이 좋다.

생활코딩에 html과 css에 대한 강좌가 있으니 차근차근 공부한다 생각하고 한 번씩 둘러보자.

그리고 우리가 제작할 게시판은 php나 jsp 등을 사용하지 않는 순수 프론트단에서 끝나는 게시판이다.

게시물이 작성되면 해당 내용을 저장할 db 또한 필요할 텐데, 그것은 앞서 언급한 parse를 사용할 것이다.

우리가 만들 게시판은 순수 html과 css 그리고 javascript로 끝난다.

디자이너가 만드는 게시판이므로 어려울 필요는 없다고 생각하기 때문이다.

개발자가 보기엔 초등학생이 건담 pg 조립하는 소리하고 있네 라며 혀를 끌끌 찰진 모르겠으나,

디자이너에겐 이것조차 굉장히 큰 도전일 수 있음을 알아주셨으면 좋겠다.

자.

게시판을 한번 생각해보자.

게시판은 크게 게시물 리스트 페이지, 작성 페이지, 게시물 뷰 페이지, 게시물 수정 페이지로 나눌 수 있다.

좌측부터 순서대로 리스트 페이지, 뷰페이지, 작성 페이지

하나의 페이지에서 모든 것을 다루진 않는다는 말씀.

ajax를 이용하여 다이내믹하게 하나의 페이지에서 모든 걸 처리할 순 있지만 그다지 그럴 필욘 없다.

기초개념은 이렇다.

게시물 리스트 페이지

예시는 샘플일뿐

html에서 쿼리문을 통해 db에 쿼리를 던진다.

db 내에 존재하는 작성일자나 각종 글자들을 불러오겠다 라는 쿼리문이다.

물론 작성 페이지에서 데이터들이 기 입력되어 있어야 불러올 수 있음은 당연한 소리이다.

쿼리문을 통해 쿼리가 성공하면 불러온 데이터들을 내가 미리 작성해놓은 html 코드 안에 결과값을 뿌리도록 한다.

작성 페이지

이런 거창한 다기능 에디터를 넣겠다는 의미는 아니다.

html에서 텍스트를 작성하려면 인풋 폼이 필요하다.

<input type="text"> 같은 녀석인데 이런 녀석에 작성한 내용을 특정 코드를 통해 db로 인서트 한다.

db로 인서트가 완료되면 리스트 페이지로 리턴 한다.

등록버튼을 누르게 되면 submit을 하게 되는데 get이냐 post냐의 차이도 존재한다.

다분히 어려운 내용이므로 다음에 다루기로 한다.

중요한 건 input에 작성된 내용을 db로 밀어 넣는다는 개념이다.

게시물 뷰 페이지

사실 게시판은 디자인이 중요하다.

작성된 데이터가 있고 리스트에 내용이 잘 뿌려지고 있다고 가정해보자.

작성 페이지에서 데이터가 db에 저장이(인서트라고 함) 되면 db 내에 하나의 row가 만들어지는데 (table에서 하나의 tr이라고 보면 편하다. 각 데이터들은 tr내에 td처럼 구성된다.) 각 row 들은 objectID를 가지게 된다.

objectID는 각각의 row에 부여되는 매우 유니크한 값이다.

그렇다면 게시물 리스트 페이지에서 뿌려지고 있는 데이터들은 모두 유니크한 objectID를 갖고 있다는 의미이다.

리스트 페이지에서 특정 게시물을 클릭하면 objectID를 조회하여 db 내부를 조회하고 내가 클릭한 게시물의 objectID와 일치하는 결과 데이터들만 뿌려주는 것이 뷰페이지이다.

가장 중요하고도 어려운 개념이므로 예를 들어 설명하자면,

예를 들면 2015년 11월 20일 07시 10분 10초에 작성된 데이터가 있다고 보자.

작성한 데이터는 인풋 데이터가 3개가 있다. (아래 내용 모두 가정)

작성자, 제목, 내용.

하지만 db row에는 입력되는 데이터가 몇 개 더 있다. (parse 기준)

objectID, 생성일자, 저장 일자, 작성자, 제목, 내용

작성자 : dEngine

제목 : 아.. 어렵다.

내용 : 진짜 어렵다.

라고 입력을 했다면, db 에는

aaaaa00000(objectID), 20151120071010, 20151120071010, dEngine, 아.. 어렵다, 진짜 어렵다.

요렇게 저장되는 것이다.

그럼 뷰 페이지에서는 aaaaa00000 이런 놈을 찾아서 그 row에 존재하는 데이터들을 html에 뿌려주면 되는 것이다.

아.. 왜 내가 써놓고도 어려울 것 같지..

아무튼, 여기까지 이해를 꼭 해야만 다음장으로 넘어갈 수 있다.

게시판 작성 페이지부터 제작을 할 텐데 위 개념이 이해가 잘 되질 않는다면 앞으로의 여정이 꽤 힘들 수 있다.

얼렁뚱땅 넘어가지 말고 본인이 정말 이해가 되어야 자기 것이 된다.

파이팅!