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

모듈 모듈의 일반적 의미 개별적 요소로서 재사용 가능한 코드 조각 자바스크립트와 모듈 레거시 분석을 위해서가 아니면 amd는 모르고 넘어가도 됨. ES6 모듈(ESM) 모듈 스코프 독자적인 모듈 스코프를 가지고 있음. export 외부에 공개 // 변수, 함수 클래스를 하나의 객체로 구성하여 공개 export { pi, square, Person }; export default object; //기본 import import { pi, square, Person } from './lib.mjs'; import * as lib from './lib.mjs'; // 앨리어싱 import object from './lib.mjs'; //export default가 있는 경우 책에서는 하나의 값만 export ..

에러처리 에러처리의 필요성 예외상황 대응 try catch finally try { // 실행할 코드(에러가 발생할 가능성이 있는 코드) } catch (err) { // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행된다. // err에는 try 코드 블록에서 발생한 Error 객체가 전달된다. } finally { // 에러 발생과 상관없이 반드시 한 번 실행된다. } Error 객체 생성자 함수 인스턴스 Error 일반적 에러 객체 SyntaxError 자바스크립트 문법에 맞지 않는 문을 해석할 때 발생하는 에러 객체 ReferenceError 참조할 수 없는 식별자를 참조했을 때 발생하는 에러 객체 TypeError 피연산자 또는 인수의 데이터 타입이 유효하지 않을 때 발생하는 ..

제네레이터와 async/await 제네레이터란? 코드 블록을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 함수 호출자에게 제어권 양도 가능 함수 호출자와 상태를 주고 받을 수 있음 제네레이터 함수의 정의 function*로 선언하고 하나 이상의 yield 표현식을 포함한다. 화살표 함수나 생성자 함수로 정의할 수 없음. 제네레이터 객체 제네레이터 함수가 반환한 객체는 이터러블이면서 이터레이터이다. next 메서드를 갖는 이터레이터이지만 return, throw 메서드를 갖는다. 제네레이터의 일시중지와 재개 yield 키워드는 일시중지 시키거나 키워드 뒤에 오는 표현식의 평가 결과를 반환한다. 이터레이터의 next와 달리 인수 전달 가능 function* genFunc() { // 처음 ne..

프로미스 비동기 처리를 위한 콜백 패턴의 단점 비동기 함수는 처리 결과를 외부에 반환할 수 없어, 콜백을 사용해야 하는데 콜백이 수없이 중첩되는 경우가 생김. 이를 콜백 지옥이라 함. 에러 처리 부분에서 try catch 문 내의 비동기 함수의 에러를 캐치하지 못하는 문제가 있음. -> 단일 콜백일 경우 비동기 함수 내부에서 에러 처리 하면 됨. 그러나 여러개의 콜백함수를 묶어 에러처리를 할 수 없음. 프로미스의 생성 // GET 요청을 위한 비동기 함수 const promiseGet = url => { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr..

REST API REST API의 구성 구성 요소 내용 표현 방법 자원resource 자원 URI(엔드포인트) 행위verb 자원에 대한 행위 HTTP 요청 메서드 표현representations 자원에 대한 행위의 구체적 내용 페이로드 REST API 설계 원칙 URI는 리소스를 표현해야함. 행위는 메서드로 표현 JSON Server 실습파일 2개로 대체 postman의 mock 기능이나 MSW 사용 추천 https://devvkkid.tistory.com/219 https://blog.mathpresso.com/msw로-api-모킹하기-2d8a803c3d5c

Ajax 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 처리 JSON 텍스트 데이터 포맷. 객체 리터럴과 유사함.(큰 따옴표 강제. 키도 큰따옴표로 묶어야함.) JSON.stringify 객체(또는 배열)를 JSON 포맷의 문자열로 변환. 직렬화라함(serializing). 리시버를 이용하여 데이터 변환 가능 JSON.parse JSON 포맷의 문자열을 객체로 반환. 리시버를 이용하여 데이터 변환 가능 JSON.parse('{"p": 5}', (key, value) => typeof value === 'number' ? value * 2 // 숫자라면 2배 : value // 나머진 그대로 ); XMLHttpRequest 이제는 안 쓸꺼라 넘어감.

비동기 프로그래밍 동기 처리와 비동기 처리 자바스크립트 엔진은 싱글 스레드이기 때문에 처리에 시간이 걸리는 태스크가 있으면 블로킹이 발생함. setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 작동함. 이벤트 루프와 태스크 큐 js의 동시성을 지원하는게 이벤트 루프. 콜스택과 힙으로 구성됨. 콜스택 소스코드(전역 코드나 함수 코드 등) 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택이 바로 콜 스택이다. 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트(실행 중인 실행 컨텍스트)가 종료되어 콜 스택에..

타이머 타이머 함수 setTimeout, clearTimeout setInterval, clearInterval 디바운스와 스로틀 디바운스 const $input = document.querySelector('input'); const $msg = document.querySelector('.msg'); const debounce = (callback, delay) => { let timerId; // debounce 함수는 timerId를 기억하는 클로저를 반환한다. return (...args) => { // delay가 경과하기 이전에 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정한다. // 따라서 delay보다 짧은 간격으로 이벤트가 발생하면 callback은 호출되지 않는다. ..