프론트 엔드 공부 블로그

https://yozm.wishket.com/magazine/detail/1934 그 많은 OTT 콘텐츠는 어떻게 웹에서 재생될 수 있을까? | 요즘IT OTT 콘텐츠 많이들 보시나요? 지금 당장 생각나는 것만 해도 넷플릭스, 유튜브, 웨이브, 티빙, 왓챠 같은 많은 OTT 서비스들이 떠오르네요. 그런데 프론트엔드 개발을 조금이라도 해봤다면 웹 브라 yozm.wishket.com 해당 포스트를 보고 복습의 목적으로 정리한 글입니다. 어떻게 웹에서 OTT 서비스가 운영될 수 있을까? 교수님께서 던지신 질문에 미뤄두고 있었던 포스트를 읽었다. (나는 몰랐으나)개발자 도구를 사용할 줄 안다면 OTT 의 동영상을 다운로드 받을 수 있는데, 어떻게 저작권을 보호하며 비디오를 재생할 수 있을까? 결론부터 말하자면 ..

1. fixed 와 sticky 의 차이점 position : fixed 문서의 흐름에서 완전히 벗어나게 되어 스크롤을 해도 사용자가 지정한 위치에 그대로 붙어있게 된다. position : sticky 꿋꿋하게 고정돼 있는 fixed와 달리 sticky는 일반적인 문서의 흐름에 따른다. 스크롤을 하다가 내가 정한 offset에 닿으면 그제서야 fixed처럼 고정이 된다. relative 속성처럼 동작하다가 어느 시점에 다다르면 fixed처럼 동작하는 것이다. 이렇게 글로만 봐선 모르겠어서... 예제를 한 번 직접 작성해봤다. 아직 fixed와 sticky에 position, top, bottom, left, right 속성을 지정해주지 않은 상태. html fixed_container fixed_ite..

1. 빌드업 C언어를 먼저배우고 파이썬이랑 자바스크립트를 배우면 놀란다... 이...이딴 게 가능하다고? 왜 오류가 안나지?? 하고... 그래서 파이썬을 처음 배울 때 헷갈렸다 이거 C언어에선 안되는데? 이게 왜 되지?JS 처음 접할 때도 신기했다 왜 타입할당이 없지? 2. C언어 같은 건 정적타입언어 컴파일과정은 대학교 1학년 C언어 시간에 이론으로 필수적으로 외운다. 근데 뭔 말인지 모르겠어서 그냥 외우기만 했는데 이제 좀 알겠다... 컴파일 시 컴파일러는 우리 코드에 오류가 없는지 수정하고 검사해준다. 이때 C, C++, Java, C# 같은 언어들의 경우는 변수를 선언할 때 명시적으로 자료형을 지정해주는데 컴파일할 때 변수의 타입을 결정해야하기 때문이다. 이것 때문에 과제할 때 타입에러가 겁나 떴..

1. 라이브러리 코드 작성시 import해서 쓰는 그것! 개발자들이 먼저 만들어놓은 클래스의 메소드 등을 말한다! 코드를 짜는 프로그래머들은 이 메소드들을 도구처럼 가져와서 쓰고, 원하는 코드를 완성시킨다는 점에서 프로그래머에게 제어권이 있다. 2. 프레임 워크 뜻부터가 뼈대다. 프레임워크는 내 코드를 검사해서 자신의 뼈대에 적합한지 검사한다. 라이브러리를 사용자가 필요에 맞게 가져와서 쓰는 개념이라면 프레임워크는 사용자가 그 프레임워크 위에서 작업하는 것이다. 그래서 해당 프레임워크의 문법에 따라야한다. 이런 점에서 라이브러리와 다르게 제어권은 프로그래머가 아닌 프레임워크에게 있고, 이를 이라고 한다 3. 제어의 역전 보통은 프로그래머의 코드가 라이브러리를 가져다 쓰지만 프레임워크는 사용자의 코드를 불..

이론 위주로 배울 땐 무슨 소린지 하나도 몰랐는데 이렇게 직접 다루다보니 이론의 뜻을 하나씩 알게 돼서 좋다. 1. 동기와 비동기 동기 : Synchronous - 순차적으로 task를 수행 비동기 : Asynchronous - 병렬적으로 task를 수행 -> 연산이 끝날 때까지 기다리지 않고 다음 연산을 진행할 수도 있다는 의미! 동기와 비동기라는 단어만 봤을 때 바로 이해하지 못해서... 사전을 찾아보고 나서야 이해할 수 있었다. 데이터를 받아오고 처리해야 하는데 이 과정을 순차적으로 실행하는 동기적인 방법으론 실행시간이 오래걸릴 것이다. 그래서 JS에서는 비동기적으로 데이터를 받아와 처리한다. 그런데 이곳저곳 찾아보다 보니 JS는 싱글스레드이면서 비동기적으로 동작을 한다고 한다. 싱글스레드? 비동기..

JSON이 대체 뭘까!! JSON.stringify도 있고 parse도 있고... 한데 JSON이 뭐길래 이 형식으로 바꿔치기를 해야하는 걸까?? 궁금해서 MDN 사이트에 들어갔다가 대문짝만하게 내 생각을 써놔서 웃겼다 MDN의 묘한 번역체 때문에 절반정도 읽다가 그냥 다른 블로그 참조하는 일도 많았는데... JSON에 대한 설명은 읽다보니까 이해도 되고 마지막에 무려 과제까지(!!) 내줘서 개념과 메소드를 익힐 겸 따라해보기로 했다. JSON = JavaScript Object Notation JSON은 JavaScript Object Notation의 약자로, 데이터를 주고받기 위해 자바스크립트 객체 문법으로 작성한 포맷이다. 데이터를 주고 받을 때 JSON형태로 전송하며 JS의 문법으로 작성돼 JS..