| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
- aws
- 선택자
- QUIC
- import.meta.env
- custom command
- vue-cli
- n8n
- devtools
- csr
- api test
- 비동기
- svelte
- Cypress
- e2e
- caching
- n8n 기초
- typeScript
- SSR
- TLS
- CSS
- ViTE
- vue
- msw
- web vital
- http3
- JavaScript
- CloudFlare
- vue3
- Testing
- ts error
- Today
- Total
목록ETC (17)
Develop Note by J.S.
주요 소프트웨어 연동 기초 (Software Integration)n8n은 수백 개의 서비스 노드를 기본 제공하며, 각 노드의 주소(URL)와 인증 정보만 올바르게 입력하면 즉시 연동이 시작됩니다. Jira의 이슈 트래킹, Slack의 알림, Google Sheets의 데이터 관리 등 서로 다른 소프트웨어들이 하나의 생태계처럼 유기적으로 움직이게 설정할 수 있습니다.Slack (슬랙) - 실시간 알림 및 상호작용연결의 핵심 키: Bot User OAuth Token (xoxb-...)사전 준비 (Slack API 사이트):OAuth & Permissions에서 Scopes를 추가합니다. (메시지 전송을 위해 chat:write 권한 필수)Install to Workspace를 눌러 토큰을 생성합니다. n..
기본 필수 노드 마스터하기 (Utility Nodes)유틸리티 노드는 데이터를 가공하고 흐름을 제어하는 n8n의 '공구함'과 같습니다. 데이터를 원하는 형태로 변형(Edit Fields), 조건에 따른 분기(If), 외부 시스템과의 통신(HTTP Request), 혹은 흩어진 데이터의 병합(Aggregate)을 통해 워크플로우의 논리를 완성합니다.Edit Fields : 데이터를 새로 만들거나, 수정하고, 필요한 것만 남기는 '데이터 편집기'$json.body.pull_request.title의 데이터를 pull_request_title 변수에 할당하여 Output HTTP Request : REST API 호출 기능 (GET, POST, PUT, DELETE 등)URL, Method, Authentic..
워크플로우(Workflow)의 이해와 첫 생성n8n의 워크플로우는 특정 사건(Trigger)이 발생했을 때 정해진 순서대로 동작(Action)이 이어지는 '자동화 지도'입니다. 마치 레고 블록을 조립하듯 노드들을 선으로 연결하는 것만으로도 복잡한 업무 프로세스를 하나의 흐름으로 시각화할 수 있습니다.n8n 접속 후 오른쪽 상단 Create workflow 로 워크플로우 화면을 생성합니다. 워크플로우 화면에 진입하면 그림판과 같은 화면에서 각 노드*의 배치 및 노드 간 화살표로 연결을 통해 플로우를 생성할 수 있습니다.* 노드 : 특정 업무 하나를 수행하도록 설계된 자동화의 최소 단위이자 레고 블록 버튼별 설명Save : 그려진 Workflow를 저장Publish : Save된 버전의 워크플로우를 실시간..
N8N이란? N8N을 한마디로 정의하자면,“서로 다른 앱과 서비스를 연결하여 반복적인 업무를 자동으로 처리해 주는 워크플로우 자동화 툴입니다.”예시를 들자면,특정 페이지의 데이터를 Sheet로 정리 후 Slack메세지로 Sheet 업로드 완료 메세지를 받고 싶어Slack의 쓰레드를 읽어 분석 후 Confluence에 정리 또는 Jira Ticket을 생성하고 싶어코드 배포 후 Release Note를 작성하고 Slack에 배포 완료 메세지를 받고 싶어등등…..기존의 사람이 일일이 작업(Work)하던 과정(Flow)을 자동화(Automation)를 대신해주는 기능(Tool)이라고 이해하면 됩니다. 그래서 N8N은 어떻게 사용해?N8N은 제공되는 자체 Cloud서버에서 운용하는 웹 사이트에 접속하여 사용하는..
n8n 기반 CI/CD를 만든 이유n8n으로 CI/CD를 만들었다”는 이야기가 아니라, 왜 기존 방식이 불편했고, 그래서 이 구조를 선택했는지에 대한 기록이다.“PR이 merge되면 자동 배포되는 구조가 정말 안전한가?”GitHub Actions, GitOps, Argo CD를 써도 결국 배포는 기계적인 이벤트 트리거에 의해 일어난다.하지만 실제 운영에서 배포는 항상 이런 질문을 동반한다.이 변경이 위험한가?지금 배포해도 되는가?누가 이 변경을 승인했는가?어떤 파일이 얼마나 바뀌었는가?기존 CI/CD는 이 질문을 거의 다 무시한다.왜 n8n이었나n8n을 선택한 이유는 n8n은 CI 도구가 아니라 워크플로우 엔진이기 때문이다.GitHub Actions는:“이 이벤트가 발생하면 이 스크립트를 실행해라”n8n..
Memory Leak, GC에 이어 GC에서 걸러지지 않은 Memory Leak의 유형 및 식별 방법에 대하여 알아보겠습니다. 1. Memory Leak 유형 1) 선언되지 않은 변수의 참조 또는 참조가 없는 변수를 생성 - 선언되지 않은 변수를 참조한 경우에는 컴파일 과정에서 전역 객체(Root)에서 새 변수를 생성합니다. function foo(){ this.message = 'I am accidental variable'; } foo(); Mark-and-Sheep 알고리즘에서는 Root를 가리키는 변수는 항상 active 상태이기 때문에 GC가 이를 제거할 수 없어 메모리 누수가 발생합니다. - 코딩 시점에 사용되지 않거나 선언없이 참조한 코드를 삭제하거나, 자바스크립트의 use strict Mo..
Window와 Mac OS의 Default 개행문자 차이로 Build 시 linebreak Erorr가 발생됩니다. 아래는 해당 이슈에 대한 두 가지 해결방법입니다. 1. IDE 및 Git Config Setting Ex. Webstorm IDE git config --global core.eol lf // mac LF 기준 git config --global core.autocrlf input // LF를 line ending 으로 사용 -> 이후 Local Repository 삭제 후 다시 git clone 시 오류 해결 2. eslint Option 설정 // .eslintrc.js module.exports = { ... rules : { 'linebreak-style' : 0 } }
1. Memory Leak - 개발자가 의도하지 않은 메모리가 더 이상 사용되지 않음에도 해제되지 않고 지속적으로 메모리를 점유하고 있는 현상을 말하며, 이로 인한 버그발생 및 서비스장애를 발생시킵니다. - 대표적인 메모리 관련 이슈는 3가지 유형으로 나타납니다. 1) 페이지가 시간이 지남에 따라 느려지는 현상 - 주요원인 : Memory Leak 2) 페이지가 처음부터 일관적으로 느리거나, 급작스럽게 느려지는 현상 - 주요원인 : Memory Bloat(메모리 팽창)으로 볼수 있으며 메모리 소비의 급작스런 증가로 발생 3) 페이지가 끊키는 현상 - 주요원인 : GC가 너무 자주 발생되는 경우 2. Memory Lifecycle 메모리 생명주기 : 할당 -> 사용 -> 해제 3. 메모리 구조(V8 Eng..