# babel

251개의 포스트

Next JS가 Babel을 SWC로 대체한 이유

Next JS 12 버전이 SWC를 권장하는 이유

5일 전
·
0개의 댓글
post-thumbnail

[React] 02. JSX와 Babel

위 처럼 사용 가능JavaScript를 HTML처럼 사용할 수 있다! (JavaScript의 확장 문법)해당 JavaScript (React, ReactDOM 사용) 코드를 JSX를 사용해서 줄여보겠다.보이듯, JSX를 사용한다면 편하게 element 생성이 가능하다.

6일 전
·
0개의 댓글
post-thumbnail

webpack 과 Babel

여러개의 파일을 하나로 합쳐주는 모듈 번들러bundle = 묶음의존성이 있는 모듈 코드를 하나(또는 여러개) 파일로 만들어 주는 도구이며 브라우저 환경에서 잘 실행될 수 있도록 가공해 주는 역할을 한다.대표적인 번들러 -> webpack, RequireJS, Brows

2022년 6월 16일
·
0개의 댓글

CRA 없이 React 앱 설치 - #2_Babel

## Babel ### Step.01 Babel 사용 시 필요한 패키지 설치 터미널에서 작업 디렉토리에 `npm i -D @babel/core @babel/cli @babel/preset-react` 입력한다. - @babel/core : babel을 사용하기 위해

2022년 6월 15일
·
0개의 댓글

babel vs polyfill

최신버전 스크립트를 ES5 코드로 Transpiling 해주는 TranspilerJavascript의 Syntax로 읽히지만 정의되어 있지 않은 객체들을 정의해주는 개념(Promise, Map, Set 등)

2022년 6월 12일
·
0개의 댓글

JSX ? Babel? (220606)

JSX? Babel? Why JSX ? React.createElement VS JSX 가독성이 JSX가 넘사벽으로 좋음 아래 참고. babel과 같은 컴파일 과정에서 문법적 오류를 인지하게 쉽게 해줌 > 주제 React Vue > 위에서 보이는것처럼 저런

2022년 6월 6일
·
0개의 댓글

Babel & Polyfill

먼저 크로스 브라우징(Cross Browsing)에 대해서 설명해야 할 것 같다. 크로스 브라우징은 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많은데, 이러한 차이를 최소화 하여 브라우저, 환경에 영향을 최소한으로 받고 해당 웹 서비스를 사용할 수 있게 최적화를

2022년 6월 5일
·
0개의 댓글
post-thumbnail

Front-end 환경 세팅 정리

프론트엔드 개발을 위한 웹팩 설정

2022년 6월 5일
·
0개의 댓글

CRA랑 웹팩, 바벨, 빌드 차이

https://hianna.tistory.com/666

2022년 6월 3일
·
0개의 댓글

[React] JSX 2

이 전 글과 똑같이 위의 코드를 아래처럼 바꿔줄 수 있다.(대소문자 잘 지켜주자) 이렇게 코드를 작성하면 이 버튼이 아니라 텍스트로 나오는데 요소들을 하나도 포함시키고 있지 않아서이다. 이 전 글에서 작성한 title과 button의 코드를 가져와보자.

2022년 5월 24일
·
0개의 댓글
post-thumbnail

babel?

이런 에러가 떴다해주니까 바로 해결완참고글https://bobbyhadz.com/blog/react-module-not-found-cant-resolve-babel-runtime

2022년 5월 24일
·
0개의 댓글
post-thumbnail

Webpack으로 프로젝트 시작하기

node 프로그램 시작! -> package.json 파일 생성됨package.json에는 해당 프로그램의 기본정보 \-> package.json 생성해줌webpack을 설치D는 개발전용, @next는 webpack-cli와 메이저 버전 일치하기 위해webpack-cl

2022년 5월 19일
·
0개의 댓글
post-thumbnail

[TIL] 프론트엔드 Day 40

조금씩 꾸준하게

2022년 5월 16일
·
0개의 댓글
post-thumbnail

JQuery로 된 프로젝트에 리액트 뿌려보기

지금 내가 맡고있는 팀의 프론트 환경은 제이쿼리로 구성되어있다. 한 페이지의 모든 JS 코드들이 하나의 파일(...) 로 되어있어서 유지보수하기가 힘든 부분이 많다. 하나의 기능을 수정할려면 기존의 코드를 훑어 보면서 그기능을 구현한 함수가 어디있는지 찾아야하고 또

2022년 5월 16일
·
0개의 댓글
post-thumbnail

Babel (compiler, plugin, preset)

Babel is a JavaScript Compiler - 공식사이트 -자바스크립트를 다른 버전의 자바스크립트로 컴파일해주는 역활을 한다.자바스크립트 문법은 한가지가 아니다. es5, es6 등등 점점 변화하고 있다.그러나 사용자들의 사용환경은 모두 제각각이다. 어떤

2022년 5월 6일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] 리액트 맛보기 -1 (초격차 패키지)

😋 리액트 맛보기 🤨 리액트를 시작하기에 앞서... 리액트는 라이브러리의 구조를 가지고 있다. > 라이브러리 vs 프레임워크 > 라이브러리는 개발 편의를 위한 도구의 모음 프레임워크는 기반 구조까지 잡혀있음 > -> 라이브러리는 공구 -> 프레임워크는 공장

2022년 5월 4일
·
0개의 댓글
post-thumbnail

[패스트 캠퍼스 FE] Bundler

Bundler > 여러개의 파일을 하나의 파일로 묶어주는 역할을 함. > 참고 블로그 > Webpack vs Rollup vs Parcel > 위 세가지가 가장 많이 쓰이는 번들러임. > * Webpack ➡️ 다양하고 복잡한 프로젝트에 추천 (대부분이 선호)

2022년 5월 2일
·
2개의 댓글
post-thumbnail

[Babel] Babel을 사용하는 이유

"Babel은 자바스크립트 컴파일러입니다"Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+(ES6 이상) 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 툴체인입니다.Babel 공식문서우리가 운영하는 웹 사이트가 모든

2022년 4월 29일
·
0개의 댓글
post-thumbnail

[JS]What is Webpack

웹팩은 여러 파일을 하나로 합쳐주는 자바스크립트 번들러이다.하나의 entry point에서 시작하여 의존하는 모듈을 찾아내고, 결과적으로 하나의 결과물을 만들어 낸다. 웹팩은 모듈 시스템을 구성하는 기능 이외에도 컴파일 속도를 빠르게 해준다거나, 로더를 사용할 수 있다

2022년 4월 28일
·
0개의 댓글