66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- Vue로 Nodebird SNS 만들기
메인 게시글이 출력이 안되고 있어여
삭제된 글입니다
- 미해결Vue로 Nodebird SNS 만들기
협업하실 때
제로초님! 강의와는 조금 무관한 질문이지만, 보통 실무에서 디자이너 퍼블리셔 분들이랑 협업을 해야 할텐데, 그 분들이 프레임워크를 모르실 경우 그냥 HTML, CSS, 제이쿼리로 작업을 해서 주실텐데 그럼 프론트 개발자는 그걸 분해해서 프레임워크 적용하나요? 보통 디자이너나 퍼블리셔 분들과 어떤 방식으로 협업이 진행되는지 궁금해요!
- 미해결Vue로 Nodebird SNS 만들기
vuetify Error
npm install @nuxtjs/vuetify vuetify 명령 관련 오류입니다
- 미해결Vue로 Nodebird SNS 만들기
postId 관련 경고
댓글 작성하는 부분까지 정상적으로 작동은 되는데 아래와 같이 console 창에 경고창이 뜹니다. [Vue warn]: Invalid prop: type check failed for prop "postId". Expected String with value "1579062941267", got Number with value 1579062941267 구현하는 부분하고는 상관이 없는건가요?
- 미해결Vue로 Nodebird SNS 만들기
[Vue warn]: Unknown custom element: <v-image>
화면자체는 정상적으로 나오는데 console 창에 아래와 같이 경고메세지가 나옵니다. [Vue warn]: Unknown custom element: <v-image> - did you register the component correctly? For recursive components, make sure to provide the "name" option. v-image 태그에 name 속성이 필요하다라는 걸까요?
- 미해결Vue로 Nodebird SNS 만들기
로그인시 watch vs promise
로그인 시에 watch로 하는게 좋을까요 아니면 로그인 dispatch 이후에 프로미스나 async await으로 바로 router push하는게 좋을까요?
- 미해결Vue로 Nodebird SNS 만들기
프로필 페이지를 아직 안만들었어여
프로필 페이지는 그냥 복붙하면 되나여? 프로필 페이지가 아직 완성 안되었는데 강의에서는 거의 완성된걸로 나와서여 현재 프로필 페이지는 여기까지 작성했어여 <template> <div> profile page </div> </template> <script> export default { layout:'admin', data(){ return { name:'Nuxt.js', } }, head(){ return { title:'프로필' } }, } </script> <style> </style> 그리고 이전 강의에서 댓글 달때 에러가 발생하는데 고치는 방법을 알려주시면 감사여 에러 내용은 아래와 같습니다. vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "postId". Expected String with value "1578887087655", got Number with value 1578887087655. found in ---> <CommentForm> at components/CommentForm.vue <PostCard> at components/PostCard.vue <Pages/index.vue> at pages/index.vue <Nuxt> <VApp> <Default> at layouts/default.vue <Root>
- 미해결Vue로 Nodebird SNS 만들기
12분부터 설명하는 부분 질문입니다.
12분부터 프로미스 설명하는 부분에 이해가 안가는 부분이 있습니다. 회원가입이 성공하면 .then으로 넘어가는 것이 아니라, dispatch 함수가 성공적으로 마치면 아닌가요? 결국 프로미스를 사용해도 이 경우에는 회원가입이 성공/실패 여부를 떠나서 라우터로 먼저 이동하는 거 같더라구요. 제가 signup함수 내부를 setTimeout으로 고쳤는데도 then 프로미스로 넘어가길래 질문드립니다.
- 미해결Vue로 Nodebird SNS 만들기
팔로우, 글작성
메인화면에서 팔로우, 언팔로우를 하게 되면, 왼쪽에 있는 로그인폼에 팔로잉수가 바로 바뀝니다. 그런데 글은 작성을 하면, 바로 바뀌지 않고 새로고침을 해야 반영이 됩니다. 글 작성을 하면 mainPosts에만 반영을 하고, me에는 바로 반영을 안 해서 그런거라고 생각하는데, posts.js에서 users.js로 접근하는 방법이 있나요? dispatch('users/addPosts', res.data) dispatch('posts/users/addPosts', res.data) 이렇게 했는데 에러만 나옵니다.
- 미해결Vue로 Nodebird SNS 만들기
loadUser 부분에서 에러가 나옵니다.
제 코드에서 에러가 나서, 제로초님 깃헙코드를 클론 받아서 실행을 시켰습니다. 그런데 아래와 같은 에러가 동일하게 발생합니다.
- 미해결Vue로 Nodebird SNS 만들기
package-lock.json
1. package-lock.json파일이 생성이 계속 안됩니다. Node오픈톡방 여러곳에 문의해보고,모듈을 싹 지우고 강사님꺼 package.json파일만 가지고 npm install을 전부 다시 해봐도 여전히 생성이 안됩니다. 2. 첨부이미지와 같이 일부 패키지들이 npm install로 생성하는 도중에 node-module에 생성되어야 할 애들이 node-module폴더 밖에 생성이 되고, 문제를 야기합니다. *npm root -> 정상 3. 해당 모듈파일들이 (node-module)이라는 배 바깥에 튀어나와있다고, multer를 설치하지 못하는 에러가 지속적으로 발생합니다.
- 미해결Vue로 Nodebird SNS 만들기
초기화면에 기존에 작성된 글이 안 보입니다.
현재 아래와 같이 코드를 작성한 상태입니다. 초기화면, 로그인 한 후에 작성된 글이 로딩이 되지 않습니다. 새로고침을 하면, backend의 /posts에서 정상적으로 posts들을 내려보내주고 있고, front에서 store/posts.js의 loadPosts에서 정상적으로 값을 받아서, mutations의 loadPosts로 mainPosts에 값이 정상적으로 들어가는 것까지 확인을 했습니다. 그런데 화면에는 보이지 않고, 확대후 스크롤 동작을 해야 게시글이 나타납니다. => fetch 함수를 지웠다 저장한 후, 다시 쓰고 저장하고 새로고침을 하면 작성된 글이 보여집니다.. <template> <v-container> <post-form v-if="me" /> <div> <post-card v-for="post in mainPosts" :key="post.id" :post="post" /> </div> </v-container> </template> <script> import PostCard from '~/components/PostCard'; import PostForm from '@/components/PostForm'; export default { components: { PostCard, PostForm }, computed: { me() { return this.$store.state.users.me; }, mainPosts() { return this.$store.state.posts.mainPosts; }, hasMorePost() { return this.$store.state.posts.hasMorePost; } }, fetch({ store }) { return store.dispatch('posts/loadPosts'); }, mounted() { window.addEventListener('scroll', this.onScroll) }, beforeDestroy() { window.removeEventListener('scroll', this.onScroll) }, methods: { onScroll() { if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) { if (this.hasMorePost) { this.$store.dispatch('posts/loadPosts'); } } } }, } </script>
- 미해결Vue로 Nodebird SNS 만들기
500로 회원가입이 되지 않습니다.
안녕하세요. 현재 백엔드 서버, 프론드서버를 모두 npm run dev로 킨 상태입니다. 또한 msSQL 도 running을 확인했습니다. workbench를 통해 user 테이블이 생성된 것 까지 확인된 상태입니다. 회원가입을 하게 되면, terminal 창에 아래와 같은 500에러가 발생합니다. 백엔드에서도 console.log로 이메일, 패스워드를 찍었는데, undefined가 되어있어서 데이터가 안 넘어가는 상태로 생각하고 있습니다. (프론트에서는 payload에 값이 다 잘 들어있습니다.) 무엇이 문제인지 알고싶습니다. Executing (default): SELECT `id`, `email`, `nickname`, `password`, `createdAt`, `updatedAt` FROM `Users` AS `User` WHERE `User`.`email` = 'dog@dog.dog'; { SequelizeValidationError: notNull Violation: User.email cannot be null, notNull Violation: User.nickname cannot be null, notNull Violation: User.password cannot be null name: 'SequelizeValidationError',
- 미해결Vue로 Nodebird SNS 만들기
nuxt.config.js에서 vuetify module
ch1의 nuxt.config.js에서 vuetify module 설정부분이 또 바뀐것 같은데요. 강의에서 devModules: [ '@nuxtjs/vuetify', ], 이 부분이 현재 buildModules: [ '@nuxtjs/vuetify', ] 이걸로 바뀐것 같은데, 맞나요? 혹시나 해서 여쭤봅니다.
- 미해결Vue로 Nodebird SNS 만들기
fetch VS async beforeMount
안녕하세요 3-5 강의 듣다가 묻득 질문이 있어서 질문 드립니다. 3-5강의 내용에서 fetch를 이용하는 이유는 mount 되기전에 store에 해당 API에서 불러온 값을 state에 저장하기 위함이라고 말씀해주셨는데요. 현업에서 해당 페이지(ex> View페이지) 처음 로딩할때 해당 페이지에 처음에 필요한 API 호출할때 (즉 API 호출이 끝나고 store에 해당 state값에 넣을때까지) async beforeMount 이용해서 호출하나요? 아니면 fetch를 이용해서 호출하나요?? 순서상 fetch가 가장 빠르지만 화면 띄우기 전에 해당 store에 state값에 api통해 값을 넣기만 하면되기 떄문에 async beforeMount도 괜찮을까요??아그리고 https://www.inflearn.com/questions/18191여기 질문 게시글 답변해주셔서 감사합니다!제가 그에 대한 질문을 댓글에 더 첨부했는데요한번 읽어주시면 감사하겠습니다 :)
- 미해결Vue로 Nodebird SNS 만들기
게시물이 로드가 안 되는것 같아요
몇 번을 돌려봐도 맞게 했는데 게시물이 로드가 안되네요.. 로그인 전 홈 화면에서도 아무것도 없고, 로그인 후 홈 화면에서도 아무것도 없습니다. 하지만 게시글 등록하고 밑에 게시물이 눈에 보이는데 새로고침하면 게시물은 사라집니다. DB에는 등록이 잘 되구요 프론트에서 loadPosts를 불러오지 못하는 것 같아 제로초님 깃허브를 참고하려 했으나 그 파일이 최종본이라 차이가 많이나서 어느 부분을 참고해야할지 모르겠네요 Vue devtools로 봐도 loadPosts를 부르지도 않더라구요 어느 부분을 건드려야할지 감이 안 잡혀서 질문드립니다... ----------------------------------------------------- front/store/posts.js/mutations loadPosts(state, payload) { // 게시글 불러오기 state.mainPosts = state.mainPosts.concat(payload.data); state.hasMorePost = payload.length === limit; }, ----------------------------------------------------- front/store/posts.js/actions loadPosts({ commit, state }, payload ) { if(state.hasMorePost) { this.$axios.get(`/posts?offset=${state.mainPosts.length}&limit=10`) .then((res) => { commit('loadPosts', res.data); }) .catch((err) => { console.error(err); }); } }, ----------------------------------------------------- back/routes/posts.js const express = require('express'); const db = require('../models'); const router = express.Router(); router.get('/', async (req, res, next) => { // 게시글 여러개 try { const posts = await db.Post.findAll({ include: [{ // 게시글 작성자의 아이디와 닉네임 model: db.User, attributes: ['id', 'nickname'], }, { // 게시글 이미지 model: db.Image, }, { // 좋아요 누른 사람 목록 중 아이디 model: db.User, as: 'Likers', attributes: ['id'], }, { // 리트윗한 원본 정보: 작성자의 아이디와 닉네임 model: db.Post, as: 'Retweet', include: [{ model: db.User, attributes: ['id', 'nickname'], }, { // 리트윗한 원본 이미지 model: db.Image, }], }], order: [['createdAt', 'DESC']], offset: parseInt(req.query.offset, 10) || 0, limit: parseInt(req.query.limit, 10) || 10, }); res.json(posts); } catch (err) { console.error(err); next(err); } }); module.exports = router; ----------------------------------------------------- vue-nodebird의 posts 테이블 ----------------------------------------------------- 로그인 전 홈 화면 ---------------------------------------------------- 로그인 후 홈 화면 ----------------------------------------------------- 게시글 작성 후 화면 ----------------------------------------------------- 게시글 작성 후 새로고침한 화면
- 미해결Vue로 Nodebird SNS 만들기
새로고침시(F5) 변수 state안에 있는 값들은 모두 초기화 되는거 아닌가요?
/profile 페이지입니다. 일단 여기서 로그인하고 /profile 페이지에 접속한후에 새로고침 F5 를 눌으게 되면 먼저 해당 페이지에 지정했던 미드웨어(authenticated.js)에 가서 SSR렌더링 방식으로 제가 입력했던 console.log가 찍힐텐데요 그러나 새로고침을 했으니 로그인해서 저장된 state값 me는 다시 초기화 되지않나요? 왜 값이 존재하는지 잘 모르겠네요... 제가 강의 들으면서 빠뜨린 부분이 있을까요? 당연히 null값으로 나와야 할텐데 왜 존재하는지 모르겠네요. 무슨 방법 때문에 새로고침 해서도 저값은 있는건가요??
- 미해결Vue로 Nodebird SNS 만들기
제로초님 무료 vue 강의때 vuex에서 localStorage쓸때 문제가 없었는데
유료 강의 nuxt를 쓰면서 vuex에서 localStorage를 쓸려고 하면 이렇게 오류가 나옵니다. 서버사이드 환경때문에 당연히 안되는건가요? 로그인을 하게되면 mutations에서 localStorage.setItem('accessToken', accessToken); 하는데 가져오면 문제가 발생되네요... 로그인한 토큰(뒷단은 SPRING BOOT JWT 방식입니다.) 사용할려면 localstorage에 저장된거 불러와야하는데 이게 힘드네요
- 미해결Vue로 Nodebird SNS 만들기
package.json질문
yarn을 쓸때는 자동저장이 되었었는데 npm으로는 선생님처럼 자동저장이 되지 않습니다. --save, --saveDev를 써봐도 똑같습니다. 왜 저장이 자동으로 되지 않을까요? 1번. 코드편집기에서 package.json이 열려있을때. 2번. 파일 속성에 읽기전용으로 체크되어 있을때 3번. npm init을 한번 더 해줄것. 제가 찾아봤던 3가지방법도 전부 시도해봤었는데 전부 실패했습니다.
- 해결됨Vue로 Nodebird SNS 만들기
1-4. nuxt를 vuetify와 연결하기 이 강의내용에서 질문이 있습니다.
@nuxtjs/{라이브러리이름} 사용하는 이유는 nuxt는 SSR이라 각각페이지가 독립적이라서 중복 코드인 Vue.use({설치한 라이브러리}) 를 제거하기 위함인데요/ 다른 예시로 nuxt에서 axios 사용할려면 npm i axios 뿐만 아니라 npm i @nuxtjs/axios도 설치해야지 사용이 가능하다고 알고 있습니다. 그럼 다른 모든 라이브러리 설치할때마다 nuxt용 라이브러리도 설치해야하는건가요? 예를들어 vee-validate 사용할려면 nuxt용 vee-validate도 설치해야하는건가요? @nuxtjs/ vee-validate 이것은 구글에 찾아봐도 안나와서요.... 제가 못찾는건가요?ㅠㅠ