전체 글 썸네일형 리스트형 자주 사용하는 플러그인 (webpack) 직접 플러그인을 만들어서 사용하는 경우는 거의 없을 것이고 웹팩에서 직접 제공하는 플러그인이나 이미 유명한 라이브러리를 사용하는데 자주 쓰는 플러그인에 대해 알아보자. ** BannerPlugin 결과물에 빌드 정보나 커밋 버전 같은 것을 추가 할 수가 있다. 웹팩에서 기본적으로 제공하는 플러그인으로 한 번 사용해보자 config 파일에서 웹팩에서 제공해주는 플러그인이기 때문에 const webpack = require('webpack'); 이렇게 해주면 빌드된 결과물 상단에서 메세지를 볼 수가 있다. 한 번 더 예시로 빌드 된 데이트와 깃 사용자 이름을 한번 넣어보자 노드에서 모듈로 child-process 라는 것을 제공하는데 명령어를 그대로 가져와서 쓸 수 있게 해준다. ** DefinePlugin.. 더보기 Plugin (webpack) 웹팩에서 알아야 할 마지막 개념이라고도 할 수 있는 플러그인에 대해 알아보겠다. 로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다고 하는데 코드를 난독화 하거나 특정 텍스트를 추출하는데 쓰인다고 하니 직접 한번 코드를 짜가면서 동작 원리를 익혀보자. 로더는 함수로서 동작한다면 플러그인은 클래스로서 동작한다고 보면 되겠다. 우선 플러그인 클래스 파일을 하나 만들어주고 exports 해주자. 그리고 webpack.config 파일로 가서 상단에 임포트 해준뒤에 new 키워드를 통해 객체를 생성해주고 빌드를 해보면 콘솔에 제대로 찍히는 것을 확인 할 수 있다. 그전에 로더로 콘솔에 찍어보았을 때는 각 확장자 옵션에 해당하는 모든 파일들을 돌면서 번들링을 해주면서 콘솔에 찍어보았을 때는 파일의.. 더보기 자주 사용하는 로더 css-loader css 로더를 사용하게 되면 자바스크립트에서 css파일을 모듈로 불러올 수 있다. 즉 css파일을 읽어서 자바스크립트 코드 로 가져올 수 있는 것이다. 먼저 app.css 파일을 하나 만든 뒤에 body에 백그라운드만 아쿠아로 설정 해준 뒤에 app.js 파일로 가서 임포트를 해준 뒤에 웹팩을 돌려보면 아래와 같은 에러가 뜬다. 웹팩은 알다시피 모든 파일을 모듈로서 해석하는데 css파일코드를 자바스크립트 코드로 파싱하는데 에러가 생겼다고 한다. 이렇게 css 파일을 파싱해주는게 바로 css-loader 로서 우선 설치해준다. npm install css-loader webpack.config 파일로 가서 요론 식으로 설정해주면 되겠다. 그리고 빌드 된 main.js 파일에서 찾아보면 .. 더보기 로더란 웹팩은 '모든' 파일을 모듈로 인식하고 바라보기 때문에 이미지, 폰트 까지도 import 구문을 사용하면 자바스크립트 코드로 가져올 수 있는데 이것이 가능한 이유는 웹팩의 로더 덕분이다. 로더는 다른 언어를 자바스크립트 문법으로 변환해주거나 이미지를 데이터 URL 형식의 문자열로 반환 등의 역할을 한다. 실제로 어떻게 사용하는지 한번 알아보자 우선 로더는 함수로서 역할을 하기 때문에 파일을 만들어 보자. my-webpack-loader 라는 자바스크립트 파일안에 위의 코드를 예로 작성해보았다. 이제 다시 webpack .config 파일로 들어가서 모듈이라는 객체명의 rules 항목을 통해 로더들을 설정해줄 수가 있다. 사용법을 보면 알겠지만 test는 .js 확장자 즉 모든 자바스크립트 파일을 돌게하는.. 더보기 웹팩이 필요한 이유와 간단한 예제 모듈 내가 이미 리액트나 노드를 공부하면서 수도 없이 쓰고 있던 것이 있다. 바로 모듈이라는 것인데 완전 간단히 말하면 '코드 덩어리 ' 라고 표현 할 수 있겠다. 그 양이 간단할 수도 엄청 복잡하고 클 수도 있겠다. 이 자바스크립트를 브라우저에서만 사용하는 것이 아니라 범용적으로 즉 서버사이드 쪽에서도 사용하게 하기 위해 많은 노력이 있었지만 가장 대표적인 것이 CommonJs 라는 것이다. 이 자바스크립트 언어를 브라우저용 언어에서 벗어나려면 여러 문제들이 있었는데 1서로 호환되는 표준 라이브러리가 없다. 2 데이터베이스에 연결할 수 있는 표준 인터페이스가 없다. 3 다른 모듈을 삽입하는 표준 방법이 없다. 4 코드를 패키징해서 배포하고 설치하는 방법이 없다. 5 의존성 문제까지 해결하는 공통 패키지.. 더보기 useRef() 여러개 관리 하기 웬만한 컴포넌트에서 거의 다들 useState 혹은 useRef 를 많이 쓸 것이다. useRef로 각각의 input 타입들에 접근해 값을 뽑아내려고 했는데 그 개수가 조금 많았다. const userRef = useRef(); const phoneRef = useRef(); const emailRef = useRef(); const emvadeRef = useRef(); const facebookRef = useRef(); const instaRef = useRef(); const twitterRef = useRef(); const naverRef = useRef(); // 완전 별루 요정도는 그래 그냥 쓰자 하고 넘어갈 수 도 있지만 각각 input 마다 빈 문자열 인지 확인 해주려고 하는데 일일이 .. 더보기 Nodejs bcrypt 패키지 비밀번호 암호화 node로 rest api를 이용해 몽고db에 데이터를 넣어보면서 연습하는 중에 이런 식으로 비밀번호가 다 노출이 되고 있는데 이것을 안보이게 해줄 수 있다는 방법이 있어서 찾아보았다. 바로 bcrypt npm 패키지를 이용하면 되는데 사용법을 간단히 알아보자. 먼저 설치를 해줘야겠당 npm install bcrypt 해준 뒤에 우리가 가릴 항목에다가 몇가지 설정을 해주면 된다. 만약 password 컬럼에다 적용하고 싶다면 이런 식으로 설정해주면 되겠다. 요로코롬 암호화를 해줄 수가 있고 몽고 컬렉션에도 제대로 들어가있는걸 확인 해 줄 수 있다. 더보기 텍스트 길이 넘칠때 ... 표시 해주기 (ellipsis, webkit) 요것두 스타일링에 관련된 거지만 매번 헷갈릴수 있기 때문에 정리해보겠다링 블록을 넘어선 길이의 텍스트가 있을때 어떻게 처리해줄까. 물론 텍스트가 다 보일 때 까지 블록의 높이 혹은 너비를 조정할 수 있지만 본인이 짜둔 블록 디자인에 맞지 않게까지 커질 수 있다리. 이 블록의 크기, 폰트 크기에 맞게 텍스트를 전부 나열해보면 위와 같이 6줄이 나오게 된다. 하지만 요거 너무 길엉~ 해서 4줄정도만 혹은 3줄 정도만 더 줄이고 싶을 때에는 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; // 요거 요거 중요 -webkit-line-clamp: 4; // 4줄을 맥스로 둘때, 숫자가 맥스 줄 크기당 -webkit-box-orient: vert.. 더보기 이전 1 ··· 11 12 13 14 15 16 17 ··· 24 다음
