전체 글87 [React] Router 터미널에서 라우터 설치npm install react-router-dom index.js에서 import 하고 import {BrowserRouter} from 'react-router-dom';아래와 같이 BrowserRouter로 App을 감싸준다.ReactDOM.render( , document.getElementById('root')); HashRouter를 쓰면 /#/ 로 전송되고 그 데이터는 서버에 전송되지 않음import {HashRouter} from 'react-router-dom'; App.js에서 importimport {Route} from 'react-router-dom'; 그리고 아래와 같이 추가하고 메인 .. 2021. 5. 21. [React] react-bootstrap https://react-bootstrap.netlify.app/ React-BootstrapThe most popular front-end framework, rebuilt for React.react-bootstrap.github.io 여기 들어가면 react에서 쓰는 부트스트랩을 사용할 수 있다.get started 클릭해서 설명 읽어본다. 방법 1. 먼저 터미널에 입력하고 설치npm install react-bootstrap bootstrap@4.6.0 그리고 사용 시에는 import를 해준다.import Button from 'react-bootstrap/Button'; // or less ideally import { Button } from 'react-bootstrap'; 혹은 방법2. p.. 2021. 5. 21. [Project][Springboot] api 활용 api를 이용해서 등록, 수정, 조회를 해보려고 한다. c(r)ud 책에서 Layer에 대해 설명한 내용은 아래와 같다. 내가 스프링으로 이해하고 도식화해 본 것이라 Mapper랑 VO는 갈길을 잃었다. 여기서 Business모델 처리하는 Service계층은 데이터 접근과 웹 구현 사이에서 중간다리역할을 함 실습>> 이렇게 클래스 생성 먼저 PostsApiControllerpackage co.kr.project2.web;import co.kr.project2.domain.posts.PostService;import co.kr.project2.web.dto.PostSaveRequestDto;import lombok.RequiredArgsConstructor;import org.springfra.. 2021. 5. 20. [React] import/export App.js// eslint-disable-next-lineimport React, { useState } from 'react';import './App.css';import datas from './data.js';function App() { let [data, dataChange] = useState(datas); return ( { data[0].no } {data[0].name } );}export default App; data.jsexport default [ { no : 0, name : "number0" }, { no : 1, name : "number1" }, { .. 2021. 5. 16. [React] input import React, { useState } from 'react';import './App.css';function App() { let [userInput, userInputChange] = useState(''); return ( { userInputChange(e.target.value) } }/> {userInput} );}export default App;위와 같은 코드를 작성할 때 userInput변수에 입력된 값을 받아 변경하고 그 값을 출력할 수 있다.e.target.value의 쓰임을 잘 알아두자 // eslint-disable-next-lineimport React, { useState } from 'react';import '.. 2021. 5. 16. [React] props 이전 단계에서 만들었던 모달 짠! 이라는 글자는state3을 누르면 나타났다가 다시 누르면 사라진다. 이때 짠 state3 이라고 표현하고 싶으면(클릭한 내용도 같이 나타내고싶으면) 이렇게하면 안된다.why? function Modal이랑 function App은 같은선상에 있기때문에App밑에있는 state a를 사용하기위해서는 도구가 필요하다 Props 컴포넌트를 App의 자식컴포넌트라고 한다.Modal에서 변수를 전송하는 역할을 하는게 props기능이다먼저 컴포넌트 구현부인 부분에서 전송할 내용을 입력한다. 보낼 변수명은 새로 만드는 것이며 보통 통일해서 사용한다.그다음 function Modal로 가서 파라미터값을 props로 넣어준다.구현할때는 props.a props.aa props.a[.. 2021. 5. 15. 이전 1 2 3 4 5 6 7 8 ··· 15 다음
