Post에 대한 CRUD 만들기

이 글의 목표: 이전 글에서 만든 프로젝트에 블로그의 post를 다루는 화면을 추가한다.

글은 제목, 내용, 날짜, 저자를 기록한다.

이전에 목표로 잡은 것 중에 이런 내용이 있었으니 같은 내용이 있으니 터미널에 다음과 같이 입력한다.

mix phx.gen.html Content Post posts title:string content:text author:string published_at:naive_datetime

이것은 mix task 중 Phoenix에서 제공하는 생성기를 활용하여 HTML 리소스용 컨트롤러, 뷰, 템플릿, 스키마 및 컨텍스트를 생성시키는 명령어이다.

• 첫 번째 argument인 Content는 컨텍스트라고 하는데 컨텍스트는 밀접하게 관련된 리소스들을 위한 API 경계 역할을 하는 Elixir 모듈이다.
• 두 번째에 오는 Post는 schema로 데이터베이스 필드를 Elixir 구조체로 매핑하는 역할을 하는 Elixir 모듈이다.
• 세 번째에 오는 posts는 데이터베이스 테이블 이름이다.
• 그 이후로 오는 내용은 필드와 타입에 대한 내용이다. string타입의 title, text타입의 content 등을 만든다.

자세한 내용은 이 문서를 참고하면 된다. https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Html.html

명령을 실행시키면 뭔가 잔뜩 만들더니 다음과 같은 내용이 출력된다.

Add the resource to your browser scope in lib/blog_web/router.ex:
    resources "/posts", PostController

Remember to update your repository by running migrations:
    mix ecto.migrate

시키는대로 lib/blog_web/router.ex 파일에 아래와 같이 resources "/posts", PostController를 추가한다.

scope "/", BlogWeb do
    pipe_through :browser

    get "/", PageController, :home

    # 새로 추가한 코드
    resources "/posts", PostController
end

이후 mix ecto.migrate를 터미널에 입력해서 데이터베이스에 새로운 내용을 업데이트 한다.

mix phx.server로 서버를 실행시키고,

• localhost:4000/posts를 입력해보면 글의 목록을 볼 수 있는 화면이 나온다.
• 오른쪽 위에 New Post 버튼을 누르면 글 작성 화면으로 이동한다. 화면의 주소는 http://localhost:4000/posts/new 이다.
• 글을 하나 작성해 보고 나면 http://localhost:4000/posts/{ID}에 작성한 글의 상세 화면이 보인다.
• Back to posts 버튼을 눌러 /posts로 돌아가면 작성한 글이 목록으로 보이고 수정과 삭제 버튼이 붙어있다.

이렇게 글을 작성하고, 읽고, 수정하고, 삭제하는 화면을 만들었다!