본 시리즈는 프론트엔드 엔지니어로서 데이터 시각화에 대한 실용적이고 실무적인 내용을 다룬 글로 개인 경험을 토대로 작성되어 다소 주관적인 내용을 내포하고 있습니다.!codesandbox2-chart-examples-pm1l8o?fontsize=14&hidenavigat
본 시리즈는 프론트엔드 엔지니어로서 데이터 시각화에 대한 실용적이고 실무적인 내용을 다룬 글로 개인 경험을 토대로 작성되어 다소 주관적인 내용을 내포하고 있습니다. 테이블 테이블은 데이터 시각화 업무를 맡게 되었을 때 대부분 필수적으로 요구받는 구현 컴포넌트입니다.
해당 글은 번역글로 jotai와 zustand를 개발한 daishi의 아티클을 번역한 글입니다. 원문: https://zenn.dev/dai_shi/articles/01813b22907dcfReactive Programming에서는 Signal이라는 개념이 있
a. stitches가 DX면에서 최고라고 판단하였지만 신규 프로젝트에 도입하기에는 maintainer들의 활동이 활발하지 않았다. b. 신규 프로젝트의 계획을 누구한테나 물어봐도 '와 무겁겠다'라고 말할만한 사이즈의 앱이어서 속도와 경량화에 초점을 두었다. 데이터 시
해당 글은 무겁고 사이즈가 큰 프로젝트를 진행함에 앞서 server state를 어떤식으로 일관되게 가독성있게 관리하여 효율적인 작업이 가능할까를 고민하며 react query를 이용한 server state 관리법과 폴더구조, 설계등을 담은 글로서 하나의 의견으로 봐
기존 process.env가 아닌 import.meta속성을 이용해야하는데 여기서 문제가 import.meta는ES2021(ES12) 에 새로 추가된 기능이고 모듈 컨텍스트(module context) 특정 meta 데이터를 공개합니다.tsconfig의 target,
stand-alone 버전의 cz-customizable를 사용하고 있습니다.설치여기서 yarn pnp를 사용하고 있기때문에 cz-customizable의 node_modules만 꺼내오기 위해 unplug를 해줍니다.그리고 package.json의 scripts부분에
stitches를 5-6개월 정도 사용하면서 편했던 점이나 활용 방식에 대해 설명하고자 합니다.마찬가지로 classname 혹은 data attribute로도 핸들링이 가능하지만 variants로 핸들링하는 것이 랜더단이 가장 깔끔하고 css 작성문이 직관적이어서 좋았
css-in-js 추천 stitches css!
반응형 작업을 할 때 safari 특히 ios 14에서 css상의 많은 이슈가 발생했다.아래와 같은 코드를 사용하였다.@supports는 해당 css를 제공하는 브라우저를 특정하여 스타일링을 제공하는 것이 가능한데 and, or 같은 연산자를 통한 조건식을 만들어 주는
flex가 무시된다. display: flexcol에 display를 override해서 사용하였는데 로컬에서는 문제가 없다가 빌드하면 css가 깨져보였습니다.stackoverflow를 참고해보면 하단과 같은 의견이 있었습니다.And it appears that the
2년간 사람 손을 타지 못한 프로젝트를 리뉴얼하여 출시할 일이 생겼습니다.git actions를 통해 브랜치 push가 되면 s3로 들어가고 있었는데 출시 이후 근 2년간은 계속 오류가 나고 있었습니다. 해당 오류는 패키지를 받을 때 생겼는데 최초에 문제라고 판단했던
최근에 어쩌다보니 다양한 곳에서 차트를 그릴 일들이 빈번하게 발생해 다양한 차트 라이브러리를 사용하게 되었습니다.본 글은 이 라이브러리는 내부적으로 구조가 이래서\~~ 이게 좋아! 가 아닌 한 명의 평범한 유저 입장에서(소비자에 가까운 느낌으로) 이런 경험들을 했고 어
팀 프로젝트를 하다보면 commit style이 제각각이어서 혼선이 오는 경우가 있다.commit convention을 규격화하고 자동화하는 방법이 없을까하여 찾던 와중 commitzen을 알게되었다.commitzen을 사용하면 명령어를 통해 header body fo
지금껏 혼자서 공부하다가 처음으로 현업에 종사하시는 분들과 면접도 보고 프론트엔드를 준비하는 동료들도 만나서 한 달간 여러 과제들을 수행하면서 가장 크게 남는 감정은 감사함이다.운 좋게 좋은 멘토님 그리고 동료들을 만나 덕분에 1달간 성장도 성장이지만 많이 돌아보고 반
조회 기간 내의 data 내부를 every메소드르 검사하여 모든 데이터의 값이 0이면 차트를 그려주지 않고 특정 svg를 화면에 구현해주었습니다.오늘 1주일 전체 버튼을 누르면 날짜를 해당하는 날짜로 변경할 수 있도록 해 주었습니다.차트에 최종 모습입니다.온클릭 부분에
어제에 이어서 차트를 팀원분이 만드신 레이아웃 안에 집어넣고 데이트 피커와 연결하는 작업을 진행하였습니다.레이아웃에 의해 추가할 기능들이 있어 코드를 더 작성하게 되었습니다.차트 오른쪽 평균 bpm 표시를 위해 데이터값에 따라 평균 bpm을 구해주는 함수를 구현했다.값