반응형 Java38 알기 쉽게 정리한 Babel이란? 프론트엔드 개발자를 위한 웹팩 Babel이란?React 프로젝트 생성 도구 내부에 기본적으로 Babel이 구성되어 있습니다.즉, React를 사용하여 프로젝트를 구성한다는 것은 Babel을 사용하여 프로젝트를 구성한다는 것입니다. 브라우저는 JSX를 이해하지 못합니다.그래서 Babel이라는 통역사로 JSX -> JavaScript로 변환해서 브라우저에게 알려줍니다. JavaScript는 시대가 변함에 따라 문법에 변화가 생겼습니다.JavaScript의 어떤 최신 문법들을 최대한 많은 브라우저가 호환할 수 있게끔 변환해 줍니다.=> 브라우저의 버전이 최신 버전이 아니라면 해석할 수 있는 JavaScript의 문법이 최신 버전이 아닐 수 있기 때문즉, Babel은 기본적으로 JSX의 문법을 JavaScript 문법으로 변환해서 브라우저에.. 2024. 10. 7. [React] 실시간으로 input 값을 숫자만 입력 받는 방법 다음 예제를 통해 실시간으로 input 값을 어떻게 숫자만 입력받을 수 있는지 살펴봅시다.다음은 HTML의 Form과 input을 사용해서 상품 코드를 숫자만 입력 받는 관리자 페이지입니다. 요구 사항상품 코드는 숫자로만 이루어져 있습니다.상품 코드를 입력하는 도중에 숫자가 아닌 문자를 입력하면 input 요소 밑에 error 메시지를 나타내며, '등록' 버튼을 비활성화 합니다.상품 코드를 정상적으로 등록하면 "상품 코드가 등록되었습니다."라는 메시지와 등록된 상품 코드를 나타냅니다. 1. HTML 구조 설계div (Form)forminput / buttondiv (Modal)divspan / p컴포넌트는 상품 코드를 입력할 수 있는 form 컴포넌트, 안내 메시지를 보여주는 modal 컴포넌트를 사용합.. 2024. 10. 3. [React] input 소문자를 대문자로 변환하는 방법 다음 예제를 통해 input 값을 어떻게 대문자만 입력받을 수 있는지 살펴봅시다.다음은 HTML의 Form과 input을 사용해서 대문자만 입력받는 페이지입니다. 1. HTML 구조 설계divforminput / buttonJSX 문법 특성상 최상위 요소는 태그를 사용합니다.그리고 명확하게 하기 위해 시맨틱 태그인 요소를 사용합니다.그 안에 input 요소와 button 요소를 사용하여 HTML 구조를 설계합니다.아래 그림을 참고해 주세요. 생성 2. state 변수 추가input의 value 값을 관리하는 state 변수를 추가합니다.const [value, setValue] = useState(""); 3. handleInputChange 함수 개발handleInputChan.. 2024. 10. 2. 알기 쉽게 정리한 package.json 총 정리 : 프론트엔드 개발자를 위한 웹팩 package.json이란?package.json이 무엇인지 알기 이전에 직접 package.json을 만들어 보자. package.json을 만들 폴더로 이동을 한 후에 아래 명령어를 입력한다.$ npm init$ npm init -y 정말 알기 쉽게 정리한 npm이란? 해당 명령어를 실행시키면 package.json이라는 파일이 생성된다. 그리고 생성된 파일의 모습은 아래와 같다. package.json{ "name": "packagejson-started", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], .. 2024. 9. 29. 이전 1 2 3 4 5 6 7 ··· 10 다음 반응형
