뭐라도 하자

기록이라도 하자

• lefthook으로 커밋할 때 포맷팅 자동화하기

  기록이라도 하자 2024. 6. 30. 23:19

  - lefthook 로컬에서 실행시키기lefthook run pre-commit - lefthook 설정하기# lefthook run pre-commitpre-commit: piped: true commands: lint: priority: 1 glob: "*.{js,ts,jsx,tsx}" run: pnpm eslint --cache --fix {staged_files} stage_fixed: true format: priority: 2 glob: "*.{js,ts,jsx,tsx,json,md}" run: pnpm prettier --write --cache {staged_files} stage_fixed: true# ..

  Read More
• 스타일 관련 작업 가이드

  기록이라도 하자 2024. 6. 30. 22:54

  * 회사에서 사내 서비스 개발을 위한 디자인 시스템을 만들어 가고 있다. 기존에는 마크업 개발자분들이 UI작업을 해주셨고 프론트엔드 개발자분들이 기능 개발을 맡아서 하다가, 마크업 개발자 분들이 전부 퇴사하시고 기능 개발자분들이 UI까지 맡게 되었다. 나는 입사해서 디자인 시스템과 공통 컴포넌트를 구축해나가는 작업을 진행하고 있으며, MUI를 래핑하여 커스텀하는 작업을 진행했다. 공통 컴포넌트를 만들었는데도 사용법을 몰라서 제대로 쓰지 못하거나(피그마 사용법이나 Mui에 대한 이해도가 상대적으로 낮았다), 개발 규칙이 없어서 개발자별로 각각 너무 다르게 개발하는 것을 막고자 스타일 가이드를 작성했다. 코드와 내용은 사내에서 쓰이는 것과 비슷은 하지만 아예 같지는 않은 상태로 공개한다.xx 프로젝트에서는 ..

  Read More
• Tailwind 동적 클래스 생성이 동작하지 않을 때

  기록이라도 하자 2023. 12. 20. 10:12

  어제부터 토로또 웹버전을 만들기 시작했고, next, tailwind 조합으로 UI 작업을 했다. 오늘 다시 작업을 시작하느라 빌드를 새로 했더니 당첨 번호가 보이지 않았다.(정확히는 배경 색상이 표시되지 않음) 어디갔어!!!!! tailwind.config.ts에 커스터마이징 색상을 추가하고 로또 번호별로 색상을 지정해서 동적클래스를 만들어놨었다. 어제는 분명히 됐는데, 오늘은 안된다. 커스터마이징 색상을 잘 인식하지 못하나 해서 bg-symbol-sky를 강제로 입력해봤더니 파란색만 뜬다. tailwind가 만든 css에 bg-symbol-sky만 생성되어 있는 걸 확인할 수 있었다. 커스터마이징 색상에는 문제가 없다는 것을 알았다. 어제 잘 표시된 이유는 각 색상별 클래스를 사용하고 나서 함수를 만..

  Read More
• Netlify Git Branch 이름 기준으로 배포 무시하기 (netlify ignore)

  기록이라도 하자 2023. 10. 17. 12:05

  결론 미리보기 - 적용해보았으나 branch 이름을 제멋대로 가져오는 바람에 실패하고 원복함 - 해당 글에는 실패하는 과정이 담겨있습니다 Netlify를 deploy preview해서 사용하고 있다. (*deploy preview : github pull request 올릴 때마다 해당 코드를 기준으로 배포해서 미리보기를 할 수 있는 기능) 브랜치 관리에 대해서 셀 내에서 이야기를 하다가 기존에는 "feature/ ~ " 라는 이름을 무조건적으로 붙여서 브랜치를 생성하고 큰 기능일 경우에는 feature에서 새로운 feature를 생성하여 브랜치를 관리하고 있었는데 그 경우에는 feature가 아니라 bridge로 가져가는 게 더 맞을 것 같고 앞으로 그렇게 관리하기로 했다 AS-IS develop

  Read More
• 빌드시 메모리 부족으로 빌드 실패하는 현상 해결

  기록이라도 하자 2023. 10. 7. 19:57

  * 2023년 8월 초에 해결한 이슈를 해결해나가는 과정을 기록 build할 때 번들 파일이 일정 이상 커지면, netlify에서 빌드가 실패하는 오류가 생기기 시작했고 내가 생각했을 때 임계치가 약 24MB 정도 였던 것 같다. (webpack-bundle-analyzer에서 나온 raw 파일 크기 기준) [2281:0x4f9f1c0] 282954 ms: Mark-sweep 2035.6 (2086.5) -> 2033.7 (2088.3) MB, 1709.7 / 0.0 ms (average mu = 0.244, current mu = 0.033) allocation failure scavenge might not succeed [2281:0x4f9f1c0] 285268 ms: Mark-sweep 2037...

  Read More
• 드러커 엑서사이즈

  기록이라도 하자 2023. 10. 2. 16:11

  2022년 5월 14일 프론트엔드 셀 정기 회의에서 다루었던 발표를 기록한 글입니다 발표 자료 1. FE 강지원 책임감, 개발자로서 성장 욕구 유지보수가 쉬운 코드 만들기 결과가 중요. 퀄리티는 그 다음이다. 개인의 기량보다는 상황에 대한 공유나 서로에 대한 피드백. 주어진 일 말고 찾아서 할 수 있는 일. 2. FE 박기제 문서화. 커뮤니케이션. 중요도 파악 손이 부족한 부분을 개발한다, 레거시 코드 리펙토링/문서화 고객이 필요로 하는 기능을 좋은 UX로 제공. 확장가능하고 견고한 구조와 스타일로 개발하는 것 아직 잘 모르겠음. 은혜 → 기제 : (제품을 만들어본 사람으로써) 제품에 대한 피드백하기 3. FE 김은혜 픽셀맞추기, 조율, 남들이 하기 싫어하는 일 알고있는 도메인 지식을 바탕으로 개발에 도..

  Read More
• 장고 다국어 i18n 적용

  기록이라도 하자 2023. 9. 22. 14:04

  * 2019년 9월 19일에 개인 노션에 작성했던 글을 옮긴 것으로 지금 적용한다면 다를 수 있음 장고 i18n 지원 튜토리얼 참고 링크 https://kimdoky.github.io/django/2018/08/30/django-taskbuster-5/ https://docs.djangoproject.com/en/2.2/topics/i18n/translation/ Django The web framework for perfectionists with deadlines. docs.djangoproject.com 적용 방법 다국어를 적용하고 싶은 html 파일에 i18n을 적용을 위한 명시 {% load i18n %} 다국어 적용 문구를 특정 키워드로 감싸기 {% load i18n %}. {% comment..

  Read More
• leaflet-rotate로 leaflet 지도의 각도를 변경해보자.

  기록이라도 하자 2023. 8. 14. 13:44

  leaflet에서 지도의 각도를 변경할 수 있는 자체 속성은 없다. 그럼에도 불구하고 지도의 각도를 변경하게 해달라는 요청이 고객들로부터 지속적으로 들어왔다. 현장에서 작업을 할 때 작업자들이 현장을 바라보는 특정한 각도가 있는데, 서비스에서 제공하는 지도에서는 각도가 항상 고정되어 있었기 때문에 불편했던 것이다. 더군다나 도면에 써있는 숫자나 글씨까지도 원래 사용하는 각도로 만들어져 있기 때문에 도면이 뒤집어진 채로 사용해야 했다. 면적이 극도로 큰 현장에서 더 크게 불편함을 느꼈고, 기술 지원 팀에게 매일 전화 요청이 들어오면서 본격적으로 작업에 착수했다. leaflet-rotate를 사용하여 지도의 각도를 변경했고, 이 라이브러리는 데모는 잘 만들어진 것에 반해 사용 설명서(API 문서)가 없어서 ..

  Read More