본문 바로가기

Ect.31

Git commit convention 커밋 컨벤션? 깃을 사용하다보면 쓰게 되는 커밋 메세지 git commit -m "Message" 혼자 작업할 때는 이 커밋 메세지의 중요성을 모르지만, 회사에서 협업을 하려고 보니 필요성을 느꼈다. 대충 커밋 목록 확인할 때 컨벤션이 있으면 중요하거나, 중요하지 않은 커밋을 분류할 수 있었고 무엇보다 내가 커밋을 할 때에도 컨벤션에 맞춰서 스태징 후 커밋을 분리하다보니 여러 기능을 한번에 커밋해버리는 일이 줄었다. 최대한 세부적으로 나눠서 커밋을 하게 되니 관리가 쉬워진 것 같다. 커밋 컨벤션은 유동적으로... 필수는 아니지만, 현재 내 팀에선 간단하게 이정도로 사용하는 것 같다. 더 세분화해도 보통 사용되는 것들이 정해져 있어서 ... 이정도도 많은 것 같다. 타입 설명 feat 새로운 기능 추가 f.. 2023. 8. 11.
Bundler (feat.vite) 번들러 개발자가 직접 처리해줘야할 일들을 대신 처리해주는 것 (transfiler) https://www.youtube.com/watch?v=UdTD_NAWxyE yarn create vite vite 로 만들어준 프로젝트에 yarn build 로 빌드해주면 나오는 dist 폴더를 확인해준다. assets 폴더에 존재하는 파일은 vite로 생성해준 프로젝트를 압축시킨 내용이므로 얼핏 보기에 알아보기 힘들다. 이러한 파일을 vite.config.js 파일의 build 안에 minify을 false로 설정하면 그나마 보기 좋게 바뀌는데 export default defineConfig({ plugins: [react()], esbuild: { jsxInject: `import React from 'react.. 2023. 7. 31.
크롬 개발자 도구 살펴보기 Network 웹 페이지에서 발생하는 모든 네트워크 트래픽을 알려주며 어떤 리소스가 어느 시점에 로드되는지, 리소스의 크기 등을 확인 가능 Performance 웹 페이지가 로드될 때 실행되는 모든 작업을 시각화 개발자도구의 Performance 탭에 직접 들어가도 되고, Lighthouse의 View Original Trace 로 접근해도 된다. CPU 차트 시간에 따라 CPU가 어떤 작업에 리소스를 사용하고 있는지 비율 자바스크립트는 노란색, 렌더링/레이아웃 작업은 보라색/페인팅 작업은 초록색/기타 시스템 작업은 회색 어느 타이밍에 어느 작업이 주로 진행되고 있는지 파악 가능 빨간색 짙은 선은 병목이 발생한 지점 Network 차트 CPU 차트 및 막대 형태로 표시 진한 막대는 우선 순위가 높은 네트.. 2023. 7. 26.
React Chart 라이브러리 소개 기본적으로 차트 라이브러리는 자바스크립트 기준으로 만들어져 있다. Chartjs, C3js, D3js ... 이러한 라이브러리를 리액트에서 사용해주기 위해선 리액트 래퍼 형식으로 된 라이브러리를 사용해줘야 한다. Chartjs : 일반적인 차트 그릴 때 사용, 단순하고 유연, 간단한 데이터 표현에 최적되어 있으나 확장성은 부족하다는 평이 있다. D3js : 라이브러리 패키지의 크기가 작은 편이며 svg 를 활용한다. 웹 표준에 가깝고 활용가 높지만, 러닝커브가 높으며 이미지 요소가 많아질 경우 canvas에 비해 성능이 좋지 못할 가능성이 있다. 회사에서 쓸 라이브러리라 라이선스를 고려하여 오픈 소스라서 제한 없이 사용할 수 있는 리액트 전용 차트 라이브러리를 정리했다. react-chartjs-2 ht.. 2023. 7. 24.

티스토리툴바