# babel

298개의 포스트

babel 이해하기

자바스크립트의 최신 문법으로 코드를 작성하더라도, 일부 브라우저에서는 js의 최신 문법을 지원하지 않을 수 있다. 모든 환경에서 내가 작성한 코드가 동작하도록 하려면 처음부터 보수적으로 코드를 작성하거나 이전 버전으로 변환해야 하지만 쉽지 않은 일이다. 이러한 변환 과

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

WebPack 이란??

웹팩에서는 자바스크립트, 스타일시트, 이미지 등 모든 것을 모듈로 본다.브라우저 동작시 필요 js 파일들을 모두 가져오게 되는데 그렇게 되면 js 가 늘어날 수록 웹앱이 무거워진다. 즉 통신이 있을 때마다 소스를 로딩해야해 비용이 많이 든다. 이걸 해결하기 위한 도구가

5일 전
·
0개의 댓글
·

Next.js) Parsing error: Cannot find module 'next/babel' Error

Next.js 프로젝트를 새로 생성하고 보면, 상단에 빨간색 밑줄로 다음과 같은 에러가 뜬다.Parsing error: Cannot find module 'next/babel'프로젝트가 존재하는 위치에 .babelrc 파일을 생성하고 그안에를 추가한다.그다음에 똑같이

2022년 11월 21일
·
0개의 댓글
·
post-thumbnail

NextJS/Babel에러

babelrc파일을 생성{ "presets": "next/babel", "plugins": \[]}eslintrc.json 파일 열기{ "extends": "next/babel","next/core-web-vitals"}NextJS 프로젝트를 vscode에서 하나

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

바벨(Babel) 설정하기

바벨은  트랜스파일러로 최신 자바스크립트(타입스크립트, JSX 포함)가 모든 브라우저에서 동작하도록 변환해 줍니다.실행이 안되는 구버전 웹브라우저를 대응하기 위해 배포할 때에 예전 방식의 자바스크립트로 변환해서 배포하려고 사용합니다.파싱(Parsing): 코드를 분해하

2022년 10월 31일
·
0개의 댓글
·
post-thumbnail

Babel 이거 왜 쓰는거?

Babel이 뭘까

2022년 10월 24일
·
0개의 댓글
·

YouTube Clone. setting

유튜브 backend 만들기expressbabelnodemon등등 사용\-jmTube folder를 하나만들고\-npm init 하면,\-package json이 생긴다.\-npm i express\-extension에서 gitignore\-git에 repository

2022년 10월 17일
·
0개의 댓글
·
post-thumbnail

[TIL / React] Webpack + Babel 직접 설치하여 React 프로젝트 만들어보기

옛날 `create-react-app`을 지원을 안 했을 때, 리액트 조상님들은 한 리액트 프로젝트를 만들기 위해서 환경설정을 다 해주어야 했다. 지금은 편하게 명령어 하나만 입력하면 끝나는 일이 되었다. 하지만 개발자가 되어서 리액트를 사용하는데 그 기반을 구성하는

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

React Boilerplate 만들기

CRA 없이 Webpack + React + TypeScript + Babel + Prettier + ESLint로 프로젝트 초기 설정을 해보자

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

프론트엔드 개발환경 - 바벨(Babel)

크로스 브라우징의 혼란을 해결ECMAScript2015+로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다타입스크립, JSX처럼 다른 언어로 분류되는 것 또한 호환되게 만들어 준다VariableDeclaration : const → var 변환 등의 작업을

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

Babel이란?

Babel Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 코드로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스컴파일러이다. 즉, ES6 이전에 사용

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

WebPack과 Babel 그리고 Polyfill에 대해

그동안 궁금했던 웹팩과 바벨 폴리필에 대해 나름 정리해 본 글입니다.

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

바닐라 자바스크립트에 Babel 적용(기초)

id가 “root”인 div 태그에 “Hello Wrold!” 문자열이 들어간 자식 엘리멘트를 추가한 결과 "Hello World"문자열이 들어간 위치 및 형태바닐라 자바스크립트 : h1 태그 객에 하위에 innerHTML, innerText에 "Hello World"

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

[React]리액트 맛보기: 리액트 라이브러리, Babel, JSX

안녕하세요! 9월 말에 접어들면서, 급격히 날씨가 선선해졌습니다.. 9월은 비염의 계절이자 새 학기의 계절이지요? 새 학기가 되면 새로운 시도를 하고 싶어지기 마련입니다.. 영광스럽게도 이번에 제가 저희 동아리의 웹 개발 프로젝트 팀에 들게 되었다는 점 그

2022년 9월 21일
·
0개의 댓글
·
post-thumbnail

웹팩(webpack)과 바벨(babel)

웹팩은 오픈소스 자바스크립트 모듈 번들러이다.여러개로 나누어져 있는 많은 파일들을 하나의 자바스크립트로 압축하고 최적화하는 라이브러리이다.왼쪽의 엄청 많은 파일들을 모아서 오른쪽처럼 js파일 하나, css파일 하나, jpg파일 하나, png파일 하나 이렇게 만들어준다.

2022년 9월 17일
·
0개의 댓글
·
post-thumbnail

📋 모던 자바스크립트 Deep Dive | 49장 Babel과 Webpack

모던 자바스크립트 Deep Dive 도서의 49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축을 정리하였습니다. 49.1 > Ref 이웅모 저, ⌜모던 자바스크립트 Deep Dive⌟, 위키북스

2022년 9월 17일
·
0개의 댓글
·

Webpack, Babel, Polyfill

Webpack > 웹팩은 여러개의 파일을 하나로 합쳐주는 모듈 번들러 웹팩(Webpack)은 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 한다. 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build)라는 과정을 통

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

Webpack과 Babel이란? | 개발환경 구축하기

예전에도 한번 블로그에 정리한 기억이 있는데, 사람은 역시 계속 상기시키지 않으면 까먹는다 .. 다시 제대로 정리하고 제대로 기억해보려고 이렇게 글을 씁니다..바벨은 대표적인 트랜스 파일러다.트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 것아

2022년 9월 7일
·
0개의 댓글
·
post-thumbnail

기타 공부

SpringBootApplication 어노테이션은 스프링 부트의 자동 설정, 스프링 Bean 읽기와 생성 자동 설정 등을 해주는 어노테이션입니다.해당 어노테이션이 있는 위치부터 설정을 읽어나가기 때문에 이 어노테이션을 포함하고 있는 클래스는 항상 프로젝트의 최상단에

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