https://yozm.wishket.com/magazine/detail/1934 그 많은 OTT 콘텐츠는 어떻게 웹에서 재생될 수 있을까? | 요즘IT OTT 콘텐츠 많이들 보시나요? 지금 당장 생각나는 것만 해도 넷플릭스, 유튜브, 웨이브, 티빙, 왓챠 같은 많은 OTT 서비스들이 떠오르네요. 그런데 프론트엔드 개발을 조금이라도 해봤다면 웹 브라 yozm.wishket.com 해당 포스트를 보고 복습의 목적으로 정리한 글입니다. 어떻게 웹에서 OTT 서비스가 운영될 수 있을까? 교수님께서 던지신 질문에 미뤄두고 있었던 포스트를 읽었다. (나는 몰랐으나)개발자 도구를 사용할 줄 안다면 OTT 의 동영상을 다운로드 받을 수 있는데, 어떻게 저작권을 보호하며 비디오를 재생할 수 있을까? 결론부터 말하자면 ..
AND 여러개의 조건을 만족시키는 컬럼을 뽑아내기 위해 WHERE 구절에서 사용한다. SELECT ICECREAM_INFO.FLAVOR FROM FIRST_HALF INNER JOIN ICECREAM_INFO ON FIRST_HALF.FLAVOR = ICECREAM_INFO.FLAVOR WHERE FIRST_HALF.TOTAL_ORDER > 3000 AND ICECREAM_INFO.INGREDIENT_TYPE = 'fruit_based' ORDER BY TOTAL_ORDER DESC LIKE 특정 문자열이 포함 돼 있는지 확인한다. SELECT FACTORY_ID, FACTORY_NAME, ADDRESS FROM FOOD_FACTORY WHERE ADDRESS LIKE '강원도%' ORDER BY FAC..
axios fetch API 처럼 백엔드와의 비동기 처리를 가능케 하는 또 다른 방법으로 axios 가 있다. 설치 npm i axios 터미널에 해당 명령어를 입력해 axios를 설치해줘야 한다. import axios from 'axios' 사용을 원하는 파일에 import를 하면 된다. 사용 방법 const response = await axios(url, option); 위와 같은 방법으로 써도 되고, 아래와 같은 방법도 있다. const response1 = await axios(option) // option 안에 url 프로퍼티로 url 전달 const response2 = await axios.post(...) // 메서드 방식으로 http 통신 방법 설정 url - http 통신을 할 (..
[CSS] 다운로드 한 폰트 적용
react-create-app 의 디렉터리 구조를 따르고 있음. 1. OTF, TTF 형식을 WOFF 로 바꿔준다. 2. font 폴더에 변환한 폰트 파일을 넣는다. 3. font 폴더에 font.css 를 다음과 같이 작성한다. @font-face { font-family: "black-godic"; src: url("./검은고딕.woff") format(woff); } @font-face { font-family: "(사용할 이름)"; src: url("파일 디렉토리 주소") format(파일 형식); } 4. 가장 상위 파일인 index.js에서 font.css를 import 한다. import './assets/font/font.css'; 5. 하위 CSS 에서 적용이 되는지 확인한다. #head..
참조한 사이트 https://ui.toast.com/fe-guide/ko_CODING-CONVENTION https://github.com/airbnb/javascript#variables--unary-increment-decrement 새로 알게 된 점 지역 변수 및 private 변수명은 '_'로 시작한다. let _privateVariableName; let _privateFunctionName; // 객체일 경우 const customObjectName = {}; customObjectName.propertyName; customObjectName._privatePropertyName; _privateCustomObjectName; _privateCustomObjectName._privatePro..
[React] slide 구현하기
1. setInterval 0.) 목표 현재 가리키고 있는 slide 의 index 를 currIndex 라고 한다. 이때 currIndex 를 2초마다 +1 시키고, 그에 따라 pagination 의 색이 변하게끔 만드려고 한다. 1.) 문제점 setInterval(() => { setCurrIndex((curr) => { curr++; if (curr > IMAGE_LENGTH) curr =1; return curr; }) }, 2000); 1-2-3-1-2-3 의 순서를 바랐는데... 예상과 달리 숫자가 이상하게 돈다. 2.) 문제 해결 state가 변함에 따라 setInterval도 함께 re-rendering이 되는 문제로, useEffect()를 사용하여 해결했다. 컴포넌트가 마운트 됐을 때만..