[Hanaro] 15일차 / JavaScript (문자열과 정규 표현식, Module)

JavaScript - 문자열과 정규 표현식

• padStart, padEnd
• startsWith, endsWith
• indexOf, includes, search
• substr, substring, slice
• toUpperCase, toLowerCase
• trim, trimStart, trimEnd
• Template Literal
  • ex)

  const holiday = '한글날';
  const month = 10, day = 9;
  
  `${holiday}은 ${month}월 ${day}일입니다.`  // 한글날은 10월 9일입니다.
  
  function f(txts, a, b, c) {
      console.log('txts>>', txts);
      console.log('a>>', a);
      console.log('b>>', b);
      console.log('c>>', c);
  }
  
  f`${holiday}은 ${month}월 ${day}일입니다.`;
  // 위 코드 출력
  txts>> [ '', '은 ', '월 ', '일입니다.' ]
  a>> 한글날
  b>> 10
  c>> 9
  

• str.charCodeAt(idx) vs String.fromCharCode (unicode)
• pattern, flag, common character
• Regular Expression
  • 문자열의 패턴을 기술하는 방법으로 찾기, 추출, 바꾸기 등을 할 수 있다.
  • 정규 표현식의 두 가지 방법
    • const regexp1 = /[A-Z]/;
    • const regexp2 = new RegExp(/[A-Z]/, 'g');
  • 문자열 검색
    • 문자열변수.match(/찾을문자/); ⇒ 해당 문자의 인덱스 위치 출력
    • .match(/찾을문자/g); ⇒ [’문자’, ‘문자’] 이런식으로 문자가 여러 개인 경우에 해당 개수만큼 문자 배열 출력
    • .match(/.../g); ⇒ 3글자씩 나뉘어서 배열로 출력, 뛰어쓰기도 개수에 포함! 3글자로 나뉜 후 나머지들은 제외되고 출력 된다.
    • .match(/\S{3}/g); ⇒ 문자만 3개씩 나뉘어서 배열로 출력
• replace, replaceAll
  • replace
    • 문자열의 해당 문자 찾아서 새로운 문자로 바꾸기
    • 해당 문자가 여러 개여도 제일 처음나오는 문자만 바뀌고 출력된다.
    • ‘문자열’.replace(’현재바꿀문자’, ‘이후바뀌어질문자’);
  • replaceAll
    • 문자열의 해당 문자를 모두 찾아서 새로운 문자로 바꾸기
    • 찾을 문자에 해당하는 모든 문자들을 바꾼다.
    • ‘문자열’.replaceAll(’현재바꿀문자’, ‘이후바뀌어질문자’);
  • 두 함수 모두 정규식 사용 가능

 

JavaScript - 모듈(Module)

• 모듈(Module)
  • 소스 코드를 작으면서 유지보수 하기 편하고 재사용성과 개발 효율성 극대화하는 조각으로 나누는 것
• Module System의 종류
  • CommonJS, AMD, UMD, ESM, CJS, AMD, RequireJS
    • ESM이 현재 표준
    • NodeJS에서는 CJS가 default
    • NodeJS에서 ESM 사용 방법
      1. package.json에 “type”: “module”, 추가
      2. 모든 file 확장자를 mjs로
      3. inline node 실행 시
         1. $> node --input-type=module --eval "import { sep } from 'path'; console.log(sep);"
         2. $> echo "import { sep } from 'path'; console.log(sep);" | node --input-type=module
      4. v13 이전 --experimental-modules 옵션 추가
         1. --experimental-specifier-resolution=node) ← 이름 생략
      5. npm i esm ⇒ $> node -r esm mod.js
• Module 소개
  • Module의 의미
    • 재사용 가능한 파일 단위의 코드 조각으로 나누는 것
    • 자신만의 module scope를 갖으며 애플리케이션과 독립적으로 자체 컴파일 단위
    • 코드의 변수, 상수, 함수, 클래스 등을 선택적으로 공개(export)
    • 이름 충돌과 종속성 문제 해결 및 자동 strict mode
    • read-only로 로드되며 동일 영역 중복 import 가능
    • 형식(브라우저): <script type="module" src="./mod.js"></script>
  • import & export
    • 특정 모듈에서 export한 것을 import
    • module을 찾을 위치를 문자열로 지정하는 모듈 지정자(module specifier) 사용
    • 중복 import 하더라고 영역(실행컨텍스트 단위) 당 한번만 로드
    • 여러 다른 모듈에서 import 하더라도 동일한 복사본 로드
    • import, export 선언은 최상위 스코프에서만 가능
    • 표현식이 아니라 선언이므로 hoisting
• export
  • CJS (default)
    • module.exports = function() {…}
  • ESM
    • export function fn() {…}
    • export const PI = Math.PI;
    • export class User {…}
    • export default function(i) {…}
    • export {fn, PI, version as ver};
    • export {User};
• import in file
  • const mod = require(’./mod.js’);
  • import {PI, fn, ver, User} from ‘./mod.js’;
  • import * as mod from ‘./mod.js’;
  • import ‘./mod.js’;
• 간접 export (indirect export & aggregating)
  • export {xxx} from ‘.mod1.js’;
    • mod1에서 xxx를 import 동시에 export
  • export * from ‘./mod1.js’;