• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

새로고침시 오류

22.01.19 21:57 작성 조회수 306

0

강사님 서버 구동후 새로고침을하면 백쪽에서는 데이터를 잘 로드되고있는데

프론트쪽에서 게시물 ,로그인이 됐다가 안됐다가 하는현상이 

 "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "_prestart" : "npm run build",
    "_start": "cross-env PORT=80 NODE_ENV=production pm2 start server.js",
    "start": "cross-env PORT=3080 nuxt start ",
    "lint": "eslint **/*"
},

npm run dev 일떄는 저 오류가 발생하지않고 

npm run start 으로서버를 키면 자꾸 저런 오류가 나오고있습니다. 

혹시 어디쪽이 문제인지 알수있을까요? 백단에서 쿠키쪽은 우선 다확인해보았는데 오류는 아직 찾지 못했습니다

답변 1

답변을 작성해보세요.

0

됐다 안됐다 하는건가요? 아니면 로그인 처음만 되고 그 뒤로는 쭉 풀려있는 상태인건가요? 후자면 쿠키 문제가 맞고요. cors나 이런건 다 점검하신건가요?

새로고침시 화면에 로그인 , 게시글로딩이 됐다가 안됐다가 랜덤으로 그러고있습니다.  쭉풀려있는 상태는 아닙니다

이게 서버사이드렌더링과 관련이 있을까요? 탭에있는 Title이 데이터로그인이  잘 불러와질떄는  ~의게시글이고

 

안불러와질떄에는 Title이 NodeBird입니다.

 

  head(){
                return {
                    title: `${this.post.User.nickName}의 게시글`,
                    meta :[{
                     name:'description',content : this.post.content,
                    }
                    ,{
                    hid: 'ogtitle' , name : 'og:title' , content : `${this.post.User.nickName}의 게시글`,
                    }
                    ,{
                    hid: 'ogdesc' ,  name : 'og:description' , content : this.post.contnet,
                    }
                    ,{
                    hid: 'ogimage' , property : 'og:image' , content : this.post.Images[0] ? this.post.Images[0].src : 'http://vue.nodebird.com/vue-nodebird.png',
                    },{
                    hid: 'ogurl' ,  property : 'og:url' , content : `https://vue.nodebird.com/post/${this.post.id}`,
                    },
                    ]
                }
          },
 
이것과 관련이있을까요?

개발자도구에서 application탭 쿠키를 보면 connect.sid 쿠키가 제대로 존재하나요?

네 (network탭 Storage 내부 Cookies 내부 제 Url : http://younge.xyz 에 connect.sid가 계속 있는상태입니다)

  이 페이지가  데이터를 확실히 가져오긴하는데

데이터를 화면에 써주기전에 (state 세팅 되기전 )

화면들이 먼저 완성이되서 데이터가 안불러와지는 같은데 어떻게해야할까요?

git bash로 로그를 보면서 하고잇는데 데이터를 읽어오기전에 화면이 완성이 되어버리고있어서 이런 오류가 발생하고있습니다.  fetch 와 loadPosts에 모두 async await 확인했습니다.  

 
async fetch({store}) {
            return await store.dispatch('posts/loadPosts',{reset:true});
      },
 
 
 
 
  loadPosts: throttle( async function({commit,state}, payload){
         
        console.log("2222222222222222222");
         try{
             if(payload && payload.reset){
                 const res = await this.$axios.get(`/posts?limit=10`);
                 console.log("res:::::::::::",res.data);
                 commit('loadPosts',{
                     data: res.data,
                     reset : payload.reset //true
                    });
                return;
                }
               
               
            if(state.hasMorePost){
                const lastPost = state.mainPosts[state.mainPosts.length -1];  //맨윗글
                const res = await this.$axios.get(`/posts?lastId=${lastPost && lastPost.id}&limit=10`);

                commit('loadPosts',{
                    data: res.data});
                return;      
                }
            }catch(err){
                console.error(err);
            }
  },3000),

fetch 부분이 vue 화면 부분보다 나중에 실행되어 데이터가 늦게 들어온다는 말씀이시죠?

지금 제 강좌 그대로 따라하고 계시는 것이면 제 깃헙 코드 그대로 클론해서  똑같이 실행해보시겠어요? 라이브러리 버전 문제인지를 모르겠네요.

ㅠㅠ 더 분석해보고  최후의방법으로 고려해봐야겠네요 감사합니다 :)