본문 바로가기

분류 전체보기155

[Javascript] Object 1 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 '모든 것'이 객체다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며 프로퍼티는 키(key)와 값(value)로 구성된다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있고 함수도 프로퍼티값이 될 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부른다. 이처럼 객체는 프로퍼티와 메서드로 구성된 집합체. 프로퍼티 : 객체의 상태를 나타내는 값(data) 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작(behavior) 2 객체 리터럴에 의한 객체 생성 자바스크립트.. 2021. 10. 12.
[Webpack] 생활 코딩 정리웹팩 사용해보기 마음 같아서는... 하나하나 깊게 공부하고 싶었는데 주말이란 시간이 참 빠른 것 같다... 급하게 강의들으면서 간단하게 정리를 해본다...! 웹팩을 사용하게 되면 파일을 하나로 묶어서 웹브라우저 로딩시 컴퓨터 커넥트를 줄여 속도를 빠르게 개선할 수 있고 예전 버전까지 모듈기능이 잘 구현될수록 있도록 자동으로 컴파일해준다. 그래서 ESM(export, import)은 최신 브라우저에서만 작동하는데 이것 또한 예전 브라우저에서도 잘 작동할 수 있도록 컴파일해주기 때문에 바벨 없이 사용 가능! npm init package.json 파일이 생기면서 프로젝트에 대한 여러가지 설명이 들어간다. 엔트리 파일 index.js 파일에 모든 js파일들을 import 해놓음. 그리고 이 파일을 번들링 시킴. npx web.. 2021. 10. 11.
[Javascript] ES6 모듈(ESM) 1. ES6 모듈(ESM) ES6로 넘어오면서 자바스크립트 자체에서 ES6 Module이라는 이름으로 모듈화 지원을 시작했다. ESM의 사용법은 script 태그에 type="module" 어트리뷰트를 추가 파일 확장자는 mjs를 사용.(일반 js 파일이 아닌 ESM임을 명확히 하기위해) 2. 모듈 스코프 ESM은 독자적인 모듈 스코프를 갖는다. 모듈 내에서 선언한 식별자는 모듈 외부에서 참조할 수 없다. ESM이 아닌 일반적인 js 파일은 script 태그로 분리해서 로드해도 독자적인 모듈 스코프를 갖지 않는다. 3. export 키워드 모듈 내부에서 선언한 식별자를 외부에 공개하여 다른 모듈들이 재사용할 수 있게 하려면 export 키워드를 사용한다. 변수 공개 export const pi = Mat.. 2021. 10. 11.
CommonJS 모듈 내보내기/불러오기 CommonJS 많은 프로젝트에서 ES6 모듈 시스템을 더 널리 사용하고 있는 추세이다. 하지만 import 키워드를 사용할 수 없는 상황(babel과 같은 ES6 코드 변환 도구를 사용할 수 없을 때)에서는 require 키워드를 사용해야하기 때문에 사용 방법을 알고 있으면 좋다. require - 불러오기 const moment = require("moment"); CommonJS에서는 다른 파일의 코드를 불러올 때 require 키워드를 사용하여 다른 변수를 할당하듯이 모듈을 불러온다. exports/module.exports - 내보내기 CommonJS 방식으로 모듈을 내보낼 때는 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 한다. 특히 exports와 module.exports 변수.. 2021. 10. 11.
[Webpack]웹팩이란 ? 웹팩(Webpack)이란? 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(html, css, javascript, images 등)을 모두 각각의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구를 의미한다. 번들링이 필요한 이유 번들링 없이 웹사이트를 로딩시키면 매우 많은 파일들이 로딩되며 이렇게 많이 접속할수록 앱은 느려질 수 밖에 없다. 또한 여러 js 파일들 중에서 같은 변수명을 가진 데이터들끼리 충돌이 일어날 수도 있다. 웹팩에서의 모듈/번들링 웹팩에서 지칭하는 모듈이라는 개념은 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 .. 2021. 10. 10.
[Javascript] 모듈이란? 1. 모듈의 일반적 의미 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 의미한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이러한 모듈은 자신만의 파일 스코프를 가져 캡슐화 되어있기 때문에 재사용하기 위해서 export와 import를 사용한다. export(공개)를 하면 다른 모듈에서 사용가능하고 공개된 모듈은 import를 통해 재사용할 수 있다. 즉... 모듈이란 개념이 도입되어 각 기능별로 파일을 따로 만들어서 이것들을 내가 원하는대로 재사용하기 편해졌다는 것... 2. 자바스크립트와 모듈 자바스크립트는 기본적으로 파일 스코프와 import, export를 지원하지 않았다. script 태그를 이용해 외부 js 파일을 로드할 수는 있지만 .. 2021. 10. 10.
반응형

티스토리툴바