목록전체 글 (287)
모든 일에 의문을 제기하고 그 의문을 해결하기 위해 지식을 구하고 공부
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/oB3ue/btqEEfK1o5K/tVQ454wBaY0nOdPJEtL8Hk/img.jpg)
0. VideoDetailPage.js 생성 / App.js에 Route 만들기 (동적 세그먼트에 콜론(:) 사용 // 추후 props, params.videoId로 사용) 1. MongoDB 가져오기 1) video ID를 server에 post하기 ( props.match.params.videoId , variable ) 더보기 const videoId=props.match.params.videoId; const variable={videoId:videoId}; useEffect(() => { Axios.post('/api/video/getVideoDetail', variable) .then(response=>{ if(response.data.success){ }else{ alert('비디오 정보를 ..
AntDesign - Grid system Col, Row *** col : 1-24 값 ex ) : 너비가 같은 3개의 열 row : [ horizontal, vertical ] >> hor : 컨텐츠간 좌우 간격 / ver : row간 상하 간격 (px) ***반응형 {xs:8, sm:16, md:24, lg:32} ex) 배열 활용 [ horizontal, vertical ] [ 16, {xs:8, sm:16, md:24, lg:32} ] antDesign 사이트 참고 https://ant.design/components/grid/#header Card 1) import {Card} from 'antd'; : 일반 태그처럼 간단하게 사용. ex) boolah -Card 속성값 : antdesign ..
0. JSX 문법이란? -Javascript 안에서 html 문법을 사용하도록 함. 0. class -html에서 > class -jsx > className 0. css 적용 -style ={{ }} 0. import 중괄호 or not -import { user } from user : just export -import User from user : export default 한 것 0. 상대경로 1) 확장자를 붙이지 않아도 된다. (자동으로 붙여준다.) 2) 상대경로 작성방법 : 같은 폴더 안에 있는 경우 : ' ./ ' 로 시작 : 바깥에 있는 것은 : ../ : ' ./ ' 를 붙이지 않으면 NodeJS 라이브러리에서 모듈을 찾는다. : 모듈도 불러올 수 있다? module.exports 한 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cJ0rMu/btqEBdHjNsl/4RQdBE6RPkCUWLhKleaSJk/img.jpg)
0. 비디오 카드 Template 만들기 -Row, Col, Card, moment, format 활용 (React 사전 참고) 1. mongoDB에서 video.data 가져오기 1) client에서 server로 [ get 요청 ] 보내기 더보기 useEffect(() => { Axios.get('/api/video/getVideos') .then(response=>{ if(response.data.success){ console.log(response.data) }else{ alert('비디오 가져오기를 실패했습니다.') } }) }, []) 2) server에서 DB 데이터를 client로 보내기 (find, populate, exec 메소드) 더보기 router.get('/getVideos', ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cxKUgX/btqEzZ9vQAV/pKvRkSeOoeZ2166HwICi5K/img.jpg)
1. 비디오 Collection 만들기 1) model 만들기 ( writer - ref.User , timestamps ) server > models > Video.js 더보기 const Schema = mongoose.Schema; const videoSchema = mongoose.Schema({ writer : { type : Schema.Types.ObjectId, ref : 'User' }, }, {timestamps:true} ) : 만든 date와 update한 date가 저장됨. .................... const Video = mongoose.model('Video',videoSchema) module.exports = { Video } 2. onSubmit func 만들..