본문 바로가기

React11

[React] webpack.config / babel 환경설정 용어정리 오늘은 헷갈리는 webpack.config 설정을.. 제가 공부하려고 제나름대로 정리해봤습니다... const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { name: 'react-project', mode: 'development', resolve: { extensions: ['.js', '.jsx'], }, entry: './src/index.jsx', plugins: [ new HtmlWebpackPlugin({ template: 'index.html', filename: 'index.html', }), ], module: { rules: [ { test: /\.jsx?.. 2023. 3. 2.
[React] Webpack에대해.. 오늘 포스팅에서는 Webpack에대해 알아보겠습니다.. 구글에 Webpack을 검색하면 설명란에 이렇게 나와있습니다.. 웹팩은 오픈 소스 자바스크립트 `모듈 번들러`이다. 주로 자바스크립트를 위한 `모듈 번들러`이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 심지어는 이미지와 같은 프론트엔드 자산들을 변환할 수 있다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산들을 생성한다 `모듈 번들러` 라는 설명이 나와있습니다. 설명에 앞서 모듈 번들러를 잘라서 설명드리자면 - 모듈 : 프로그램을 구성하는 구성요소로, 관련된 데이터와 함수를 하나로 묶는 단위입니다. 하나의 파일이 하나의 모듈이다 라고 생각하시면 될것같습니다. - 번들러 : 의존성있는 모듈 코드를 하나의 파일로 만들어주.. 2023. 3. 2.
[React] Babel에 대해서 이번 포스팅에서는 Babe에 대해서 알아보겠습니다. 목차 1. Babel 이란? 2. Babel 사용법과 예제 1. Babel 이란? Babel은 Javascript 코드를 변환해주는 도구 혹은 Javascript를 컴파일 해주는 도구 라고 생각하시면 되겠습니다. Babel 공식홈페이지(https://babeljs.io/docs/) 문서에는 Babel은 "Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 도구 체인입니다" 라고 설명이 되어 있습니다. 흔히 인터넷에 검색을 해보면 [ 6to5 ] 즉 , ES6 문법의 코드를 ES5 문법으로 변환해주는 역할을 합니다. 그럼 왜 ES6 코드를 ES.. 2023. 2. 27.
[React] 공식문서의 주요개념 간단한 설명 이번 포스팅에서는 https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org React 공식 홈페이지에서 나와있는 주요개념에 대해 간단하게 개념정도만 설명하도록 하겠습니다. 1. JSX JSX 는 Javascript XML 의 줄임말입니다. const element = Hello, world!; 위의 예시는 HTML도 아니고 문자열도 아닙니다. JSX라고 합니다. 값을 표현할때에는 {} 중괄호 안에서 표현하며 const element = ; 항상 태그를 닫아주셔야 합니다. ※ 공식 홈페이지에서는 ※ ES6 및 JSX 코드가 올바르게 표시되.. 2023. 2. 23.