Jun's Blog

1. 회원 가입 페이지 만들기SignupPage.js 파일 추가 import { Button, Container, Form } from "react-bootstrap";function App(){    console.log('회원 가입');    return(        Container className="mt-5">            h2 className="text-center mb-4">회원 가입h2>            Form>                Form.Group className="mb-3 d-flex align-items-center" controlId="forName">                    Form.Label className="me-3 d-flex align..

1. 파일 생성 및 npm 추가 설치 진행react-router-dom : React 애플리케이션에서 클라이언트 측 라우팅을 구현하는 데 사용하는 라이브러리npm install axios npm install react-router-dom※ 아래의 명령어는 이전 내용에서 설치 진행함.npm install bootstrapnpm install react-bootstrap    app.js 파일 추가function App(){    console.log('메인');    return(            );}export default App;Homepage.js 파일 추가 function App(){    console.log('홈페이지');    return(        홈페이지    );}export..

1.  카테고리 정보를 한글, 영문으로 모두 표시하고 정렬 기준도 추가해보기 1.1 카테고리(영문), 카테고리(한글) 정렬 기준 세분화 하기content.js  파일 수정 및 추가 부분                                Dropdown.Menu>                                    Dropdown.Item id="name" onClick={ClickButtonGroup}>이름Dropdown.Item>                                    Dropdown.Item id="price" onClick={ClickButtonGroup}>가격Dropdown.Item>                                    Dropdo..

1.  카테고리별 필터링 콤보박스 추가하기 1.1 콤보 박스 생성하기App.js  파일 수정 및 추가 부분            Card.Body>                Content contents={products}                 onClickToContent={ClickArrived}                 categories={category}                onOrderbyClick={ClickOrderBy}                orderInfo={orderInfo}                onChangeCategory={CategoryChanged} />            Card.Body>     // 필드 검색 : 전체 상품 중에서 특정한 상..

1. 데이터 정렬하기 1.1 신규 데이터 추가 App.js  파일 수정 및 추가 부분     const [products, setProducts] = useState([        {id:1, name:"프렌치 바게트", price:1000, category:'bread', stock:111, image:'french_baguette_01.png', description:"프랑스의 대표적인 빵 중 하나로, 길쭉하고 얇은 형태의 식빵입니다. 바삭하면서도 촉촉한 식감과 진한 맛이 특징입니다."},        {id:2, name:"크로와상", price:2000, category:'bread', stock:222, image:'croissant_02.png', description:"프랑스의 대표적인 베..

1. 하단부 버튼 클릭이벤트 생성 및 처리하기 - (3) 1.1 삭제버튼 클릭시 선택된 정보 삭제하기App.js  파일 수정 및 추가 부분        }else if(mode === 'get_delete'){ /* 상품 삭제 */            const remainProduct = getExceptData(selectedId);            setProducts(remainProduct);            setMode('read');           아래의 미니샵 홈페이지 만들어보기(with React Bootstrap) - (4) 에서 만들었던 getExceptData를 재사용합니다.    const getExceptData = (id) => {        // 상품의 아이디가..

1. 하단부 버튼 클릭이벤트 생성 및 처리하기 - (2) 1.1 수정버튼 이벤트 클릭시, 선택된 기준의 데이터를 수정할 수 있는 화면 만들기App.js  파일 수정 및 추가 부분         }else if(mode === 'get_update'){ /* 수정 버튼(get 방식) */            const currentRow = getReadContent(); //currentRow : 현재 선택된 행 정보            return UpdateContent formData={currentRow} />;        }else if(mode === 'post_update'){ /* 수정 버튼(post 방식) */import UpdateContent from './components/Upd..

1. 하단부 버튼 클릭이벤트 생성 및 처리하기 - (1) 1.1 버튼 이벤트 생성하기App.js  파일 수정 및 추가 부분            Card.Footer>                Bottom message={message} onClickToBottom={ModeSelected}/>            Card.Footer>   const ModeSelected = (mode, event) => {        // 사용자가 클릭한 버튼의 mode 정보로 변경        console.log('received mode : ' + mode);        setMode(mode);    }  Bottom.js  파일 수정 및 추가 부분     const onClickToBottom = po..

1. 클릭 이벤트 활용하여 상세 보기 만들기 App.js  파일 수정 및 추가 부분    /* 모드 :  read, insert, update, delete, detail 등등 */    const [mode, setMode] = useState('');        /* selectedId : 선택된 행 index */    const [selectedId, setSelectedId] = useState(1);    /* 테이블 특정 항목 클릭시 동작하는 함수 */    const ClickArrived = (id, event) => {        console.log('선택한 아이디 : ' + id);        setSelectedId(Number(id));        setMode('deta..

1. 기본 구조 만들기 신규 폴더 생성 : coffee_bread_shop, components 신규 파일 생성 : Bottom.js, Content.js, Top.js, App.css, App.js Top.js 파일 내용function App(){    console.log('Top');    return(                    Top            );}export default App; Content.js 파일 내용 function App(){    console.log('Content');    return(                    Content            );}export default App;Bottom.js 파일 내용 function App(){    c..