반응형 웹개발14 웹팩 설정하기 - 플러그인 앞의 게시물에 이어 이번에는 웹팩에서 플러그인을 설정하는 방법에 대해 정리해보았다. 🔌 플러그인 로더가 여러 형식의 파일들을 모듈로 인식할 수 있게 해주면 이 과정에서 플러그인은 코드 사이의 공백이나 변수명을 바꿔서 파일의 용량을 줄이는 역할같은 것을 해준다. 플러그인을 적용시키는 방법은 webpack.config.js 파일에서 다음과 같은 코드를 추가하면 된다. 이러한 코드를 추가하면 MyPlugin을 추가해주게 된다. const MyPlugin = require('./MyPlugin'); module.exports = { ..., plugins: [ new MyPlugin(), ] } 1. Banner Plugin 코드가 빌드되어 난독화가 진행된 경우 사람들이 코드를 알아볼 수 없다. 따라서 코드 상.. 2021. 5. 7. 웹팩 설정하기 크롬 익스텐션을 개발할 때 boliler plate를 사용하여 개발했었다. 그러다 보니 개발환경에 변경하고 싶은 부분이 있을 때 웹팩을 수정해야하는 경우가 발생했다. 하지만 웹팩에 대해 아는 것이 없어서 설정을 건드릴 수가 없었다. 그래서 웹팩과 그 외의 개발환경을 셋팅하는 방법에 대해서 정리하고, 실제 적용까지 해볼 예정이다! jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html 프론트엔드 개발환경의 이해: 웹팩(기본) 1. 배경 먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명.. 2021. 5. 6. 크롬 익스텐션 개발기(4) : html 디코딩 웹클리퍼 기능을 구현하면서 발생했던 주요 문제중에 하나는 바로 인코딩/디코딩 문제였다! 이 페이지를 웹클리핑하면 http://news.chosun.com/misaeng/site/data/html_dir/2017/08/21/2017082100911.html http://news.chosun.com/misaeng/site/data/html_dir/2017/08/21/2017082100911.html news.chosun.com 캡쳐에서 보이듯이 웹사이트 정보에 대한 텍스트들이 깨져서 나타났다. 이유를 확인해보니, axios를 이용하여 웹페이지의 html 문서를 가져올 때 utf-8 타입으로 가져오게 되는데, 이 사이트는 content-type이 euc-kr로 되어있어서 한글이 제대로 가져와지지 않았기 때문이.. 2021. 4. 25. styled-components로 checkbox 커스텀하기 웹 사이트 제작을 하면서 체크박스를 커스텀해야할 상황이 생겼는데, 다들 css를 사용하여 커스텀하는 방법을 사용하고 있었다. 나의 경우에는 styled-components를 사용하여 커스텀을 하고 싶었기 때문에 관련 자료들을 찾아보다가 medium.com/@colebemis/building-a-checkbox-component-with-react-and-styled-components-8d3aa1d826dd Building a Checkbox Component with React and styled-components A (mostly) hack-free approach medium.com 이 분이 작성한 글을 발견하게 되었다! 체크박스 커스텀을 위해서는 4가지 컴포넌트가 필요하다. 1. 체크박스 컨테이.. 2021. 4. 22. styled-components 알차게 사용하기 이번에 정리할 내용은 styled-components가 가진 기능들을 보다 알차게 사용하는 법에 대한 것이다. styled-components는 각각의 컴포넌트들을 생성하고 그 컴포넌트들의 css를 바로 작성할 수 있게 해주는 라이브러리이다. 기존의 css나 태그의 style 속성을 사용할 때는 변수를 사용할 수 없었지만, styled-components를 사용하면 컴포넌트이기 때문에 props로 값을 받아 변수처럼 사용할 수 있다. import styled from 'styled-components'; const ImageBox = () => { return( ); }; const Image = styled.div` width: 10px; height: 10px; background: url(${pro.. 2021. 4. 22. 크롬 익스텐션 개발기(3) : storage 우리 프로그램은 유저의 로그인 여부를 파악하는 것이 중요하였다. 그래서 브라우저의 local storage와, chrome extension storage를 사용하였다. local storage를 사용하게 되면 개인 pc의 브라우저에 저장되기 때문에, 컴퓨터를 껐다 켜도 값이 유지되어 있었다. 저장된 값을 확인하는 방법은 윈도우의 경우 F12를 누르거나, 그 외의 경우 마우스 우클릭을 한 뒤, →검사→Application→Storage의 localstorage 항목을 확인하면 된다. 또한 여기서 특정 항목을 선택하여 그것의 key나 value 값을 변경할 수 있다. 사용을 위한 코드는 다음과 같다. // local storage에 특정 key와 그에 대한 value 저장하기 localstorage.set.. 2021. 2. 12. 이전 1 2 3 다음 반응형
