Vue로 Nodebird SNS 만들기
Vue로 Nodebird SNS 만들기
수강정보
(13개의 수강평)
271명의 수강생
스킬태그 #Vue.js, #Node.js, #AWS, #MySQL
66,000원
지식공유자 : 조현영
71회 수업 · 총 15시간 16분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 중급이상
nicolas83 프로필

<nav></nav> <nuxt /> 로 링크가 생성이 안됩니다. nicolas83 10시간 전
안녕하세요 지금  1-3 까지 마치였습니다. 그런데 1-3 에서 각 페이지들이  <nav></nav> 가지고 있었을떼 div 던  nav 던 링크가 잘 생성되었습니다. 그런대 각 페이지에 nav는 삭제하고  admin과 index로 몰아주니 링크가 생성되지 안고 있습니다. 그리고 head 부분도 각 페이지에 head 이름을 적용해놨을때는 head각 잘 떳는데 어떤 page에 있던 head부분을 삭제하고 default.vue 나 admin.vue 에 head를 작성하면 주소가 뜨지 head 이름이 보이질 않습니다. 그런데 nuxt.config.js에  강의에서 알려주신데로 module 안에 head를 집어넣으니 특정 페이지에 head가 보입니다.  알려주신 vutur 깔은 상태입니다. 어떻게 처리해야 하는지 알았으면 합니다. 혹시 추가적이 라이브러리가 있다면 알려주시면 고맙겠습니다. 아래는 지금 code 와 제가 가지고 있는 라이브러리들입니다.    

2
통풍환자 프로필

trim()이 undefinded가 뜹니다. 통풍환자 11시간 전
trim()이 undefinded가 뜹니다. [v => !! v || '내용을 입력하세요.'] 로 고쳤는데 제대로 됩니다. 알맞게 수정한게 맞는것일까요?

1
nicolas83 프로필

localhost:3000 에 사이트 연결할 수 없음으로 뜹니다. nicolas83 1일 전
안녕하세요 이제 막 시작해 두번째 파트 하던중이였습니다. 처음으로 vue와 nuxt 를 깔았고 nuxt 를 실행 해보기 위해 terminal에서  npm run nuxt  라고 쳤더니 아래와 같이 떴습니다. 강좌에서 버전 같은것을 확인한것과 달리 위와 같이 떠 아직 nuxt setup 이 완료가 안된거 같은데 어떻게 나머지 진행해야 하는지 모르겠습니다. 그리 template 안에 쓴 글이 localhost에 보이려고 했는데 연결이 안된다 뜹니다. nuxt setup이 완료가 안되서인지 아니면 이전에 다른데 있는 react 강좌를 들었는데 같은 localhost 가 같은 3000이여서 기록이 남아서인지 확실히 모르겠습니다. 만약 같아서이면 전 기록을 없에는 방법이나 포트를 변경할 수 있다면 어떻게 변경할 수 있는지 알았으면 합니다. 그리고 vue 페이지에 template 안에 div를 치면 줄이 안마추어지고 enter치면 자동적으로 닫겨지질 않습니다.  </div>   

2
haemil 프로필

제로초님 안녕하세요? AWS EC2 배포 관련 질문드립니다. haemil 9일 전
제로초님 안녕하세요? EC2 배포 관련 질문드립니다. 강의를 학습하고, AWS에 배포를 진행하려고 하는데,  저는 강좌와 다르게 하나의 EC2 안에 프론트와 백엔드를 함께 배포해보고 싶습니다. 강좌 내용과 다르게 하나의 EC2 안에 배포할 경우 각각 따로 EC2를 이용해 배포하는 것과 다르게 주의사항이 있는지..! 궁금하여 문의드립니다.

2
quup 프로필

지금은 우분투에서 nuxt start 잘되네요~! quup 19일 전
지금은 우분투에서 nuxt start 잘되네요~!

0
양양이 프로필

onScroll은 실행이 되는데 loadPosts가 실행이 안됩니다 양양이 22일 전
loadPosts가 100번에 한번 됩니다. 되도 다섯번 실행이 안되고 한번 실행되거나 두번되거나..안되거나합니다. 어딜 봐야할까요..

12
haemil 프로필

안녕하세요 제로초님 cors.. 와 PostMan 관련 질문드립니다. haemil 25일 전
안녕하세요 제로초님🙋‍♂️ cors와 PostMan 관련 질문드립니다.  백엔드에서 아래와 같이 cors 미들웨어를 설정했습니다. const corsOptions = { origin: 'http://localhost:8080', credentials: true, }; app.use(cors(corsOptions)); 그럼 백엔드 API에는 cors 설정의 옵션을 통해 허용한 프론트 서버의 주소 http://localhost:8080 만 접근할 수 있어야 하는 것 같은데.. 왜인지 모르겠지만.. PostMan에서도 백엔드로 요청을 보낼 수 있습니다... cors 옵션을 통해 허용한 프론트 서버에서만 요청을 보내게 하고 싶었는데.. PostMan에서도 요청이 가능하다면.. 배포시에 문제가 되는 건 아닌가 싶어서 문의드립니다. ㅠ.. 감사합니다.

2
Sun.ahn 프로필

https 도메인의 proxy에 대해 문의 드립니다. Sun.ahn 25일 전
안녕하세요. proxy 도움을 많이주셔서 감사합니다. 서버에 배포 중 https 때문에 proxy가 작동을 안하는것 같아 문의 드립니다. ---------------------------------------------------------------------------------------- 1.배포환경 nginx : https://11.11.11.11 nuxt.js node : 변경한 내용이 없으니  http://0.0.0.0:3000  또는 http://localhost:3000 일 거라 생각됩니다. api : http://192.168.1.11:1004 서버설정을 보니 nginx 설정에서  proxy로 node로 연결된 것 같습니다. 2. 소스 index.vue this.$axios.get(`https://11.11.11.11/api/getData`) nuxt.config.js proxy: {     '/api': 'http://192.168.1.11:1004/',  },

13
my-way 프로필

오랜만에 질문 드리는데요. ref my-way 1달 전
ref가 정확히 사용 용도가 어떻게 되나요??? 공식문서 봐도 잘 이해가 안되는데 쉽게 설명이 될까요 ㅠㅠ ref 이해가 안되요 this.$refs. 그리고 뒤에 나오는 것들은 vue에서 제공하는건가요?  this.$refs.form.validate()말고 다른 용도도 설명해주시면 감사하겠습니다

1
Sun.ahn 프로필

proxy 문의 드립니다. Sun.ahn 1달 전
proxy 설정후 API 접속 시 생소한 오류가 발생하여 문의 드립니다. 구현한 proxy 기능이 로컬에서 잘되어 서버에서 build 및 start하여 실행하였습니다. proxy로 api서버로 접속시 접속이 안됩니다. 그런데 백엔드 서버에서 실행하면 잘됩니다. 혹시 이유를 알 수 있을까요? ------------- 오류--------------- Request URL : http://localhost:8080/api/ Referer Policy: no-referrer-when-downgrade Request Headers Provisional headers are shown ------------- 서버--------------- 백엔드 API IP : 192.168.5.**:1111 nuxt IP : 192.168.5.**:2222 ------------- 소스--------------- index.vue getApi () {         this.$axios.get(`/api/acc/key`)         .then((res) => { this.datas = res.data;          console.log(this.datas);         })          .catch((ex) => { console.log('error-', ex); }); nuxt.config.js modules: [     '@nuxtjs/axios',     '@nuxtjs/proxy',  ],   proxy: {     '/api': 'http://192.168.5.**:2222/',      },

4
sizz F 프로필

프론트엔드 서버에서 URIError: URI malformed에러가 납니다. sizz F 1달 전
저분이 제사이트(https://nodebird.site)에서 이것저것 글작성을 하다가  posts에 위의 데이터들을 작성하였고 그뒤로 프론트엔드 서버에서 URIError: URI malformed에러가 뜨고 접속이 되지 않습니다. 찾아보니  decodeURIComponent대신 unescape를 사용하라는데 nuxt에서 이걸 어떻게 설정해야하는지 모르겠네요ㅠㅠ #% 이렇게 #뒤에 %가 붙어나오는 경우만 문제가 있는것 같습니다. #으로 해시태그 구별해내는 부분이 문제인것 같습니다.

4
치훈이 프로필

vuex mutations 질문입니다. 치훈이 1달 전
안녕하세요. 강의 수강 후 직접 프로젝트를 만들어보고 있습니다. vuex의 mutations와 관련된 질문입니다. vuex의 state는 반드시 mutations를 이용해서 값을 변경해줘야 한다고 알고 있습니다. 근데 아래와 같이 배열이 중첩된 구조일때 const itemArr = [ { id: 1, name: '상품A' options: ['옵션A', '옵션B'] }, { id: 2, name: '상품B', options: ['옵션C', '옵션D'] } ] 상품B의 옵션 중 하나를 삭제해야 되는 경우는 어떻게 해야 될까요? 기존에는 아래와 같이 컴포넌트단에서 commit을 할 때 상품B의 id값을 인자로 전달을 하고 store의 mutations에서는 state에서 itemArr을 꺼내와 전달받은 id값과 비교해 상품B를 찾고 다시 options 배열을 꺼내서 삭제할 요소를 찾은 후 삭제를 하였습니다. 코드는 아래처럼.. // 컴포넌트 ... methods: { delItem(itemId, optionName) { this.$store.commit('order/DELETE_ITEM_OPTION', { itemId, optionName }); } } // store ... export const mutations = { DELETE_ITEM_OPTIONS(state, { itemId, optionName }) { const item = state.itemArr.find(item => item.id === itemId); const delIdx = item.options.findIndex(op => op === optionName); item.options.splice(delIdx, 1); } } 근데 컴포넌트단에서는 itemArr을 화면에 그리면서 for문을 돌면서 delItem 메서드를 호출하게 될 텐데 이미 삭제 대상이되는 item 객체(itemArr의 요소)를 알고 있는 상황인데요 위처럼 itemId를 넘기면 mutations에서 다시한번 state에서 itemArr 배열을 꺼내와서 item의 id를 비교해야 될텐데 같은 작업을 store에서 다시 반복해야 되더라구요 그래서 아래와 같이 itemId를 넘기는게 아닌 삭제 대상이 되는 item 객체(itemArr 요소)를 바로 인자로 넘겨버려도 될까요? // 컴포넌트 ... methods: { delItem(item, optionName) { this.$store.commit(‘order/DELETE_ITEM_OPTION’, { item, optionName }); } } // store … export const mutations = { DELETE_ITEM_OPTIONS(_state, { item, optionName }) { // state는 안쓰임 const delIdx = item.options.findIndex(op => op === optionName); Item.options.splice(delIdx, 1); } } 지금까지는 mutations에서는 반드시 state에서 값을 꺼내와서 값을 변경해줬는데 위처럼 state에서 꺼내지 않고 item 객체를 전달받아서 변경을해도 상관이 없을까요? 권장되지 않는 방식인지 궁금합니다. 감사합니다.

2
Sun.ahn 프로필

서버사이드 랜더링 적용시 API 서버 연동에 대한 문의 드립니다. Sun.ahn 2달 전
실무에 nuxt.js를 사용해보기 위해 강의를 듣고 있습니다. 앞부분 듣는 중이라 개념이 잘 안잡혀서 질문 드립니다. 예를 들어 아래 처럼 두개의 서버가 있다고 가정할때 웹서버 : 1번 서버(IP: 11.11.11.111) API서버 : 2번 서버(IP: 22.22.22.222)  2(API)서버에서는 1서버의 IP만 허용하고 다른 접근은 방화벽으로 막혀있습니다. 이전 개발 방식(jsp, asp.net mvc 등)은 서버사이드에서  API를 호출하여  1-->2 서버로 접근 가능 (출발지가 1 IP 이기 때문에) vue.js 경우 1에서 API 호출되는 것이 아니라 클라이언트 브라우저 --> 2로 접근 하는 것으로 생각됩니다. 그러면 방화벽에서 막혀서 접근이 안될꺼라 예상됩니다. (출발지가 무작위 즉, 1 IP가  아니기 때문에) nuxt.js의 경우는 1-->2로 접근이 가능하게 설계가 가능한 구조인가요? 실무에서 많이 접하게 될 환경인데 개념이 부족해서  nuxt.js에서 개발이 가능한지 궁금합니다. 감사합니다.

9
sizz F 프로필

람다로 이미지 리사이징에 NoSuchKey에러문제 sizz F 3달 전
{ "errorType": "NoSuchKey", "errorMessage": "The specified key does not exist.", "code": "NoSuchKey", "message": "The specified key does not exist.", "region": null, "time": "2020-06-23T07:45:35.981Z", "requestId": "42D831DBDF2C09BB", "extendedRequestId": "otC5+Y32C0kHOwb8WLPopSZ1pg9HdHEIvXIOJTp8tENw6LRmDSx2KErZXy1TF1f0ghDckZcFgOE=", "statusCode": 404, "retryable": false, "retryDelay": 45.1487628863279, "stack": [ "NoSuchKey: The specified key does not exist.", " at Request.extractError (/var/task/node_modules/aws-sdk/lib/services/s3.js:831:35)", " at Request.callListeners (/var/task/node_modules/aws-sdk/lib/sequential_executor.js:106:20)", " at Request.emit (/var/task/node_modules/aws-sdk/lib/sequential_executor.js:78:10)", " at Request.emit (/var/task/node_modules/aws-sdk/lib/request.js:688:14)", " at Request.transition (/var/task/node_modules/aws-sdk/lib/request.js:22:10)", " at AcceptorStateMachine.runTo (/var/task/node_modules/aws-sdk/lib/state_machine.js:14:12)", " at /var/task/node_modules/aws-sdk/lib/state_machine.js:26:10", " at Request.<anonymous> (/var/task/node_modules/aws-sdk/lib/request.js:38:9)", " at Request.<anonymous> (/var/task/node_modules/aws-sdk/lib/request.js:690:12)", " at Request.callListeners (/var/task/node_modules/aws-sdk/lib/sequential_executor.js:116:18)" ] } 이미지 업로드시 이에러가 뜨면서 thumb디렉토리에 저장되지 않습니다. front에서 이미지 출력도 original폴더에서 가져오구요 어느부분이 문제일까요?

1
순간을 그리다 프로필

serializedUser 순간을 그리다 3달 전
passport.serializedUser에서 serializedUser는 미들웨어인 passport가 세션처리하라고 지원해주는 기능인가여?

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