합니다, 개발공부📝 합니다, 개발공부📝

업로드 페이지에 상품이미지를 끌어와서 등록하는 dropzone기능을 만들 것이다. 업로드는 여러개의 이미지를 한번에 업로드하는 것이 가능하도록 구현한다. 또한 올라온 이미지를 한번더 클릭하면 이미지가 목록에서 제외되도록 구현한다. 파일 업로드 기능 component 는 나중에 필요하다면 재사용하기 위해서 components>utils 폴더에 저장할 것이다. 먼저 utils>FileUpload.js파일을 만들어준다. import React from 'react' function FileUpload() { return ( ) } export default FileUpload UploadProductPage에 import 해준다. import FileUpload from '../../utils/FileUplo..

온라인 쇼핑몰 만들기는 boiler-plate부터 시작한다. 아래의 링크에서 다운받을 수 있다. https://github.com/jaewonhimnae/boilerplate-mern-stack jaewonhimnae/boilerplate-mern-stack Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX - jaewonhimnae/boilerplate-mern-stack github.com 서버에서 npm install을 해주고 cd client 해서 client 쪽에도 npm install 을 해준다. 그다음 dev.js파일을 생성해준다.(config) 이 안에는 mongodb의 주소를 넣어주는데, 외부에 노출되지 않도록 .gitignor..

사용자가 메세지를 입력했을때 로봇이 나타내는 메세지의 기능들을 더 추가해보자. action and parameter를 추가로 만들어보자. intent를 추가해준다. dialogflow.js에서 다음 부분을 이용해서 mongodb에 저장할 수도 있고 다른 데이터 베이스에 저장할 수도 있다. }; // Send request and log result const responses = await sessionClient.detectIntent(request); console.log('Detected intent'); const result = responses[0].queryResult; console.log(` Query: ${result.queryText}`); console.log(` Response: ..

다음으로 어떠한 메세지를 입력하면 다음과 같이 card들을 나타내는 기능을 만들 것이다. 우선 하나의 intent를 더 만들자. 카드메세지의 구성도 넣어야 하니까 condition을 만들어준다. (조건에 따라서 어떤 intent가 실행되는지) const renderOneMessage = (message, i) => { console.log('message', message) // we need to give some condition here to separate message kinds // template for normal text 일반 메세지를 작성했을 때 if (message.content && message.content.text && message.content.text.text) { ret..

이제는 프론트엔드 부분을 만들어 보자. App.js안에 대화창을 그대로 만들면 복잡해질 수 있으니, src>Chatbot>Chatbot.js파일을 만들고 App.js안에 넣어주자. (컴포넌트로) import React from "react"; import { Typography, Icon } from 'antd'; import Chatbot from './Chatbot/Chatbot'; const { Title } = Typography; function App() { return ( CHAT BOT APP ) } export default App 대화창 템플릿을 만들어보자. import React, { useEffect } from 'react'; function Chatbot() { return ( ..

클라이언트가 뭔가를 입력해서 server에 알리면 서버는 그것을 dialogflowAPI에게 보내고 이를 처리해서 다시 서버에 보낸다. 그리고 서버는 다시 클라이언트에게 반응을 보내준다. 여기서 client랑 소통하는 route는 2개인데, 클라이언트의 입력이 있는 경우에는 text query route가 실행되고, 입력이 없는 경우에는 event query router가 실행되어 "무엇을 도와드릴까요?"와 같은 문장을 실행한다. (대화 초기) 먼저 dependency를 다운받기 위해서 npm install 을 하자. client 폴더에 가서도 npm install을 해준다. 우선 server의 index.js에 가서 다음의 문장을 넣어준다. app.use('/api/dialogflow', require..

이번에는 dialogflow를 이용한 챗봇만들기 수업을 시작한다. https://www.youtube.com/watch?v=uUfbcPsTiIk&list=PL9a7QRYt5fqlFOWppRae5a4j1jnDvwUDX&index=2&ab_channel=JohnAhnJohnAhn 제일먼저 미리 제공되는 chatbot starter를 다운받는다. https://github.com/jaewonhimnae/chatbot-app jaewonhimnae/chatbot-app Contribute to jaewonhimnae/chatbot-app development by creating an account on GitHub. github.com dialogflow api를 쓰기위해서는 아래의 순서대로 진행이 되어야한다..

좋아요와 싫어요 버튼은 동영상에대한 버튼과 각각 댓글에 대한 버튼이 다르게 존재한다. 먼저 like와 dislike 모델을 만들자 . const mongoose = require('mongoose'); const Schema = mongoose.Schema; const LikeSchema = mongoose.Schema({ userId:{ type : Schema.Types.ObjectId, ref:'User' }, commentId:{ type: Schema.Types.ObjectId, ref:'Comment' }, VideoId: { type: Schema.Types.ObjectId, ref:'Video' } }, {timestamps:true})//업데이트 시간 표시 const Like = mong..