mingg IT

콘솔 로그를 없에는 Plugins을 제작해 보겠음. 처음 프로젝트 세팅을 해줌 mkdir test-babel-custom-plugin cd test-babel-custom-plugin npm init -y npm install @babel/core @babel/cli plugins/remove-log.js module.exports = function ({ types: t }) { return { visitor: { ExpressionStatement(path) { if (t.isCallExpression(path.node.expression)) { if (t.isMemberExpression(path.node.expression.callee)) { const memberExp = path.node.ex..

초기에 바벨은 ES6코드를 ES5 코드로 변환해 주는 트렌스파일러였다. 현재는 바벨을 이용하여 리액트의 JSX문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법을 사용할 수 있다. 바벨을 실행하는 여러가지 방법 @babel/cli 웹팩에서 babel-loader로 실행 @babel/core를 직접 실행 @babel/register로 실행 babel 예제(babel/cli) npm init -y npm install @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react 바벨을 실행하기 위해서는 @babel/co..

보호되어 있는 글입니다.

아마 react를 이용하고 있다면 한번 쯤 useState가 어떻게 이전 값을 가지고 있는지 (유지 되는지)를 고민해본 적이 있을 것이다. 알아보니 클로저의 개념을 이용해서 작동한다. 클로저의 사용하는 이점으로는 현재 상태를 유지하면서 최신 상태를 유지할 수 있는 점이 있다. 이걸 이용해서 const useState = (initialVal) => { let innerState = initialVal; const state = innerState; const setState = (newVal) => { innerState = newVal; }; return [state, setState]; }; const [counter, setCounter] = useState(0); 클로저가 innerState값을 ..

아마 cra 명령어를 사용할 때마다 종종 보는 에러일 것이다. 해결법은 npx create-react-app@latest cra-test 를 수행하면 정상적으로 CRA 프로젝트를 생성할 수 있다.

CRA를 이용하면 초기 세팅을 직접 하지 않고도 어플리케이션을 만들 수 있다. 오늘은 그것을 사용하지 않고 초기에 세팅해보는 방법에 대해 알아보도록 하겠다. 간단하게 hello-world라는 디렉토리를 만든다. 우선 이름을 보고 판단할 수 있듯이 react-dom.development, react.development는 개발 환경에서 사용되는 파일이고, react-dom.production.min.js, react.production.min.js 는 배포에 필요한 환경 파일임. 파일 상세내용은 git 에 올려놓도록 하겠음. simple1.html 파일을 만든다. 안녕하세요. 이 프로젝트가 마음에 드시면 좋아요 버튼을 눌러주새요. simple1.js function LikedButton() { const ..

Typeit 라이브러리를 사용하면 text 애니메이션을 쉽고 이쁘게 사용할 수 있다. https://www.typeitjs.com/docs/react TypeIt for React | TypeIt The official React component for TypeIt, the most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 오늘은 React로 사용 예시를 드려고 한다. npx create-react-app@latest typeit-example 로 프로젝트를 하나 만든다 만들고나면 React 18 버전으로 만들어 질텐데 dependency 에러랑 여러 에러가 너무 많이나서 17버전으로 사용하는 예시를 드..

1번 function removeProperty(obj, prop) { return Object.keys(obj).includes(prop) ? delete obj[prop] : false; } 2번 function setup() { const btn = document.getElementsByClassName("remove") for(let i = 0; i < btn.length; i++) { btn[i].addEventListener('click', function() { this.parentNode.remove(); }) } } setup(); // Example case. document.body.innerHTML = ` X X `; setup(); document.getElementsByClas..