본문 바로가기

devlog/Webpack

Springboot 프로젝트에 Webpack Babel 적용하기 Babel? ECMAScript 2015(ES6) 이상의 javascript 파일을 ES5로 변환해주는 툴. ES7은 ES2016, ES8은 ES2017 ECMAScript는 ECMA-262 국제 표준 기술규격에 정의된 표준화된 스크립트 프로그래밍 언어 babel은 webpack과 같은 빌드시스템과 함께 사용한다. 그러면 bable이 어떻게 동작하는지 찾아보기 쉽다. 좋은 연습은 babel을 webpack과 같은 빌드 시스템없이 만들어 보는 것이다. 참고 ES2016~ES2020에 대해 정리해놓은 글 ECMAScript ES2016~ES2020 정리 프로젝트 Babel 환경 설정 프로젝트 디렉토리 생성 mkdir {project-directory} && cd {project-directory} packa.. 더보기
Springboot 기반에 git, npm을 사용한 webpack 환경구축 Part 2 2020.03.07 - [dev/webpack] - Springboot 기반에 git, npm을 사용한 webpack 환경구축 Part 1 Webpack 기본 설정 Configuration | webpack 프로젝트의 진입점이 src/index 이며 출력 경로가 dist/main.js 이면 웹팩 설정파일을 따로 추가할 필요 없이 npx webpack 명령어를 통해 바로 번들링 가능합니다. 하지만 보통 프로젝트는 저 src/index 경로를 그대로 사용하지 않기 때문에 설정이 필요합니다. 웹팩 실행을 위한 NPM 스크립트 추가 Mode | webpack 웹팩 실행 시 mode 옵션을 넘기거나 웹팩 설정에 mode 옵션을 줄 수 있습니다. development, production, none 모드가 있는데,.. 더보기
Webpack & Spring Security Refused to execute script from 'http://localhost:8080/user/login' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. 오류에 관한 해결방법 개발환경 thymeleaf 3.0.11 Spring Boot 2.2.5 IntelliJ Ultimate 2020.1 JDK 8 jQuery 2.1.4 Gradle Webpack 발생 spring security 사용 시 아래처럼 모든 url 접근 가능하게 사용하다가 주석 후에 리소스 접근 불가로 발생 .antMatchers("/**").permitAll() 오류 stack strace 2login:1 Refused to execute script from 'http://localhost:8080/user/login' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. 원인 WebSec.. 더보기
Springboot 기반에 git, npm을 사용한 webpack 환경구축 webpack 작업 브랜치 생성(Optional) 기존 작업 중인 저장소에서 바로 작업하여 커밋하는 방법도 있습니다. 하지만 작업을 분리하기 위해서 webpack 작업용 브랜치를 생성하겠습니다. webpack 브랜치에서 작업 후 메인 브랜치에 rebase/merge 할 예정입니다. > cd 프로젝트 루트 폴더 > git checkout -b webpack Switched to a new branch 'webpack' 로컬 환경에 webpack 브랜치가 새로 생성되었고 git branch 명령어를 입력하면 master 브랜치에서 webpack 브랜치로 전환이 된 것을 확인할 수 있습니다. > git branch master * webpack 하지만 로컬에 브랜치를 생성했다고 끝이 아닙니다. git pull.. 더보기