전체 글
-
[ESLint] import/order로 import 순서 정렬하기 (Vite + Typescript)기타 2025. 3. 20. 10:06
eslint에서 import/order 를 적용하기 위해서는 아래 라이브러리 설치가 필요하다.$ npm install eslint-plugin-import --save-dev$ npm install eslint-import-resolver-typescript --save-dev vite 로 react프로젝트를 설치하면 (2025년 3월 `vite: 5.4.10`, `@vitejs/plugin-react: 4.3.3` 버전)tsconfig.app.json, tsconfig.json, tsconfig.node.json 총 세개의 tsconfig 파일이 만들어 지는데, 이 때, tsconfig.json에서 references로 tsconfig.app.json과 tsconfig.node.json을 가지고,in..
-
[Grafana] Panel Plugin 만들기기타/플러그인 2025. 3. 12. 16:06
회사에서 고객사에 제품 판매시, Grafana로 대시보드를 만들어서 배포할 일이 생겼다.그래서 Grafana에서 기본으로 제공되는 차트(Panel)를 수정하거나, 추가로 생성하는 것이 가능한지(React로)에 대한 문의가 들어와 해당 내용을 검토하고, 검증한 내용이다. 우선 GPT에게 대시보드를 커스텀하는 방식이 있냐고 물어봤고, 아래와 같은 방식을 추천 받았다. 각각 장단점도 설명해줬는데, 우리 상황에서는 Grafana Plugin 개발이 적합하다는 판단을 하게 되었다.하지만, GPT를 무조건 믿을 수 없고, 어떻게 개발 > 배포 > 사용되는지 검증하게 되었다. 1. 개발 환경 세팅 처음 Plugin을 만드는 설명에 대한 영상과 명령어 들을 살펴보고, 개발 환경 세팅을 시작했다.https://grafa..
-
[GitLab] CI/CD와 Microsoft Teams 알림 연동 (feat.WebHooks)기타/Git 2024. 10. 18. 13:20
GitLab으로 자동통합배포 설정을 하면서 배포 진행 상황에 따라 알림을 받았으면 했다. 회사에서는 Microsoft Teams를 사내 메신저로 채용하고 있었고, 연동하여 성공/실패 알림을 보내기로 했다. 알림 연동 방법 1. 팀 관리 > 앱 > 더 많은 앱 다운로드 2. incoming Webhook 검색 > 추가 3. 팀에 추가 > 커넥터 설정 4. 커넥터 이름 작성 > Create 5. 생성된 WebHook Url 복사 > Done 6. 복사한 WebHook Url 을 GitLab Setting > CI/CD > Variables > Value에 추가 > 사용할 Key 이름 작성 (예시: TEAMS_WEBHOOK_URL) > Save Varables 7. `.gitlab-ci.ym..
-
[Linux:CentOS] sudo 명령어 권한을 주는 방법OS/Linux 2024. 10. 18. 12:13
아래 명령어로 sudo 권한 부여 설정 파일을 연다 $ sudo visudo 그러면 vi편집기로 /etc/sudoers 파일이 열리는데, 위와 같은 명령어를 통해 파일 편집기를 여는 이유는 기본적으로 /etc/sudoers 파일은 쓰기 권한이 없기 때문이다.그렇기 때문에 다른 편집기로 해당 파일을 편집하기 위해서는'쓰기 권한 주기 → 수정 → 쓰기 권한 빼기' 의 과정을 겪어야 하기 때문이다. '쓰기 권한 주기 → 수정 → 쓰기 권한 빼기' 하는 방법은 더보기 참고더보기더보기# 쓰기 권한 부여$ sudo chmod u+w /etc/sudoers# nano 편집기로 파일 수정$ sudo nano /etc/sudoers# 쓰기 권한 제거$ sudo chmod u-w /etc/sudoers 파일의 아래쪽으로..
-
[GitLab] GitLab Runner를 이용한 자동 통합 배포 시스템 구축기타/Git 2024. 10. 17. 14:11
들어가기 전,프로젝트의 기능 개발이 일단락 된 후,테스트, 프로젝트 문서화, 코드 수정, 배포를 반복하면서 자동 통합 배포 시스템이 절실히 필요해졌고...공부해서 적용해보기로 했다. 여러가지 통합 배포 툴이 있는데, 그 중에서도 나는 GitLab에서 제공하는 GitLab Runner를 사용하여 자동 통합 배포 시스템을 구축해보았다. (회사에서는 설치형 GitLab을 사용하고 있었고, 플러그인을 사용할 만큼 복잡한 배포 프로세스가 필요하지 않았기 때문에...) 본 글은 React로 만든 프로젝트를 Build하여 nginx 기동 경로에 배포하는 과정을 기준으로 작성되었습니다.빌드 및 배포 서버 OS 환경 : CentOS Stream release 8React 버전 : 18.2.0 동작 프로세스의 이해우선..
-
[ORM] Prisma Schema 작성하여 DB 세팅하기 (with. NextJS)프레임워크/NodeJs 2024. 8. 7. 23:42
ORMObject Relational Mapping 객체 관계 매핑은 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다. 객체 관계 매핑 - 위키백과, 우리 모두의 백과사전위키백과, 우리 모두의 백과사전. 객체 관계 매핑(Object-relational mapping; ORM)은 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다. 객체 지향ko.wikipedia.org 해당 글은 개인 프로젝트를 만들면서 공부하고 적용한 내용을 작성한 글입니다. 그러므로 Prisma의 Schema 모든 기능이 작성되어 있지 않습니다. 모든 기능에 대한 내용은 아래 공식문서 링크에서 확인해 주세요.https://www.pri..
-
[React] React 특정 Element영역 내의 마우스 위치 값 구하기프레임워크/React(NextJs) 2024. 8. 7. 10:22
프로젝트 내에서 Custom Context Menu 를 사용할 일이 있었는데,특정 Element에서만 동작해야 했다. 아래 코드는 마우스 이벤트 객체와 Ref Element 객체로 좌표를 구하는 함수이다.export const getAbsoluteAnchorPoint = ( e: React.MouseEvent, ref: React.RefObject,) => { const refRect = ref.current?.getBoundingClientRect(); const wrapperScrollY = ref.current?.scrollTop ?? 0; const rectTop = refRect?.top ?? 0; const wrapperScrollX = ref.current?.scrollLeft ?..