본문 바로가기

TIL & WIL/오늘의 공부.js19

깃모지(Gitmoji) 사용에 대해서 🔥 Gitmoji 란? git + emoji를 합쳐서 부르는 말로 emoji를 사용하여 commit message를 작성하는 도구이다. 커밋 메세지 작성 시 :art:를 입력하면 🎨로 표시되며 코드의 구조/형식 개선을 의미한다. 이러한 이모지를 이용하여 커밋 메세지를 시각적으로 요약해서 전달해주는 역할을 한다. 장점 깃모지에 익숙하다면 시각적으로 명확한 작업 내용을 전달 할 수 있다 커밋 단위의 기준으로 사용할 수 있다 일반적인 프리픽스에 비해 세분화가 잘 되어있다 단점 깃모지에 익숙해 지는 시간이 필요하다. 경우에 따라 필요한 깃모지를 찾아 확인하는 수고가 든다. (gitmoji 사이트나 gitmoji-cli를 이용) 커밋 메세지의 의미를 이모지와 연결시켜 기억하는 노력이 필요하다. 커밋 형태 비교 깃모지.. 2024. 2. 21.
JavaScript heap out of memory 오류 해결 서비스를 배포하면서 테스트등 추가 작업을 하던 중 아래 오류가 났다. node에 기본으로 설정 된 메모리인 512MB를 초과하면 나오는 에러로 메모리 사이즈를 늘려주는 것으로 간단하게 해결할 수 있다. 다행이 우리 서버의 메모리를 1GB까지 이용할 수 있어 메모리를 증량시켜주는 것으로 해결할 수 있었다. //실행 시 node 메모리 사이즈를 늘려줌 //1.2GB까지 허용한다는 의미 node --max-old-space-size=12000 app.js 더 좋은 해결방법으로는 메모리 누수를 점검하는 것이 있는 데, 그 부분은 다음에 공부해보기로 한다! 2024. 1. 6.
개인프로젝트 페이지 로딩 속도 개선 - WebP 로딩 속도를 테스트 한 이전 포스트를 토대로 이미지를 압축하고 사용하지 않는 코드를 삭제해봤다. 페이지 로딩 속도 테스트 후 리팩토링 계획 SPA가 대세로 자리매김한 요즘 사이트 최초 로딩 속도는 사이트의 품질 뿐만 아니라 프론트엔드 개발자의 실력까지 볼 수 있는 지표가 되었다고 한다. SPA에서 페이지가 로드되었을 때 바로 VIews mand0o0.tistory.com 그러던 중 알게된 지식과 과정을 공유한다. 이미지 리사이징 내가 테스트를 진행한 라이트 하우스에서 안내하는 방법을 참고해서 이미지를 어떻게 하면 좋을 지 고민해 보았다. 처음으로 시도 한 방법은 기존 이미지 크기에 비해 작은 이미지를 하용하고 있기 때문에, 이미지 자체를 작게 만드는 것이었다. 평균적으로 60% 이상의 압축을 진행했고, .. 2024. 1. 5.
일렉트론(Electron) - 나도 자바스크립트로 데스크탑 앱 개발하고싶어!! 게임을 좋아하는 나는 OPGG같은 데스크탑 앱을 만들고 싶었다. 그러던 중 찾게 된 게 일렉트론! 오늘은 일렉트론에 대한 조사를 정리해보려 한다. 참고 : https://tech.kakao.com/2021/08/17/frontend-growth-11/ 일렉트론(Electron)이란? JavaScript, HTML, CSS 로 데스크톱 애플리케이션을 만들 수있는 프레임 워크이다. Electron 의 최대의 장점은 Desktop App 을 Javascript 만으로도 개발이 가능다는 점이다. 비슷한 예로 Javascript 로 Mobile App 개발이 가능한 React Native 가 있다. 백엔드로는 Node.js 런타임을, 프론트엔드로는 크로미엄을 사용한다. 일렉트론은 여러 저명한 오픈 소스 프로젝트를.. 2023. 12. 17.