React Routes는 리액트 기반의 웹 애플리케이션에서 클라이언트 측 라우팅을 관리하기 위한 네비게이션 라이브러리로써해당 URL에 맵핑을 시키기 위해서 사용한다. ## 문제그러면 보통, 게시글 같은 리스트의 id값을 리스트로 뿌려주게끔 만들었다. 그것을 route로 받고 싶으면 어떻게 할까? {cards.map((card, index) => ( {card.images?.map((img, i) => ( ))} {card.title} {card.address} {card.hours} ))}위와 같이 React js파일에서 리스트에 cards에 배열..

요즘 사이트들 보면 카카오 로그인, 구글 로그인, 네이버 로그인 등 많다.그래서 필요시 사용할겸 구현 해보았다 # kakao login processhttps://developers.kakao.com/docs/latest/ko/kakaologin/common Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com # client sectionreact 폴더에서 npm install react-router-dom 설치 해주기. router 사용할 준비가 되었다. # App.js에서 // App.jsimport React from 'react';import {..

springboot 터미널 창에서 # springboot + react 연동 1. react installcd src/main 해당 위치에서npx create-react-app react(원하는 이름)약 1~2분 기다리면 src/main 아래에 react라는 폴더 만들어짐. 2. react startcd reactnpm start 인터넷 브라우저에서 주소 : localhost:3000 3. springboot와 react 간에 proxy 열기 하는 이유 : 안하면 콘솔창에 CORS 관련 에러 나옴. package.json 파일 안에서proxy : "http://localhost:8080" application.yml에서 port 변경시 그 port로 적어주기 4. axios 설치터미널 react 폴더 위..

리액트는 어쩌다 만들어졌을까? 배경 dom을 직접 건드리는 작업은 번거롭다. React의 발상 dom을 전부 날려버리고 다시 만들어서 보여주자 문제점 매번 이렇게 하게되면 다양한 문제가 발생 해결 메모리게 가상DOM을 만든다. 업데이트가 필요한 부분만 가상DOM으로 수정한다. 그 이후 REACT의 알고리즘을 통해 다른 부분을 감지하여 실제 DOM에 패치 시켜준다. 웹 애플리케이션의 규모가 커지면, DOM 을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉬움 리액트는 어떠한 상태가 바뀌었을때, 처음부터 모든걸 새로 만들어서 보여주자는 아이디어에서 시작 속도와 성능 문제는 Virtual DOM으로 해결 Virtual DOM은 메모리에 가상으로 존재하는 DOM으로 (자바스크립트 객체) 변경 속도가 빠름 Vi..