Photopea는 어떻게 Javascript로 고성능을 낼까?

 

 

1. 코드 스타일을 정하자

프로그래밍을 하다보면 자신만의 스타일을 정해야할 때가 있습니다.

 

특히 성능을 위해서는 일관적인 아키텍처를 따르는 것이 좋죠.

 

웹에서 사진을 편집하는 포토피아는 어떻게 자바스크립트로 그렇게 고성능을 낼 수 있을까요?

 

먼저 자바스크립트를 하려면 자바스크립트를 알아야하겠죠.

포토피아는 https://www.w3schools.com/js/ 에서 배우라고 조언합니다.

JavaScript Tutorial

 

이렇게 좋은 자료가 무료로 있다는 것 자체에 감사해야하겠네요.

 

 

2. Syntactic sugar를 피하자.

Syntactic sugar란 가독성을 높여주고 문법적으로 읽기 쉽게 도와주기 위한 표현입니다. 예를 들어서 Class 표현법이나 람다식 같은 것이 있습니다.

 

포토피아는 자바스크립트의 let, const를 사용하지 않습니다. 무조건 var만 쓴다고 하네요.

 

이와 같이 여기서 제안한 몇 가지를 개조식으로 적어보겠습니다.

 

1. var, let, const를 결합하지 않고 var만 사용한다.

2.문자열을 쓸 때 "hi" 와 같이 큰 따옴표로만 사용한다.

3. === 대신 == 만 사용한다. (타입말고 단순히 값만 비교)

4. 객체에 특정 속성이 있는지 확인할 때 obj["prop"] == null 구문을 사용한다.

5. 가능하면 중괄호를 생략한다. if(x) { run() }; 이 아니라 if(x) run();로 사용

6. undefined가 아니라 null을 사용한다.

 

이렇게 코드 스타일을 가져간다고 합니다.

 

 

 

3. 그외의 것들

이렇게 단순한 것외에도 정적 함수, 프로토타입, 익명 함수, 형식화 배열(Typed Array)에 대한 다른 이야기도 있습니다.

 

하단 참고 링크를 확인해주세요 :)

 

 

 

 

 

4. 참고

본 글은 photopea의 github의 글을 번역 및 편집했습니다.

https://github.com/photopea/JS-guide

GitHub - photopea/JS-guide: Our style of writing Javascript code

 

끝.