Ellen's Web Note

모듈을 사용하게 되면 아래의 왼쪽과 같은 모듈간 의존 관계가 발생함. 모듈관계의 시작점을 통해 관계된 모든 모듈들을 ./dist/main.js 번들링 파일로 만듬. package 설치 > npm install -D webpack webpack-cli webpack : bundle 작업 실행(모듈로 연결된 스크립트 파일을 하나로 합침(이미지 왼쪽)) webpack-cli : webpack을 터미널 명령으로 사용할 수 있게 함. 실행파일(bundle file) 선언 ... ... webpack option --mode : "development" 개발환경의 정보를 추가, "Production" 운영에 배포하기 위한 최적화 설정 --entry : 모듈의 시작점 지정 --output : 웹팩의 모든 모듈을 합치..

모듈 시스템(export/import)이 가능해짐. 모듈이 없을 때 // src/app.js console.log(sum(1, 2)); // src/math.js function sum(a, b) { return a + b; } * 위와 같이 사용하게 되면, - math.js와 app.js가 전역으로 선언되어 있음. - sum을 다른 변수로 사용할수 없음. - 이렇게 사용하는 경우전역 scope가 오염됨. IIFE방식의 모듈 math 전역변수 생성 - 전역 변수인 math 객체를 선언하고, math를 통해서만 sum에 접근할 수 있게 함. // src/math.js // 전역 name space 할당 var math = math || {}; (function () { //이 안의 scope는 외부로부터 ..

리액트에서 컴포넌트를 스타일링 할 떄에는 다양한 방식을 사용할 수 있다. 여러 방식 중 딱히 정해진 방식은 없고, 개인의 편의나 회사의 스펙에 맞춰 사용하면 된다. 종류 : css, scss, css-module, styled-components css 기본적인 CSS 스타일링. class -> className sass (syntactically awesome stylesheet) - css전처리기로 복잡한 작업을 쉽게 할 수 있게 히줌. - 스타일 코드의 재활용성을 높여주고 코드의 가독성을 높요 유지보수에 도움. - 확장자는 .scss와 .sass 두가지를 지원. - node_modules 디렉터리의 라이브러리를 호출해서 사용 (경로에 ~를 사용하면 자동으로 node_modules디렉터리로 경로가 지..