# babel

240개의 포스트
post-thumbnail

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

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

약 10시간 전
·
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개의 댓글
post-thumbnail

[무작정 따라하기] 나.리액트.쓰는데.내.동년배들.다.JSX.쓴다.

JSX(Javascript XML)은 함수 호출과 객체 생성에서 문법적 편의를 제공하는 Javascript의 확장된 구문이다 . JSX는 React.createElement()를 반복적으로 호출해야하는 불편을 해소할 수 있으며, Javascript의 모든 기능을 쓸 수

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

instagram-backend 1.( setup with apollo,graphql, bable )

1.instagram-backend setup mkdir insta cd insta npm init -y code . Vscode 에서 extension으로 가서 gitignore command palette에서

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

SET UP

설치 페이지Windows Installer 설치 후 실행 (OS에 맞는 Installer로 설치)Javascript 프로그래밍 언어를 위한 패키지 관리자, Node.js의 패키지 관리자open sourceCLI를 사용해 사용자에게 필요한 패키지를 설치, 삭제등 관리설치

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

[React] React + TypeScript + webpack + babel 프로젝트 초기 셋팅하기

CRA 는 Create React App의 약자이다. React를 처음 시작하는 사람들이 쓰기 좋다! 왜냐면 알아서 최적의 개발환경을 만들어주기 때문이다. CRA는 Webpack과 Babel을 따로 설치, 설정하지 않아도 된다. 그래서 편리하지만하지만 프로젝트 규모가

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

React CRA를 이용하지 않고 프로젝트 생성

CRA를 사용하지 않는 이유불필요한 모듈의 설치Webpack.config.js를 이용해 여러 옵션을 변경할 필요가 있을 경우프로젝트 생성 하기react를 사용하기 위한 기본 설치 패키지패키지를 설치 후 package.json파일을 확인 하면 아래와 같다package.j

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

styled-components 사용해 보기

React에서 styled-components 사용해 보기

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

바벨(babel) 실습

바벨은 주로 ECMAScript 2015+ 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 주로 사용되는 도구이다.

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

React CRA를 이용하지 않고 프로젝트 생성(1)

CRA를 사용하지 않는 이유 불필요한 모듈의 설치 Webpack.config.js를 이용해 여러 옵션을 변경할 필요가 있을 경우 프로젝트 생성 하기 react를 사용하기 위한 기본 설치 패키지 패키지를 설치 후 package.json파일을 확인 하면 아래와 같

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

유튜브 클로닝 #1-3 Set Up: Babel & devDependencies

바벨 Babel Bable is a JavaScript compiler. 최신 자바스크립트를 node.js 혹은 브라우저가 이해할 수 있는 자바스크립트로 변환하는 것. 설치

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

React 시작하기

react-dom & ReactDOM.render() / react-app과 Webpack, Babel 알기 / JSX 사용하기 / 조건부 렌더링

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

[Webpack] babel

💡 webpack과 babel이 서로 특별한 관계가 있는 것은 아니지만 webpack을 설정할 때 주로 babel을 추가하므로 설명하고 넘어가겠습니다. 📖 In computing, a compiler is a computer program that translate

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

0325 개발일지

지난 화요일부터 오늘 오전까지 제안서 검수 작업을 마무리하고 남는 시간에 react webpack 부분 강의를 짧게 들었다. 이전 html의 script 태그 안에 구현했던 구구단 클래스, hook을 별도 파일로 분리해 webpack으로 연결하는 연습을 했다. 예전 n

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

React webpack 설정하기

인프런 웹 게임을 만들며 배우는 React 강의를 듣고 정리함이전까지는 각 컴포넌트를 만들 때 마다 html에 새로운 script태그를 생성해 작성했었다. 그런데 한 페이지에 컴포넌트가 엄청나게 많기 때문에 기존 방식으로는 html문서가 너무 길어져서 유지보수가 어렵고

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

Babel.js

Babel 바벨이란? >자바스크립트의 ES6의 코드를 EX5 코드로 변환해주고, 리액트의 JSX 문법, 타입스크립트, 코드 압축, Proposal 까지 처리해줍니다. Babel package 설치 프로젝트에 따라 설정이 다를 수 있으므로 전역으로 설치하지 말고 로컬로

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