본문 바로가기

Front-end/React\RN21

리액트 스프링부트 연동 API Gateway , CORS 처리 목표 리액트 클라이언트에서 스프링부트 인증서버 요청, API Gateway 서버 통과하여 인증서버 요청 리액트 import React, { useState } from 'react'; import {useNavigate} from 'react-router-dom' import Logo from '../Header/Logo'; import './Signup.css' import RightLayoutLinks from "../Header/HeaderLinks/RightLayoutLinks"; const authServer = "http://192.168.45.1:8100"; const SignupView = props => { const options = [ { value: "type", text: "직접 .. 2022. 12. 23.
리액트 Styled Components , CSS 모듈 Styled Components , CSS 모듈 React 에서는 컴포넌트 스타일링 방법이 두가지 있음 - Styled Components - CSS 모듈 1. Styled Components "Add Goal" 버튼 같은 경우 Styled Components를 통해 생성된 컴포넌트 Button.css .button { font: inherit; padding: 0.5rem 1.5rem; border: 1px solid #8b005d; color: white; background: #8b005d; box-shadow: 0 0 4px rgba(0, 0, 0, 0.26); cursor: pointer; } .button:focus { outline: none; } .button:hover, .button:a.. 2022. 12. 20.
리액트 자식 대 부모 컴포넌트 통신 컴포넌트간 데이터 전달 실행 Form 에서 받은 데이터를 App.js 과 통신 App.js import React from 'react'; import Expenses from './components/Expenses/Expenses'; import NewExpense from './components/NewExpense/NewExpense'; const App = () => { const addExpenseHandler = expense=>{ console.log("in app.js") console.log(expense) } return ( ); } export default App; NewExpense 컴포넌트를 import 하여 실행 addExpenseHandler 를 통해 자식 컴포넌트의 데이터.. 2022. 12. 8.
리액트 state 상태 저장, 업데이트 const App = () =>{ const [expenses, setExpenses] = useState(EXPENESES); const addExpenseHandler = expense =>{ setExpenses([expense, ...expense]); } } 스냅샷에 의존해서 상태 업데이트 하는 방식 // 가장 최신 상태의 스냅샷과 항상 계획된 상태업데이트 // 안전한 방법 const addExpenseHandler = expense =>{ setExpenses(prevExpenses =>{ return [expense, ...prevExpenses]; }); } HTML 삽입 미리보기할 수 없는 소스 2022. 12. 8.
리액트 배열 반복 map() 함수 활용, filter 리액트 프로젝트 생성 npx create-react-app frontend cd frontend npm start 반복된 컴포넌트 중괄호 { } 내에서 map을 통해 반복 { (props.items.map(expense => )) } index 에는 예상치 못한 에러를 발생할 수 있기때문에 db에서 받은 id를 key값으로 설정하는 것이 좋음 리스트를 변수로 관리, 동적(조건부) 렌더링 let expensesContent = No expenses found.; if(filteredExpenses.length > 0){ expensesContent = filteredExpenses.map((expense)=>( )); } --- map 사용 주의 Array.prototype.map() expects a r.. 2022. 12. 8.
리액트 Fetch API 와 axios 를 통해 서버와 통신하기 Fetch API 와 axios 를 통해 서버와 통신하기 참고사이트 fetch const loadContent= () =>{ const url = 'api/todolist' const options={ method:"GET" } fetch(url,options) .then((resp)=>{ return resp.json() }) .then( data => { console.log(JSON.stringify(data)) setListContent(data) }) } axios 구형브라우저 지원 요청 중단 가능 응답 시간 초과 설정 가능 CSRF 보호 기능 내장 JSON 데이터 자동변환 Node.js 에서 사용 npm install axios // api/todoinsert : 서버 url const han.. 2022. 6. 16.
리액트 Movie API를 활용한 영화 목록 사이트 react-router-dom 을 5버전대로 다운그레이드 npm install axios react-router-dom@5.2.0 bootstrap-bootstrap Link to 적용을 위해 index.js 에서 를 주석 처리 // // 네비게이션 Navigation.js import {Container, Nav, Navbar} from "react-bootstrap" import React from 'react'; const Navigation = () => { return ( Home MovieList About ); }; export default Navigation; Home MovieList About href 에 따라 링크 이동 Home.js import { useEffect, useStat.. 2022. 6. 7.
리액트 to-do-list 흐름 파악 App.js import { Component } from "react"; import Form from "./components/Form"; import TodoItemList from "./components/TodoItemList"; import TodoListTemplate from "./components/TodoListTemplate"; class App extends Component { id = 4; // 초기 데이터 정보 state = { input: '', todos: [ { id: 0, text: '할일1', checked: false }, { id: 1, text: '할일2', checked: true }, { id: 2, text: '할일3', checked: false }, { .. 2022. 6. 5.
리액트 프로젝트 생성 시작 노드 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * 노드 설치 오류 노드 설치 중에 오류가 생겼었는데 관리자 권한 설치고 문제 해결 설치 확인 node -v Visual Code 리액트 개발 툴로는 Visual Code가 좋다. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Li.. 2022. 6. 4.

티스토리툴바