Vue로 Nodebird SNS 만들기대시보드

이것저것 만들어보다가 로그인 유지에 대한 필요성을 느꼈고https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048제로초님의 이 글을 보게 되었습니다!그런데 만약 로컬스토리지에서는 유저 정보가 있는데 백엔드에서는 유저 정보가 없는경우 (express-session 만료 등의 이유)가 있을수 있을것 같은데 이런 경우에는 실무에서 어떻게 처리가 될까요??단적인 생각으로는 백엔드의 세션 만료시 로컬스토리지의 정보(아이디 / 비번)로 세션을 재활성 시킨다거나 할수 있을것 같은데 혹시 이런 경우에는 어떻게 처리가 될까요??

안녕하세요 제로초님, 웹 서버 관련해서 질문드립니다.제로초님께서 강의하신 내용으로는 EC2에 노드를 설치하고 build된 정적 파일들을 올려 start 명령어로 앱을 실행시켜 서버를 돌리는 것으로 이해했습니다.궁금한 것이 nginx와 같은 웹 서버를 사용하지 않고도 배포하는 것이 가능한것인지 그리고 웹 서버를 쓰냐 안쓰냐는 어떤 차이점이 있는지 궁금합니다.(혹시나 강의 뒷부분에 웹서버를 사용하는 부분이 있다면 죄송합니다!... )

찾아보니 vue2 와 vue3는 몇몇 문법과 기능 차이더라구요!그런건 크게 문제 안되고 걱정되는건 백엔드와의 연결 및 배포가 제일 걱정되는데 이건 이 강의를 봐도 크게 걱정하지 않아도 될까요?

초급 강좌를 듣다가 급 궁금해져서 질문 드립니다!초급 강좌에서는 vue2를 사용한다고 하셨고vue2 와 vue3는 전혀 다른 프레임워크라고 답변하신걸 봤는데요!그럼 이 강의도 vue2를 사용하는걸까요??아니면 nuxt를 써서 상관이 없는걸까요??

왼쪽: 정상 / 오른쪽: 버그강의을 들으면서 수업을 진행하다 보면 갑자기 vscode의 터미널의 글자가 저렇게 커지면서 스크롤을 위아래로 움직여도 아예 반응을 하지 않는 현상이 자주 일어납니다. 에러가 뜨면 터미널도 확인해서 해결하고 있는데 그럴때마다 미치겠습니다. 원인이 무엇일까요. 인터넷으로 쳐도 안나와서 답답해서 여기에 올려봅니다.

trim()이 계속 오류떠서 replace로도 해보려고 했는데 아예 메서드가 다 오류 뜨네요 이거 버전이 달라서 그런건가요? 도무지 이해를 못하겠넹...

app.use('/', express.static('uploads'))   입력해줬고 폴더 및 이름 틀린거 없는데 이미지패스 여전히 못잡아주고 있는데 왜그럴까요 .?   FormData 형식으로 요청 보내긴 했는데 post/images주소 요청헤더에 FormData 가 없더라구요 그 부분 때문에 그럴까요 ?      

이유를 모르겠습니다 버전도 다 맞춰져있는데  utf-8 부분 오타 고쳐도 그대로입니다

  기능상 문제는 없는데 콘솔창에 이런에러를 뱉네요    구글링해도 원인을 잘 모르겠어서 여쭙니다~   FollowList.vue 쪽인데 코드는 제로초님 깃헙코드랑 같습니다.

vue로 검색하면 cli 를 많이 사용하던데 강의를 위해서 사용하시지 않는것인지   아니면 실제 실무에서도 사용하지 않는것인지 궁금합니다.

강의를 처음 시작할때 실무 전용 강의이다보니 node 및 vue의 가장 기본 설치 부분은 패스되어 있는 것 같은데 혹시 이 부분은 기초 무료강의를 먼저 선행으로 보면 해결되는 걸까요 ??  YouTube 에 있는 vue 무료강의(웹게임) 을 선행으로 보고와야할까요 ??

nuxtServerInit 호출에 대한 문제로 질문드립니다.개발 모드로 실행시엔 문제가 없는데 배포 모드로 실행시에 nuxtServerInit이 계속해서 페이지를 불러오는 현상이 발생합니다.찾아본 정보들을 적용해봐도 해결이 되지 않아 질문드리게 되었습니다.이 코드로 실행한 결과 이러한 로그를 남기게 되고, 메모리 점유율이 끝없이 상승합니다.제가 찾아본 바로는 남은 캐시에 의한 현상이거나 loadUser에서 return이 되지 않아 axios를 기다리지 않고 계속해서 화면을 그리게 된다고 하는데 return을 주게 되면 오히려 페이지가 로드 되지 않고, return을 주지 않은 현재의 코드로 실행시 페이지를 그려주는 것으로 확인되었습니다.또한 log로 찍은 것은 res.data로 받아온 것인데 정상 동작이라면 req.isAuthenticated에 걸려 401을 리턴해야 맞고,실제로 개발 모드에서도 401을 리턴합니다만 배포 모드에서만 저렇게 페이지 정보가 res.data에 저장됩니다.nuxtServerInit의 라이프 사이클 등등 자세한 정보를 둘러보는데도 제 지식으로는 해결이 되지 않아 질문드립니다. (배포 환경은 AWS 인스턴스에서 Nginx 로 실행하였습니다.)

안녕하세요. 현재 강의를 수강 중에 https 설정 후 발생하는 문제가 있어서 질문드립니다. 현재 모든 강의를 수강하고 SSL 인증서를 적용하는 제로초님 블로그의 글을 따라 하고 있는데로그인은 되지만 로그아웃이 되지 않는 현상이 발생합니다.개발자도구 - 네트워크에 응답으로 withcredential 예외 응답이 오는 걸로 봐서는 쿠키 설정에 문제가 있는 것으로 추측됩니다.(Nginx 설정은 블로그에 있는 설정에 도메인만 바꿔서 적용하였고 다른 부분은 바꾼 것이 없습니다.)Nginx 설정에 쿠키를 보낼 수 있도록 적용하면 될거 같은데 혹시 다른 문제이진 않은가 걱정이 되어 글을 남깁니다.또한 혹시 https를 적용하고 또 설정해줘야 하는 부분이 짐작되는 것이 있으시다면 조언해주시면 감사하겠습니다.

영상속 코드랑 비교해봐도 다른건 없어보이구, 뭐때문에 저는 201이 안뜨고 204가 뜨는걸까요? 

nuxt가 확실히 숙련되면 vue로 만드는것보다 편할것같은데 굳이 검색엔진최적화가 요구되는 프로젝트가 아니더라도 그냥 모든 프로젝트를 nuxt로 만들어도 되는건가요? 아니라면 vue로 해야만하는 프로젝트가 따로 있는걸까요? 궁급합니다!

<v-list>     <v-list-item v-for="(item, index) in list" :key="index">       <span>{{ item.nickname }}</span>       <v-icon @click="delFollower(index, name, item)">mdi-minus-circle-outline</v-icon>     </v-list-item>   </v-list>   props:{     // eslint-disable-next-line vue/require-default-prop     list:{       type:Array,     },     // eslint-disable-next-line vue/require-default-prop     name: {       type: String     }   },   methods:{     delFollower(index,name,item){       if(window.confirm(`정말 ${name}목록에서 ${item.nickname}님을 삭제 하시겠습니까?`)) {         this.$store.dispatch('users/remove', {           index,             name             });         alert('삭제되었습니다.')       }     }, }     removeFollowerList(state, payload) {       if(payload.name === "팔로워"){         const index = state.followerList.findIndex((v,i) => i === payload.index);         state.followerList.splice(payload.index, 1);       }       else if(payload.name === "팔로잉"){         const index = state.followingList.findIndex((v,i) => i === payload.index);         state.followingList.splice(payload.index, 1);       }   },   안녕하세요 선생님 간단한거 질문하나 드리겠습니당 이런식으로 그냥 인덱스로 비교했었는데 이런식으로하면 혹시 나중에 데이터 추가되고 하면 문제가된다라던지 실무에선 고유값인 id값으로 해야한다던지 문제가 될수있을까요?                      

안녕하세요! 질문드립니다! 강의를 듣고있는데 actions에서 서버에 요청을 보내고 이미지를 업로드하면 다음과 같은 에러가 나옵니다. 구글링을 해보니, 이벤트는 발생시켰는데 받을 이벤트가 없을 때 저렇게 나온다고 하는데 아무리 봐도 어디가 문제인지 모르겠습니다 ㅠㅠ 의심되는 코드는 이 부분입니다. 그 전에 이미지 업로드 버튼을 만들어서 콘솔로그를 했을때는 폼데이터로 로그가 떴었는데, 저 부분을 작성한 이후부터 에러가 발생합니다. 도와주세요 ㅠㅠ

강의를 기반으로 카카오 strategy 를 사용해보고있는데요 궁금한점이있습니다.  (저는 서버미들웨어를 사용해서 back front를 합쳤습니다)   const router = require('express').Router(); const passport = require('passport');   router.get('/',passport.authenticate('kakao') , (req, res) => {   // console.log(req.user);   return res.redirect('/');   }); 1. 제로초님 블로그도보니까 동의화면 없이 바로 넘어가던데 원래 이런건가요? 2. passport.authenticate('kakao') 이것하고  passport.use(new KakaoStrategy({ kakao , new KakaoStrategy 부분을 꼭맞춰줘야하는거겠죠?   3. 위의 // console.log(req.user); 부분을 state로 넣어줘야하는데 어떻게 처리해야할까요 ..ㅠ  

강사님 안녕하세요질문있습니다 ㅎㅎ보통 한화면에서 모든 crud를 처리하는 게시판에서는등록, 수정, 삭제 후리스트를 다시 뿌려줘야합니다. 강사님께서는 해당 강좌에서 등록/ 수정 / 삭제 같은 작업 후에 자바스크립트로 store에 있는 데이터 값을 조작했습니다근데 등록 / 수정 /  삭제 같은 작업 후 에 리스트를 호출하는 action을 다시 호출하는 방법을 쓰면 더 간단할 것 같은데왜 자바스크립트로 store에 있는 데이터 값을 조작하셧는지 궁금합니다.그리고 리스트를 호출하는 action을 등록/ 수정 /삭제 후 매번 호출해도 되는지 궁금합니다.

강사님 서버 구동후 새로고침을하면 백쪽에서는 데이터를 잘 로드되고있는데 프론트쪽에서 게시물 ,로그인이 됐다가 안됐다가 하는현상이   "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 으로서버를 키면 자꾸 저런 오류가 나오고있습니다.  혹시 어디쪽이 문제인지 알수있을까요? 백단에서 쿠키쪽은 우선 다확인해보았는데 오류는 아직 찾지 못했습니다