개발 기록

Spring Data JPA는 Java 오브젝트를 관계형 데이터베이스에 매핑하는 Java 표준이다. JPA는 개발자가 SQL문을 작성할 필요 없이 객체를 조작하는 것만으로 데이터베이스에 CRUD를 수행할 수 있게 해준다. 대표적인 JPA 기반 구현체로 Hibernate가 있다. Spring Data JPA에서 제공하는 JPARepository와 같은 인터페이스를 상속받아 새로운 Repository 인터페이스를 생성하고, 정해진 규칙대로 메서드명을 명명하면 Spring Data JPA가 자동으로 코드를 생성한다. SpringBoot JPA( ORM ) 에서 제공하는 인터페이스 형태의 쿼리 메서드를 사용해도 기본적인 쿼리를 하기에는 충분하지만, 페이징이나 복잡한 쿼리를 작성해야하는 경우에는 구현이 어렵다. ..

인텔리제이에서 새로운 프로젝트 생성 1. 프록시 서버 끄기 2. main에서 리액트 생성 터미널 열기 여기에 만들 것임 ! 리액트 이름은 소문자로 한다. 여기에 프록시 설정해주어야 함 3. 자바를 실행하고, 리액트를 실행해야 한다. 컨트롤러 패키지 생성 후 컨트롤러 파일 생성 @RestController public class ReactTestController { @GetMapping("/api/reactTest") public String hello() { return "테스트 입니다"; } } testreact의 App.js axios를 사용하기 위해 설치해야 함 import './App.css'; import {useEffect, useState} from "react"; import axios ..

구성하기 App.js function App() { return ( ); } export default App; Header, Editor, List 컴포넌트로 만들기 Header.js function Header() { return ( TODOLIST 🗓️ {new Date().toDateString()} ) } export default Header; Editor.js const Editor = () => { return ( 추가 ) } export default Editor List.js function List() { return ( Todo List😀 ) } export default List List.js에 들어갈 컴포넌트 TodoItem.js 생성 const TodoItem = () => {..

넣을 때 localstorage.setItem 꺼내올 때 localstorage.getItem 삭제 localstorage.removeItem 수정은 따로 없음 → 같은 키에 다른 값을 넣으면 덮어 씌워짐 덮어 씌워지지 않도록 해야 데이터가 유지된다. 객체는 그대로 넣으면 안되고, 반드시 JSON형태로 직렬화를 해주어야 한다. 객체의 키말고 값만 가지고 오고 싶으면, JSON으로 파싱해서 그 중 키가 tel인 것 의 값만 가지고 오도록 한다. localstorage → 브라우저, 서버를 껐다가 켜도 그대로 남아있다. App.js useEffect (()=> { if(localStorage.getItem('watched') == null) localStorage.setItem('watched', JSON...

리액트 : single page Single page Application의 단점 : 컴포넌트 간의 state 공유 어려움. 특히, 형제 간의 컴포넌트의 공유 - Lifecycle(생명주기) class Detail extends React.Component { componentDidMount() { // Detail 컴포넌트가 로드 되고나서 실행할 코드 } componentDidUpdate() { // Detail 컴포넌트가 업데이트 되고나서 실행할 코드 } componentWillUnmount() { // Detail 컴포넌트가 삭제 되기 전에 실행할 코드 } } 컴포넌트는 1) 생성이 될 수도 있고(mount) 2) 재렌더링이 될 수도 있고(update) 3) 삭제가 될 수도 있다(unmout) - ..

리액트에서 AJAX 사용하기 위해 설치를 해준다. 더보기 npm i axios { /* axios.Method('서버url') .then((변수)=>{}) -> 성공했을 때 .catch(()=>{}) -> 실패했을 때 */ axios.get('https://raw.githubusercontent.com/professorjiwon/data/main/data2.json') -> 서버의 주소 .then((result)=>{ console.log(result.data); let copy = [...clothes, ...result.data] setClothes(copy) }) .catch(()=>{console.log('실패');}) /* - 서버로 보낼때 axios.post('서버 url', 보낼 데이터) ...

부트스트랩 적용 리액트 부트스트랩 서버 끄고, index.html에 링크 복사해서 넣어주기 아니면 App.js에 CDN넣어주기 사용하기 전에 import해주어야 한다. → 사용하고자 하는 요소 모두에 ( . 있는 것 제외 ) import './App.css'; import { Button, Navbar, Container, Nav } from 'react-bootstrap'; function App() { return ( React-Bootstrap Home Link Success{''} ); } export default App; 그림이 있다면 import해주어야 한다.

동적 UI를 만드는 방법 (모달 창 만들기) - 유저가 조작 시 형태가 바뀌는 모달 창, 탭, 서브메뉴 1. HTML, CSS로 미리 디자인 컴포넌트로 모달 생성 function Modal() { return ( 제목 날짜 상세내용 ) } 2. UI의 현재 상태를 state로 저장 true이면 보이고, false이면 안보임 3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성 제목을 클릭하면 모달 창이 뜨도록 해준다. 처음에 false (안보임) 으로 설정된 modal창을 setModal로 true로 상태를 변경해주어 모달 창이 나오도록 한다. 한번 누르면 창이 보이고, 다시 누르면 창이 닫히도록 해야 한다. true → false → true → false 이렇게 바꿔주면 됨 ! -> 현재 ..

컴포넌트를 사용하면서 다른 값 넣기 import './App.css'; function App() { return ( 맛집 추천 Blog 이레구내식당 2월 28일 🐷 영남집 2월 28일 🐷 얌샘김밥 2월 28일 🐷 ); } function List() { return ( 이레구내식당 2월 28일 🐷 ) } export default App; function App() { let title = ['이레구내식당', '영남집', '얌샘깁밥']; return ( 맛집 추천 Blog {title[0]} 2월 28일 🐷 {title[1]} 2월 28일 🐷 {title[2]} 2월 28일 🐷 ); } ===> 이렇게 하면 각 인덱스 번호에 무슨 값이 들어가는지 알아야하는 문제가 발생한다. useState ⇒ stat..

Component : 다른 객체 ( 함수 ) 가져다 쓴다. => 객체로 만들어 놓고 필요 시 사용 import logo from './logo.svg'; import './App.css'; import { React } from 'react'; const user = { firstName : "Hong", lastName : "GilDong" }; function Student(user) { return user.firstName + " " + user.lastName; } function App() { const isStudent = true; return ( Start React 2024_AddInEdu component 실습 {isStudent? {Student(user)}님 환영합니다. : 학생이..