이 글은 아래 영상 내용을 기반으로 작성되었습니다. www.youtube.com/watch?v=OJqUWvmf4gg 전체 형식 [(선택)scope]: [(선택) body] [(선택) footer(s)] type 이 커밋으로 인한 변경이 대략적으로 어떠한 유형의 변경인지를 명시합니다. 가장 대표적인 type의 예시로는 fix : 버그를 고쳤을 때 feat 혹은 feature : 기능과 관련된 변경 그 외 : build, style, chore, refactor, ci, test, docs Scope type 에 추가해서 넣을 수 있는 정보를 명시하고 싶을 때 사용합니다. 괄호 () 안에 명사만을 넣어야 합니다. 만일 엄청 중요한 커밋이라는 것을 명시하고 싶을 때는 ! 느낌표를 : 콜론 앞에 넣습니다. 딱히..

이 글은 아래의 영상 내용을 기반으로 작성되었습니다. www.youtube.com/watch?v=RMN_bkZ1KM0 정말 잘 짜여진 코드는 마치 사람의 산문처럼 읽힌다고 어느 유명 개발자가 말했습니다. 이러한 코드를 만들 수 있는 몇가지 컨벤션을 살펴봅시다. Magic Number & String 절대 그냥 숫자나 문자열을 사용하지 마십시오. 코드를 작성하는 시점의 당신은 그 숫자나 문자열이 뭘 뜻하는 것인지 잘 알겠지만, 미래의 당신, 혹은 다른 개발자는 그 숫자나 문자열이 무엇을 의미하는 것인지 알기 어려울 수 있습니다. 써야한다면 반드시 상수에 담아 사용하십시오. 이때 상수 이름은 대문자와 _(underscore) 로만 이루어지는게 일반적입니다. const SECONS_IN_A_DAY = 8640..

(이 글은 아래의 영상 시리즈 속 내용을 바탕으로 제작되었습니다.) www.youtube.com/watch?v=yJo9lZAEqb0&list=PLAwxTw4SYaPl09X4Rljhy7dZinRCzbHz6 페인트 성능 추적 방법 *페인트 성능을 추적하기 위해, performance 탭 뿐만 아니라 개발자 도구의 'Show pain rectangle' 기능을 활용할 수도 있습니다. 이를 사용하면 단순히 paint 가 일어나고 있다는 것 뿐만 아니라 일어나지 않아야할 영역에서 일어나고 있는 것은 아닌지도 체크해볼 수 있습니다. *페인트 프로파일링은 퍼포먼스 탭에서 Enable Advanced Paint Instrumentation 을 체크하면 수행할 수 있습니다. 체크가 된 상태라면 녹색 페인트 flame 을..

(이 글은 아래의 영상 시리즈 속 내용을 바탕으로 제작되었습니다.) www.youtube.com/watch?v=yJo9lZAEqb0&list=PLAwxTw4SYaPl09X4Rljhy7dZinRCzbHz6 스타일 과정에서의 처리 시간 증가 곡선 자바스크립트나 css 를 통해서 애니메이션 등을 발생시킬 때, 단순히 하나의 요소가 아니라 여러개의 요소의 스타일이 바뀌도록 만들 수 있을 것입니다. 그렇다면 이렇게 스타일 과정에서 변경사항을 반영해야 할 요소들이 많아지면 과연 스타일 과정의 전체 처리시간에 얼마나 큰 영향을 끼치게 될까요? 정답은 '선형적으로 처리시간을 증가시킨다' 입니다. 어떤 스타일 변경을 수행했느냐에 따라 어느 정도는 달라질 수 있습니다. 어쨌든 더 많은 요소의 스타일이 변경되도록 만드는 것..

(이 글은 아래의 영상 시리즈 속 내용을 바탕으로 제작되었습니다.) www.youtube.com/watch?v=yJo9lZAEqb0&list=PLAwxTw4SYaPl09X4Rljhy7dZinRCzbHz6 자바스크립트는 아주 근본적인 문제를 가지고 있습니다. 그것은 바로 우리가 쓰는 자바스크립트와, 실제 브라우저가 수행하는 코드가 100% 일치하지 않는다는 것입니다. 자바스크립트는 브라우저의 엔진을 통해 컴파일됩니다. 이때 이 컴파일러를 JIT(Just In Time)이라 통칭합니다. 그러므로 자바스크립트는 근본적으로 저수준 레벨에서의 최적화는 불가능합니다. 따라서 어떤 제어문이 더 좋은 성능을 내는지 등은 고려하지 않아도 됩니다. 하지만, 꼭 저수준 레벨에서 최적화를 하지 않더라도 다른 방법으로 엄청난 ..

(이 글은 아래의 영상 시리즈 속 내용을 바탕으로 제작되었습니다.) www.youtube.com/watch?v=yJo9lZAEqb0&list=PLAwxTw4SYaPl09X4Rljhy7dZinRCzbHz6 RAIL 이란? 웹 성능 최적화의 척도로 60fps 를 유지하는 것이 잘 소개되고는 하지만, 엄밀히 말해서 '매순간' 60fps 를 유지해야 하는 것은 아닙니다. 사실 그것은 불가능에 가깝습니다. 정확히 어느 순간을 최적화 해야 하는지를 판단하기 위한 척도로, 'RAIL' 이라는 개념이 대두됩니다. R (Response) Respond 는 이용자의 인터랙션에 얼마나 빨리 반응할 수 있느냐와 관련된 부분입니다. 즉, 이용자가 버튼을 클릭하거나 사이드바 토글을 수행할 때 이용자가 직접적으로 화면상에 그에 따..