본문 바로가기
개발 공부 일정 # 1 유튜브 클론코딩 - 현재 40% 진행중 2월까지 전부 진행 할 예정BACK-END : MongoDB, NodeJS, ES6, AWSFRONT-END : Vanilla JS, SaSS, ES6, WebPack, PugSERVER : Express, AWS, Heroku클론 코딩을 해보며 최신 웹기술들과 JS 동향 파악과 NodeJS를 경험하기 위함. # 2 CSS 마스터 클래스 - 3월CSS NextFlexboxCSS GridCSS를 완벽하게 마스터하고 개발 속도를 늘리기 위함. # 3 초보자를 위한 바닐라 자바스크립트 - 4월HTMLCSSJS바닐라 JS를 기반으로 JS를 마스터하기 위함. # 4 인스타그램 클론 코딩 트랙 - 5월4.1 React JS 기본: 영화웹 만들기 4.2 React Nat..
유튜브 클론 코딩 # 12 - Upload Video and Play #3.5 Home Controller Finished 저번에 공부했듯이 자바스크립트는 싱글 스레드 언어이나 멀티스레드와 같이 작동한다.그래서 async를 사용하지 않으면 비디오를 다 찾기 전에 페이지르 렌더링 해버린다.따라서, async로 비디오를 다 받아올 때 까지 기다리게 한다.const video = await Video.find({}); #3.6 Uploading and Creating a Video 비디오를 업데이트 했을 때 몽고 디비에 경로를 저장하는 것까지.역시 로컬이라도 백엔드가 들어가야 재미가 있다. #3.7 Uploading and Creating a Video part Two 유저의 정보들을 서버에 저장하는 것은 좋지 않다.따로 분리할 필요가 있음.
Everything is Already in the Cloud 2 Social Networking SitesFacebook, Twitter, LinkedIn, and many other social media sites are hosted in the cloud.페이스북, 트위터, 링크드인, 그리고 많은 다른 소셜 미디어 사이트들이 클라우드에서 호스팅 된다. Your birthday, educational background, work history, and latest whereabouts are all int the cloud. ah, your friends information, too!너의 생일, 교육 배경, 경력, 그리고 너의 행방은 모두 클라우드에 있다. 아, 그리고 너의 친구들의 정보도. Mobile App Stores & AppsMajor mobile a..
유튜브 클론 코딩 #11 - Connect to MongoDB and Create Schema #3.0 MongoDB and Mongoose MongoDB, Mongoose 설치.환경변수 설정을 정상적으로 했는데도 안먹힘.2시간 동안 삽질 결과. 재부팅하니 정상 작동함...윈도우 fuxx...Mongoose는 MongoDB와 Node.JS를 연결하는 역할.1분에 15000 요청. 많은 회사들이 쓰고 있음. #3.1 Connecting to MongoDB MongoDB 연결. #3.2 Configuring Dot Env DotEnv는 포트와 DB를 숨길 수 있게 해줌.반드시 git ignore에 설정할 것.안그럼 깃헙을 통해 DB주소가 공개되버리겠지?보안을 위한 필수적인 습관 #3.3 Video Model MongoDB 스키마 생성.MongoDB의 특징은 JSON형태.스키마는 테이블을 구성하는 것과..
Everything is Already in the Cloud 1 These days you hear a lot about cloud computing. 요즘 클라우드 컴퓨팅에 관해 많이 듣는다. If you have no technical background, the term can be a bit intimidating.만약 너가 기술적인 배경(경험)이 없다면, 그 용어는 약간 위협적일 수 있다.(주눅 들 수 있다) It sounds complicated, but most of us are already using the cloud.이건 복잡하게 들리지만 많은 사람들이 이미 클라우드를 사용하고 있다. Though you may not realize it, all your information is most likely in the cloud.심지어 네가 이것을 알아..
유튜브 클론 코딩 #10 - What is MVC in Node.JS? 수정 필요 # 복습 목차1. Node.JS2. ExpressJS3. ES64. Babel5. Middleware6. Routing7. MVC8. Pug # 7. What is MVC in Node.JS? - 정의일반적인 MVC와 다르지 않음.Model, View, Controller로 구성된 패턴으로 흐름은 아래와 같다. 1. 유저가 요청을 한다2. Controller를 탄다.3. Controller -> Model(MongoDB)에게 작업을 요청4. Model -> Cotroller에게 작업이 완료되었음을 알림5. Controller -> View에 수정된 데이터를 리턴6. View -> 유저(브라우저)에게 수정된 데이터가 반영된 뷰 페이지를 리턴 - 다른 점?자바나 ASP.NET과 다른 점이 있다면 템플릿 뷰라..
유튜브 클론 코딩 #9 - What is Routing? # 복습 목차1. Node.JS2. ExpressJS3. ES64. Babel5. Middleware6. Routing7. MVC8. Pug # 6. What is Routing? - 정의 라우팅은 URI 및 특정한 HTTP 요청 메서드(GET, POST 등)인 특정 End Point에 대한 클라이언트 요청에 어플리케이션이 응답하는 방법을 결정하는 것을 말함. 각 라우트는 하나 이상의 핸들러 함수를 가질 수 있으며,이러한 함수는 라우트(경로)가 일치할 때 실행 됨. app.METHOD(PATH, HANDLER) app은 express의 인스턴스METHOD는 HTTP요청 메서드PATH는 서버에서의 경로HANDLER는 라우트가 일치할 때 실행되는 함수 app.get('/', function (req, res..
유튜브 클론 코딩 #8 - What is Babel? # 복습 목차1. Node.JS2. ExpressJS3. ES64. Babel5. Middleware6. Routing7. MVC8. Pug # 4. What is Babel? - 정의ES5는 2009년. ES6는 2015년에 표준화 됐고 현재 ES10까지 나왔지만 아직도 대세는 ES6.문제는 브라우저들이 최신 ES버전들을 인식하지 못한다는 것.따라서, ES6,7 로 작성된 코드를 구버전의 브라우저가 인식할 수 있도록 ES5로 변환시켜주는 컴파일러가 Babel. - 주의 사항Babel을 사용해도 모든 JS함수를 사용할 수 있는 것은 아님.Babel은 문법만 변환시켜주기 때문에 프로그램이 시작될 때 브라우저에서 지원하지 않는 함수를 검사해주는 작업이이루어져야 하고 이 부분은 babel-ployfill이 r..

티스토리툴바