1. react-router-dom더보기이번 영상에서는 react-router-dom 사용법에 대해 배울거야 곧 알게 되겠지만, 아주, 아주, 엄청, 쉬울거야 알겠지? react-router-dom을 사용하기 위해서는 우선 몇가지를 import 해야 해 튜토리얼에서 요것들을 복사해서 여기에 붙여넣고 Link는 지워줘. 나중에 다룰거야, 알겠지? BrowserRouter를 import 해 올거야 라우터에는 두 가지 종류가 있는데 하나는 Hash Router고 다른 하나는 Browser Router야 우린 둘 다 살펴볼거니까 걱정하지 말고. 알겠지? 여기에 Router 컴포넌트를 만들어줄게 정말 간단하지 누군가 만들어 놓은 컴포넌트를 그냥 사용하기만 하면 되는 거야. 아주 쉽지 그 다음에는 Switch를 사..
1. To Do List (1)더보기이번 섹션에서는 할 수 있는 한 최대한 많이 연습을 하고 최대한 많은 것들을 만들어 볼거야 우린 State, Effect, props를 연습하면서 우리가 지금까지 배운 모든 것들을 한 번 적용해볼거야 자, 그럼 우선 아주 매우 엄청 간단한 to-do list를 만드는 걸로 시작해보자. 알겠지? 먼저 input을 만들거야 (위와 같이 작성) 아주 간단하지? 이제 한 번 더 연습해볼텐데 input 값을 어떻게 컨트롤 할 수 있을까? 우리가 가장 먼저 해야 하는 것은 useState()를 쓰는 거야 import 도 됐고 기본값으로는 빈 String 을 해줄 거야 그럼 이제 value 를 받아와야 하니까 toDo 랑 그걸 수정하는 함수를 setToDo라고 부를게 이 포지션을 ..
1. Problem더보기React로 작업할 때 마지막으로 가장 중요한 걸 공부할 거야. 우리는 State얘기도 했고, props얘기도 했으니까 이제는 마지막 걸 배워볼 거야. 우리가 이번 섹션에서 배울 게 왜 필요한지 이해하기 위해서는, 먼저 문제를 하나 정의해보자. 좋아, 문제를 정의하기 위해서 ReactJS가 어떻게 작동했는지 상기시켜보자구 괜찮지? 저번에 했던 것처럼 counter를 만들어줄게. useState를 써줄거고. 그걸 react.js에서 import 하면 되지 보다시피 우리가 create react app을 사용하기 떄문에 여기다가 react라고 적어줄 필요는 없어. 우리가 react 점 뭐라고 쓰지 않고 그냥 useState만 import해줄 수 있어. 우린 useState가 반환값으로..
1. State Pracitce (2)const App = () => { const [amount, setAmount] = React.useState(); const [flipped, setFlipped] = React.useState(false); const onChange = (event) => { setAmount(event.target.value); }; const reset = () => setAmount(""); const onFlip = () => { reset(); setFlipped((current) => !current); }; return ( ..
1. Understanding State더보기좋아 모두들, 이번 강의에서는 React.js의 state에 대해 배워볼 거야state는 기본적으로 데이터가 저장되는 곳이야우리가 지금 바닐라 JS로 진행중인 예제를 완성하려면우린 지금 counter를 증가시키고, 그걸 UI에 디스플레이하고 있잖아그걸 state로 만들 수 있어, counter 말이야바뀌는 데이터들 말이야지금부터 배워볼 부분이야어떻게 하면 React.js 어플에 값이 바뀔 데이터를 담아줄수 있을까지난 강의에서는 React Element를 생성하는 방법에 대해 배웠지그리고 나서 좀더 쉬운방법과 JSX에 대해 배웠지거의 HTML과 같지만 편리한 기능들 마저 가지고있는 녀석 말이야또 만약에 React Element를 함수 내에 담으면원하는 만큼 사용..
1. Our First React Element 더보기좋아, 여러분. 이번 강의에서는 React JS element를 어떻게 생성하는지 설명해줄거야 기억해, 우리의 목표는 여기 있는 코드를 React JS로 다시 구현하는거야 자, React JS의 규칙 중 하나는 HTML을 이 페이지에 직접 작성하지 않는다는 거야 그렇게 안할거야 그 대신에, 우리는 Javascript 코드를 사용할 거야 span이든 버튼이든 무엇이든 만들기 위해서 말이지 HTML 코드를 직접 작성하지 않을거야 그 대신, Javascript와 React JS를 이용하여 element를 생성할거야 이건 정말 정말 유용한데 나중에 왜 그런지 알게 될거야 자 이번 비디오에서는, React JS로 element를 생성하는 어려운 방법을 먼저 보..
1. FFmpeg / WebAssembly - 영상을 압축하거나 영상의 포맷을 변환하거나 영상에서 음성만 추출할 때 등등에 사용 - 유튜브에서 화질이 여러개 나뉘어져있는 것도 이걸 이용하면 구현 가능 - 문제는 FFmpeg을 실행하려면 백엔드에서 해야 하는데 이건 비용이 비싸게 발생 - 이 문제를 해결하기 위해 WebAssembly를 사용 - WebAssembly는 개방형 표준이며 기본적으로 웹사이트가 매우 빠른 코드를 실행할 수 있게 해줌 - 실행 비용이 큰 프로그램들을 브라우저에서 실행할 수 있음 - 즉 우린 이 두가지를 결합하여 ffmpeg.wasm을 사용할 거임 - ffmpeg.wasm는 영상을 변환하기 위해 우리 서버대신 유저의 컴퓨터를 사용 - WebAssembly을 사용하여 FF..
1. Stop Button - 기다리지 않고 버튼 누르면 녹화가 중단되게 살짝 변경 - 정지버튼을 누르고 콘솔을 보면 영상을 얻게 됨 - createObjectURL은 브라우저 메모리에서만 가능한 url을 만들고 앞에 있는 URL은 파일을 가리킴 - 해당 url로 가보면 우리 서버상에 없는데, 이 url은 브라우저에 의해 만들어졌고 접근할 수 있는 파일을 가리킴 - 즉 파일은 메모리에 있음 - 파일을 가지고 뭔가를 하고 싶다면 파일을 url에 집어넣어서 접근할 수 있도록 해야함 - 테스트 해보기 위해 미리보기 부분을 제거하고 녹화한 영상으로 대체 해보겠음 - 그러기 위해선 기존에 만들었떤 srcObject 제거 - 지금은 윈도우를 사용하는 피시로 하다보니 영상을 확인할 순 없지만 해당 url로..
1. Video Recorder - 버튼을 누르면 영상촬영이 되는 기능 구현 - recorder.js파일 만들고 웹팩 entry에 알아서 만들고 업로드에 버튼 만들거임 - 버튼을 누르면 유저의 카메라에 접근 권한이 생기고 유저에게 녹화된 영상을 미리보기 해주고 그걸 저장까지 되게 해야 함 - https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia MediaDevices: getUserMedia() method - Web APIs | MDNThe getUserMedia() method of the MediaDevices interface prompts the user for permission to use a media inpu..
1. Mouseover - 우선 마우스가 언제 비디오에 들어가고 나오는지를 탐색 - 하지만 유튜브는 영상에 들어가면 컨트롤바가 바로 나타나지만 나갈때는 약간 딜레이가 있음 - showing이 잘 지워지는데 시간내에 다시 들어와도 지워버림 - 우리는 timeout의 return type을 이해해야 함 - 우리가 setTimeout 함수를 부르면 return으로 timeout의 id를 받음 - 여기서 우리는 clearTimeout 함수에 timeout id를 건내주면 됨 - 문제는 영상 안에서 움직이다가 나갔다 다시 들어오면 timeout을 취소하고 싶음 - handleMouseMove와 이 timeout을 공유해야 함let controlsTimeout = null;const handleMouse..