Per ardua ad astra.

ESModules 방식과 Namespaces 방식들어가며ESModules 방식과 Namespaces 방식의 차이에 대해 간단하게 정리해본다. 방식① ESModules 방식개념JavaScript 표준 모듈 시스템파일 단위로 모듈을 분리한다.각 파일이 하나의 모듈이고, 필요한 것만 @import@/@export@로 가져온다.Next.js, React, TypeScript, Vite, Node.js 최신 환경은 전부 이 방식을 기본으로 사용한다.utils/ math.tscomponents/ Button.tsxapp/ page.tsx 사용 예//// ☑️ [1] export//// utils/math.tsexport function add(a: number, b: number) { return a + b..

모듈 방식 사용하기들어가며타입스크립트(TypeScript)에서 모듈 방식을 사용하는 방법을 정리해본다. 방법타입스크립트 파일(@.ts@/@.tsx@)은 기본적으로 모듈(Module)로 간주되지 않고, 전역 범위의 스크립트로 처리된다.여러 파일에서 동일한 변수명을 생성할 경우, 오류가 발생한다.fileA.tslet name = 'stickman';const susan = 'susan'; fileB.tsconst susan = 'susan'; // 오류 발생 이때, 다음과 같이 2가지 방법으로 타입스크립트 파일을 모듈로 변환할 수 있다. 방법 ① : @import@, @export@ 문 사용하기타입스크립트 파일에 @import@ 또는 @export@ 문을 추가하여 ES6 모듈로 취급되게 하는 방법이다. ..

index.js로 컴포넌트(Component), 페이지(Page) 관리하기들어가며다음과 같이 @src@ 폴더 내부에 있는 @components@, @pages@ 폴더 안에 @index.js@ 파일을 생성하여 여러 컴포넌트와 페이지들을 하나의 파일에서 관리할 수 있다.이와 관련된 내용을 정리해본다. index.js개념리액트(React.js) 프로젝트에서 @pages@나 @components@ 폴더 안에 위치한 @index.js@ 파일은 해당 폴더 내의 여러 컴포넌트들을 한 곳에서 쉽게 불러올 수 있도록 다시 @export@ 해주는 역할을 한다.@index.js@ 파일 안의 내용은 다음과 같이 구성할 수 있다. 사용 방법@pages@ 또는 @components@ 폴더에 @index.js@ 파일을 생성한 후,..

모듈 시스템 (import/export) 들어가며 ES6에서 도입된 모듈 시스템(Module System)에 대해서 알아보자. 모듈 시스템 개념 ES6에서 도입된 모듈 시스템은 자바스크립트 코드를 여러 파일로 나누고 재사용 가능한 모듈로 구성하는 기능을 제공한다. 이 기능은 @import@와 @export@ 키워드를 사용하여 모듈을 가져오고 내보내는 것으로 이루어진다. 내보내기(Export) 모듈에서 특정한 기능, 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보내려면 @export@ 키워드를 사용한다. ① Named Export 내보내려는 대상에 이름을 붙여서 내보내는 방법이다. // 변수, 함수, 클래스 등을 내보내기 export const myVariable = 10; export f..