akjfal

읽어보면 좋은 글 Babel : https://github.com/jamiebuilds/babel-handbook GitHub - jamiebuilds/babel-handbook: A guided handbook on how to use Babel and how to create plugins for Babel. :blue_book: A guided handbook on how to use Babel and how to create plugins for Babel. - GitHub - jamiebuilds/babel-handbook: A guided handbook on how to use Babel and how to create plugins for Babel. github.com --save와 --..

바벨에는 2가지 타입의 파일이 있다. project-wide configureation (프로젝트 전체 구성) - babel.config.json(.js, cjs, .mjs) - configfile을 override할 수 있다. File-relative configuration (파일 관련 구성) - babelrc.json(.babelrc, .js, .cjs, .mjs) - 일부 파일에 적용 할 수 있다. 하위 패키지와 루트 패키지간에 로드 설정에 주의해야한다. 하위 패키디를 같이 하기위해서는 babelrcRoots: [".", "packages/*"]등 옵션을 추가해줘야 한다. .js사용시 바벨 구성 api가 노출되는데 바로 계산이 가능하지만 캐싱을 더 어렵게한다. 따라서 관련 기능 설정을 해야한다. ..

지금까지 Babel에 대해서 한국어로 된 글로 대략적으로 파악했으니 공식문서를 보기 시작했다. Babel은 코드를 파싱 > 변환 > 생성 과정을 통해 코드 변환을 시킨다. 자바스크립트 개발자를 위한AST What is Babel? 우선 Babel이란 ECMAScript 2015를 뒷 버전으로 변경해줘서 다른 브라우저와 호환성을 높여준다. 1. 문법 transform 2. Polyfill(폴리필(polyfill)은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.) 역할을 한다.(core-js를 같은 친구들이 해줌) 3. 소스코드 변환(codemods : LargeScale을 부분적으로 자동화 가능한 코드베이스 리팩토링을 지원하는 도구입니다) 4. 기타 등등... Babe..

우선 babel에 대해서 좀 더 파보고 싶었다. core-js@3 개발을 하다보니 이런 에러가 생겨서 원인을 찾다가 폴리필 문제라는걸 깨닫고 정리합니다. Core.js simsimjae.medium.com 해당 글을 통해서 얼핏 듣기만 했던 babel/polyfill, plugin-trasnform-runtime에 대해서 대략적으로 알게되었고, 해당 사항들이 개선된 core-js@3의 역할에 대해서 알수 있었다. 하지만 해당 글을 보니 polyfill은 regenerator-runtime과 core-js를 합친 것이라하여 각각이 무엇인지 먼저 알아봐야 할 것 같았다. 근데...대부분의 글들이 해당이 polyfill이 저것 두개를 합친것이라 하여 한글로된 글을 통한 대략적인 파악은 여기까지하고, 공식문서를..

webpack과 babel에 대한 이해도 높이기 https://velog.io/@pop8682/%EB%B2%88%EC%97%AD-%EC%99%9C-babel-preset%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%98%EA%B3%A0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80-yhk03drm7q [번역] babel-preset-env는 무엇이고 왜 필요한가? 이 글은 blog.jakoblind.no에서 작성한 What is babel-preset-env and why do I need it?을 번역/요약한 내용입니다. 모던 javascript 프로젝트를 시작할 때, babel을 설치하고 babel-preset-env plugin 설정을 .babe..

value onChange onOK onPanelChange generatePicker를 통해서 동작을 정의 연 달 월 일 에 따라서 원하는 것들만 리렌더링시 보여주는 방식 사용 useState에 selctedValue를 두고 선택될시 onClick에 값을 넘겨주는 방식으 ㄹ사용

Antd의 dropdown의 경우 rc-dropdown -> rc-trigger를 사용한다. 이때 antd의 trigger의 경우 setState를 통해서 상태를 변경한다. Material ui의 경우 rc-trigger의 경우 하단 생성되는 리스트를 React.cloneElement를 사용하고, material-ui의 경우 Input 컴포넌트를 React.cloneElement를 사용해서 신규 생성한다. material ui의 경우 styled-component를 사용해서 https://github.com/mui-org/material-ui/blob/24a53e5d098490d88fe2894790f4bf80b40a5316/packages/mui-styles/src/styled/styled.js#L22 ..

우선 사용하는 방법을 보자 Text 컴포넌트안에 variant="text" 같이 변수를 인자로 넘겨준다. 인자로 들어가는 것들은 Button 에서 살펴볼 수 있으니 확인해보도록 하자. Button 컴포넌트를 까보도록 하자 const Button = React.forwardRef(function Button(inProps, ref) { const props = useThemeProps({ props: inProps, name: "MuiButton" }); const { className: classNameContext, color: colorContext, disabled: disabledContext, disableElevation: disableElevationContext, disableFocusRi..