개발자 키우기

1. 윈도우에서 book 폴더를 하나 만들고 그 안에 스프링프로젝트를 만든다. ( 폴더 명을 book으로 가정 하겠음 ) 2. 스프링프로젝트 명은 가독성이 좋게 book-backend 라고 짓는다. 3. vs code을 열어 book 폴더를 열고 터미널을 열어 리엑트를 설치한다. ( npx create-react-app book-frontend ) 4. book 이란 폴더에 book-backend 와 book-frontend 가 생겼다. README.md를 만들어 사용하는 버전이나 라이브러리 등을 정리 해주고 필요한 라이브러리들을 다운 받는다 예시) # Reat-Springboot Book 프로젝트 ### 스프링 부트 - Spring 2.7 - JAP - H2 - Gradle - Lombok ### Re..

0. 사용하는 이유 간단히 이야기하면 기존 방식은 부모에서 props로 데이터를 넘겨 자식 컴포넌트에서 사용하게 되는데 자식이의 자식의 자식.... 계속 내려가게 된다면 예를 들어 proos.proos.proos.proos.proos.proos.proos.proos 와 같이 사용하게 된다면 복잡할 뿐만 아니라 실수 발생 확률이 높아진다. redux를 사용하면 store를 구독하는 컴포넌트들이 구독하고 있는 값이 변경되면 리렌더링 되도록 하는 방식이다. 코딩애플 유투버님이 참 쉽게 설명해 주니 보면 좋다 ( https://www.youtube.com/watch?v=QZcYz2NrDIs ) 1. 설치 npm install redux ( https://ko.redux.js.org/ ) npm install r..

1. 리엑트 부트스트랩 설치 ( https://react-bootstrap.netlify.app/docs/getting-started/introduction ) npm install react-bootstrap bootstrap 2. App.js에 improt 추가 import 'bootstrap/dist/css/bootstrap.min.css'; 3. 사용할 컴포넌트 마다 import { Button } from 'react-bootstrap'; 추가해서 사용하면 됨 예시) navbar 만들기 import React from 'react'; import { Link } from 'react-router-dom'; import Button from 'react-bootstrap/Button'; impor..

1. 설치하기 ( npm i react-router-dom / https://www.npmjs.com/package/react-router-dom ) 저는 5.2 버전을 사용하고 있습니다 2. index.js App을 BrowerRouter로 감싸기 import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 3. App.js 경로(path)와 정확한 경로 매칭(exact), 마지막으로 랜더링할 컴포넌트(component)를 지정 import { Route } from 'react-router-dom'; function App()..

리엑트의 기본적으로 부모가 자식을 그리기 때문에 데이터도 마찬가지로 부모가 자식에게 전달하는 방식이다. 따라서 아래와 같이 부모가 자식에게 데이터와 데이터를 조작할수있는 함수까지 패싱하여 전달해야한다. Homepage.js const HomePage = () => { const [boards, setBoards] = useState([]); // 일반적인 let이나 const는 사용불가 ( 이전 Hook 관련 블로그 참조 ) const [number, setNumber] = useState(0); useEffect(() => { let data = [ { id: 1, title: '제목1', content: '내용1' }, { id: 2, title: '제목2', content: '내용2' }, { id..

1. useState 상태를 관리하고 상태가 변하면 변경되는걸 인지하고 UI를 변경 import { useState } from 'react'; function App() { // const number = 1; const [number, setNumber] = useState(1); const add = () => { // number++; setNumber(number + 1); console.log('number', number); }; return ( 숫자 : {number} 더하기 ); } 2. useEffect App() 이 처음 실행 되었을때와 dependencyList에 등록되어 있는 상태가 변화 했을때 실행되며 UI 변경 컴포넌트의 라이프사이클에 영향을 주는 부작용을 처리하는데 사용 ( ..

리엑트에서 부모가 변경이 되면 부모에 의존적인 자식 컴포턴트들은 연산을 통해 리렌더링을 수행한다. 이때 깊은복사를 이용해 변경하지 않아도 되는 자식들이 리렌더링하지 않게 하는 최적화 작업이 필요하고 배열을 사용한다. 1. spread 연산자 ( 복사 ) const a = [1, 2, 3]; const b = [...a]; // b = [1,2,3] b.push(4); // b = [1,2,3,4] const c = [0, ...b, 5, 6]; // c = [0,1,2,3,4,5,6] 2. concat ( 추가 ) const a = [1, 2, 3]; const b = a.concat(4); // b = [1,2,3,4] 3. filter ( 삭제 ) true 인 값만 반환하는걸 활용 const a = ..

1. return시에 하나의 Dom만 리턴 가능. 사용 가능한 예시 function App() { return ( 이것이 리엑트인것인가 아주 빠르구만 이것이 리엑트인것인가 아주 빠르구만 ); } 사용 불가능 예시 function App() { return ( 이것이 리엑트인것인가 아주 빠르구만 이것이 리엑트인것인가 아주 빠르구만 ); } 2. 변수선언은 let이나 const 만 사용하는 것이 좋음. ( var의 규칙이 일반적이지 않기 때문 ) 3. if 문이 사용이 불가능 하기 때문에 삼항연산자를 사용해야 함 4. 조건부 렌더링 ( 삼항연산자에 false 부분을 생략한 기능 ) let - 변수 const - 상수 사용 방법은 아래와 같이 {} 안에 변수명을 넣으면 됨 let a = 10; /* 변수 선언..