WASM(WebAssembly)란?

웹어셈블리는 웹 플랫폼에 있어서 상당히 큰 의의를 갖습니다 — 여러 언어로 작성된 코드들을 네이티브에 가까운 속도로 웹에서 돌릴 수 있는 길을 제공하며, 이전까지는 웹에서 돌려볼 수 없었던 클라이언트 앱들을 웹에서 돌릴 수 있도록 만들어주기 때문입니다.

WebAssembly는 JavaScript와 함께 보완되고 실행되도록 설계되었습니다. WebAssembly JavaScript API를 사용하여 WebAssembly 모듈을 JavaScript 앱에 불러와 둘 사이의 기능을 공유 할 수 있습니다. 따라서 WebAssembly 코드를 작성하는 방법을 몰라도 WebAssembly의 성능과 JavaScript의 편리함 및 유연성을 하나의 응용 프로그램에서 활용할 수 있습니다. MDN Web Doc-웹어셈블리

개발환경 구축하기

Wasm By Example-Hello World!를 참고하여서 개발환경을 구축하였습니다.

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

GitHub에서 emsdk를 clone 하시면 됩니다.

./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

다음으로 emsdk를 사용하여 Emscripten의 최신 안정 빌드를 얻고 활성화하여 사용할 수 있습니다. 마지막 명령은 emcc, Emscripten 컴파일러 도구 및 기타 필요한 모든 것을 찾을 수 있도록 경로를 설정합니다.

Compile

일단 자신이 가장 좋아하는 IDE를 사용하시면 됩니다. 필자의 경우에는 VS Code를 사용하여서 개발하였습니다.

// hello.c
#include <stdio.h>

int main() {
  printf("Hello! World!\n");
  return 0;
}

다음 명령을 활용하여서 컴파일을 할 수 있습니다.

emcc hello.c -o hello.js

간단히 말해서 hello.c를 hello.js로 변환하고 그에 맞는 WASM 파일 생성을 하게 됩니다.

ndoe hello

를 입력하게 되면 정상적으로 Hello! World!가 출력되는 것을 보실 수 있습니다. 또한 HTML 파일로도 출력할 수 있습니다.

emcc hello.c -O3 -o hello.html

위 명령어를 사용하게 되면 간단하게 HTML 파일로 변환하여서 파일을 만들 수 있습니다.

Notion을 어떻게 접하게 되었을까?

Notion가 나온지 몇 개월 안 되서 우연히 Facebook에서 개발 그룹에서 Notion에 대해서 대중화가 되어 가고 있는 모습을 보게 되었습니다. 그 이후로 Notion을 잘 사용하게 되었습니다.

학생들이 얻을 수 있는 Notion!

Personal Pro Plan을 학교 메일을 인증하게 되면 공짜로 사용할 수 있습니다. 제가 살고 있는 도시는 전라남도 교육청에서 o365를 제공하고 있기 때문에 o365 계정으로 학생 계정으로 업그레이드를 해서 사용하고 있습니다.

전라남도 교육청-o365

어떻게 잘 사용할 수 있을까?

프로그래밍을 공부하고 있기 때문에 프로그래밍을 공부하기 위해서도 사용하고 있습니다. 다양한 프로그래밍 언어를 공부하고 있기 때문에 /page를 통해서 다양한 페이지를 만들어서 그 안에 제가 공부하고 있는 내용을 작성해서 공부하고 있습니다.

씹어먹는 C++를 읽고 공부하고 있습니다. 각 쳅터에서 공부한 내용을 적거나 책의 내용을 적고 있습니다.

이렇게 사용하면 좋은 방법으로 Notion을 사용하면 됩니다. 궁금한 내용이 있으시면 ! 메일로 연락 주시면 열심히 노션에 대해서 알려 드리겠습니다 ㅎㅎ

Facebook-Notion.so 노션 한국 사용자 모임에서도 궁금하신 내용을 알려주시면 친절하게 알려주실 겁니다 !!

선언적(declarative programming) 프로그래밍이란?

함수형 프로그래밍은 선언적 프로그래밍(declarative programming)이라는 더 넓은 프로그래밍 패러다임의 한 가지입니다. 선언적 프로그래밍은 필요한 것을 달성하는 과정을 하나하나 기술하는 것보다 필요한 것이 어떤 것인지 기술하는 데 방점을 두고 애플리케이션의 구조를 세워 나가는 프로그래밍 구조 입니다.

선언적 프로그래밍을 이해하기 위해 명령형 프로그래밍(imperative programming)과 비교해 보겠습니다.

명령형 프로그래밍(imperative programming)이란?

명령형 프로그래밍은 코드로 원하는 결과를 달성해 나가는 과정에만 관심을 두는 프로그래밍 스타일입니다. 어떤 문자열을 URL에서 사용할 수 있게 만드는 일반적인 작업을 살펴 보겠습니다. 공백은 URL에서 사용할 수 있는 문자가 아니므로 문자열을 URL에서 사용할 수 있게 (URL 친화적으로) 만들려면 모든 공백( )을 하이픈(-)으로 바꿔야 합니다. 우선 명령형 프로그래밍를 어떻게 달성할 수 있는지 예제를 통해서 살펴 보겠습니다.

명령형 프로그래밍 예제

var string = 'THis is the midday show with Cheryl Waters';
var urlFriendly = "";

for(var i=0; i<string.length; i++){
    if(string[i] === " "){
        urlFriendly += "-";
    }else{
        urlFriendly += string[i];
    }
}

console.log(urlFriendly);

이 예제는 문자열의 모든 문자를 루프를 돌면서 공백을 만날 때마다 그 공백을 -로 바꿉니다. 이런 구조의 ㅡ로그래밍은 우리가 원하는 것을 달성하는 방법에만 신경을 씁니다. for루프와 if문을 사용하고 대입연산자(+=)를 사용해 값을 설정합니다. 코드 자체를 간단히 살펴보는 것만으로는 우리가 즉시 알 수 있는 것이 많지 않ㅆ습니다. 명령형 프로그래밈에서 코드 안에서 벌어지는 일을 읽는 사람이 더 잘 이해하도록 돕는 주석을 많이 달아 주어야 합니다.

선언적 프로그래밍 예제

명령형 프로그래밍 예제에서 선언적 프로그래밍 예제로 바꾸어 보겠습니다.

const string = 'This is the midday show with Cheryl Waters';
const urlFriendly = string.replace(/ /g, '-');

console.log(urlFriendly);

여기서 string.replace와 정규식을 사용해서 모든 공백을 하이픈으로 변경합니다. string.replace를 사용하면 모든 공백이 하이픈으로 변경되어야 한다는 사실을 기술할 수 있습니다. 모든 공백을 하이픈으로 변경하는 자세한 방법은 replace 함수 안에 들어가고, 구체적 절차 대신 replace(치환)라는 함수를 사용해 추상적인 개념을 표현합니다. 선언적 프로그래밍의 코드 구문은 어떤 일이 발생해야 하는지 기술하고, 실제로 그 작업을 처리하는 방법은 추상화로 아랫단에 감추어집니다.

선언적 프로그램은 코드 자체가 어떤 일이 벌어진지 설명하기 때문에 좀 더 추론하기 쉽습니다. 다음 에제는 API에서 멤버를 가져온 다음 어떤 일을 해야 하는지 자세히 기술하겠습니다.

API에서 멤버를 가져온 다음 어떤 일을 해야할까요?

const loadAndMapMembers = compose(
    combineWith(sessionStorage, "members"),
    save(sessionStorage, "members"),
    scopeMembers(window),
    logMemberInfoToConsole("name.first"),
    countMemberBy("location.state"),
    prepStatesForMapping,
    save(sessionStorage, "map"),
    renderUSMap
);

getFakeMembers(100).then(loadAndMapMembers);

선언적 접근 방식이 더 읽기 쉽고, 그래서 더 추론하기 쉽습니다. 각 함수가 어떻게 구현 되었는지는 함수라는 추상화 아래에 감춰집니다. 각각의 작은 함수에는 그 함수가 하는 일을 잘 설명하는 이름을 붙어 있고, 그런 함수들이 조합된 방식을 보면 멤버 데이터를 불러와서 맵에 저장하고 출력하는 과정이 잘 드러납니다. 그리고 그런 과정을 설명하기 위한 주석은 따로 필요 없다. 근본적으로 선언적 프로그래밍은 추론하기 쉬운 애플리케이션을 만들어내며, 애플리케이션에 대한 추론이 쉬우면 그 애플리케이션의 규모를 확장하는 것도 더 쉽기 마련입니다.

참고

• 선언적 프로그래밍과 명령형 프로그래밍의 차이점은 무엇입니까?
• 선언형 프로그래밍
• 명령형 프로그래밍 VS 선언형 프로그래밍

문제 소개

예제 출력1

강한친구 대한육군
강한친구 대한육군

위와 같이 출력이 되어야 합니다. 어떻게 하면 출력할 수 있을까요?

문제 풀이

data="강한친구 대한육군"
print(data)
print(data)

위와 같이 풀시면 정상적으로 푸실 수 있습니다. 엄청나게 간단한 문제이기 때문에 제가 따로 설명을 드리지 않고 이해하실 수 있도록 하겠습니다.

기초 지식 없이 문제 풀이를 하면 무엇이 문제일까요? 기본 지식이 없다는 것은 마치 수학에서 빼기더하기도 못하는데 곱하기를 한다는 소리와 비슷합니다. 처음에는 간단하게 풀 수 있겠지만 기초가 어렵게 나온 문제를 풀면 힘들어 지기 마련입니다. 기초 지식 있으신 다음에 문제 풀이하시면 좋겠습니다 😆

문제 소개

Hello World!

Hello World!를 출력하면 되는 문제입니다. 기본적인 파이썬 문법을 알고 계시면 간단하게 풀 수 있으실 겁니다.

문제 풀이

print("Hello World!")

위와 같이 정답이 나오게 됩니다.

Firebase란?

파이어베이스(Firebase, Inc)사가 개발하고 2014년 구글에 인수된 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 파이어베이스는 데이터 베이스를 구현할 필요 없이 프론트엔드에서 파이어베이스 API를 통해서 넘겨 주기만 하면 사용자 계정이 생성되기 때문에 더 간단하게 개발할 수 있습니다.

React.js와 Firebase

React.js와 Node.js를 이용해서 직접 DB와 백엔드를 만들어서 서비스를 제작할 수 있지만 백엔드를 모르는 프론트엔드 개발자 분들께도 추천 드립니다. React.js와 firebase를 사용하게 되면 더 간단하게 서비스를 제작할 수 있습니다. 구지 힘들게 사용자를 관리할 필요 없고 파이어베이스에서 제공해 주는 대쉬보드를 통해서 사용자를 간단하게 확인할 수 있는 것 같습니다.

현상이가 하고 있는 프로젝트 보러 가기

참고

• 소규모 스타트업이 Firebase를 써야 하는 이유
• Google-Firebase
• Firebase를 실제 모바일 백엔드로 사용하면 일어날 수 있는 일들

• 뉴스레터(메일링)
• 블로그

제가 추구하고 있는 방식은 두가지 방식이며 특히 뉴스레터의 경우에는 바로바로 한 눈에 볼 수 있어서 좋은 것 같가고 블로그는 뉴스레터의 여러 가지, 다양한 부분의 소식을 알려주지만 블로그는 한 부분의 내용을 알 수 있게 해 주는 것 같습니다.

📄 Medium Newsletter + Blog

두가지 다 할 수 있는 것은 바로 Medium에서 보내주는 뉴스레터 입니다. 뉴스레터와 함께 관심 있는 블로그 글을 바로 볼 수 있게 해 주었습니다. 단점은... 영어이라는 점...😭

📹 WebRTC Weekly Issue

WebRTC Issue에 대해서 알려주는 뉴스레터 서비스 입니다. 저는 WebRTC에 대해서 기술적인 부분에서 공부를 하고 있기 때문에 뉴스레터를 신청해서 보고 있습니다.

WebRTC Weekly Issue 신청하기

이 포스팅을 통해서 많은 분들께서 많은 정보를 빠르게 받아보실 수 있습니다.

어떻게 작성할까?

시맨틱 마크업을 하기 위해선 각 태그를 용도에 맞게 사용해야 합니다. 즉, 아래와 같은 것들을 말합니다.

• 헤더/푸터에 <header> 와 <footer> 사용
• 메인 컨텐츠에 <main> 과 <section> 사용
• 독립적인 컨텐츠에 <article> 사용
• 최상위 제목으로 <h1> 사용
• 순서가 없는 목록으로 <ul>과 <li> 사용
• 내비게이션 <nav> 사용

이런 식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류 입니다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않습니다.

예를 들어보겠습니다, 효과를 부여하는 <strong> 과 <b> 태그가 있습니다. 둘은 동일하게 글자색을 진하게 하지만 <b> 태그의 경우는 그 자체가 "blod"의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있습니다. 하지만 <strong>의 경우는 "그 안의 내용이 다른 내용보다 더 가종되어야 한다."라는 의미를 가지고 있기 때문에 시맨틱 마크업에 더 적합합니다.

특징

• 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리합니다.
• 웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있습니다.
• 단순한 div , span 으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 더 좋습니다.

실무에서 시맨틱 마크업이 완벽하게 쓰이는 것은 이상적이긴 하지만, 이러한 특징을 고려하여서 웹 사이트를 구성하는 것이 많은 측면에서 바람직하고 좋다고 봅니다.

참고

• Must Know About Frontend-Semantic
• Stackoverflow-What are the benefits of using semantic HTML?
• Stackoverflow-What's the difference between and,and ?
• MDN-Semantics

주의할 점은 async와 defer의 경우 src 속성이 적용되지 않습니다.

참고

• Must Know About Frontend-Script Tag
• Script Tag-async&defer
• MDN-<script>:스크립트 요소
• TCP SCHOOL-HTML <script> 태그

참고

• Must Know About Frontend-Web Storage API
• What is the difference between localStorage, sessionStorage, session and cookies?
• Local Storage vs Cookies
• MDN-Web Storage API
• JavaScript LocalStorage 사용 방법과 쿠기와 차이점
• JavaScript Info-localStorage와 sessionStorage
• MDN-HTTP Cookie

예를 들어서, 음악 사이트에서 앨범 트랙의 음악을 리스트 형식으로 나타내는데 그걸 시간 순으로서 정렬하기 위해서 data- 속성으로 음악 시간을 삽입한다고 예를 들면

<ol>
  <li data-length="2m11s">빨간맛</li>
  ...
</ol>

만약 이 음악 사이트와 전혀 상관이 없는 외부에서 음악 시간을 알아내기 위해 사용한다면 목적에 부합하지 않지 않습니다. 따라서 data- 속성은 해당 사이트만의 자체 스크립트를 위한 속성이라고 할 수 있습니다.

참고

• Must Know About Frontend-data- 속성
• W3, Custom Data Attribute
• MDN-데이터 속성 사용하기

브라우저는 HTML 문서가 DOCTYPE을 가지고 있지 않으면 호환 모드로 렌더링을 하고, 가지고 있다면 주어진 DOCTPYE에 맞게 표준 모드로 렌더링을 하게 됩니다. 호환 모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신 버진의 브라우저에서도 깨지지 않게 하기 때문에 각 브라우저마다 다르게 보일 수 있습니다. 예를 들어서 IE의 경우 호환 모드에서 박스 모델(Box Model)을 잘못 해석하지만, 나머지 브라우저들을 그렇지 않습니다.

결론적으로, 정말 특별한 경우가 아니라면 DOCTPYE을 명시하여 브라우저가 표준 모드로 렌더링 하게 할려면, 현재 시점에서 HTML5에서 권장하는 방식인 <!DOCTYPE html>을 사용하는 것이 가장 바람직 합니다.

참고

• Must Know About Frontend-표준모드와 호환모드
• 야무의 Front-End Master-표준 호환모드
• MDN-호환 모드와 표준 모드
• 쿼크모드(Quirks mode)와 표준모드(Standard mode)
• What is quirks mode?

DTD(Document Type Definition)

DTD(Document Type Definition)이란 문서 형식을 정의해놓은 것으로 DOCTYPE을 명시할 때 사용하고 있습니다. 즉, HTML 문서가 어떤 문서 형식을 따르는지 DOCTYPE에서 DTD를 지정합니다.

자세한 내용을 알고 싶으시면 W3C Recommended list of Doctype declarations 에서 확인 하실 수 있습니다.

• XHTML 1.1
• XHTML 1.0
• HTML 4.01
• HTML5 현 시점에서는 HTML5의 DTD로 DOCTYPE을 명시하는 것이 가장가장 바람직합니다.

  <!DOCTPYE>

참고

• Must Know About Frontend-DOCTYPE
• Wikpedia-문서 형식 정의(Document Type Definition, DTD)
• TCPSchool-DTD 개요
• What is DOCTPYE
• 비표준 모드 quirks mode, 표준 모드 standards mode 차이와 DOCTYPE
• DOCTYPE(문서형 정의) 선언
• What is difference between XHTML and HTML?

.env란?

엄밀한 정의는 아니지만, 환경변수는 특정 process를 위한 key-value 형태의 변수라고 할 수 있습니다. Node.js와 React.js에서 사용할 수 있습니다. 변수를 사용함으로써 보안성 있는 코드를 작성할 수 있게 될 수 있습니다.

예제

이와 같은 React.js에서 사용할 수 있습니다. 제가 하고 있는 프로젝트는 Firebase를 사용할 수 있기 때문에 API_KEY와 각종 정보를 사용하기 때문에 더 안전하게 사용하기 위해서 .env를 사용하면 좋을 것 같습니다.

오류 내용 😭

위 화면에서 보면 React Hook "useState", "useEffect"에 대한 React function component에 대한 오류가 있어서 개발자들의 신 Stackoverflow를 통해서 해결 하였습니다.

import React, { useState, useEffect} from "react";
import RTCVideo from '../Components/RTCVideo';


const rtc = () => {
  const [localStream, setLocalStream] = useState<MediaStream>();

  useEffect(()=>{
    navigator.mediaDevices.getUserMedia({video: true})
    .then(stream=>{
      setLocalStream(stream);
    })
  },[]);

  return (

    <div>
      <RTCVideo
        mediaStream = {localStream}
      />
    </div>
  );
};

export default rtc;

위 코드에서 오류가 있습니다. const rtc = () =>에 대해서 오류가 있습니다. 소문자와 대문자로 컴포넌트 이름을 하면 좋을 것 같다고 나와 있습니다.

해결방안 🤩

위에 내용에서 보다 싶이 소문자로 컴포넌트 이름을 사용하지 말고 대문자로 컴포넌트를 짓지 말고 대문자와 소문자를 사용하여서 해결을 하였습니다.

해결 완료 💚

import React, { useState, useEffect} from "react";
import RTCVideo from '../Components/RTCVideo';


const RTC = () => {
  const [localStream, setLocalStream] = useState<MediaStream>();

  useEffect(()=>{
    navigator.mediaDevices.getUserMedia({video: true})
    .then(stream=>{
      setLocalStream(stream);
    })
  },[]);

  return (
    <div>
      <RTCVideo
        mediaStream = {localStream}
      />
    </div>
  );
};

export default RTC;

위와 같이 대문자와 소문자를 이용해서 만들거나 저처럼 대문자로 만들면 됩니다! 그러면 위와 같이 해결하면 됩니다 🤩

주민등록번호란?

대한민국에서 대한민국에 거주하는 모든 국민들에게 발급 되는 주민등록증에 적혀져 있는 국민식별제도입니다. 1968년 11월 21일부터 편리한 간첩 식별 등의 목저긍로 주민등록증이 발급되면서 부여되기 시작되었습니다. 주민등록번호 체게는 처음 만들어진 이래 2014년까지 큰 변화 없이 사용되고 있었지만, 잇따른 개인정보 유출 사고로 인하여 전 국민의 개인정보가 유출될 정도로 심각한 사회문제가 되자 체계를 개편하는 안이 논의되기 시작했습니다.

주민번호 처리 금지 안내

개인정보보호법에 의해서 엄격히 금지되고 있으며 근거 없이 주민번호 수집시 처벌 받을 수도 있습니다.

무단 수집하거나 유출시에는?

개인정보보호법 24조에 의거하여서 고유식별정보의 처리 제한과 주민등록번호 처리의 제한이 있기에 24조 2에서 제외된 항목을 이유로 수집시에는 처벌 받을 수 있습니다. 위 항목에 벗어나서 수집할 경우에는 개인정보보호법 32조의 2에 의거하여서 5억원 이하의 과징금을 받을 수도 있습니다.

개인정보보호법 32조의 2에 의거하여 개인정보 유출시 과징금을 받을 수도 있습니다.

① 보호위원회는 개인정보처리자가 처리하는 주민등록번호가 분실ㆍ도난ㆍ유출ㆍ위조ㆍ변조 또는 훼손된 경우에는 5억원 이하의 과징금을 부과ㆍ징수할 수 있다. 다만, 주민등록번호가 분실ㆍ도난ㆍ유출ㆍ위조ㆍ변조 또는 훼손되지 아니하도록 개인정보처리자가 제24조제3항에 따른 안전성 확보에 필요한 조치를 다한 경우에는 그러하지 아니하다. <개정 2014. 11. 19., 2015. 7. 24., 2017. 7. 26., 2020. 2. 4.>

대체 수단은?

대체 수단은 무엇일까요? 주민등록번호를 법적으로 수집이 불가능하기 때문에 어떻게 본인인지 알고 성인인지 미성년자인지 확인할 수 있을까요? 한국인터넷진흥원에서는 i-PIN, 휴대폰, 신용카드를 이용한 대체 수단을 만들어 두었습니다. 많은 서비스에서는 i-PIN과 휴대폰을 이용해서 인증을 할 수 있도록 하였습니다.

한국 인터넷진흥원 - <주민번호 대체수단>

참고

• 행전안전부 - 주민등록번호, 이제는 함부로 수집하지 못한다!
• 한국인터넷진흥원 개인정보보호 포털 - 주민번호 처리금지 안내
• 개인정보보호법
• 한국인터넷진흥원 - 주민번호 대체수단

CSS 애니메이션

일반적으로, 마우스를 올렸을 때 혹은 메뉴 버튼의 전환과 같은 간단하게 처리하는 애니메이션의 경우 CSS로 처리할 수 있습니다. 예를 들어서 200 크기의 정사각형을 왼쪽 위에서 오른쪽 아래로 350px 움직이게 하는 애니메이션을 구현한다고 하면, transform의 translate를 사용해서 구현할 수 있습니다. 하지만 이를 JS(JavaScript)로 구현하기 위해선 setInterval을 통해서 계속해서 style.top과 style.left 속성을 변화시켜줘야 합니다. 이렇게 되면 이 속성은 브라우저의 렌더링 과정 reflow(layout) 단계를 발생시키기 때문에 애니메이션 부자연스럽게 끊기는 듯한 느낌을 받게 됩니다. 이런 점에서 바닐라 JS(JavaScript)로 애니메이션을 구현하는 것보다 CSS로 구현하는 것이 좋다고 할 수 있습니다. 이 외에도 다양한 장점들이 있으며 정리하자면 아래 항목과 같습니다.

• 반응형으로 애니메이션을 구현하기에 유용한데, 미디어 쿼리로 애니메이션을 적용하면 됩니다.
• 외부 라이브러리를 필요로 하지 않습니다.
• CSS 자체가 선언형(declarative)이기 때문에 어떤 요소가 애니메이션을 가져야 한다는 직관적인 표현이 가능합니다.
• 메인 쓰레드가 아닌 별도의 컴포지터 쓰레드(Compositor Thread)에서 그려지기 때문에 메인 쓰레드에서 작업하는 JS보다 효율적입니다.

JS(JavaScript) 애니메이션

CSS로 처리하기에는 훨씬 복잡하고 무거운 애니메이션 작업들을 효율적이고, 세밀하게 다루기 위해서 사용하고 있습니다. 바닐라 자바스크립트로 구현할 경우 위에서 살펴본 바와 같이 계속해서 요소의 위치를 재계산하기 때문에 비효율적이며 사용자 눈에 가장 부드러운 60fps가 유지되지 않습니다. 이 때문에 RAF(RequestAnimationFrame) API가 등장했고 구현방식은 동일하지만 60fps를 보장할 수 있게 되었습니다. 이외에도 외부 라이브러리인 velocity.js와 GSAP 같은 라이브러리를 통해서 성능 종흔 애니메이션을 구현할 수 있습니다. 최근에 Web Animations API가 나오기도 했는데 현재(2020년 4월 28일) 기준으로 지원하는 브라우저가 현저히 적기 때문에 아직까진 기존의 방법들이 더 높은 생산성을 가진다고 할 수 있습니다. 보통 복잡한 애니메이션을 구현하려고 하면 외부 라이브러리를 사용할텐데 이것이 CSS에 비해 장점은 아래 행목과 같습니다.

• 요소의 스타일이 변하는 순간마다 제어할 수 있기 때문에 애니메이션의 세밀한 구성이 가능해집니다.
• GPU를 통한 하드웨어 가속을 제어할 수 있습니다. 이는 CSS의 특정 속성으로 인한 가속을 막아주는데, 하드웨어 가속이 모바일에서 성능저하를 발생시킬 수 있기 때문에 이런 면에선 좋습니다.
• 브라우저 호환성 측면에서 transition/animation 속성보다 뛰어납니다.

참고

• Must Know About Frontend CSS 애니메이션 VS JS 애니메이션
• Naver D2, 최신 브라우저의 내부 살펴보기 3 - 렌더러 프로세스의 내부 동작
• 애니메이션 성능을 높이는 방법
• Julian Shapiro, CSS vs. JS Animation: Which is Faster?
• 손찬욱님, Web Animation API 프레젠테이션

CI는 빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스를 뜻한다. Git과 같은 버전관리 시스템을 사용할 때 여러명의 개발자가 하나의 공유 저장소를 사용하는 경우가 많았습니다. 이렇게 되면 새로운 코드의 변경 사항이 저장소에 통합되지 않을 경우 서로 충돌할 수 있습니다. 따라서 빌드와 테스트 자동화부터 코드의 일관성(Consistency)을 제공하기 때문에 지속적으로 통합한다는 용어를 사용하는 것입니다.

CD (Continuous Delivery/Deploy, 지속적 전달/배포)

CD는 CI의 빌드/테스트를 통해서 정상적으로 수행됨을 확인하면 이는 배포를 수동으로 하느냐 자동으로 하느냐에 따라 2가지로 나뉩니다.

지속적 전달

프로덕션 배포를 위한 상태가 되고 배포 자체는 수동으로 실행합니다. 개발팀과 비즈니스팀 간의 커뮤니케이션 부족 문제를 해결합니다.

지속적 배포

프로덕션까지 자동으로 배포합니다. 어플리케이션의 제공 속도를 증가시킵니다.

CI/CD의 대표적인 서비스로는 Jenkins, Travis CI, Circle CI 등이 있으며 현직에서는 Jenkins를 많이 사용하는 것 같습니다.

이미지 출처

참고

• Must Know About Frontend CI/CD
• AWS, 지속적 통합이란 무엇입니까?
• Red Hat, CI/CD(지속적 통합/지속적 제공): 개념, 방법, 장점, 구현 과정
• 개발자노트님, CI(Continuous Integration), CD(Continuous Delivery/Deployment)에 대해 알아보자.
• [Jenkins] 젠킨스란 무엇인가

HTTP 동적 적응 스트리밍(Dynamic Adaptive Streaming over HTTP, DASH)는 무엇일까?

HTTP 동적 적응 스트리밍(Dynamic Adaptive Streaming over HTTP, DASH 또는 MPEG-DASH)은 전통적인 HTTP 웹 서버로부터 전달되는, 인터넷을 경유하는 미디어의 고품질 스트리밍을 가능케 하는 적응 비트레이트 스트리밍 기술의 하나입니다. 애플의 HTTP 라이브 스트리밍(HLS) 솔루션과 비슷하게 MPEG-DASH는 내용을 일련의 작은 크기의 HTTP 기반 파일 세그먼트들로 분리시킴으로써 동작하며, 각 세그먼트는 영화나 스포츠 이벤트 생방송 등 잠재적으로 수시간에 걸친 내용물으 재생 시간의 짧은 간격(interval)을 포함하고 있습니다. 이 콘텐츠는 다양한 비트레이트로 이용이 가능합니다. 콘텐츠가 MPEG-DASH 클라이언트에 의해 재생되면 클라이언트는 비트레이트 적응(ABR) 알고리즘을 사용하여 재생시 멈춤이나 재버퍼링을 일으키지 않고 다운로드 할 수 있도록 가능한 최고 비트레이트의 세그먼트를 자동으로 선별하고 있습니다. 현재의 MPEG-DASH 참조 클라이언트 dash.js는 버퍼 기반(BOLA)과 하이브리드(DYNAMIC) 비트레이트 적응 알고리즘을 모두 제공합니다. 그러므로 MPEG-DASH 클라이언트는 변화하는 네트워크 상황에 순응하고 멈춤이나 재버퍼링을 거의 일으키지 않으면서 고품질의 재생을 제공할 수 있게 됩니다.

MPEG-DASH는 국제 표준화된 최초의 적응 비트레이트 HTTP 기반 스트리밍 솔루션입니다. MPEG-DASH는 전송 프로토콜과 혼동해서는 안 되고 MPEG-DASH가 사용하는 전송 프로토콜은 TCP입니다. MPEG-DASH는 필연적으로 모든 월드 와이드 웹 콘텐츠의 전송에 사용되는 기존 HTTP 웹 서버 하부 구조를 사용하고 있으며 인터넷에 연결된 텔레비전, TV 셋톱박스, 데스크톱 컴퓨터, 스마트폰, 태블릿 등과 같은 장치들이 인터넷을 경유하여 전달되는 멀티미디어 콘텐츠(동영상, TV, 라디오 등)을 소비할 수 있게 해 주며 다양한 인터넷 수신 상황에 대처하고 있습니다. 적응 스트리밍 솔루션의 표준화는 해당 솔루션이 범용적인 상황에 채택될 수 있음을 시장에 보증하는 것을 의미하며, 이는 마치 이와 유사하지만 사유 솔루션인 마이크로소프트의 스무스 스트리밍이라든지, 어도비의 HDS와 비견될 수 있습니다. HDS, 스무스 스트리밍과 달리 DASH는 코덱에 의존적이지 않으므로 H.265, H.264, VP9 등 어떠한 코딩 포맷으로 인코딩된 콘텐츠라도 사용이 가능합니다.

표준화

MPEG-DASH 기술은 MPEG를 통해 개발되었습니다. DASH의 작업은 2010년 시작되었으며 2011년 1월 초안 국제 표준이 되었고 2011년 11월 국제 표준이 되었습니다. MPEG-DASH 표준은 2012년 4월 출판되었으나 2019년 MPEG-DASH ISO/IEC 23009-1:2019을 통해서 개정되었습니다.

DASH의 두가지 요소

MP(Media Presentation)

1. 오디오/비디오는 하나의 파일로 묶을 수도 있습니다. (Ex. HTTP Live Streaming)
2. 각각의 파일로 분리될 수도 있습니다. (Ex. Smooth Streaming)

   MPD(Media Presentation Description)

3. 스트림의 정보를 나타내는 XML 입니다.

<?xml version="1.0" encoding="UTF-8"?>
<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="urn:mpeg:dash:schema:mpd:2011"
  xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd"
  type="static"
  mediaPresentationDuration="PT654S"
  minBufferTime="PT2S"
  profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">

  <BaseURL>http://example.com/ondemand/</BaseURL>
  <Period>
    <!-- English Audio -->
    <AdaptationSet mimeType="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
      <Representation id="1" bandwidth="64000">
        <BaseURL>ElephantsDream_AAC48K_064.mp4.dash</BaseURL>
      </Representation>
    </AdaptationSet>
    <!-- Video -->
    <AdaptationSet mimeType="video/mp4" codecs="avc1.42401E" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
      <Representation id="2" bandwidth="100000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0100.264.dash</BaseURL>
      </Representation>
      <Representation id="3" bandwidth="175000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0175.264.dash</BaseURL>
      </Representation>
      <Representation id="4" bandwidth="250000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0250.264.dash</BaseURL>
      </Representation>
      <Representation id="5" bandwidth="500000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0500.264.dash</BaseURL>
      </Representation>
    </AdaptationSet>
  </Period>
</MPD>

이미지 출처 소스코드 출처

참고

• Media Presentation Description(MPD) 예제
• Does HLS and MPEG-DASH live in HTTP message body?
• Media presentation description and segment formats

모듈 번들러

현대의 프론트엔드 개발은 모듈단위로 파일 엮어서 개발하는 방식입니다. 즉, 모듈은 서로 의존성을 띄고 있는데 이런 점에서 다음과 같은 문제들이 생깁니다.

• 수많은 모듈들의 순서를 어떻게 처리할 것인가? (의존성 처리)
• 모듈이 많아질수록 HTTP 요청이 많아질텐데 이로 인한 오버헤드는 어떻게 해결할 것인가?
• ES6+ 스펙의 코드를 어떻게 처리할 것인가?

위 문제들을 해결하기 위해 등장한 것이 모듈 번들러(Module Bundler)로 각각의 모듈 의존성에 해결하여 하나의 자바스크립트 파일로 만듦과 동시에 ES6+ 스펙을 ES5로 변환까지 해주는 도구 입니다. 이미지 압축, 최소화(Minification) 등의 여러가지 기능들도 제공하며 유명한 번들러로는 Webpack, Rarcel, Rollup 등이 있습니다.

트랜스파일러

트랜스파일러(Transpiling)이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위를 말하며 이를 해주는 것이 트랜스파일러(Transpiler)입니다. 트랜스파일러가 필요한 이유는 모든 브라우저가 ES6+의 기능을 제공하지 않기 때문에 이를 ES5 코드로 변환시키는 과정이 필요합니다. 트랜스파일러는 이 작업을 수행해 주고 있습니다. 사실 ES6+의 기능 뿐만 아니라 리액트의 JSX를 자바스크립트코드로 변환시킨다거나 타입스크립트를 자바스크립트로 변환시크는 등의 역할도 트랜스파일러의 기능 중에 하나입니다. ES6+나 JSX를 변환시키는 트랜스파일러로는 바벨(Babel)이 있으며 타입스크립트를 변환시키는 도구로는 타입스크립트 트랜스파일러가 있습니다. 보통 프론트엔드 프레임워크 및 라이브러리를 사용해서 개발할 때 모듈 번들러에 트랜스파일러를 추가해서 사용하는 방식을 사용합니다.

참고

• What is module bundler and how does it work?
• 트랜스파일이란?