최근에 Ableton Live 수업을 들었는데 마지막이 자작곡 발표였다.기왕이면 발표하는거 음악에 맞춘 비주얼까지 만들고 싶어서 아는게 아는거라고 Webmidi.js를 사용해서 비주얼까지 만들었다. 완성품" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스webmidi.js와 websocket으로 여러개의 기기에서 같은 신호를 받아 동기화되는 영상을 실사로 찍어서 제작함.미리 알아야할 점1. 맥에서는 IAC 가상 장치를 통해 에이블톤 라이브에서 미디 신호를 내보내줘야함 (https://support.apple.com/ko-kr/guide/audio-midi-setup/ams1013/mac)2. 에이블톤 라이브에서 미디 신호를 내보내기 위해선 악기가 연결되지 않은 미디 트랙이여야 함..

템플릿등에 적용할때 좋음const doc = app.activeDocument; // 현재 열린 파일const fileName = decodeURI(doc.artLayers[0].name);// 파일 저장 경로 설정 (현재 문서의 경로를 기준)const savePath = doc.path + "/" + fileName + ".png";// PNG로 저장하기 위한 옵션 설정const pngOpts = new PNGSaveOptions();pngOpts.compression = 9; // 최대 압축률// 파일 객체 생성const saveFile = new File(savePath);// 현재 문서를 PNG 형식으로 저장doc.saveAs(saveFile, pngOpts, true, Extension.LOW..

열린 파일에 파일명을 Text로 넣어주는 JavaScript포토샵에서 JS 사용이 가능한 지 몰랐었는데 새로 배워감. 앞으로는 액션보다 이걸 자주 쓸듯// 액션을 저장하기 위한 변수var doc = app.activeDocument; // 현재 열린 파일// 텍스트 레이어 추가var textLayer = doc.artLayers.add();textLayer.kind = LayerKind.TEXT;// 텍스트 내용 설정var textItem = textLayer.textItem;textItem.contents = decodeURI(doc.name.split('.').slice(0, -1).join('.'));// 위치 설정 (왼쪽에서 10픽셀 아래서 50픽셀 위)textItem.position = [doc..

교내 개발 동아리 신입생 교육 자료 신입생 기존 수준 html, js, css, jquery, php, mysql 환경에서 2년 정도 개발을 하였음 워드프레스를 활용한 사이트 제작 경험이 다수 있음 교육 목표 Typescript, React, Next.js, Fastify, Electron, Flutter 기반으로 풀스택 개발을 할 수 있는 것을 목표로 함. 단계별 목표 JS 딥다이브와 함께 병행 교육하고 있음 1단계 목표 - Next.js 기반에서 퍼블리싱을 할 수 있는 것을 목표로 함 2단계 목표 - Next.js 기반에서 API 서버에서 데이터를 불러와 보여주는 것을 목표로 함 3단계 목표 - Next.js 기반에서 API 서버와 CRUD 동작과 파일 업로드 동작까지 작동하는 것을 목표로 함 4단계..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Absolute Imports and Module Path Aliases 절대경로 import // tsconfig.json { "compilerOptions": { "baseUrl": "." } } import Button from 'components/button'; export default function HomePage() { return ( Hello World ); } 별칭 import // tsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@/components/*": ["components/*"] } } } import Button from &..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Environment Variables env 로드 // .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword요렇게 선언하고 process.env.DB_HOST요렇게 쓰셈 다른 변수 참조 // .env HOSTNAME=localhost PORT=8080 HOST=http://$HOSTNAME:$PORT브라우저에 환경 변수 노출 앞에 NEXT_PUBLIC_ 을 붙여서 선언할 것. 그렇지 않으면 읽지 못할 것 NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk 기본 환경 변수 .env, .env.local .env.development 및 .env.production은 ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 ESLint // package.json에 추가 "scripts": { "lint": "next lint" } 실행 npm run lint3가지 옵션 Strict: 더 엄격하게{ "extends": "next/core-web-vitals" } Base : 기본구성{ "extends": "next" } Cancel: 구성하지 않기 ESLint 구성 기본설정 그대로 쓰셈 ESLint 플러그인 기본설정 그대로 쓰셈 맞춤설정 모노레포와 같은 경우는 아래처럼 위치 찾을 수 있게 // .eslintrc { "extends": "next", "settings": { "next": { "rootDir": "packages/my-app/" } } } 맞춤..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 TypeScript 새 프로젝트 기본이 타입스크립트와 함께 제공됨 기존 프로젝트 js, jsx를 ts, tsx로 변경하고 next dev 랑 next build 실행하면 자동으로 tsconfig.json 생김 타입스크립트 플러그인 자동으로 활성화. 안뜨면 다음과 같이 명령 팔레트 열기( Ctrl/⌘+ Shift+ P) "TypeScript: TypeScript 버전 선택" 검색 "Workspace 버전 사용" 선택 플러그인 기능 세그먼트 구성 옵션 에 잘못된 값이 전달되면 경고가 표시됩니다. 사용 가능한 옵션 및 상황에 맞는 문서를 표시합니다. use client지시문이 올바르게 사용되었는지 확인합니다 . 클라이언트 후크(예: useSta..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Instrumentation 검색해서 나온 내용 로그, 사용데이터 수집분석, 성능 모니터링, 오류추적 등을 함 Sentry, Google Analytics등을 많이 사용함. 문서 설명 실험적 기능 /instrumentation.ts 파일에서 register라는 이름의 함수를 내보내면 새 Next.js 서버 인스턴스가 부트스트랩될 때마다 해당 함수가 호출됩니다. register 함수가 배포되면 각 콜드 부팅 시 호출됩니다(단, 각 환경에서 정확히 한 번만). 때로는 부작용이 발생할 수 있으므로 코드에서 파일을 임포트하는 것이 유용할 수 있습니다. 예를 들어 전역 변수 집합을 정의하는 파일을 가져오되 코드에서 가져온 파일을 명시적으로 사용하지..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 OpenTelemetry 분산 시스템 모니터링 도구 OpenTelemetry는 분산 애플리케이션의 모니터링을 위한 오픈 소스 프로젝트입니다. OpenTelemetry는 클라우드 환경에서 실행되는 여러 서비스와 컴포넌트를 추적하고 측정하기 위한 표준화된 방법을 제공합니다. 이는 개발자들이 애플리케이션의 성능, 트랜잭션 추적, 로깅 등을 추적하고 이해하는 데 도움을 줍니다. OpenTelemetry는 분산 시스템의 복잡성을 관리하기 위해 다양한 언어 및 런타임을 지원하는 범용적인 API와 SDK를 제공합니다. 이를 통해 개발자들은 애플리케이션에서 발생하는 이벤트 및 상황을 추적하고 관찰할 수 있습니다. OpenTelemetry는 애플리케이션의..