잘 살고 싶은 보겸삼촌의 블로그

실무환경에서는 바벨을 직접 사용하기보다 웹팩으로 통합해서 사용하는 것이 일반적 따라서, 로더(loader) 형태로 제공함 1. babel loader 설치 [terminal] npm install babel-loader -D 2. webpack 설정 수정 2.1. babel loader 추가 { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', } /** * /root/webpack.config.js */ const path = require('path'); const CustomPlugin = require('./customplugin'); const webpack = require('webpack'); const banner = requ..

기본 : php artisan [명령어-옵션] 구분 명령어 설명 기본 clear-compiled 컴파일된 클래스 파일 제거 down 메인터넌스 모드로 전환 env 프레임워크 환경 보기 help 명령어 도움말 보기 list 명령어 목록 보기 migrate DB 마이그레이션 수행 optimize 프레임워크 성능 최적화 serve PHP 개발 서버에서 애플리케이션 기동 tinker 애플리케이션과 상호작용 up 메이터넌스 모드에서 정상 모드로 전환 app app:name 애플리케이션 네임스페이스 설정 auth auth:clear-resets 만료된 패스워드 리셋 토큰 비우기 cache cache:clear 애플리케이션 캐시 비우기 cache:table cache 테이블용 마이그레이션 생성 config confi..

1. 플러그인(Plugin)이란, webpack으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용 webpack의 기본적인 동작에 추가적인 기능을 제공 로더가 파일 단위로 처리한다고 하면, 플러그인은 번들된 결과물을 처리함. 즉, 번들된 js를 난독화 하거나 특정 텍스트를 추출하는 용도 등으로 사용됨 2. loader과 plugin의 차이점 # 차이점 loader는 파일을 해석하고 변환하는 과정에 관여하여 모듈을 처리 plugin은 해당 결과물의 형태를 바꾸는 역할을 하므로 번들링된 파일을 처리한다는 점 따라서, 번들된 파일을 압축할 수도 있고 파일 복사, 추출, 별칭 사용 등의 부가 작업 가능, 파일별 커스텀 기능을 위해 사용함 3. plugin 만들기 3.1. customplugin.js 생성 ..

1. 자주 사용하는 로더의 종류 로더 종류 설명 css-loader css 파일이 js 코드로 변경 style-loader js로 변경된 css 내용을 동적으로 DOM에 추가, 따라서 css를 번들링하기 위해서는 css-loader, style-loader를 함께 사용함 file-loader 파일을 모듈 형태로 지원, webpack output에 파일을 옮겨줌 url-loader data URI scheme를 이용하여 이미지를 Base64로 인코딩하여 문자열 형태로 소스코드에 넣는 처리를 자동화하는 loader babel-loader sass-loader vue-loader ts-loader 2. css-loader 적용하기 2.1. [terminal] npm install css-loader -D 2...

0. 로더(Loader)란, webpack이 웹 애플리케이션을 해석할 때, js로 만든 모듈 뿐 아니라, 모든 웹 자원들도 전부 모듈로 봄 import 구문을 사용하면 이 모듈들을 js 코드 안으로 가져올 수 있음. 이 이유는 webpack의 loader의 역할 덕분임 assets 웹 자원 중에서 js 파일이 아닌 HTML, CSS, IMG, FONT 등을 변환할 수 있도록 도와주는 속성 : loader는 Typescript와 같은 다른 언어를 js 문법으로 변환하거나 이미지를 data URL 형식의 문자열로 변환하고, css 파일을 js에서 직접 로딩할 수 있도록 도와줌 1. 로더의 필요성 webpack으로 애플리케이션을 빌드할 때, import한 웹 자원 파일을 해석하기 위한 적절한 로더가 필요함 2..

# 개발환경 os : windows 10 pro 64bit php : 7.4.2 node : 13.2.0 npm : 6.13.1 0. 디렉토리 구조 1. 번들작업 패키지, 웹팩 터미널 도구 설치 [terminal] npm install -D webpack webpack-cli 1.1. webpack, webpack-cli 사용방법 /root/node_modules/.bin # /root/node_modules/.bin [terminal] webpack --help [terminal] webpack-cli --help 1.2. 핵심 3가지(--mode, --entry, --output) 옵션 설명 --mode 웹팩 실행모드, 현 포스팅에서는 개발버전인 dev or development를 지정 --entry..

등장배경 js 코드가 많아지면 하나의 파일로 관리하는데 한계가 있음. 그러나 여러 개의 파일을 브라우저에서 로딩하는 것은 많은 네트워크 비용을 요구함. 또한, 각 파일은 서로 간의 스코프를 건들지 말아야하는데, 변수 충돌의 위험성이 존재함 즉시호출함수(IIFE, Immediately Invoked Function Expression)을 이용해 모듈을 만들 수도 있고, CommonJS, AMD 등의 모듈 시스템을 사용하면 파일 별로 모듈을 관리할 수 있으나, 브라우저에서 파일 단위 모듈 시스템을 사용하기가 쉽지 않음. 웹팩(Webpack)이란, 여러 개의 파일을 하나의 파일로 합쳐주는 번들러(Bundler) : 하나의 엔트리 포인트(Entry point, 시작점)으로부터 의존적인 모듈을 모두 찾아내서 하나..

1. 모듈 애플리케이션을 구성하는 개별적인 요소 매우 복잡하고 긴 코드를 작성할 때 사용 용도에 따라 파일 단위로 구분한 뒤, 다른 파일에서 해당 클래스나 함수가 필요할 때 가져와서 사용할 수 있도록 해줌 일반적으로, 파일 단위로 분리되어 있고 필요에 따라 애플리케이션은 명시적으로 모듈을 로드함. 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 요청되었을 때 비로소 애플리케이션에 주입됨. 모듈은 모두 기능별로 작성하므로 개발 효율성과 유지보수성에 도움이 됨 C에는 전처리기, Java는 import 등을 통한 모듈 기능을 가지고 있으나, js는 위 코드는 일반적으로 js에서 태그를 이용하여 모듈화를 하는 방식이나, 이 때 발생할 수 있는 문제로 여러 개의 파일을 로딩하더라도 ..

보통 프로그램을 개발할 때 플랫폼에 맞게 다양한 언어로 짜게 됨 1. 포팅(Porting) 예를 들면, windows용 프로그램을 만들 때, A언어로 windows 플랫폼에 맞게 개발했을 때, 포팅이란 이 windows 플랫폼을 다른 것으로 바꾼다는 의미 즉, windows에서 돌아가는 프로그램을 리눅스나 맥에서 돌리기 위해서는 C++로 짠 windows 용 프로그램을 변경해야하는 데 이 것을 포팅이라고 함 예를 들면 windows 버전 > 리눅스 버전, Android 버전 > ios 버전 2. 컨버팅(Converting) A언어로 개발된 프로그램을 B언어로 언어 자체만 바꿔서 같은 플랫폼에서 동작하도록 하는 것 예를 들면 C++ > Java로 개발언어를 변경