프로젝트를 빌드하려니 다음과 같은 에러가 발생했다. error Parsing error: Decorators must be placed *after* the 'export' keyword. Remove the 'decoratorsBeforeExport: false' option to use the '@decorator export class {}' syntax. 대충 에러 문구를 해석해보면 다음과 같은데.. 1) export 키워드 뒤에는 반드시 Decorators이 있어야 한다. 2) decoratorsBeforeExport: false 옵션을 지워야 한다. 인데 우선 나는 decoratorsBeforeExport: false 옵션을 따로 설정해주지 않았기에 이건 넘어갔다. 그래서 (1)에서 말한 것 ..

오늘 테스트로 Vue componenet를 만드는데 (eslint나 prettier, typescript 등 테스트 하기 위해 새로 만든 프로젝트) 아래와 같은 에러가 발생했다. error Parsing error: Unexpected token, expected "}" 에러 발생 eslint를 설정한 프로젝트이다 보니, 뜨는 에러인 거 같다. 원인은 eslint가 ES6~ES7을 파싱할 때, 생기는 문제가 있다고 한다.. 그래서 바벨 패키지를 설치하면 된다고 해서 설치해봄.. babel-eslint 패키지 설치 명령어 npm install babel-eslint --save-dev or yarn add babel-eslint --dev 이렇게 설치하니까. 에러가 사라졌다. 괜히 eslint 초기화 해서..

디자인 업체가 이번에 단순 목록 퍼블을 줬는데 아래와 같은 구조로 줬다. 근데 이 코드로 목록을 표출하면 스크롤을 내릴 때, 헤더까지 같이 내려간다. 감리요청 사항이 헤더는 고정되게 해달라는 요청사항이 있었는데.. 일반 태그면 문제가 없었겠지만, 나 태그에는 제이쿼리로 각각 스크롤을 줄 수 없다고 해서 와 를 태그로 감싸서 필요한 부분에 스크롤바를 주었다. 코드는 아래와 같다. 수정전 코드 $(".table_wrapper").mCustomScrollbar({ theme: "minimal-dark", }); 헤더1 헤더2 헤더3 바디1 바디2 바디3 수정후 코드 $(".body_wrapper").mCustomScrollbar({ theme: "minimal-dark", }); 헤더1 헤더2 헤더3 바디1 ..

가끔 콜백함수가 뭔지 헷갈려 하는 사람이 많기도 하고, 나도 개발을 할때는 자주 쓰는데 설명하라고 하면 헷갈릴 때가 있어 정리해본다. 콜백(Callback) 함수란? 콜백 함수는 다른 함수에 인수로 전달된 다음 외부 함수 내에서 호출되어 일종의 루틴이나 작업을 완료하는 함수입니다. -MDN- 위는 MDN에서 설명하고 있는 콜백함수인데, 저 빨갛게 표시한 게 콜백함수의 전부이다. 요약하자면 정의 : 콜백함수란 함수에 파라메터로서 함수가 들어가는 것을 의미한다. 용도 : 콜백함수는 함수내에서 일종의 루틴이나 작업을 위해 사용된다. 이렇게만 보면 잘 이해가 되지 않지만, 알게 모르게 쓴 적이 많을 것이다. 샘플코드랑 실제 어떤 경우에 자주 쓰이는지 코드로 확인해보자. 콜백(Callback) 함수 샘플코드 샘플..

Promise.all 이란? 여러 개의 프라미스를 동시(병렬)에 실행시키고 모든 프라미스가 준비될 때까지 기다린다고 해봅시다. 복수의 URL에 동시에 요청을 보내고, 다운로드가 모두 완료된 후에 콘텐츠를 처리할 때 이런 상황이 발생합니다. Promise.all은 이럴 때 사용할 수 있습니다. -javascript.info/promise-api- 쉽게 말해 여러개의 프라미스를 수행하고 모든 프라미스가 수행될 때까지 기다린 후에 다음 프로세스를 진행시킨다고 보면 된다. Promise.all 사용방법 기본문법 let promise = Promise.all([...promises...]); 샘플 Promise.all([ new Promise(resolve => setTimeout(() => resolve(1),..

전역함수인 structuredClone를 통하여 구조화된 복제 알고리즘을 통해 깊은 복제본을 생성한다. 기존에는 javascript 값에서 깊은 복사본을 만들기 위해 여러 방법과 라이브러리를 사용했었다. 하지만 이제는 structuredClone라는 웹API를 기본적으로 제공해주면서 그럴 필요없이 간단하게 깊은 복사를 할 수 있게 되었다. structuredClone 사용방법 기본문법 [복사한 값을 넣을 변수] = structuredClone([값을 복사할 변수]); 샘플코드 obj = { name : '봄봄', age : 18, soul_food : 'chicken' }; // 👉️ {name: '봄봄', age: 18, soul_food: 'chicken'} newObj = structuredClon..