gitmoji

git + moji😄

깃모지는 git + emoji를 합친 단어로, 모든 커밋 앞에 이모지를 붙이는 행위입니다. 깃모지를 사용하면 커밋의 목적이나 의도를 아주 쉽고 명확하게 알 수 있습니다. 그래서 코드 리뷰할 때를 포함한 커밋을 봐야 하는 경우 모두에게 도움이 됩니다.

gitmoji를 쓰면 좋은 점

시각화가 좋다

위 사진과 같이 커밋앞에 이모지를 붙여 어떤 일이 있었는지 확인 가능

✨이모지는 기능 추가를 의미하는 깃모지인데요, 그러면 위의 이모지만 읽어도 기능 추가 위주의 작업이라는 것을 바로 알 수 있습니다.

커밋 단위로 생각이 가능합니다.

예를 들어 물건 편집 화면을 만든다고 해보겠습니다.

기능 추가에 대한 ✨이모지 하나로 끝낼 수도 있지만, 💄을 사용해서 레이아웃 완성 시 커밋 한 번, API나 다른 기능들을 붙인 후 화면이 완성되면 ✨로 한 번, 테스트 작성 후 ✅까지 쓴다면 커밋이 조금 더 의미 있게 나뉘지 않을까요?

이렇게 깃모지를 사용하면 커밋 단위로 생각을 할 수 있어서 좋다고 생각합니다.

gitmoji의 단점

깃모지의 단점은 익숙하지 않은 사람은 어떤 의미인지 알 수 없다라고 생각합니다.

gitmoji, 이렇게 사용하면 좋아요

커밋 하나엔 이모지 하나만 쓰기

커밋에 여러 이모지를 붙이면 그 커밋에서 어떤 일이 일어났는지 알기가 더 어려워집니다. 커밋은 최소 단위로 하고 이모지도 하나만 달도록 합시다.

깃모지 가이드 직접 작성하기

세상에 이모지는 많고 커밋에 필요 없는 이모지도 많습니다. 깃모지를 팀에 도입하기로 했다면 팀에서 사용할 이모지와 각 용도를 문서로 작성하는 것이 좋습니다.

같이 사용하면 좋은 도구들

• gitmoji 홈페이지
• Roket - slack 스타일로 이모지 작성가능
• gitmoji-cli - 터미널로 깃 작업할때 도움됩니다.

gitmoji 사용하고 있는 프로젝트

• groov

출처

vscode extension

vscode extention에서 검색후 설치

1. auto Rename Tag

   자동으로 태그 변경

   

2. bracket pair colorizer

대괄호, 소괄호, 변수나 함수 등 컬러를 바꿈

3. css peek

   html 코드에 적용된 css가 어디에서 사용되고 있는지 찾아주는 기능

   

4. eslint

ESLint는 JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트입니다. 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와줍니다. JSLint, JSHint와 같이 다른 JavaScript 정적 분석 도구들도 있지만, ESLint가 커스터마이징이 쉽고 확장성이 뛰어나 많이 쓰이고 있는 추세입니다. ESLint는 스타일 가이드를 좀 더 편리하게 적용하기 위해 사용하기도 하는데, 외부에 공개되어 많은 개발자가 사용 중인 Airbnb Style Guide, Google Style Guide 가 그 대표적인 예입니다.

5. html css support

   html에 css작업할때 id나 class 이름을 추천해준다.

• HTML id and class attribute completion.
• Supports linked and embedded style sheets.
• Supports template inheritance.
• Supports additional style sheets.
• Supports other HTML like languages.
• Validates CSS selectors on demand.

6. material icon Theme

   아이콘 변경

7. material theme

vscode 테마 변경

홈페이지에서 확인부탁드려요

8. prettier

코드 자동 정렬

9. live server

실시간 로컬 서버

10. Indent-Rainbow

들여쓰기를 컬커로 표현해줌

---

Event Loop 이벤트 루프

자바스크립트는 싱글 스레드로, 한 번에 한 가지 일만 할 수 있습니다. 이것은 일반적으로 큰 문제 없지만, 30초가 걸리는 일을 수행한다고 상상해보세요.. 우리는 그 일을 처리하는 30초 동안 아무것도 할 수 없습니다. (자바스크립트는 기본적으로 브라우저의 메인 스레드로 동작하기에, UI가 멈추게 됩니다.)

다행히, 브라우저는 자바스크립트 엔진 자체가 제공하지 않는 웹 API 기능을 제공합니다. 이 API는 DOM API, setTimeout, HTTP requests 등이 포함됩니다. 이것은 우리가 비동기, non-block 동작을 만드는 데 도움을 줍니다.

우리가 함수를 실행하면, 그 함수는 call stack(이하 콜 스택) 에 추가됩니다. 콜 스택은 자바스크립트 엔진의 한 부분이며, 브라우저에만 한정된 것은 아닙니다. 이것은 선입후출(first in, last out)의 스택입니다. 함수가 값을 반환하면 그 함수는 스택에서 빠져나와 사라집니다.

respond 함수는 setTimeout함수를 반환합니다. setTimeout함수는 Web API에서 제공되는 함수로, 메인 스레드를 막지 않고 작업을 지연시킬 수 있습니다. setTimeout에 전달한 콜백 함수인 화살표 함수 ()=>{return 'Hey'}가 Web API에 추가됩니다. 그동안 setTimeout 함수와 respond 함수는 그들의 값을 반환했으니, 스택에서 빠져나옵니다.

Web API 안에서, 타이머는 setTimeout에 전달한 두 번째 인자 1000ms 동안 실행됩니다. 콜백은 즉시 호출 스택에 추가되지 않고, 대신 '큐(대기열)'에 전달됩니다.

이것은 조금 혼란스러울 수 있습니다. 1000ms 후에 콜 스택에 추가되어 값을 반환한다는 의미가 아닙니다. 1000ms 후에 단순히 큐에 추가됩니다. 그러나 큐는 대기열이므로, 해당 함수는 자기 차례를 기다려야 합니다!

이제 우리가 기다리던, 이벤트 루프의 유일한 작업(큐와 콜 스택의 연결)을 수행할 시간입니다! 콜 스택이 비어있다면, 즉 이전에 호출되었던 모든 함수가 값을 반환하고 콜 스택을 빠져나갔다면, 큐에 있는 첫 번째 요소가 콜 스택에 추가됩니다. 이 경우, 다른 함수는 호출되지 않았고, 이는 콜백 함수가 큐의 첫 번째 요소일 때 콜스택이 비어있었음을 의미합니다.

콜백 함수가 콜 스택에 추가되고, 호출되고, 값을 반환하고, 스택을 빠져나갑니다.

콜백이 콜 스택에 추가되고 실행되고, 이 값을 반환한 후에 콜스택에서 나오게 됩니다.

예제

const foo = () => console.log('First');

const bar = () => setTimeout(() => console.log('Second'), 500);

const baz = () => console.log('Third');

bar();

foo();

baz();

1. bar를 호출해서 setTimeout을 반환합니다.
2. setTimeout에 전달한 콜백은 Web API에 추가되고, setTimeout, bar는 콜스택에서 빠져나옵니다.
3. 타이머가 실행되고, 그 동안 foo가 호출되고 "First"를 기록합니다. foo는 undefined를 반환하고, baz가 호출되고, 콜백이 큐에 추가됩니다.
4. baz가 "Third"를 기록합니다. 이벤트 루프는 baz가 값을 반환한 후 콜스택이 비어있음을 확인합니다. 그 후 콜백이 콜스택에 추가됩니다.
5. 콜백이 실행되며 "Second"를 기록합니다.

출처

사이트 링크

1. Black Menu for Google 링크

   

2. ColorPick Eyedropper 링크

   

3. CssViewer 링크

   

4. Sourcegraph 링크

   

5. Web Paint 링크

   

6. Full page screen capture 링크