instagram의 복제 앱 만들기 ③

소개

제목대로, 간이판 instagram의 앱을 만들어 갑니다.
아래의 공정으로 나누어 기사를 집필해 나가므로, 순서를 쫓아 읽어 주셨으면 합니다.

① 앱 만들기 ~ 로그인 기능 구현
② 사진 게시 기능 구현
③ 사용자 페이지 구현 　← 이마코코
④ 팔로우 기능 구현
⑤ 투고 삭제 기능 구현

사용자 컨트롤러 작성 및 편집

이제는 명명 규칙으로서 모델명은 단수형, 컨트롤러명은 복수형입니다.
이번은 컨트롤러명이므로 users 와 복수형으로 하고 있습니다.
※이하, 어플리케이션의 디렉토리로

rails g controller users

라우팅 설정도 잊지 마세요.

routes.rb

Rails.application.routes.draw do
  root 'homes#index'

  devise_for :users

  resources :photos
  resources :users # ←ここ
end

설정할 수 있으면 users_controller.rb를 편집합니다.

users_controller.rb

class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
  end
end

showアクション 에서 사용자를 나열합니다.

view 파일 편집

이전 기사에서 홈 화면에 게시된 이미지와 텍스트를 볼 수 있도록 했지만,
이번은 각 유저의 페이지내에서 투고 내용을 볼 수 있도록 편집해 갑니다.

합니다, 사용자 페이지 만들기에서.app/views/users 에 show.html.erb 를 만들고 편집합니다.

app/views/users/show.html.erb

<h3><%= @user.email %></h3>

<% @user.photos.each do |photo| %>
  <div>
    <p><%= photo.caption %></p>
    <%= image_tag photo.image %>
  </div>
<% end %>

@user.email는 사용자 이름 대신입니다.
그리고, 전회 투고 내용의 표시를<% current_user.photos.each do |photo| %>했던 곳<% @user.photos.each do |photo| %>했다.

물론 홈 화면에 표시하고 있던 투고 내용은 삭제합니다.

app/views/homes/index.html.erb

<h3>home</h3>

<div>
  <%= link_to 'logout', destroy_user_session_path, method: :delete %>
</div>

<div>
  <%= link_to '写真投稿', new_photo_path %>
</div>

#　↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ここから下を削除 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<% current_user.photos.each do |photo| %>
  <div>
    <p><%= photo.caption %></p>
    <%= image_tag photo.image %>
  </div>
<% end %>

삭제한 후 각 사용자의 페이지에 대한 링크를 표시합니다.

app/views/homes/index.html.erb

<h3>home</h3>

<div>
  <%= link_to 'logout', destroy_user_session_path, method: :delete %>
</div>

<div>
  <%= link_to '写真投稿', new_photo_path %>
</div>

#　↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ここから下を追加 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<% User.all.each do |user| %>
<div>
  <%= link_to user.email, user_path(user) %>
</div>
<% end %>

이메일 주소가 사용자 이름 대신입니다.user_path(user) 의 부분은 rails routes 의 Prefix를 확인.
이번은 userのid 도 식별할 필요가 있으므로, (user) 가 필요합니다.
※ user_path(user) 의 부분을 [user] 라고 해도 같습니다.


홈 화면이 다음과 같이 되어 있으면 성공입니다.


실제 거동은 이렇게 되어 있습니다.

[email protected] 페이지로 이동하면,
맨 위에 사용자 이름, 이어서 게시물 내용이 표시됩니다.
[email protected] 페이지로 이동하면,
아직 게시되지 않았으므로 사용자 이름만 표시됩니다.

덧붙여서, 로그인하지 않은 상태에서도 각 사용자의 페이지에 액세스 할 수 있도록,users_controller 를 before_action 로 설정하지 않았습니다.

이상입니다. 수고하셨습니다.

다음 → ④ 팔로우 기능 구현