코딩하는 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

1. useRef 설명 useRef는 React의 hook 중 하나로, 컴포넌트 전 생애주기에 걸쳐 지속되는 변경 가능한(ref) 객체를 반환합니다. 이 hook은 DOM 요소에 직접 접근하거나, 렌더링 사이에 지속되어야 하는 값을 유지하는 데 사용됩니다. useRef가 반환하는 객체는 .current 속성을 갖고 있어서 이 속성을 통해 저장된 값을 접근하거나 수정할 수 있습니다. 2. useRef를 사용한 formSubmitRef 선언 및 전달 방법 아래의 예시는, 만일 모달에서 form이 포함되어 있는 컴포넌트를 포함하고 있는 경우, form submit이 모달 내의 폼에서 이루어지지 않고, onConfirm() 함수를 호출하는 시점에서 form submit을 하려고 할 때 어떻게 하지?? 할 때, ..

카테고리 없음 2023. 11. 7. 12:01

React 컴포넌트를 TypeScript로 작성할 때, 컴포넌트의 props에 대한 타입을 정의할 수 있습니다. 만약 props가 필요 없는 간단한 컴포넌트라면, 다음과 같이 작성할 수 있습니다: import React from 'react'; const Example: React.FC = () => { return ( {/* 컴포넌트 내용 */} ); }; export default Example;여기서 React.FC는 React.FunctionComponent의 줄임말로, 이 타입은 함수 컴포넌트가 반환할 수 있는 값(일반적으로 JSX 또는 null)과 이 컴포넌트가 받을 수 있는 props의 타입을 정의합니다. 만약 이 컴포넌트가 특정 props를 받아야 한다면, 이를 명시적으로 정..

Coding Story/react 2023. 10. 22. 14:20

코딩 가이드, 코드 컨벤션을 정해놓고 프로젝트를 시작하는 것은 필수이다. 파일 이름의 규칙은? 디렉토리명은?, 함수명은? 확장자명은? 프로젝트 내에서 일관성 있는 코드 작성은 매우 중요하다. 아직 이런 고민을 충분히 해 보지 않았다면, 이 코딩 가이드가 프로젝트를 시작할 때, 도움을 줄 것이다. 아래의 몇 가지 규칙을 권고하며, 해당 규칙에 따른 코딩 가이드를 제시합니다. * 해당 코딩 가이는 변경 및 확장이 가능하다. 컴포넌트 파일명: React 컴포넌트는 대문자로 시작하는 PascalCase를 사용하여 명명합니다. 이는 컴포넌트의 인스턴스화 가능한 클래스/함수의 특성을 반영. 예: Header.tsx, Sidebar.tsx, ProfilePicture.tsx 서비스나 유틸리티 함수 파일명: 비 컴포넌..

Coding Story/react 2023. 10. 21. 21:54

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