전체 글
-
외부 패키지를 관리하는 방법 - NPM | 김정환Front-end/개발환경 2020. 6. 10. 21:11
5. 패키지 설치 5-1. CDN을 이용한 방법 외부 라이브러리를 가져다 쓰는 것은 무척 자연스러운 일이다. 간단한 방법은 CDN(컨텐츠 전송 네트워크)으로 제공하는 라이브러리를 직접 가져 오는 방식이다. 리액트의 주소를 html에서 로딩한다. index.html : CDN 서버 장애로 인해 외부 라이브러리를 사용할 수 없다면 어떻게 될까? 아무리 우리 어플리케이션 서버가 정상이더라도 필수 라이브러리를 가져오지 못한다면 웹 어플리케이션은 정상적으로 동작하지 않을 것이다. 5-2. 직접 다운로드하는 방법 라이브러리 코드를 우리 프로젝트 폴더에 다운받아 놓는건 어떨까? CDN을 사용하지 않기 때문에 장애와 독립적으로 웹 어플리케이션을 제공할 수 있을 것같다. 하지만 이런 상황도 있다. 라이브러리는 계속해서 ..
-
바벨 사용법과 웹팩 통합 - 바벨(Babel) | 김정환Front-end/개발환경 2020. 6. 10. 20:38
4-2. 프리셋 사용하기 이처럼 바벨은 목적에 따라 몇 가지 프리셋을 제공한다. · preset-env · preset-flow · preset-react · preset-typescript preset-env는 ECMAScript2015+를 변환할 때 사용한다. 바벨 7 이전 버전에는 연도별로 각 프리셋을 제공했지만(babel-reset-es2015, babel-reset-es2016, babel-reset-es2017, babel-reset-latest) 지금은 env 하나로 합쳐졌다. 무척 맘에 드는 부분이다. preset-flow, preset-react, preset-typescript는 flow, 리액트, 타입스크립트를 변환하기 위한 프리셋이다. 인터넷 익스플로러 지원을 위해 env 프리셋을 ..
-
2020 디자인 트렌드INFO/WEB 2020. 6. 10. 17:40
출처: https://ldrerin.tistory.com/414 [코코리의 그래픽 갖고놀기] 다크모드 다크 모드 웹 디자인은 초현대적 일뿐만 아니라 눈으로보기 쉽고 색상과 디자인 요소가 돋보이게 합니다. 때로는 시각적으로 가장 멋진 웹 디자인 트렌드가 실제로 시작됩니다. 어두운 테마는 OLED 화면에 더 좋습니다. ( 전력 절약 및 화면 수명 연장). 그러나 이 유틸리티로 인해 화면 이 제대로 보이지 않습니다. 어두운 배경은 역동적인 디자인을 위해 다른 악센트 색상의 가시성을 향상시킵니다. 우연히도, 다크 모드 디자인 미학은 미래 지향적이지만 어두운 사이버 펑크 및 디스토피아 스타일뿐만 아니라 빛나는 네온과 결합 된 어둡고 변덕스러운 색 구성표를 포함 하는 다른 2020 디자인 트렌드 와 완벽하게 어울립..
-
바벨의 기본 개념 - 바벨(Babel) | 김정환Front-end/개발환경 2020. 6. 9. 22:47
1. 배경 1-1. 크로스 브라우징 사용하는 말이 달라서 바벨탑이 실패했듯이, 브라우저마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할 때가 많다. 스팩과 브라우저가 개선되고 있지만, 여전히 인터넷 익스플로러는 프라미스를 이해하지 못한다. 작년까지만 해도 사파리 최신 브라우저는 Promise.prototype.finally 메소드를 사용할 수 없었다. 프론트엔드 개발에서 크로스브라우징 이슈는 코드의 일관성을 해치고 초심자를 불안하게 만든다. 히브리어로 바벨이 ‘혼돈’이란 뜻인 것처럼 말이다. 크로스브라우징의 혼란을 해결해 줄 수 있는 것이 바벨이다. ECMAScript2015+로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다. 타입스크립트, JSX처럼 다른 언어로 분류되는 것도..
-
자주 사용하는 플러그인 - 웹팩(Webpack) 기본편 | 김정환Front-end/개발환경 2020. 6. 7. 20:23
1. BannerPlugin MyPlugin와 비슷한 것이 BannerPlugin이다. 결과물에 빌드 정보나 커밋 버전같은 걸 추가할 수 있다. webpack.config.js : const webpack = require('webpack'); module.exports = { plugins: [ new webpack.BannerPlugin({ banner: '이것은 배너 입니다', }) ] } 생성자 함수에 전달하는 옵션 객체의 banner 속성의 값으로 문자열을 전달한다. 웹팩 컴파일 타임에 얻을 수 있는 정보, 가령 빌드 시간이나 커밋정보를 전달하기위해 함수로 전달할 수도 있다. webpack.config.js : new webpack.BannerPlugin({ banner: () => `빌드 날짜..
-
플러그인 - 웹팩(Webpack) 기본편 | 김정환Front-end/개발환경 2020. 6. 7. 17:59
1. 플러그인의 역할 웹팩에서 알아야 할 마지막 기본 개념이 플러그인이다. 로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다. 이것도 사용하기에 앞서 동작 원리를 이해하기 위해 플러그인을 직접 만들어 보자. 2. 커스텀 플러그인 만들기 웹팩 문서의 Writing a plugin을 보면 클래스로 플러그인을 정의 하도록 한다. 헬로월드 코드를 가져다 그대로 실행 붙여보자. my-webpack-plugin.js : class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap('My Plugin', stats => { console.log('MyPlugin:..
-
자주 사용하는 로더 - 웹팩(Webpack) 기본편 | 김정환Front-end/개발환경 2020. 6. 5. 22:16
1. css-loader 스타일시트도 import 구문으로 불러 올 수 있다. app.js : import './style.css' ES6의 import 구문으로 가져오려면 'app.css' 파일이 모듈이 되어야 하는데, 웹팩의 로더가 css 파일을 모듈로 바꾸는 역할을 한다. style.css : body { background-color: gray; } CSS 파일을 자바스크립트에서 불러와 사용하려면 CSS를 모듈로 변환하는 작업이 필요하다. css-loader가 그러한 역할을 하는데 우리 코드에서 CSS 파일을 모듈처럼 불러와 사용할 수 있겠끔 해준다. > npm install css-loader css-loader 설치 webpack.config.js : module.exports = { modu..
-
로더 - 웹팩(Webpack) 기본편 | 김정환Front-end/개발환경 2020. 6. 4. 21:24
1. 로더의 역할 웹팩은 모든 파일을 모듈로 바라본다. 자바스크립트 뿐만 아니라 CSS, 이미지, 폰트까지 전부 모듈로 보기 때문에 import 구문을 사용하여 자바스크립트 코드 안으로 가져올 수 있다. 이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문접으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만 아니라 CSS 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다. 2. 커스텀 로더 만들기 my-webpack-loader.js : module.exports = function myWebpackLoader (content) { console.log("myWebpackLoader가 동작함"); return content } we..