Macy
113
2021-05-03 00:49:55
13
191

Laravel & vuejs


안녕하세요

현재 laravel 8 로 사이트를 제작 중인 

1년갓 넘은 개발자 입니다.


게시판 용도의 사이트를 제작 중인데

html css 로 페이지 를 만든 후 

라우터 설정 및 데이터 작업을 진행 중인데


게시글 좋아요 나 댓글을 작성할 때, laravel 로 했을 떄 페이지 새로고침이 되어 

프론트작업을 하려고 알아보던 참에 

간단하고 쉬운 vue js 프레임워크를 사용하게 되었습니다.


vue js 의 axios 를 이용하여 laravel route 주소에 post 로 값을 넘겨 좋아요 처리는 되었으나

즉각 반영이 안되어서 이 부분을 어떻게 처리해야할지 .. 선배님들에게 의견을 여쭤보고자 글 남깁니다.


0
  • 답변 13

  • 프레드윰
    159
    2021-05-03 01:23:48

    즉각 반영이 안된다는게?

  • Macy
    113
    2021-05-03 01:25:44

    @프레드윰


    게시글에 좋아요를 누르면

    axios 로 인해 서버에서는 3+1 되었지만

    실제 코드는 

    laravel 8 에서 긁어온 데이터이기 떄문에 

    서버측 데이터인 3 이 그대로 남아있는 상태입니다 ㅠㅠ

  • 프레드윰
    159
    2021-05-03 01:29:52

    그냥 훼이크로 뷰단에서 +1 남겨주면?

    -1
  • TeraGo
    637
    2021-05-03 04:05:41

    대충 힌트만..


    <p> {{ like }} </p>

    이런식으로 두고 axios 로 like 값을 바꿔주면 됩니다.

  • 니르바나
    2k
    2021-05-03 08:54:33

    응답 체크후 업데이트 하시면됩니다~

    정상처리되면 +1

    아니면 에러메시지를 출력해야해요.

  • Macy
    113
    2021-05-03 09:21:57

    @Terago

    답변 감사합니다

    저도 그 방식이 맞는 듯 한데

    그렇게 하려면 like 를 라라벨 서버에서 던지는게 아니라 axios 를 통하여 데이터를 다 긁어와서

    값을 변경해줘야할듯 한데

    이게 맞나 싶은게

    모든 페이지가 여러가지 클릭으로 인해 클릭 시 값 변동이 되어야할 듯 한데 그럼

    라우터는 라라벨로 안에 데이터를 axios 로 불러오는 것이 맞는 구조인지 확신이 안서서요 ㅠㅠ


    @프레드윰

    그렇게 하자니 vue 를 도입한 의미가 없어져서요 ㅠ


    @니르바나

    그게 잘 안되서요 ㅠ 사유는 테라고님한테 단 댓글 때문인데 

    지금 데이터가 php 단에서 받아온 데이터인데

    이것을 vuejs 에서 유동적으로 변경할 수 있는 방법이 잇을까요

    제가 아무리 찾아도 방법을 못 찾아서요ㅠㅠ

    /*

    Axios 를 통해 동작 처리 후 값을 리턴한다

    This.vote 에 값을 리턴값으로 대체한다

    위 방법이 제가 알아낸 방법인데

    이렇게 하기 위해서는 데이터를 애초에 뷰로 불어와야하기 때문에 이렇게 하는 것이 맞는 지에 대한 의문이 드ㄴ 상태입니다

    */


    휴대폰 작성이다보니 오타가 좀 있네요

    죄송합니다


  • 니르바나
    2k
    2021-05-03 10:11:06

    1. like누르면 axios로 like+=1시키는 백엔드 api를 호출합니다.

    2. response가 오겠죠.. 200 status code가 오면 정상처리로 간주하시고 like+=1시켜주셔도됩니다.

    아니면 response안에 like 갯수의 데이터를 반환하시고 해당 값으로 치환해주셔도되구요.

    이건 선택이죠.

    어찌되었던 like의 업데이트를 vue단에서 해줘야 반영이 되는건 당연하겠죠.


    3. 페이지를 어떻게 구성하셨는지 모르겠지만 like 업데이트시 모든 페이지를 업데이트 한다는게 어떤 뜻인지 모르겠어요~ 그 부분을 자세히 설명해주시면 좋을것 같아요. vue의 경우 특별한 설정을 하지 않으면 route 되는 시점에서 다시금 instance가 생성됩니다.

    그래서 페이지는 로드할때마다 서버쪽으로 request가 자연스레 다시 전달될거에요.

    okky 페이지도 게시판 목록 페이지를 누르면 다시금 게시글 목록을 로드하잖아요.

    각 페이지별로 따로 생각하셔야되요~

  • Macy
    113
    2021-05-03 12:52:28

    @니르바나

    우선 답변 너무 감사드립니다.

    1. 구현되어있습니다. ( 아래는 일부 코드가 포함 된 깃헙 질문글입니다 ) 

    ```

    https://github.com/codingeverybody/codingyahac/issues/1119 

    ```

    2. 

    백엔드 호출 후 ( 해당 게시글 아이디를 파라미터로 받고 그 파라미터의 값을 검색하여

    Post::where(condition)->increase('like', 1); 이런식으로 값을 증가시켰습니다. // 리턴값은 따로 없습니다 )

    값을 업데이트를 해야하는데 제가 뷰를 공부한대로라면

    뷰 인스턴스를 생성하고 

    엘레먼트를 지정하고 그 이후 methods 나 data 로 업데이트를 하는 것으로 알고 있는데

    methods: {

      vote: function(id) {

        axios.post({ ...구문})

        .done(function (res) {

          // how to control like value 

          this.vote = like 값 // 반영안됨

          console.log(res);

        })

      }

    }

    코드가 노트북에 있어 ㅠㅠ 위와 같이 되어있습니다.

    저기서 index.blade.php 파일 안에 <p>{{ $post->like }}</p>

    위 값을 조정하려면 like 의 값이 서버값인데 vue 에서 어떻게 업데이트를 해야하는 걸까요 ..ㅠㅠ

    실시간으로 값이 변경되려면 분명 vue 로 업데이트를 쳐야하는데

    blade 파일에서는 {{ value }} 는 서버단 데이터이고  @{{ value }}  이것은 vue data 를 호출하는 방법인데

    그러다 보니 @{{ $post->like }} 가 되어야할 것 같은데 이렇게 하자니 

    안에 데이터를 다 뷰로 불러와야할 것 같은데 혹시, 다른 방법이 있을까요 ?

    3. 

    현재  라우팅이나 페이지들은 전부 다 laravel php 코드로 되어있습니다.

    header, footer .balde.php 파일이 존재하고

    중간 페이지는 include 시켜서 main/index.blade.php 이런식으로 구조가 잡혀있고


    중간페이지 하단에 ( blade 파일 )


    <script src="index.js>


    <script>


    new Vue( { 


    } )


    </script>


    이렇게 되어있으며 index.js 에서는


    import vue 만 정의되어있습니다.


    구조는 대략 이렇게 되는 것 같습니다.


  • 니르바나
    2k
    2021-05-03 15:49:20

    https://www.youtube.com/watch?v=6h-g0LqjWZM

    axios로 호출하고 나서 데이터를 vm instance쪽 data를 업데이트해주시면될듯한데

    this.vote = like 값 // 반영안됨

    이게 like 값을 못 얻어와서 반영안된다는건가요

    this가 vm instance가 아니라서 안된다는건가요

    아니면 이렇게 구현할 방법이 없어서 안된다는건가요..

    제가 라라벨로 구현해본 경험이 없어서 잘 이해가 안되네요~~


    위 링크보시면 라라벨기반으로 vue instance업데이트 하는 내용이 있으니 참고해보셔요~

    SPA형태로 만들어서 Vue router로 페이지 이동하고 vue단에서 서버쪽이랑 통신하고 json형태로 데이터만 넘겨주시는게 편하실듯한데.. 라라벨쪽 코드랑 vue 코드랑 섞어서 쓰시니 더 헷갈리시는 듯합니다.


  • Macy
    113
    2021-05-03 16:06:44

    @니르바나

    우선 귀한 시간 내주셔 답변 적어주신 점 너무 감사드려요 !!!


    유튜브 영상 을 쭉 봤습니다.

    ( 저의 경우 blade.php 파일에서 스크립트 안에 Vue 생성하지만 

    해당 영상은 .vue 파일을 template 으로 넘기는 것으로 보입니다

    그로인해 구문의 차이가 있었던 거 같습니다 )

    조금은 이해가 되었습니다.

    상황 정리 차 적어보자면 이렇습니다.

    vue 파일 에서는 

    {{ value }} 로 호출합니다

    filename.blade.php 파일에서는

    php 는

    {{ value }} 로 호출 되고 vue 데이터들은 @{{ value }} 이런 식으로 호출하게 됩니다.


    제가 막혔던 부분은 

    blade.php 파일에서 {{ data }}  라는 건 php 로 호출되는 것이기 때문에 vue 로 제어 불가능했었던 거 같아요

    즉 blade.php 파일에서 vue 로 즉각 업데이트를 하기 위해서는

    mounted 에서 컨트롤러 호출하여 데이터를 가져오고 데이터를

    @{{ $post->id }} 이렇게 호출을 해야되는 것 같습니다.

    현재 컨트롤러 에서는 데이터를 불러오고 데이터를 함께 뷰랑 넘기는 로직인데

    이를 데이터 와 뷰로 나누고 View 를 호출한 후 axios 를 이용하여 데이터를 끌고 와야 할 것 같네요.


    그렇다면 구조가 이렇게 되겠네요

    controller ( return View ) -> view ( blade.php ) 안에 데이터는 비워두고 

    mounted: axios  를 이용하여 data controller 호출 후 해당 데이터 를 blade.php 파일에 넘김


    이게 최종 판인지는 모르겠지만 분명 지금 당장의 문제는 해결할 수 있겠다는 생각이 듭니다.

    다시 한번 귀한 시간 내주셔서 댓글 남겨주신 @니르바나님 @프레드윰 @TeraGo 님

    모두 감사합니다.

  • 니르바나
    2k
    2021-05-03 16:18:48

    가능하시면 SPA적용하시길 추천드려요.

    말씀하신 로직대로라면 데이터 업데이트가 필요할때마다 새로고침해야할듯합니다..

    Vue를 쓰는 이유가 reactivity 기능 때문인데, 해당 기능을 제대로 못쓸듯하네요.

    그럼 Vue를 꼭 써야하는 이유도 없을것 같구요.

  • Macy
    113
    2021-05-03 16:23:10

    @니르바나

    네 저도 지금 그게 조금 이상합니다.

    단순하게


    1. 이런 구조에서는 vue 가 아닌 다른 것을 써야하는지

    2. 제가 vue 를 잘 못 쓰고 있는건지


    그냥 심플하게

    jqeury 로 ajax 통신하고 

    그 이후에 프레임워크를 반영을 해야할까 

    어디 즉각적인 피드백을 받을 수가 없는 상태이니 조금 답답하네요 ㅠ


  • 니르바나
    2k
    2021-05-04 03:14:38

    1. 다른걸 쓰시는게 좋지 않을까요. SPA형태로 구현할 수 없는 이유가 있으시나요?

    그렇다면 https://ceobe.dev/laravel-ssr-with-vue-meta/ 참고하셔서 SSR을 제대로 적용해보시는게 어떨까요? 저도 SSR은 적용해본바가 없어서 이렇다할 확실한 조언을 드리긴 힘들것 같습니다.

    라라벨도 사용해본 경험이 거의없구요~~ 어차피 백엔드라는 점에는 비슷하기 때문에 그걸 기반으로 이야기드리는거에요.

    지식이 많지 않을땐 일반적인 방법을 적용하고 응용해서 수정하시는게 좋습니다.

    학습목적이라면 처음부터 다시 SPA형태로 구현해보시는걸 추천드려요~

    아마 튜토리얼도 분명있을거에요^^

  • 로그인을 하시면 답변을 등록할 수 있습니다.