본문 바로가기

Frontend/JavaScript60

CommonJS 모듈 내보내기/불러오기 CommonJS 많은 프로젝트에서 ES6 모듈 시스템을 더 널리 사용하고 있는 추세이다. 하지만 import 키워드를 사용할 수 없는 상황(babel과 같은 ES6 코드 변환 도구를 사용할 수 없을 때)에서는 require 키워드를 사용해야하기 때문에 사용 방법을 알고 있으면 좋다. require - 불러오기 const moment = require("moment"); CommonJS에서는 다른 파일의 코드를 불러올 때 require 키워드를 사용하여 다른 변수를 할당하듯이 모듈을 불러온다. exports/module.exports - 내보내기 CommonJS 방식으로 모듈을 내보낼 때는 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 한다. 특히 exports와 module.exports 변수.. 2021. 10. 11.
[Javascript] 모듈이란? 1. 모듈의 일반적 의미 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 의미한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이러한 모듈은 자신만의 파일 스코프를 가져 캡슐화 되어있기 때문에 재사용하기 위해서 export와 import를 사용한다. export(공개)를 하면 다른 모듈에서 사용가능하고 공개된 모듈은 import를 통해 재사용할 수 있다. 즉... 모듈이란 개념이 도입되어 각 기능별로 파일을 따로 만들어서 이것들을 내가 원하는대로 재사용하기 편해졌다는 것... 2. 자바스크립트와 모듈 자바스크립트는 기본적으로 파일 스코프와 import, export를 지원하지 않았다. script 태그를 이용해 외부 js 파일을 로드할 수는 있지만 .. 2021. 10. 10.
[Javascript] 특수 문자 입력(이스케이프 시퀀스) 자바스크립트에서 문자열 도중에는 개행을 할 수 없다. 그래서 문자열에 특수 문자를 입력해서 이러한 개행을 할 수 있는데... alert("안녕하세요 잘 지내세요?"); 위의 코드는 '안녕하세요' 뒤에 enter를 적용했지만 실제 출력은 enter처리 없이 출력된다. alert("안녕하세요\n잘 지내세요?"); 위와 같이 개행은 \n 이라는 특수문자를 이용해 표현할 수 있다. 이와 같이 키보드에서 입력 불가능한 문자를 다른 문자와의 조합으로 표현하는 것을 이스케이프 시퀀스라고 한다. 이스케이프 시퀀스 의미 \b 백 스페이스 \t 수평 탭 \v 수직 탭 \n 개행 \r 복귀 \f 폼 피드 \' 싱글 쿼테이션 \" 더블 쿼테이션 \\ \문자 \0 NULL 문자 \xXX 2글자 XX(16진수)가 표시된 Lati.. 2021. 9. 29.
[Javascript] 문자열 줄바꿈하는 2가지 방법 백준 2번째 문제를 푸는데... 자바스크립트로 줄바꿈을 하는 것 조차 잘 모르겠더라... 그래서 정리 고고! 1 escape 문자 사용하기 문자열에 New line을 뜻하는 '\n' 이스케이프 문자를 넣어주면 줄바꿈 된다. 하지만 문자열 안에 escape 문자인 '\n'을 사용하면, 가독성이 떨어진다는 단점이 있따. See the Pen by seyoungjoy (@seyoungjoy) on CodePen. ※Element.innerHTML 요소(element)내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정한다. 2 템플릿 리터럴(Template literals) 문자 사용하기 문자열을 정의할 때 따옴표(', ")를 사용하는 대신 백틱(`)을 사용하면, escape 문자를 사용하지 않아도, 입.. 2021. 9. 28.
[Javascript] 정규 표현식<미완성> 정규 표현식(정규식)이란? 특정 패턴의 문자열을 찾기 위한 표현 방식. 정규식을 이용하면, 특정 패턴에 매칭되는 문자열을 쉽게 찾ㅇ르 수 있따. 정규 표현식 활용 예시 "대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222로 call me~!" /대/ : '대'를 하나만 찾는다. => 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~! /대/g : '대'를 모두 찾는다. => 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~! *g(global) 플래그 /대나무 빨대/ : '대나무 빨대'를 찾는다. => 대나무 빨대 a급 제품은 10개 남아있습니다. 010-1111-2222 로 Call Me~! /[대a0.. 2021. 8. 18.
[javascript] 문법 정리 - 데이터 제어하기 01 if문 { //true, false, 1, "1", "", 0, null, undefined, [], {} if(true){ document.write("조건문이 실행되었습니다.(true)"); } else { document.write("조건문이 실행되었습니다.(false)"); } } 02 if문 생략 { let num = 100; if(num == 100 ) document.write("true"); else document.write("false"); } 03 다중 if { let num = 100; if(num == 90){ document.write("조건문이 실행되었습니다.(num == 90)"); } else if (num == 100){ document.write("조건문이 실행되었.. 2021. 8. 12.
반응형

티스토리툴바