Ajax 서버에 새로고침없이 요청을 할 수 있게 도와줌 1.제이쿼리 - $.ajax() 2.axios - axios.get() 3.자바스크립트 - fetch() 등을 사용한다. React는 axios 라이브러리를 사용한다. 요청종류 GET : 특정페이지 / 자료읽기 ->브라우저 URL에 넣으면 그냥 get요청임 POST: 로그인같은 서버로 중요 전보 전달할 때 yarn add axios npm install axios ps. 아래와같이 전부 ""로 되어있는 자료는 json형이라고한다. 오브젝트 자료형이 아님 하지만 출력은 다시 object로바뀜 [ { "id": 3, "title": "Flowey", "content": "only 5 inches", "price": 120000 }, { "id": 4, ..

- Lifecycle이라는 개념 컴포넌트는 1.생성 2.삭제 3.관련 state의 변경으로인한 재렌더링(업데이트)가 가능함 이와 관련해 Hook을 사용할 수 있다. 컴포넌트의 생성,사라짐,업데이트에 따라 여러 명령어를 사용할 수 있다는것 이러한것을 Lifecycle Hook이라고한다. class에서 사용할 수 있는데 이와같은기능을 신 문법에서는 useEffect를 사용할 수 있다. 아래와같이 useEffect를 불러오면 위에서 알아서 import를해온다. 안에는 콜백함수를 넣어서 사용하면 된다. let [alert,alert변경] = useState('my-alert3') // 나는 display none으로 되게하긴했음 let [alert2,alert2변경] = useState(true) let [in..

기본적으로, 리액트에서도 클래스네임을 사용해서 원래 사용하던방식으로 CSS스타일링을 할 수 있다. 하지만 리액트만의 편리함이나 방식도 기록하자 먼저 설치부터 리액트의 styled-conponents를 이용하기위해 yarn add styled-components npm install styled-components 둘중하나로 설치를하고 import styled from 'styled-components' 이와같이 상단에 불러온다. 사용하고싶은 컴포넌트 상단에 불러오면 된다. let 박스 = styled.div` padding:20px; ` let 제목 = styled.h4` font-size:25px; color:${props=>props.색상} ` 사용법은 이와같이 `` 를 사용하면되고 저 박스와 제목이..

이와같은 창에서 각 상품별로 상세페이지를 이동할때 라우팅을 사용하면 매우좋다. 부드럽게 작동하기도하고 별도의 페이지를 만들기보다 컴포넌트 형태로 이동할 수 있다. 리액트 라우터를 사용하려면 설치부터해야한다! npm install react-router-dom@5 yarn add react-router-dom@5 둘중 하나 사용해주면된다, 구글 검색하면서 세팅하도록하자 그리고 index.js에서 아래와같이 세팅해줘야함 import { BrowserRouter } from 'react-router-dom' // 이거 하나를 불러와 줘야한다. /같은 경로없이 불러오는건 라이브러리다. // import { HashRouter } from 'react-router-dom' // 이와같이해도된다. 이건 주소에 #기..

위와같은결과물을 만들기위해 간단한 부트스트랩사용이후 상품 정보에관한 소스를 컴포넌트화해 반복문으로 출력했다. export default [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] 이게 데이터정보 import Data from './data.js' function App() { let [shoes,shoes변경] = u..

파일이 점점많아진다, 언제까지 App.js하나에서만 코드를 관리할 수는 없다. 데이터를 외부에서 불러올 수도있고 많은 변수를 선언할 수도있고 수많은 함수가 생길 수 도 있음 여튼 import,export를 활용해서 가독성과 코드쪼개기를 할 수 있다. 1.변수하나 import,export해오기 var name = 'Kimjiwon' export default name 이와같이 내보내구 import name from './data.js' 이와같이 불러온다. `import 작명 from 경로`의 형태 2.변수두개이상 import,export해오기 var name = 'Kimjiwon' var name2 = 'jiwonman' export {name,name2} 이렇게 내보내구 import {name,name2..

-일단 추가 tip src에 넣은 파일은 파일면변경 + 압축됨 public에 넣은 파일은 보존됨 public에 있는 파일은 절대경로/파일명.jpg라고 다써야함 src에넣어서 바로사용하면 편하긴함 `./background.jpg` 이런식으로 https://react-bootstrap.netlify.app/getting-started/introduction 그리고 설치해서도 쓸 수 있지만 CDN불러와서 사용 할 수 도 있다. public/index.html 에다가! import logo from './logo.svg'; import './App.css'; import { Button,Navbar,Container,Nav,NavDropdown,Carousel } from 'react-bootstrap'; 이와..

https://learngitbranching.js.org/ Learn Git Branching An interactive Git visualization tool to educate and challenge! learngitbranching.js.org 위 사이트를 이용해 공부중 git branch공부 브랜치 만들고 이동하기 `git branch [브랜치명]` 새로운 브랜치생성 `git checkout [브랜치명]` 해당 브랜치로 이동 Git merge `git merge bugfix `라고치면 이렇게된다 별표가 있는쪽으로 가서 새로 커밋이됨 `git checkout bugFix` `git merge main` 이라고하게되면 이렇게된다. 별표의 위치가 중요하다. 전부 같은부모를 공유하는형태 색이 같아진..