rhanziy

https://cocoon1787.tistory.com/831 [GitHub] 리액트 프로젝트 GitHub Pages에 호스팅하기 🚀 작년에 포트폴리오를 HTML, CSS, JS로 만들어서 GitHub Pages에 Hosting 호스팅 하였는데 Web관련 지식이 많이 부족했던 시기였고 썡 HTML로 작성해서 프로젝트가 추가될 때마다 업데이트해야 하는 작 cocoon1787.tistory.com 1. git 저장소 생성 2. 올릴 리액트 프로젝트 터미널에 차례대로 작성 git init // 프로젝트에 git 설치 git add -A // 해당 프로젝트 폴더 내의 파일 전부 올리기 git commit -m "first commit" // commit 메시지 작성 git remote add origin htt..

리액트에서 페이지를 나누고 싶을 때 react-router-dom 이라는 외부 라이브러리를 설치해서 구현해보자. 터미널 오픈 후 npm install reat-router-dom@6 설치 후 index.js 셋팅 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); App 컴포넌트를 BrowserRouter로 감싸준다. 이제 라우터로 url 경로마다 다른 페이지를 보여주고 싶을 때 (App.js) import { Routes, Route, Link } from 'react-router-dom'; function App(){..

오늘은 react-query 라이브러리를 설치했다. 더보기 서버 상태를 관리해주는 react-query 라이브러리 장점 1. 성공/실패/로딩 중 쉽게 파악 가능 2. 틈만나면 refetch 해줌 3. 실패 시 retry 해줌 4. state 공유 안해도 된다.(ajax코드 다시 쓰면 됨) 5. ajax 결과 캐싱 가능 => 실시간 데이터 전송이 필요한 페이지에서 주로 쓰인다. ( ex. 코인거래소) 사용법을 알아보자. 터미널 오픈 후 npm install react-query 그리고 index.js에서 설정해줘야 할 몇가지. import { QueryClient, QueryClientProvider } from 'react-query'; const queryClient = new QueryClient()..

저번 글에서 redux toolkit을 설치하고 store.js 파일에 공유할 state들을 모아놨다. 이제 useState처럼 state를 변경하는 방법. 좀 복잡하다 ㅋ let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Grey Yordan', count : 1} ] }) 장바구니에 담긴 아이템 data가 들어있다. 중복된 아이템이 추가되면 수량을 올리거나, 장바구니 아이템을 추가/삭제하는 기능을 만들어 state를 변경하고 싶다면 reducers를 이용해 기능을 추가하면 된다. let cart = createSlice({ name : ..

컴포넌트끼리는 state를 props 문법으로 공유할 수 있다. 하지만 공유할 state가 많다면,... 자식 컴포넌트가 많은 복잡한 구조라면....! redux를 설치해보자. 리액트와 리액트 돔 버전이 18.1.x 이상이여야 설치가 가능하니 package.json파일에 가서 버전 확인/수정해준다. 터미널 오픈 후 install. npm install @reduxjs/toolkit react-redux 그리고 index.js에서 필요한 셋팅 import { Provider } from "react-redux"; // Provider import import store from './store.js' // Provider로 을 감싸주면 된다. 속성은 store //그럼 이제 과 그 모든 자식컴포넌트들은 s..

서버 : 유저가 요청한 데이터를 보내주는 프로그램. get : 서버에서 데이터를 가져올 때 post : 데이터를 서버로 보낼 때 브라우저 주소창에 GET, POST 날리면 브라우저가 새로고침되는 단점이 있다. ajax란? 서버에 GET, POST 요청 시 새로고침 없이 데이터를 통신할 수 있게 도와주는 간단한 브라우저 기능. 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 사용법은 3가지가 있는데, 1. XMLHttpRequest 라는 옛날 문법사용 2. 자바스크립트 fetch() 3. axios 외부라이브러리 리액트에서 서버와 ajax 통신할 때 axios 라이브러리 설치&사용 법 // 터미널 오픈 후 install npm install axios ..

리액트를 사용하며 css 병행하는 것이 귀찮고 속도 향상에 관심이 있다면 styled components 라이브러리를 사용해보자. 설치방법 npm install styled-components 터미널에 위 코드를 치고 다운을 받는다. 그리고 다시 npm run. 적용할 js파일에서 import 후 사용할 수 있는데, css 코드를 `` 백틱 안에 짜면 됨. 컴포넌트기때문에 작명 시 앞자리는 대문자로 작성하자. import styled from 'styled-components'; let YellowBtn = styled.button` background: yellow; color: black; padding: 10px; ` let Btn = styled.button` background: ${ props..

1. css 클래스 네임 주고 background주기 2. html안에서 style속성으로 url 넣기 import bg from './bg.png' function App(){ return ( ) } 3. 하던대로 img 태그 src로 경로지정( 외부 이미지는 절대경로 그대로 작성) 상품명 상품정보 4. public 폴더에 파일 밀어넣고 이미지 경로 사용(import 안해도 된당) //권장되는 형식 하위 경로에 배포하면 파일을 못찾을 수도 있으니 홈페이지 URL 기재 권장!