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

1) merge sort(병합 정렬) : 하나의 리스트를 두개의 균등한 크기로 분할하고, 분할된 리스트를 정렬한 후 정렬된 부분리스트를 합하여 전체정렬 리스트로 만드는 것 (분할, 정복, 합병으로 이루어진다) function mergeSort(arr){ if(arr.length

movieapp에 이어서 두번째로는 youtube를 만들 것이다. (원래는 유튜브강의를 먼저 들었어야 하지만!) 강의는 유튜브 강의를 참고하였다. https://www.youtube.com/watch?v=Fin9jBNIaxk&list=PL9a7QRYt5fqnlSRu--re7N_1Ean5jFsh3&index=3&ab_channel=JohnAhn 영화앱을 만들때와 마찬가지로 이번에도 boilerplate를 사용하기 때문에 아래 깃헙주소에서 이미 만들어진 틀을 다운받는다. https://github.com/jaewonhimnae/boilerplate-mern-stack jaewonhimnae/boilerplate-mern-stack Boilerplate when you use REACT JS, MONG DB,..

좋아하는 영화 목록을 나타내는 Favorite page를 만들기 위해서는 1. favorite page template을 만들고 2. mongoDB에서 favorite 된 목록을 가져오고 3. 가져온 기능을 화면에 나타내주고, 4. remove 기능을 추가하는 순서로 진행한다. client->views->FavoritePage->FavoritePage.js파일을 만들어준다. App.js 파일에 가서 화면을 볼 수 있게 페이지를 추가해준다. 여기서 favorite의 루트는 로그인 한 사람만 볼 수 있도록 true 로 해준다. import React, { Suspense } from 'react'; import { Route, Switch } from "react-router-dom"; import Auth..

이번 시간에는 영화 디테일 장면 위에 좋아하는 영화에 대한 추가버튼을 만들도록 하고, 옆에는 몇명이 좋아요를 눌렀는지 확인하도록 하자. 순서는 1. favorite model(userFrom, movieId, movieTitle, moviePost, movieRunTime)을 만들고 , 2. Favorite button UI 만든 후, 3. 몇명이 영화 좋아요를 눌렀는지 정보를 얻고, 4. 내가 좋아요 리스트에 넣었는지 정보를 얻은 후에, 5. 데이터를 화면에 보여주는 순으로 진행한다. 가장먼저 server쪽의 ->models->favorite.js 파일을 만든다. const mongoose = require('mongoose'); const Schema = mongoose.Schema; const fa..

이번에는 메인 화면에 있는 영화를 클릭할 경우 창이 이동해서 영화의 디테일 사항을 보여주도록 한다. 만드는 순서는 1. 특정영화에 대한 정보를 가져오고 2. 영화 api 정보를 state에 넣고, 3. 전체적인 템플릿을 만들고, 4. 영화에 나오는 배우들 정보를 가져오고, 5. 가져온 정보를 state에 넣고, 6. 가져온 state의 정보를 보여주는 순으로 진행된다. 일단 view->MovieDetial->MovieDetail.js파일을 만든다. function MovieDetail(props) { let movieId = props.match.params.movieId const [Movie, setMovie] = useState([])//이름은 Movie로 하고 array에 넣어준다. const [..

이번에는 사이트에 접속하면 바로 나타나는 랜딩페이지를 만들어 본다. 순서는 1. 전체적인 template을 만들어 놓기 2. Movie Api 에서 가져온 모든 데이터를 STATE에 넣기 3. Main Image Component를 만들기 4. Grid Card Component 만들기 5. Load More Function 만들기의 순이다. 먼저 LandingPage.js파일에 state를 이용해서 모든 데이터를 가져온다. 가져올때는 리액트의 useState를 이용한다 . import { json } from 'body-parser'; import React , {useEffect, useState} from 'react' import { FaCode } from "react-icons/fa"; imp..

지난 한달동안 node.js와 자바스크립트, 리액트 중심으로 강의를 들었는데, 이번에는 유튜브 강의를 활용해서 실제로 프로젝트를 진행하는 것을 해보려고 한다. https://www.youtube.com/watch?v=TrxXFbF52gs&list=PL9a7QRYt5fqkowXUgTj_tbkFClsPhO5XV&index=7 강의는 위의 목록을 보고 따라 배우면 된다. 가장먼저 boiler-plate를 적용해서 진행하기 때문에 아래 깃헙에서 파일을 다운받고 실행한다. https://github.com/jaewonhimnae/boilerplate-mern-stack jaewonhimnae/boilerplate-mern-stack Boilerplate when you use REACT JS, MONG DB, E..

리액트 학습하는 가장좋은 방법이라는 클론코딩 강의를 보면서 따라하기 시작! 강의는 유튜브를 참고했다. 트위터, 틱톡, 페이스북, 인스타그램등 많이 접해본 앱을 바탕으로 강의를 진행해서 컨텐츠가 매우 다양하고 좋다! https://www.youtube.com/watch?v=B-kxUMHBxNo&t=1424s npm create-react-app fb-clone을 하고, npm start 해서 코딩을 시작하면 되는데, 불필요한 파일들은 강의에 따라서 지우면 된다. 이 클론 코딩은 firebase(구글)을 이용하니 강의에 따라 만들면 되고, firebase구성을 가져다가 복사 붙이기 하면 된다. http://firebase.google.com Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈..