분류 전체보기 135

[JS] WebMidi.js로 Ableton Live와 연동하기

최근에 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. 에이블톤 라이브에서 미디 신호를 내보내기 위해선 악기가 연결되지 않은 미디 트랙이여야 함..

TIP/JS 2024.06.12

[JS] 포토샵 최상위 레이어명으로 png 저장

템플릿등에 적용할때 좋음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..

TIP/JS 2024.05.23

[JS] 포토샵 파일명 텍스트 추가

열린 파일에 파일명을 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..

TIP/JS 2024.05.23

Uperfect Delta Lite 폴더블 모니터 사용기

알리 행사를 기회삼아 전부터 노리고 있던 Uperfect Delta Lite 모니터를 구매했습니다. 15.6인치 FHD(1920 x 1080)의 모니터가 상하에 달린 폴더블 구조의 포터블 모니터입니다. 가격은 행사가 33.6만원 정도 + 관세 3.5만 정도해서 총 37만 정도 들었습니다. 만듬새가 나쁘지도 좋지도 않은 수준입니다. 대체로 괜찮아보였는데 힌지가 기본 상태에서 끝까지 안 닫히네요. 폈을때는 문제 없습니다. 좌측엔 usb-c 타입 2개와 미니 hdmi 단자가 있습니다. 상단 usb-c는 전원 전용이고, 미니 hdmi를 통해 연결할때 별도 전원 공급용으로 사용하시면 됩니다. 사용하시는 기기와 usb-c 케이블 하나로 연결하려면 중간에 있는 단자에 연결해야 합니다. 우측엔 이어폰 단자와 메뉴에 진..

etc/기기 2024.04.01

신입생 JavaScript 기초 교육자료 01

교내 개발 동아리 신입생 교육 자료 신입생 기존 수준 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 공식문서] 28. Absolute Imports and Module Path Aliases

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 공식문서] 27. Environment Variables

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은 ..

728x90