[루비온레일즈] MVC 패턴(모델, CR기능 만들기1)

저번 포스팅에서는 MVC 패턴과 VC에 해당하는 뷰와 컨트롤러 그리고 액션, 라우트에 대해 이야기했습니다. 아래 링크를 참조하시기 바랍니다 ☺️☺️

[루비온레일즈] 03. MVC 패턴(뷰, 컨트롤러, 라우트)

계속해서 MVC 패턴 중 M에 해당하는 모델과 CRUD 기능 중 쓰기(Create) 와 읽기(Read) 기능을 만들어보겠습니다.

---

1. Create 기능 만들기 - new, create 액션, 뷰

 

우리가 블로그나 홈페이지에 새 글을 쓸 때는 '새 글 작성'과 '작성한 글의 저장'이 이루어져야 합니다.

 

따라서, Create 기능을 만들기 위해서는 컨트롤러 안에 new(새 글 작성) 와 create(새 글 저장) 액션이 필요합니다.

 

지난 포스팅에서 컨트롤러와 액션을 생성했는데요, 이번에는 새로 만들지 않고 기존에 있던 Posts 컨트롤러에 new, create 액션을 추가하겠습니다.

 

액션을 추가하는 방법은 posts_controller.rb 파일에서 index 액션 코드 아랫줄에 같은 형식으로 아래 코드를 입력합니다.

def new
end

def create
end

이렇게 입력하면 맨왼쪽 라이브러리에 PostsController 하위에 new, create 액션이 생성되는 것을 확인할 수 있습니다. 

액션을 만들었으니 뷰를 만들어줄 차례입니다.

 

뷰 파일을 만드는 방법은 화면 오른쪽 코드 입력창에서 1,2,3...이라는 줄을 의미하는 숫자 옆에 문서 모양의 아이콘을 클릭합니다. (new코드가 적힌 5번 줄에서 클릭하여 html.erb 파일을 생성합니다.)

그리고 파일명에 액션의 이름과 동일하게 각각 new.html.erb 파일을 만들어줍니다.

---

2. Create 기능 만들기 - Routes(경로) 설정하기

 

액션을 만들었다면 이제 라우트를 설정해야 합니다.

Config/routes.rb 즉, Config 디렉토리의 routes.rb 파일에 index 의 라우트와 같은 형식으로 new와 create 의 라우트를 설정하는 코드를 입력합니다.

get 'posts/new'
get 'posts/create'

이 코드를 해석하면,

"사용자가 get 방식으로 posts/new 페이지에서 데이터를 요청하면, posts 컨트롤러의 new 액션으로 처리하고, new.html.erb 파일을 화면에서 보여줘라."

라는 뜻입니다.

---

3. Create 기능 만들기 - 정보 작성 폼(form) 만들기

 

우리가 보통 웹사이트에서 어떤 정보를 입력하려면 입력창, 즉 폼(form)이 필요합니다.

그리고 이 폼은 새로 글을 작성하는 페이지 상에 보여져야 하는 것이므로, new.html.erb 파일에 만들어야 합니다.

 

폼을 입력하는 코드는 다음과 같습니다.

<form action='/posts/create' method='post'>
제목 <input type="text" name='post_title'> <br>
내용 <textarea name="post_content" ></textarea> <br>
<input type="submit"></form>

 

이 코드는 form을 만드는 <form>태그인데

<form action='/posts/create' method='post'> 에서 action은 폼에 입력받은 데이터를 보낼 url을 의미합니다.

즉, 저장을 해야하기 때문에 이를 담당하는 create 액션으로 보내는 것이죠. 다음 method는 url을 보내는 방식을 의미하는데 post 방식으로 보내겠다는 의미입니다.

(라우트에서 본 get 방식처럼 데이터 전달 방식의 한 가지입니다.)

 

다음 제목이라는 텍스트는 제목의 위치를 알려주기 위해 제가 넣은 것이구요, <input> 태그는 사용자로부터 정보를 받아들이는 용도입니다.

따라서, <input type="text" name='post_title'> 의 의미는 입력 태그의 유형이 text 이고, 서버로 전달되는 이름이 post_title 이라는 뜻입니다.

 

이때, type 속성의 유형은 몇 가지로 정해져 있으며 name의 경우에는 사용자가 임의로 지정할 수 있습니다.

 

input 태그에 관해 잘 정리해주신 글을 첨부합니다.

yangbari.tistory.com/28

 

중간 중간 삽입된 <br> 태그는 줄바꿈을 해주는 태그입니다.

 

이제 폼을 작성했으니, 화면에 어떻게 출력되는지 보겠습니다!

이번에는 주소창에 /posts 뒤에 new, 즉 /posts/new 라고 입력해서 방금 작성한 폼이 화면에서 어떻게 나오는지 보시죠😁

 

 

이런 식으로 제목과 내용에 관한 정보를 입력 받을 폼이 생겼습니다.

 

제대로 작동하는지 확인하기 위해 글을 입력했더니 라우트 에러가 발생했는데요, 우리가 폼에서 post 방식으로 전달했기 때문에 routes.rb에서도 get 방식이 아닌 post 방식으로 바꿔주어야 합니다.

 

 

아래처럼 create 액션에 해당하는 라우트를 post 방식으로 바꿔줍니다.

 

다시 웹사이트에서 새로고침 후 내용을 입력해보겠습니다. 

이번에는 InvalidAuthenticityToken 에러가 발생하네요.

 

이 에러는 보안 토큰이 없다는 뜻인데요, 라우트에서 post 방식으로 데이터를 전달하기 위해서는 보안을 위한 토큰을 삽입해줘야 합니다.

이는 csrf 라는 악성 코드 공격을 방지하기 위함입니다.

 

get 방식에서는 보안 토큰 없이 데이터가 전달되지만 post 보다는 보안에 취약합니다.

(그런데, 실제로 post도 그렇게 보안에 탁월하진 않다고 하네요..)

 

아무튼 이 오류를 해결하기 위해 구글에 rails csrf form tag 를 검색하고 가장 첫번째 문서에 들어갑니다.

 

스크롤을 내려보면 친절하게도 해결방법이 나와있습니다!!

읽어보면, form 안에 아래 태그를 입력하라는 것인데요, 이 코드를 복붙해서 new.html.erb에서 작성한 폼에 넣어줍니다.

 

여기에 넣어주는 이유는 새 글을 작성하는 기능을 처리하는 곳은 new 액션이기 때문에, new.html.erb 안에 새 글 작성 폼을 만들었기 때문입니다.

<%= hidden_field_tag %>는 보이지 않고 숨기고 싶을 때 사용합니다.

 

다시 새 글 작성 페이지로 돌아와 글을 작성하고 제출을 눌렀더니 에러는 나지 않지만 아무것도 보이지 않습니다.

 

그 이유는 제가 아직 데이터베이스에 데이터를 저장하는 '모델'과 글을 보는 '보기'에 해당하는 액션과 뷰를 만들어주지 않았기 때문입니다.

 

맨 처음에 create가 새 글을 저장한다고 했는데 왜 데이터를 저장하는 모델을 만들어야 할까요??

create 액션에서 데이터를 저장하는 기능은 데이터베이스가 아니라 메모리에 저장하기 때문입니다.

데이터베이스와 달리 메모리는 데이터를 오랫동안 저장하지 못합니다..따라서 모델을 만들어주어야 새 글을 저장하고 이를 다시 불러와서 읽을 수 있습니다!

---

이번 포스팅에서 쓰기(Create) 기능을 만들기 위해, new와 create 액션과 뷰를 만들고 각각에 해당하는 뷰 파일까지 만들었습니다.

 

그리고 new.html.erb 파일에 새 글을 작성하는 form도 만들었고, 중간에 발생하는 라우팅 에러와 csrf 에러까지 해결해보았습니다 👍

 

다음에는 계속 이어서 작성한 데이터베이스에 저장되고, 화면에 나타나도록 모델을 만들고 읽기(Read)기능을 구현해보겠습니다.