qwef

보통 딱 favicon.ico 이렇게 루트에 넣어놓으면 favicon으로 인식한다. 근데, 우리가 루트에다가 넣어놔도 정작 빌드된 완성본인 dist폴더에는 favicon.ico가 안들어간다. 이 때 parcel-plugin-static-files-copy 직접 dist폴더에 카피해서 넣어주는 플러그인이다. https://qwefdg3.tistory.com/394 이거 참조. package.json에 플러그인 속성에다 폴더명을 명시한 후, 그 폴더에 그대로 dist에 넣을 파일들을 넣어주면 된다. 이렇게 하지 않고 직접 dist에 넣는거는 경로문제라던지 문제가 있을 수 있다. dist는 자동으로 빌드완성된 파일들을 넣어주는 공간이기 때문. 그래서 서버에 올릴 때는 이 dist폴더 안에 있는 파일들을 통째로..

설치 npm i nodemon -g 사용 nodemon 파일이름.확장자 참고로 만약 서버 재실행마다 콘솔을 clear 하고 싶을 경우 nodemon -x \"cls && ts-node\" index.ts 타입스크립트의 경우 nodemon -x \"cls && node\" index.js 자바스크립트의 경우 -x는 변경사항이 감지될 때 실행할 외부 프로그램인데, 그걸 \"cls && ts-node\" 이렇게 했다. cls는 지우는 거고, ts-node는 그.. 타입스크립트 실시간으로 실행시켜주는 것이다. &&는 보통 다른 곳에서는 and 연산자지만, 여기서는 명령의 순차를 구분하는 기호로 사용되나 보다. 즉, nodemon을 실행하면서, 파일의 변화가 느껴지면 -x 외부파일을 실행하는데, 그걸 그냥 문자열..

parcel bundler parcel-bundler scss 상위버전, 이건 html에 link 해주면 자동으로 깔림. (번들러가 깔렸을 시. 번들러 역할이 그거니까.) sass 자동으로 여러 브라우저 버전에 맞게 css에다 지원해주는 (--webkit-o-(오페라)등 추가로 해 줌) autoprefixer postcss 둘다 설치 하고, 설정 파일 .postcssrc.js 만들어서 const autoprefixer = require('autoprefixer'); module.exports = { plugins : [ autoprefixer ] } 해줘야 함. 이 때, 어디까지 지원해 줄 지 package.json에 명시해 줘야 함. "browserslist": [ "> 1%", "last 2 vers..

https://ko.parceljs.org/cli.html 🖥 커맨드 라인 인터페이스(CLI) 시작하기 기능 📦 애셋 유형 고급 🖥 커맨드 라인 인터페이스(CLI) 명령어 Serve 개발용 서버를 시작합니다. 앱이 수정되면 자동으로 다시 빌드하고, 빠른 개발을 위해 빠른 모듈 교체를 지원합니 ko.parceljs.org 보면 좋다. "scripts": { "serve": "parcel index.html --open", "build": "parcel build index.html" }, 이렇게 만들 수도 있다. 왜냐하면 저게 단축명령어 : 커맨드 명령어 이렇게 정의하는 거기 때문.

commonjs는 뭔가 표준.. 하기 위해 정해놓은 것 인데, ES5가 commonjs 기반으로 만들어졌다고 한다. 플러그인 설정파일은 commonjs로 코딩되어 져야 한다. module.exports = { presets : ["@babel/preset-env"], plugins : ["@babel/plugin-transform-runtime"] } const autoprefixer = require('autoprefixer'); module.exports = { plugins : [ autoprefixer ] } 이게 module.exports가 commonjs 문법이다. 최신버전은 @import 로쓴다.

바벨 컴파일은 프로그래밍 코드를 컴퓨터가 알 수 있는 코드로 바꾸어 주는 일. 트랜스파일은 프로그래밍 코드 -> 프로그래밍 코드 예를 들어 자바 -> 파이썬 등.. 전반적으로 웹브라우저가 쓰는 자바스크립트 버전은 ES5이다. 바벨은 최신 자바스크립트 버전으로 짜여진 코드들(for of 이런거 ES6 버전임)을 ES5로 트랜스파일 해주는 플러그인이다. 당연히 런타임 말고 devDependencies의 플러그인이다. 설치 : npm i -D @babel/core @babel/preset-env 그 후 .babelrc.js 이 파일을 새로 만들고 여기다 자바스크립트언어로 설정해 주면 된다. 참고로 rc는 설정, 혹은 구성 파일이다. 또한 이런 설정 파일들은 앞에 .을 붙인다. ex) .postcssrc.js ..

npm i 플러그인@버전 npm i autoprefix@9 그럼 9 버전 중 안정된 최신이 설치되는 듯?

이거는 그러니까, 오토프리픽스와 관련이 있다. https://qwefdg3.tistory.com/371 보면 알겠지만 둘이 같이 깔아야 한다. 파일은 .postcssrc.js 하면 만들 수 있다. rc란 것은 node js 환경에서 동작하는 런타임의 어떤 환경? 관련 파일이다. .postcssrc란 이름을 인식하고 postcss파일이 된다. postcss란 css를 여러 브라우저와 여러 버전에 호환되게 만들어 주는거다. const autoprefixer = require('autoprefixer'); module.exports = { plugins : [ autoprefixer ] } 이렇게 .postcssrc.js 파일에 써야 한다. 이렇게 해야 autoprefixer가 제대로 동작한다.

구 문법임. 외부 파일을 가져오는 const autoprefixer = require('autoprefixer'); import autoprefixer from 'autoprefixer'; 이거랑 같은 거임. 왜냐하면 node js에서 쓰는 자바스크립트 엔진 버전이 낮아서 구문법을 쓰는거임. const autoprefixer = require('autoprefixer'); module.exports = { plugins : [ autoprefixer ] } // import autoprefixer from 'autoprefixer'; // export{ // plugins : [ // autoprefixer // ] // } 두개 같은건데, exports는 밖에서 저 autoprefixer라는 이름으로 ..

이 프로젝트에서 지원 할 브라우저 범위. autoprefixer는 이 값을 참조. https://qwefdg3.tistory.com/371 "browserslist": [ "> 1%", "last 2 version" ] 상위 1%에 해당하는 브라우저, 가장 최근에 개발된 2개 버전 까지 지원한다고 명시. 그냥 거의 모든 브라우저 지원한다고 보면 됨.