개발 기록

인텔리제이에서 새로운 프로젝트 생성 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)}님 환영합니다. : 학생이..

JSX(JavaScript XML) : 자바스크립트 + XML을 추가한 확장형 문법으로 브라우저에서 실행되기 전 바벨을 통해 자바스크립트 형태로 변환됨 JSX 문법 반드시 부모 요소 하나로 감싸야 한다. → div 두 개 안됨 2. return 되는 JSX는 하나의 요소로 감싸야 한다. 3. JSX 안에서 자바스크립트 표현식을 쓸 수 있다. 4. return문 안에서 IF문 대신 조건부 연산자 사용 - JSX 내부의 자바스크립트에서 if문을 사용할 수 없다. ( 즉, return문 안에서 대신 { } 안에 조건부 연산자를 사용 ( 삼항 연산자 ) ) 5. 속성 name class 대신 className으로 사용 6. 항상 닫는 태그가 있어야 한다. 7. 주석 {/* 주석 */}

1. NODE.JS 설치 2. extensions에서 다음 항목 설치 3. 터미널로 프로젝트 생성 이렇게 생성하면 오류가 난다... ? ==> 설치한 파일과 경로가 맞지 않아서 생기는 문제 ! 위치를 정확히 설정해주고 재설치 해본다. 설치완료 ! 이렇게 자동으로 뜬다. 이 화면이 확인이 된다면, 리액트를 사용할 준비가 되었다는 뜻이 더보기 이 코드는 React 애플리케이션의 기본적인 구조를 보여줍니다. 각 부분에 대한 설명은 다음과 같습니다: import logo from './logo.svg';: logo.svg 파일을 가져와서 logo라는 변수에 할당합니다. 이 이미지는 앱의 로고로 사용됩니다. import './App.css';: App.css 파일을 가져와서 현재 파일에서 사용합니다. 이 파일에는..

DOM : 하나의 웹 페이지 정보를 모두 담고 있는 자바스크립트 객체 화면 구조의 변경이 있을 경우 DOM으로부터 수정할 부분을 찾아 일일이 다 수정된 후 전체 구조 생성 → 보다 효율적인 방법 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 게 아니라 기존 뷰를 다 버리고 처음부터 새로 뷰를 생성하여 보여주는 방식 장점 어떻게 변화를 줄 지 신경 쓸 필요 없음 변화가 있으면 기존 것은 버리고 정해진 규칙에 따라 새로 뷰를 생성하여 보여줌 단점 CPU 점유율 증가 리액트 → facebook에서 개발한 유저인터페이스 라이브러리 JSX(JavaScript XML) 사용 데이터 바인딩 용이 SSR CSR 서버 측 랜더링 최초 화면 로딩이 빠름 화면 갱신이 느림 부분 갱신을 위한 전체 페이지 reload 클라이..