코딩하는 CEO

한 페이지 내에서 다수의 iframe이 존재하고, iframe 내부와 parent간의 메시지 송, 수신을 하는 경우가 있습니다. 아래는 iframeId를 생성하고, 정확하게 자신의 iframe간의 메시지 송, 수신이 가능한 방법입니다. iframeId를 생성하고 전달하는 방법은 여러 가지가 있습니다. 가장 간단한 방법은 각 iframe에 고유 식별자를 미리 할당하는 것입니다. 이 식별자는 iframe의 id 속성이나 데이터 속성(data-*)을 사용하여 설정할 수 있습니다. 그런 다음 iframe 내부 스크립트에서 이 식별자를 읽어 postMessage를 통해 부모 페이지로 전달합니다. iframe에 식별자 할당 부모 페이지에서 각 iframe에 고유한 식별자를 할당합니다. 이는 id 속성 또는 data..

Coding Story/Javascript 2023. 12. 11. 09:42

ECMAScript 6 (ES6)는 정적 모듈 구조를 사용합니다. 즉, import와 export 문은 파일의 최상단에 위치해야 하며 조건문 내에서 사용할 수 없습니다. 하지만, 동적으로 모듈을 로드할 수 있는 방법이 있습니다: import() 함수를 사용하는 것입니다. import() 함수는 프로미스를 반환하며, 모듈이 필요할 때 동적으로 로드할 수 있도록 해줍니다. 이는 코드 분할이나 조건부 모듈 로딩에 유용하게 사용될 수 있습니다. 예를 들어, 선택자에 따라 모듈을 동적으로 로드하려면 다음과 같은 방식으로 구현할 수 있습니다: if (document.querySelector(selector)) { import('/path/to/module.js') .then((Module) => { ..

Coding Story/Javascript 2023. 12. 10. 15:56

외부 강의를 하는 과정에서 많은 개발자들이 CommonJS, ADM, 전역 객체로 선언된 자바스크립 객체의 차이를 모르는 것을 알게됩니다. 간단하게 이 차이를 확인하고, 각 프로젝트 및 서비스 성격에 맞게 어떻게 컴파일을 하고, 사용해야 하는지에 대한 설명입니다. 우리가 ScreenResizer.js 라는 플러그인을 개발하고, 이 플러그인을 다양한 프로젝트 및 서비스에서 사용한다고 가정합니다. 아래는 ScreenResizer.js 파일의 간략화된 샘플 코드입니다. 이 코드는 ScreenResizer 클래스를 정의하고, 실행 환경에 따라 CommonJS, AMD, 또는 전역 객체에 적절히 할당하는 방식으로 구성되어 있습니다. // ScreenResizer 클래스 정의 class ScreenResizer {..

Coding Story/Javascript 2023. 11. 12. 16:26

아래는 EC6 모듈을 정적, 전역 스크립트로 컴파일하는 Gulp 태스크를 위한 가이드 문서의 예시입니다. 이 가이드는 Gulp를 사용하여 EC6 모듈을 컴파일하고, 이를 브라우저에서 전역적으로 사용할 수 있게 하는 방법에 대해 설명합니다. EC6 모듈을 정적, 전역 스크립트로 컴파일하기 위한 Gulp 태스크 가이드 개요 이 가이드는 Gulp를 사용하여 EC6 모듈을 정적, 전역 스크립트로 컴파일하는 방법을 설명합니다. 이 방법을 통해, EC6 모듈이 브라우저에서 전역적으로 사용될 수 있도록 하며, node_modules에서 다른 모듈을 import하여 사용하는 경우에도 적용됩니다. 필요한 Gulp 플러그인 gulp: Gulp 자체 browserify: Browserify, 브라우저에서 Node.js 스타..

Coding Story/Javascript 2023. 11. 10. 18:19

JavaScript 및 TypeScript에서 모듈을 내보내고 가져오는 방식은 내보내기(export) 방식에 따라 달라집니다. 두 가지 주요 방식이 있습니다: 기본 내보내기(default export)와 이름을 지정한 내보내기(named export). 기본 내보내기 (Default Export): 파일 당 하나의 기본 내보내기만 가능합니다. 가져올 때는 임의의 이름을 사용할 수 있습니다. 중괄호 없이 가져옵니다. // 내보내기 (ProtectedRoute.tsx 파일) export default ProtectedRoute; // 가져오기 (다른 파일) import ProtectedRoute from './components/Common/ProtectedRoute'; 이름을 지정한 내보내기 (Named ..

Coding Story/Javascript 2023. 10. 21. 19:20

환경 Gulp에서 ES6 코드를 컴파일하여 build할 때, uglify-js 파일에서 에러가 발생, minify 파일을 생성하지 못하는 경우가 있다. 아래의 방법을 통해서 쉽게 해결할 수 있다. 1. uglify-es 패키지를 설치 npm install gulp-uglify-es --save-dev 2. gulpfile.js 파일을 열어서 다음과 같이 업데이트를 한다. // var uglify = require('gulp-uglify'); var uglify = require('gulp-uglify-es').default; 3. 이제 ES6 코드의 javascript을 컴파일 시, 정상적으로 컴파일 되는 것을 확인할 수 있다.

Coding Story/Javascript 2022. 1. 30. 20:36

Gulp3.9.1 버전에서 ES6(ECMAScript 6) 및 ES2015를 사용하는 방법 때론, Gulp 4.x 버전이 아닌 Gulp 3.9.1 버전에서 ES6 구문의 자바스크립를 컴파일할 경우가 있다. 1. babel-core와 babel-preset-es2015 패키지를 설치합니다. npm install --save-dev babel-core babel-preset-es2015 2. .babelrc 파일을 .gulpfile 파일이 존재하는 디렉토리에 생성을 하고, 다음의 내용을 .babelrc 파일 내에 포함합니다. { "presets": ["es2015"] } 3. 이제 ECMAScript 6 구문을 사용할 수 있으며 gulp를 실행할 때 gulp는 자동으로 babel을 사용하여 컴파일합니다.

Coding Story/Javascript 2022. 1. 30. 20:05