React & JSX6 리엑트 컨포넌트 이미지 및 스타일 넣기 1. 이미지 외부에서 호출하기assets/images/이미지명 - 클래스 컨포넌트에서 작업import React from "react";class Hello extends React.Component{ static defaultProps = { image : 'cute_puppy', label : '귀여운 강아지입니다.' } //사용자 정의 메소드 getImageURL(){ const image = this.props.image; const url = require(`../assets/images/${image}.png`); return url; } render(){ //const image.. 2024. 12. 3. 리엑트 컨포넌트 만들어 연동하기 1. src /파일/폴더.jsxsrc/파일/컨포넌트명.jsx src/conponents/Hello.jsx 파일명은 통상적으로 대문자로 만든다. 직관적이기 때문 2. app.js에서 호출import 컨포넌트명 from '경로 ';import Hello from './conponents/Hello';function App() { return ( );}export default App; 3. 컨포넌트 만들기- 클래스 컨포넌트 작성법 자신만의 생명주기, 메소드, 생성자등을 가질 수 있다. web 에서는 현재 거의 사용하지 않는다... 2024. 12. 3. package 속 불필요한 모듈 삭제 1. package.json 안에서 불 필요한 모듈을 삭제한다. 2. npm install 2024. 12. 3. 리엑트 프로젝트 jsx 작업 index.js 1. JavaScript 변수로 jsx에 임베디드(embedded) 하기 2. css방식 style 적용하기 3. Javascript 방식 style 적용하기 4. css 파일 로드하기 (리엑트 개발 환경 구축 _ Webpack 설치 _ 2 에 자세히 있음) 1) npm i css-loader 설치하기 2) webpack.config.js 에 모듈로 추가 { test: /.css$/, loader: ‘css-loader’ } 3) js에서 import 하기 import ‘./index.css’; 5. Jsx에 Style 인스타일로 적용하기 import * as React from 'react';import * as ReactD.. 2024. 12. 3. 리엑트 개발 환경 구축 _ Webpack 설치 _ 2 1. webpack, babel 파일생성webpack.config.js 작성const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', .. 2024. 12. 2. 리엑트 개발 환경 구축 _ Webpack 설치 _1 1. nodeJs 설치, vscode 설치** cmd 혹은 vscode터미널에서 node -v 와 npm -v 를 검색해 설치 여부와 버젼 확인이 가능하다. 2. packagenpm init -ypackage.json 생성됨 3. React , Babelnpm install react react-dompackage-lock.json 생성됨 npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-reactpackage-lock.json 파일을 보면 babel 추가됨을 알 수 있다. 4. Webpack npm install --save-dev webpack webpack-cli html-webpack-plugi.. 2024. 12. 2. 이전 1 다음
