Vue로 Nodebird SNS 만들기

Vue로 Nodebird SNS 만들기

(6개의 수강평)

163명의 수강생
66,000원
지식공유자 · 조현영
71회 수업· 총 15시간 16분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 중급
Coooding 프로필

안녕하세요. mapstate Helper 질문 드립니다. Coooding 1일 전

import { mapState } from 'vuex'


다음과 같이 app.vue 파일에 vuex helper를 지금 넣고 있는데요.

혹시 다량의 페이지파일 혹은 컴포넌트 파일이 있을때..

Vuex의 헬퍼를 전역으로 선언하는 좋은 방법이 무엇이 있을까요?

3
꼬부기 프로필

팔로우, 팔로워 목록 더 있는지 확인 꼬부기 5일 전

현재 불러오는 db 갯수 limit를 4로 하고 있습니다.

여기서  처음에 백엔드에서 데이터를 불러올 때 5개를 찾은 다음에

followings.slice(0, 4)으로 4개의 데이터와

followings.slice(4, 5) === [] 인 경우에는 hasMoreFollowing = false, (아니면 true)로 해서

res.json({ followings: followings.slice(0, 4), hasMoreFollowing: false }) 이런 식으로 보내는 생각을 하고 있는데 비효율적인가요?

2
꼬부기 프로필

팔로우, 팔로워 스크롤링 구현 꼬부기 8일 전

lastId 형식으로 구현을 하려는데

follow 라는 db에는 createdAt, updatedAt, followingId, followerId 밖에 없습니다.

belongToMany 에 id 를 추가하는 방법이 있나요? 

아님 다른 방식으로 접근을 해야 하나요?

2
1114juhyeon 프로필

배포 후 401,403 오류 1114juhyeon 9일 전

안녕하세요!

챕터 6 후반부 강의 듣다가 오류가 생겼는데 해결하지 못해서 질문드립니다

1. 문제 상황

-> 로그인 또는 회원가입과 같이 쿠키와 연동되는 부분에서 오류가 발생하는 것 같습니다.

-> 새롭게 회원가입을 하는 경우 401에러가 뜹니다.

( 401에러가 뜨면서 회원가입된 계정을 다시 회원가입해보면 403에러가 뜨는 것을 보니 db에 입력이 되긴 되는 것 같습니다.)

-> 회원가입한 계정으로 로그인 하려는 경우엔 401에러가 뜹니다 (*아래의 이미지)

2. network 탭

-> 네트워크 탭을 확인해보니 post들을 불러오는 것은 잘 동작하고, 로그인이나 회원가입과 같은 쿠키와 함께 동작하는 것들에서 에러를 뱉습니다. (* 아래의 이미지)

3. application 탭

-> 어플리케이션 탭을 확인해보았더니 쿠키가 없는 것 같습니다. 

4. 코드

-> 프론트 단에서 axios 통신을 하는 부분에는 모두 {withCredentials: true} 를 붙였습니다

-> 백엔드 단에서는 app.js를 확인하였는데 이상이 없었습니다..ㅠ (* 아래의 이미지, 주석이 많아서 지저분한데 양해부탁드립니다ㅠㅠ)

요약해서 말씀드리자면, 쿠키 기능에 문제가 있는 것 같은데, 코드 상에는 이상이 없는 것 같아서

뭐가 문제인지 모르겠습니다 ㅠㅠ

뭐가 문제인지 아신다면 알려주시면 감사하겠습니다 ㅠㅠ

4
kde  프로필

_id.vue의 params가 undefined에요 kde 9일 전

params값이 어느 router에서 들어오는지 모르겠어요...

그리고 _id.vue 에 팔로잉 팔로워 게시글 갯수 부분, 팔로잉은 팔로우 버튼 누르면 바로 팔로잉 숫자에 반영이 되는데

게시글은 업로드 해도 새로고침을 해줘야 반영이 돼요ㅜㅜ 같은 문제인가요...?   

1
kde  프로필

리트윗 에러 조언 부탁드립니다 kde 12일 전

테이블 지웠다가 다시 해 보기도 하고 

깃헙 보고 리트윗 관련한 코드를 다 비교해 봤는데 답을 못 찾고 있네요..

where 문 들어간 부분을 확인 해도 오타같은 별 다른 문제점을 못 찾았어요 

아래 오류메시지는 터미널, 콘솔, 네트워크 탭 오류메시지 이구요, 어느 지점에서 문제가 생긴건지 방향좀 잡아주실수 있을까요.

original: Error: Unknown column 'Post.Retweet' in 'where clause'

      at Packet.asError (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\packets\packet.js:712:17)

      at Query.execute (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\commands\command.js:28:26)

      at Connection.handlePacket (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\connection.js:417:32)

      at PacketParser.onPacket (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\connection.js:75:12)

      at PacketParser.executeStart (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\packet_parser.js:75:16)

      at Socket.<anonymous> (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\connection.js:82:25)

      at Socket.emit (events.js:210:5)

      at addChunk (_stream_readable.js:309:12)

      at readableAddChunk (_stream_readable.js:290:11)

      at Socket.Readable.push (_stream_readable.js:224:10)

      at TCP.onStreamRead (internal/stream_base_commons.js:182:23) {

    code: 'ER_BAD_FIELD_ERROR',

    errno: 1054,

    sqlState: '42S22',

    sqlMessage: "Unknown column 'Post.Retweet' in 'where clause'",

    sql: 'SELECT `id`, `content`, `createdAt`, `updatedAt`, `UserId`, `RetweetId` FROM `Posts` AS `Post` WHERE `Post`.`UserId` = 2 AND `Post`.`Retweet` = 1 LIMIT 1;',

    parameters: undefined

  },

  sql: 'SELECT `id`, `content`, `createdAt`, `updatedAt`, `UserId`, `RetweetId` FROM `Posts` AS `Post` WHERE `Post`.`UserId` = 2 AND `Post`.`Retweet` = 1 LIMIT 1;',

  parameters: undefined

}

SequelizeDatabaseError: Unknown column 'Post.Retweet' in 'where clause'

    at Query.formatError (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\sequelize\lib\dialects\mysql\query.js:244:16)

    at Query.handler [as onResult] (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\sequelize\lib\dialects\mysql\query.js:51:23)

    at Query.execute (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\commands\command.js:30:14)

    at Connection.handlePacket (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\connection.js:417:32)

    at PacketParser.onPacket (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\connection.js:75:12)

    at PacketParser.executeStart (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\packet_parser.js:75:16)

    at Socket.<anonymous> (C:\Users\user\Desktop\Project\NodeBird\ch1\back\node_modules\mysql2\lib\connection.js:82:25)

    at Socket.emit (events.js:210:5)

    at addChunk (_stream_readable.js:309:12)

    at readableAddChunk (_stream_readable.js:290:11)

    at Socket.Readable.push (_stream_readable.js:224:10)

    at TCP.onStreamRead (internal/stream_base_commons.js:182:23)

POST /post/1/retweet 500 27.467 ms - 1528

네트워크 탭

1
terecal 프로필

동영상으로 올릴게여 한번 봐주시면 감사여 terecal 18일 전

https://youtu.be/gcvYu7FmdAY

새로고침하면 로그인 유지도 안되고 게시글도 안보여서여

혹시 이유를 아시면 알려주시면 감사여 

감사합니다 

https://github.com/hyunsokstar/vue-nodebird-hyun

5
terecal 프로필

async await 적용하니까 되긴 되는데 401 에러가 발생해서여 terecal 18일 전

회원 가입 하고 바로 로그인하면 보이는데 

다시 로그인 하면 401 에러가 발생해여 혹시 이유가 짐작가신다면 알려주시면 감사여 

https://github.com/hyunsokstar/vue-nodebird-hyun

1
terecal 프로필

게시글 불러오기할때 에러는 없는데 then 이후로 실행이 안되서여 terecal 25일 전

에러도 없고 액션도 실행되는데 then 이후로 실행이 안되는것 같아여 

게시글을 입력한뒤에 게시글 출력되는건 잘되는데 

왜그런건지 몰겠어여 

4
terecal 프로필

메인 게시글 불러오기가 잘안되여 terecal 26일 전

안녕하세여

https://github.com/hyunsokstar/vue-nodebird-hyun

ch2로 다시 했는데 이번에도 loadPosts에서 막혀서여 

머가 잘못된건지 알려주시면 감사여 ㅋㅋ;

즐거운 설 주말 되세여~!

2
꼬부기 프로필

AWS 에서 백엔드 서버 꼬부기 27일 전

pm2 list를 확인하면 back과 front 모다 online으로 활성화가 잘 되어있습니다.

S3 생성하고, AWS에있는 백엔드 IPv4 주소를 들어갔는데 들어가지지 않습니다. 프론트는 잘 들어가집니다. 

그래서 그런지 홈페이지에서 요청을 보내면 

Error

    at t.exports (a22708fc6fd30b4deddb.js:2)

    at XMLHttpRequest._.onerror (a22708fc6fd30b4deddb.js:2)



Failed to load resource: net::ERR_CONNECTION_REFUSED

이런 에러가 나옵니다. pm2 list 외 서버가 켜진 것을 확인할 방법이 있나요?

2
꼬부기 프로필

프론트엔드에 pm2 설치 후 배포시 에러 꼬부기 28일 전

                         Asset       Size   Chunks                                Chunk Names
../server/client.manifest.json     20 KiB           [emitted]
      0817e97d2ab6d875667b.css   5.96 KiB        1  [emitted] [immutable]         vendors.pages/hashtag/_id/index.pages/index.pages/post/_id/index.pages/user/_id/index
       1d9e24029b0ed22b7d35.js    170 KiB       11  [emitted] [immutable]         vendors.app
       22a81dec205a130e1a29.js     57 KiB        2  [emitted] [immutable]         app
      43d0e13dc8fa836e29e8.css    298 KiB       11  [emitted] [immutable]  [big]  vendors.app
       44f7a0bec3436e27b197.js     18 KiB        0  [emitted] [immutable]         vendors.pages/hashtag/_id/index.pages/index.pages/post/_id/index.pages/profile.pages/user/_id/index
       4ec1ad9bc60a36e13a4a.js   10.7 KiB        4  [emitted] [immutable]         pages/hashtag/_id/index
      5167c334427c8fcbbd94.css   1.17 KiB        2  [emitted] [immutable]         app
       59f75d985b76432b3cd3.js   4.15 KiB        7  [emitted] [immutable]         pages/profile
       6ff8b63eb8ff7016d497.js   9.15 KiB        8  [emitted] [immutable]         pages/signup
      840631b74903ce4d53b0.css   15.5 KiB        0  [emitted] [immutable]         vendors.pages/hashtag/_id/index.pages/index.pages/post/_id/index.pages/profile.pages/user/_id/index
      856def534aff94f4d327.css   3.45 KiB        8  [emitted] [immutable]         pages/signup
       92884176131a7b5ec567.js   10.7 KiB        6  [emitted] [immutable]         pages/post/_id/index
       99d17a0eda7f415cfb38.js    184 KiB        3  [emitted] [immutable]         commons.app
                      LICENSES  450 bytes           [emitted]
      c8fc11877db27c56ed53.css  638 bytes  4, 6, 9  [emitted] [immutable]         pages/hashtag/_id/index, pages/post/_id/index, pages/user/_id/index
      d029fafdb9b8b637a9ee.css   9.25 KiB        5  [emitted] [immutable]         pages/index
       e0313d1fb9ba10e912b6.js    3.5 KiB       10  [emitted] [immutable]         runtime
       e66cb99312216d2764ce.js   19.8 KiB        5  [emitted] [immutable]         pages/index
       efc4033aeefbd33635aa.js   11.4 KiB        9  [emitted] [immutable]         pages/user/_id/index
       fd133dd0d0011d9cd14c.js     38 KiB        1  [emitted] [immutable]         vendors.pages/hashtag/_id/index.pages/index.pages/post/_id/index.pages/user/_id/index
 + 2 hidden assets
Entrypoint app = e0313d1fb9ba10e912b6.js 99d17a0eda7f415cfb38.js 43d0e13dc8fa836e29e8.css 1d9e24029b0ed22b7d35.js 5167c334427c8fcbbd94.css 22a81dec205a130e1a29.js

WARNING in chunk vendors.pages/hashtag/_id/index.pages/index.pages/post/_id/index.pages/profile.pages/user/_id/index 
[extract-css-chunks-webpack-plugin]
Conflicting order between:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VList/VList.sass        
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VItemGroup/VItemGroup.sass

WARNING in chunk vendors.pages/hashtag/_id/index.pages/index.pages/post/_id/index.pages/profile.pages/user/_id/index 
[extract-css-chunks-webpack-plugin]
Conflicting order between:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VList/VListItem.sass    
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VItemGroup/VItemGroup.sass

WARNING in chunk vendors.pages/hashtag/_id/index.pages/index.pages/post/_id/index.pages/profile.pages/user/_id/index 
[extract-css-chunks-webpack-plugin]
Conflicting order between:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VAvatar/VAvatar.sass    
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VItemGroup/VItemGroup.sass

WARNING in chunk vendors.pages/hashtag/_id/index.pages/index.pages/post/_id/index.pages/profile.pages/user/_id/index 
[extract-css-chunks-webpack-plugin]
Conflicting order between:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VList/VListGroup.sass   
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VItemGroup/VItemGroup.sass

WARNING in chunk vendors.pages/hashtag/_id/index.pages/index.pages/post/_id/index.pages/profile.pages/user/_id/index 
[extract-css-chunks-webpack-plugin]
Conflicting order between:
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VList/VListItemGroup.sass
 * css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VItemGroup/VItemGroup.sass

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  43d0e13dc8fa836e29e8.css (298 KiB)

Hash: 5443d611dde775b1d684
Version: webpack 4.41.5
Time: 32526ms
Built at: 01/24/2020 5:06:57 AM
                  Asset       Size  Chunks                         Chunk Names
2df6e4c3d4f56668a4ad.js     62 KiB       2  [emitted] [immutable]  pages/index
80fe0f56e710f573f2cf.js   15.8 KiB       4  [emitted] [immutable]  pages/profile
89dbd60b37836cf539ee.js   7.34 KiB       5  [emitted] [immutable]  pages/signup
8a4a6fe05250c3600fcb.js   55.7 KiB       6  [emitted] [immutable]  pages/user/_id/index
cfbe446713f0473106f9.js     55 KiB       1  [emitted] [immutable]  pages/hashtag/_id/index
e7ba37c492da17f18d7f.js   55.1 KiB       3  [emitted] [immutable]  pages/post/_id/index
              server.js    127 KiB       0  [emitted]              app
   server.manifest.json  843 bytes          [emitted]
 + 7 hidden assets
Entrypoint app = server.js server.js.map

> vuerd-front@1.0.0 start /home/ubuntu/NodeBird/ch6/front
> cross-env PORT=80 NODE_ENV=production pm2 start server

[PM2][ERROR] Script not found: /home/ubuntu/NodeBird/ch6/front/server
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuerd-front@1.0.0 start: `cross-env PORT=80 NODE_ENV=production pm2 start server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuerd-front@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-01-24T05_06_59_197Z-debug.log

pm2 를 설치하고 package.json 에서 start, prestart 부분을 수정, 생성하고 했는데 에러가 나옵니다.

pm2 안 하고 배포하면 실행이 됩니다.

3
pius712 프로필

sequelize pk pius712 29일 전

따로 프라이머리 키 안 정하나요 보통? 

1
kde  프로필

협업하실 때 kde 1달 전

제로초님! 강의와는 조금 무관한 질문이지만, 보통 실무에서 디자이너 퍼블리셔 분들이랑 협업을 해야 할텐데, 그 분들이 프레임워크를 모르실 경우 그냥 HTML, CSS, 제이쿼리로 작업을 해서 주실텐데 그럼 프론트 개발자는 그걸 분해해서 프레임워크 적용하나요? 보통 디자이너나 퍼블리셔 분들과 어떤 방식으로 협업이 진행되는지 궁금해요!

1
최성필 프로필

vuetify Error 최성필 1달 전

npm install @nuxtjs/vuetify vuetify 명령 관련 오류입니다

5
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스