# babel
create-react-app은 더 이상 최선의 선택이 아닐 수 있다.
새로운 react 프로젝트를 만드는 데 있어 create-react-app은 여전히 최선의 선택일까?
babel과 Webpack (w. browserslist)
얼마전에 browserslist(지원 가능한 브라우저 설정)에 대해 알아보면서 webpack과 babel에서는 이 프로그램이 사용될 것이라고 생각했다. 그래서 babel과 webpack에 대해 간단하게 정리하면서 어떻게 사용되는 지 함께 확인해보려고한다.
[webpack] CRA없이 리액트(w/ 타입스크립트) A to Z 환경 구축하기(+ 배포까지)
create-react-app 리액트 앱을 CRA없이 처음부터 만들려면 웹팩, 바벨 등 설정해줘야하는 사항들이 정말 많다. 이번에 웹팩으로 리액트 앱을 만들면서 많이 헤맸는데 프로젝트를 시작하기도 전에 힘이 빠지는 느낌이었다. 그동안 CRA가 얼마나 편리하고 편하
HTTP + OSI 7계층
Bebel 브라우저 별로 최신 ECMAScript(JavaScript) 문법을 지원하지 않는 경우에 대응하기 위해, JavaScript 코드를 이전 버전에서 호환되는 버전으로 변환해주는 컴파일러입니다. 이 덕분에 브라우저 지원 또는 호환을 기다리지 않고 바로 새로운 표
[TIL] 개발일지 2일차
자 그럼 Docker를 진행하기 전에 NodeJS의 테스트와 구조부터 만들어보자. npm init을 통한 package.json 구성 이미지 참조 이게 바로 NodeJS이며 이것만 본다면 떠오르는것이 있죠...? 바로 메이븐과 그래들! 말그대로 패키지 버전 등을 관리해
[스터디] 우테코 프로젝트의 코드를 뜯어보자 ft. config
약 한달 조금 넘는 기간동안 진행했던 TypeScript 스터디를 마치고, 다음 스터디로 무엇을 진행할까 하다 나온 주제가 '오픈 소스 열어보기'였다. 그렇게 새로 진행한 오픈소스 스터디!
바벨 프리셋, 웹팩과 함께 사용하기
바벨은 여러 플러그인들을 모아둔 프리셋들을 제공하는데, 대표적으로@babel/preset-env@babel/preset-react@babel/preset-typescript @babel/preset-flow이렇게 총 4가지가 있다. ECMAScript2015+ 문법을
Babel 사용해보기
바벨 공식 홈페이지바벨은 자바스크립트 컴파일러이다.바벨은 현재 환경이나 더 오래된 브라우저 환경에서 ECMAScript2015+(ES6, ES7) 문법들을 사용할수 있도록 변환해주는 역할을 하는 도구이다 .위의 코드의 const 변수선언과 화살표함수는 ES6 문법이다.
[Web] 모듈 번들러란? (Webpack, babel)
모듈 번들러의 필요성과 기본 개념에 대해서 알아본다. 모듈 번들러 중 가장 많이 쓰이는 Webpack의 구조와 장점에 대해서 배우고 함께 쓰이는 babel의 개념에 대해서도 알아보자.
webpack과 babel (zum 과제 직접만들어보기)
저는 이번에 zum에서 신입사원 과제로 나온 리스트를 보며 생각이 굉장히 많아 졌습니다.지금까지 저는 라이브러리로 나온것들을 npm install하며 설치하고 세팅만 해왔었고, 이 라이브러리들의 구조가 어떤식으로 되있는지 깊이 공부하지 않았기 때문이죠. 따라서 직접 하
Babel 기본
Babel 의 용도 babel은 자바스크립트 컴파일러다. ES6 를 ES5 로 컴파일해서 구형 브라우저에서도 돌아갈 수 있게 해준다거나, JSX 를 JS 로 컴파일해서 리액트를 js 로 변환시켜주기도한다. 바벨 사용법 babel doc 을 참고했다. 먼저 babel
[React]-꼭 알아야 할 리액트 툴과 extension!
바벨(Babel)은 자바스크립트 transcompiler임!유저가 최신 자스 문법을 지원하지 않는 브라우저를 사용할 때, 리액트로 개발할 때 최신 문법을 사용해도 이 바벨을 이용해서 플젝을 빌드할 때 사용자에게 배포하기 전에 최신 문법을 예전 버전으로 변환해주는 컴파일
React 프로젝트 세팅을 위한 바벨 알아보기
자바스크립트 버전 중 ES6(ECMAScript 2015) 이상의 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스크립트 코드로 바꿔주는 혹은 트랜스파일(transpile) 해주는 자바스크립트 컴파일러라고 공식 홈페이지에서 정의하고 있다.react 프로젝트를 세팅
create-react-app 없이 리액트 프로젝트 생성하기(webpack)
cra 없이 react 프로젝트를 만들면서 webpack을 공부해보자
babel이 있는데 polyfill이 왜 필요할까?
polyfill은 인터넷 익스플로워 같은 이전 브라우저에서 동작할 수 있게 하는데 필요한 코드이다.Babel이 있는데 왜 polyfill이 필요할까?Babel은 자바스크립트 컨파일러이다. 빠르게 변화하는 프론트엔드 시장에서 최신 ES문법을 이전 브라우저가 사용하게 하기
Babel이란?
자바스크립트 코드를 변환(transpile)해주는 도구이다.ES6부터 추가된 새로운 문법들을 예전 버전의 자바스크립트 문법으로 변환하여 사용할 수 있게 해준다. 이를 통해 새로운 기능들을 지원하지 않는 브라우저에서도 실행이 가능하게 된다. 또한 다양한 환경에서 자바스크
현업에서 테스트 환경 복구하기
우리 회사의 테스트 환경이 유지보수되고 있지 않아 테스트 환경을 복구하는 업무를 맡게 되었다.jest를 실행하며 마주한 에러들과 그것을 해결했던 과정을 공유하고자 한다.