Enjoy Programming

자 이제 react를 배운다. nomad coder 의 react 로 영화앱만들기 코스로 배워보기로 한다. 먼저 react가 무엇인가. react는 현업에서 인기 있는 웹.앱 의 view를 개발 할 수 있도록 하는 라이브러리이다 즉 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다 특징으로는 1. 선언형 프로그래밍 : 먼저 프로그래밍은 선언형과 명령형으로 나뉜다. 선언형 - 함수형, 논리형, 제한형 프로그래밍 언어로 쓰인경우이다. 선언형 프로그램은 목표를 명시하고 알고리즘을 명시하지 않는다. 명령형 - 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍. 명령형 프로그램은 알고리즘을 명시하고 목표는 명시하지 않는다. 리액트는 선언형 성격에 맞게 원하는 결과를 ..

즉시 실행 함수 표현 - IIFE IIFE는 정의되자 마자 즉시 실행되는 자바스크립트 함수이다. 기본 구조는 (function () { statements } ) (); 이다. 이는 self-executing anonymous Function으로 알려진 디자인 패턴으로 크게 두 부분으로 구성된다. 첫 번째는 괄호 ((), Grouping Operator)로 둘러싸인 익명함수. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지 할 수 있을 뿐 아니라 IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다. 두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 작시 해석해서 실행. 표현 내부의 변수는 외부로부터의 접근이 불가능하다. ..

코멘트 작업을 해주는데 프론트 엔드 작업을 하기전에 백엔드 부터 해본다. root를 설정해주러 routes.js에서 api part에 url 설정을 해주고 videoController에서 postAddComment컨트롤러를 만들고 (videoDeail컨트롤러에서 populate를 이용해 creator와 comments를 가져온다) video, user를 이용해 comment를 만들고 넣어준다. 그리고 apiRouter에서 post방식으로 라우터 하나 만들어준다. 이제 템플릿에가서 코멘트 폼을 만들고 코멘트 리스트를 만들자. 그리고 이번에는 ajax를 통해 서버로 코멘트 정보를 보내고 받아오겠다. 프론트에서 작동할 addComment.js하나 만들고 submit 이벤트 핸들러를 하나만들어서 submit 이..

Asynchronouse Javascript and XML 비동기자바스크립트, xml통신 조회수 작업을 한다. ajax 작업을 하기 전에 새로운 파일을 웹사이트에 추가하는데 API view이다. 템플릿이 랜더링한 /video url과 /idXXXX의 유알엘 두개가 보인다. 랜더링과 상관없는 URL과 controller를 만들건데 http status code로 답해주는 것들이다. 사용자는 이url을 찾을 수 없고, 이 url에 어떤것도 랜더링 할 수 없다. routes 설정해주고 app.js에서 라우트 사용해준다. 그리고 router를 설정해주기 위해 router파일을 만들어서 라우터 설정해주고 적용될 컨트롤러를 videoController에 만들어준다. 컨트롤러는 post방식의 컨트롤러이고 기본적으로 ..

1. recording video create videoRecorder.scss, videoRecorder.js && upload.pug modify mediadevice mdn https://developer.mozilla.org/ko/docs/Web/API/MediaDevices MediaDevices - Web API | MDN MediaDevices 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어 developer.mozilla.org getVideo 함수를 만들어서 웹캠애 접근까지 함. navigator.mediaDevices.getUserMedia()를 이용. 웹캠을 ..

1. videoPlayer.pug 만들어주고 scss작성 기존 video__player는 삭제 2. javascript 작성 videoPlayer.js play & pause function - 고유의 아디를 만들어주고 ~ videoContainer가 있을때만 작동하도록 해야 오류 안남. 그리고 이벤트 리스너를 통해 video play & pause 함수를 만들어 준다. https://developer.mozilla.org/ko/docs/Web/API/HTMLMediaElement HTMLMediaElement - Web API | MDN HTMLMediaElement는 오디오와 비디오에 통용되는 미디어 관련 확장성을 제공하기 위해 HTMLElement에 메소드와 프로퍼티를 추가한 인터페이스입니다. de..