도리쓰에러쓰

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux2 :: reducer / dispatch로 데이터 수정하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux1 :: props 대신 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Tab 만들기와 리액트에서의 등장 애니메이션 저번 dori-coding.tistory.com 1. redux를 통해 Alert창 닫기 기능 만들기 1️⃣ Cart..js에 alert 창을 하나 생성합니다. * div class는 bootstrap에 정의되어 있는 것을 사용하였습니다. 지금 구매하시면 신규할인 20% 닫기 2️⃣ alert 창의 상태를 저장하는 state와 reducer를 만듭니다. ..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux1 :: props 대신 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Tab 만들기와 리액트에서의 등장 애니메이션 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component가 많을 땐 Context API 사용 dori-coding.tistory.com 1. reducer() 이용하여 수량 변경하기 🔔 Redux 쓰는 이유 : state 데이터 관리 용이합니다. redux에선 state 데이터의 수정방법을 미리 정의하는데, 지금부터 reducer() 세팅 방법 두가지를 알아봅시다. 💡 reducer() 세팅 방법 - 1 - index.js에서 store 변수에 createSt..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Tab 만들기와 리액트에서의 등장 애니메이션 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component가 많을 땐 Context API 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component 3개 중첩하여 만들고 state 전달하 dori-coding.tistory.com 1. cart 페이지 만들기 1️⃣ Cart.js 파일 생성 후 아래 코드를 작성합니다. import React from 'react'; import { Table } from 'react-bootstrap'; function Cart() { return( # 상품명 수량 변경 1 Table cell Tabl..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component가 많을 땐 Context API 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component 3개 중첩하여 만들고 state 전달하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React에서의 Ajax 요청 방법 / axios 설 dori-coding.tistory.com 1. Tab 기능 만들기 - Tab 기능을 아래의 방법으로 구현할 예정입니다. 1) UI 만드는 법 1️⃣ UI 상태를 true / false state로 저장합니다. 2️⃣ state에 따라 UI 보이게 안보이게 합니다. 2) Tab UI 만드는 법 1️⃣ 몇번째 버튼 눌렀는지를 state로 저장..

var 키워드는 간단한 테스트 외에는 사용하지 않는다고 들었고 그 이후로 개발하면서 변수 선언할 때 let과 const를 사용해왔지만, 자세한 이유를 알지 못했어서 이번에 변수 키워드에 대해 이해해볼겸 정리해보려고 합니다. 1. 변수 선언 방식 1️⃣ var 우선, 아래의 코드를 살펴봅시다. var name = 'kang'; console.log(name);// kang var name = 'dori'; console.log(name);// dori name 변수를 2번이나 선언했는데도 에러가 나지 않고 있습니다. var 키워드로 선언한 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작합니다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고 초기화문이 없..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component 3개 중첩하여 만들고 state 전달하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React에서의 Ajax 요청 방법 / axios 설치 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Lifecycle Hook(예전 문법) vs useEffect(요즘.. dori-coding.tistory.com 1. Context API 사용하기 📌 Context API 사용하는 이유 : props에 전달하지 않고도 하위컴포넌트들이 props 없이도 부모의 값을 사용 가능 저는 이전에 만들었던 inventory state를 가지고 Context API를 사용해보겠습니다. let [invent..

1. 리액트 사이트 build 각자 만들었던 리액트 사이트를 배포하려면 App.js 파일 그대로 올리는게 아니라 build용 파일을 생성한 후 그 파일을 올려야합니다. 왜냐하면, 웹브라우저는 HTML, CSS, JS만 해석할 수 있어서 리액트의 state, JSX, SASS 등을 해석하지 못합니다. 그래서 리액트 프로젝트를 build하면 HTML, CSS, JS 언어로 바꿔주고 이 파일을 웹에 올려야 사용자들의 리액트 사이트를 볼 수 있습니다. 저는 리액트 프로젝트를 build하고 무료로 HTML 파일을 호스팅해주는 GitHub Pages를 이용해 배포까지 해보도록 하겠습니다. 🔔 만약 웹서버를 가지고 있다면? : 리액트 프로젝트 만들고 build하면 index.html 파일이 생성됩니다. 여기에 웹서버..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React에서의 Ajax 요청 방법 / axios 설치 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Lifecycle Hook(예전 문법) vs useEffect(요즘 문법) 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] SASS 개념, 설치 및 기본 문법 저번 dori-coding.tistory.com 1. 3개가 중첩되어 있는 Component에 데이터바인딩 - 우선 App.js에 재고량 데이터를 생성합니다. let [inventory, setInventory] = useState([10, 11, 12]); - Detail.js에서 재고 : ??? 를 생성합니다. { findProduct.tit..