기타
-
[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..
-
[GitLab] GitLab Runner를 이용한 자동 통합 배포 시스템 구축기타/Git 2024. 10. 17. 14:11
들어가기 전,프로젝트의 기능 개발이 일단락 된 후,테스트, 프로젝트 문서화, 코드 수정, 배포를 반복하면서 자동 통합 배포 시스템이 절실히 필요해졌고...공부해서 적용해보기로 했다. 여러가지 통합 배포 툴이 있는데, 그 중에서도 나는 GitLab에서 제공하는 GitLab Runner를 사용하여 자동 통합 배포 시스템을 구축해보았다. (회사에서는 설치형 GitLab을 사용하고 있었고, 플러그인을 사용할 만큼 복잡한 배포 프로세스가 필요하지 않았기 때문에...) 본 글은 React로 만든 프로젝트를 Build하여 nginx 기동 경로에 배포하는 과정을 기준으로 작성되었습니다.빌드 및 배포 서버 OS 환경 : CentOS Stream release 8React 버전 : 18.2.0 동작 프로세스의 이해우선..
-
[VSCode] ESLint codeActionsOnSave 가 정상적으로 동작하지 않음기타 2024. 2. 2. 15:31
vscode를 새로 깔고, eslint를 설정해주는데기존에는 prettier와 eslint 익스텐션 설치 후 아래와 같이 설정하면 정상적으로 동작했다.{ "editor.codeActionsOnSave": {"source.fixAll.eslint": true}, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode"} 위와 같이하면 prettier는 정상작동했다. 하지만 ESLint로 설정한 내용은 정상적으로 동작하지 않았는데,vscode가 업데이트 되면서 source.fixAll 이 부분에 변경사항이 있어서 true가 deprecated되었다는 것을 알게 되었고, git issue에서 아래와 같이 작성하니 ..
-
[AWS] IAM으로 사용자별 access key발급하기기타/AWS 2023. 10. 13. 14:14
개요 AWS CLI 로 다중 credential 을 사용하기 위해서는 access key와 secret access key를 발급 받아서 사용하기 위해 시도했다. 사용자별 Access Key 및 Secret Access Key 발급하는 방법 1. 관리자 계정으로 접속하여 IAM > Users 접속 2. access key(액세스 키) 발급을 할 User name 을 클릭해서 해당 유저 정보창 접속 유저 정보창의 Security credentials 탭을 선택후 스크롤하여 내리면 Access keys 를 발급받을 수 있는 버튼이 있다. (최대 2개 까지 생성가능) 3. 사용할 용도를 선택하고, 사용 동의를 체크 후 계속 진행 4. description tag - optional 선택사항 입력 후 계속 진행..
-
[AWS/CodeCommit] 프로젝트별(AWS계정별) 자격증명 설정하기기타/Git 2023. 10. 13. 13:50
개요 최근 회사에서 다른 팀과 프로젝트 협업을 하게 되어 해당 팀 AWS CodeCommit의 레포지토리를 연결해야할 일이 생겼다. 하지만 나는 이미 우리 팀 AWS CodeCommit을 세팅해놓은 상태였다. 그래도 혹시 모르니!!! git clone을 시도해보았고 역시나 될리가 없었다...ㅎ 에러 발생 403에러가 아닌 not found 일 경우 해당 레포지토리가 없을 수 있지만 레포지토리 주소가 틀리지 않았다면 자격 증명 계정이 다른 경우에도 발생하는 에러이다. fatal: repository 'https://git-codecommit.' not found ➔ 레포지토리가 없음 / git global로 설정된 자격증명 계정에 해당 레포지토리가 없음 fatal: unable to access ‘http..
-
[github] macOS에서 ssh 연결하기기타/Git 2023. 4. 10. 09:40
mac에 ssh-keygen으로 키를 생성하고, $ ssh-keygen -t rsa -C "github account email(example@gihub.com)" 파일 이름을 따로 설정하지 않았다면 아래와 같은 이름으로 파일명이 만들어 졌을 것이고, cat 명령어를 통해 key를 출력하여 복사함 $ cat /Users/(username)/.ssh/id_rsa.pub 이 때, 전체 내용을 복사해야함! ssh-rsa라는 텍스트부터 이메일까지 복사를 했으면 계정의 settings > ssh and gpg keys에 들어가 키를 추가해주면 아래와 같이 추가 되는 것을 볼 수 있다.