전체 글67 리엑트 컨포넌트 이미지 및 스타일 넣기 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. 리엑트 개발 환경 구축 _ Create React App 으로 생성 1. React 프로젝트 생성 npx create-react-app namename은 내가 만들 폴더명이름이다. ctrl +c 작업을 종료한다. cd.. 상위 폴더로 이동npx create-react-app my-app y누르기상위 폴더인 dev에 my-app 이름을 가진 리엑트 프로젝트가 생성된다. 2. React 프로젝트 실행 성공했다고 한다. 친절하게 타이핑도 알려준다. cd my-app 현재 위치가 dev이므로 작업 할 프로젝트로 이동한다.npm start 3. 작업src/App.js 가 자동 생성되는데 이 안에서 작업하면 된다. 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. 이전 1 2 3 4 ··· 12 다음
