이번 글에서는 webpack 로더의 종류인 file-loader 와 url-loader에 대해서 알아보도록 하겠습니다. 👨‍💻 얻어갈 수 있는 내용 file-loader 와 url-loader는 어디서, 어떻게 사용되는걸까? file-loader 와 url-loader의 차이는 무엇이며, 둘 중에 뭐를 사용해야될까? Webpack 로더 웹팩은 JavaScript 모듈 번들러로 시작했지만, 시간이 지나면서 CSS, 이미지, 폰트 등과 같은 다양한 타입의 리소스들을 처리할 필요성이 커졌는데요. 로더 (loaders) 라는 옵션을 사용하게되면 Webpack이 다른 포멧의 파일을 처리하고, 이를 애플리케이션에서 사용할 수 있는 모듈로 변환 할 수 있게됩니다. // webpack.config.js module.e..

* ES 가 뭐에요? ES 는 ECMA Script를 뜻하고, 자바스크립트를 표준화 하기위해 만들어진 규격이다. * lint (린트)는 뭐에요? lint는 소프트웨어 개발에서 코드의 오류, 버그, 스타일 문제 등을 찾아내는 정적 분석 도구 이다. 따라서 lint는 코드 오류 및 스타일 문제를 찾아내는 도구로 일반적인 용어이고, ESLint는 JavaScript에서 사용되는 구체적인 린트 도구 중 하나이다. * ESLint 를 적용하는 순서 1. Node.js 설치: ESLint를 사용하려면 Node.js가 설치되어 있어야 한다. Node.js는 공식 사이트(https://nodejs.org/)에서 다운로드하여 설치할 수 있다. 2. 프로젝트 디렉토리 설정: ESLint를 사용할 프로젝트 디렉토리로 이동한..

* 웹팩 (webpack) 이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들의 의존성을 해결하며 하나의 자바스크립트 코드로 압축 (번들링) 하고 최적화해서 성능 향상과 로딩 시간 단축을 위해 사용되는 라이브러리 이다. * 모듈 (Module) 프로그래밍에서 독립적인 기능을 갖고 있는 작은 코드 조각을 말한다. 모듈은 일반적으로 특정 기능이나 작업을 수행하는 코드의 조각으로, 모듈화를 통해 코드를 세분화해서 유지보수성을 높이고 코드의 재사용성을 높일 수 있다. * 번들러 (Bundler) 모듈 번들링(Module Bundling)을 수행하는 도구로, 여러 개의 모듈 (js파일, css파일, 이미지 등) 을 가져와서 이를 하나 또는 여러 개의 번들로 묶어주는 도구를 의미한다..

이 글에서는 Nginx 웹서버에서 SSL을 사용하기 위한 Config파일을 작성하는 방법을 다룬다. 인증기관(CA)로부터 인증서(Certificate)를 발급 받아서 다음 두 개 파일을 이미 확보해 놓은 상태여야 하며, 아직 인증서를 발급받지 않은 경우 인증기관의 홈페이지를 통해 인증서를 발급받은 뒤 진행해야 한다. 회사에서 프로젝트 진행 중, 톰캣과 nginx 를 사용해야하는 상황이 생겼다,. nginx 에 SSL 인증서를 설정해야 하고, 전달 받은 인증서가 pem 파일이라서 tomcat에는 설정을 못하는 상황이다. tomcat은 8080에 띄운 상황이며, 80포트는 nginx에 설정해서 443으로 리다이렉트 시켜야한다. 결국 80 포트는 443으로 리다이렉트 하고, 443은 톰캣으로 프록시 되게 해야..

최근 몇 년 동안 브라우저 간 호환성 테스트는 브라우저들의 업데이트 이후, 사용자가 뒤처지지 않도록 하는 데 도움이 되므로 많은 주목을 받았다. 기술 발전이 기하급수적으로 증가하여 업그레이드와 변경도 빨라졌다. 따라서, 크로스 브라우징에도 개발자들의 많은 관심이 쏟아졌다. 크로스 브라우징 (Cross-browser) 이란? 크로스 브라우징이란, 서로 다른 브라우저에서 웹사이트나 애플리케이션이 동일한 방식으로 동작할 수 있도록 보장해 주는 것이다. 서로 다른 브라우저마다 자체적으로 지원하는 기술이나 표준이 다른데다가, 브라우저마다 버전별로 지원하는 기술이나 표준이 다르기 때문에, 동일한 방식으로 동작하지 않을 가능성이 높다. 왜 크로스 브라우징이 필요한가? 크로스 브라우징이 필요한 이유는 크게 두 가지가 ..

구글링을 해보니..... 이렇게 관리자 권한으로 CMD를 실행한 뒤 해당포트를 사용하는 프로그램을 알아보고 taskKill 명령어로 프로그램을 죽이는 것도 방법이지만 intellij의 Debugger 포트번호를 바꾸는 것도 방법이라고 한다. port 번호를 1031로 바꾸니 디버그가 정상 작동 됨.