Vue로 Nodebird SNS 만들기

Vue로 Nodebird SNS 만들기

(8개의 수강평)

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

PostForm 에서 trim() 객체를 읽을수 없는 문제. gavin 14일 전

안녕하세요. postForm 강의중 text-area 의 rules 에서 v.trim() 객체를 읽을수 없다고 나옵니다

<v-textarea
outlined
auto-grow
clearable
label="write .... "
:hide-details="hideDetails"
:success-messages="successMessages"
:success="success"
@input="onChangeTextarea"
:rules="[v => !!v.trim() || '내용을 입력하세요.']"
/>


Cannot read property 'trim' of undefined

An error occurred while rendering the page. Check developer tools console for details.



1
info 프로필

page별 head 태그에 대한 질문 info 1달 전

안녕하세요~ 강의를 들으면서 새로운 프로젝트를 진행하고 있는데요

강의와 관련된 질문은 아닌데,, 해결되지 않는 부분이 있어서 혹시 도움을 구할 수 있을까 해서 질문드립니다 ㅠㅠ

jquery로 작성된 여러 js 파일들이 있고,

페이지 마다 import를 하려고 합니다

각페이지.vue 파일에

export default {

   .....

    head() {

           return {

                script: [{}, {}],

                link: [{}, {}]

          }

    }

   ......

}

로 페이지 마다 필요한 script, link 파일의 경로를 지정해줬고, 잘 import 됩니다

그런데 오랜 시간 찾아봐도 해결되지 않는 부분이 있어습니다...... 

1. 각 script 태그와 link 태그의 import 순서를 원하는대로 지정하고 싶은데 혹시 방법이 있는지..?

2. import 순서가 원하는대로 되지 않아서인지 다른 페이지로 이동했다가 돌아오면 jquery 동작들이 작동하지 않는 점

    (새로고침을 해도 어떨 때는 jquery가 작동하고, 어떨 때는 작동하지 않습니다...)

혹시 참고할 만한 내용을 알고 계신다면 답변 부탁드리겠습니다..

감사합니다 !

아차! method를 하나 정의해놓고 created() 에서 호출해서

head 태그 내 모든 엘리먼트를 지우고 script, link 태그를 원하는 순서로 추가 해봤는데도,,, 다른 페이지로 이동했다가 돌아오면 jquery가 작동하지 않더라구요.... 

3
조현재 프로필

중복을 제거할 필요가 있나요? 조현재 1달 전

hashtag와 user 클릭을 통해 post를 표현하는 과정에

pages 내 index.vue와 user, hashtag의 index.vue가 component 불러오기 말고는 크게 다른것이 없는데 slot을 통한 컴포넌트로 재사용할 필요가 있나요?

1
꼬부기 프로필

Nginx와 pm2 cluster 꼬부기 1달 전

node에 Nginx를 설치해서 배포를 하려고 합니다.

pm2에 -i max 로 cluster를 여러 개 생성을 하는 옵션이 있던데 

이 기능과 Nginx가 제공하는 기능이랑 비슷한건가요? 

만일 Nginx를 사용한다면, Youtube에 있는 https 적용방식이 아닌 다른 방식으로 해야 하나요?

2
Coooding 프로필

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

import { mapState } from 'vuex'


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

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

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

3
꼬부기 프로필

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

현재 불러오는 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
꼬부기 프로필

팔로우, 팔로워 스크롤링 구현 꼬부기 1달 전

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

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

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

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

2
1114juhyeon 프로필

배포 후 401,403 오류 1114juhyeon 1달 전

안녕하세요!

챕터 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 1달 전

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

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

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

1
kde  프로필

리트윗 에러 조언 부탁드립니다 kde 1달 전

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

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

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 2달 전

https://youtu.be/gcvYu7FmdAY

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

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

감사합니다 

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

5
terecal 프로필

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

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

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

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

1
terecal 프로필

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

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

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

왜그런건지 몰겠어여 

4
terecal 프로필

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

안녕하세여

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

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

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

즐거운 설 주말 되세여~!

2
꼬부기 프로필

AWS 에서 백엔드 서버 꼬부기 2달 전

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