본문 바로가기

Front-end76

Vue 3 쇼핑몰 만들기 - 1 (+ Spring Boot) Spring Boot 인텔리제이에서 간단하게 DataBase 사용하기 - View - Tool Windows - Database - Data Source 로그인 JWT 적용하고, 쿠키에 토큰 저장 개발자 도구에서 응용프로그램(애플리케이션)에서 확인가능 컨트롤러 @RestController public class AccountController { @Autowired private MemberRepository memberRepository; @PostMapping("/api/account/login") public ResponseEntity login(@RequestBody Map loginDto, HttpServletResponse httpServletResponse){ Member member = m.. 2023. 4. 16.
VUE 3 간단한 메모앱 실습 뷰 명령어 npm install -g @vue/cli 뷰 프로젝트 생성 vue create frontend 실행 cd .\frontend\ npm run serve 실행 화면 코드 App.vue Ground 컴포넌트 하나로 만들었다. Ground.vue Ground 뷰는 헤더, 메모, 푸터 컴포넌트들로 이루어져 있다. * 부트스트랩을 적용시키기 위해 index.html에 cdn을 작성했다. Memo.vue + 추가 {{ d }} template 태그 내에는 화면을 구성할 코드를 보통 작성한다. + 추가 {{ d }} v-for을 통해서 반복을 처리한다. 액션 처리는 @를 붙인다. 표시할 데이터는 중괄호 2개를 붙여 표현한다. {{ d }} js 코드는 script 태그내에 작성 import {reacti.. 2023. 4. 13.
리액트 포털 createPortal, HTML 이동 리액트 포털 ! 렌더링된 HTML 내용을 다른 곳으로 옮기는 것 일반적으로 컴포넌트를 사용하는 곳에서는 createPortal 을 사용하여 해당 컴포넌트의 HTML 내용을 포털을 통해 이동시킬 수 있다. 입력 오류시 나타나는 배경흐림과 모달 컴포넌트를 index.html 내에 옮길 것이다. index.html backdrop-root overlay-root 추가 ErrorModal.js import React from 'react'; import Button from './Button'; import Card from './Card'; import classes from './ErrorModal.module.css'; import ReactDOM from 'react-dom' const Backdrop .. 2023. 1. 11.
리액트 커스텀 컴포넌트 리액트 커스텀 컴포넌트 리액트에서 주로 컴포넌트를 재사용을 하는 것이 중요한 것 같습니다. 그래서 UI 컴포넌트를 재사용하는 것을 기록하려고 합니다. return ( Username 나이 유저 추가 ); 여기서 button 태그를 기본 html 태그를 사용하고 있는데 여기에 css 속성을 붙이고 해당 버튼 컴포넌트를 재사용하기 위해 커스텀 버튼 컴포넌트를 생성하여 사용하려고 합니다. Card 컴포넌트 경우 태그 안에 오는 컴포넌트를 css 적용시키게끔 작성 import React from 'react'; import classes from './Card.module.css'; const Card = props => { return ( {/* AddUser */} {props.children} ); }; .. 2023. 1. 10.
리액트 스프링부트 연동 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.

티스토리툴바