도리쓰에러쓰

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..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React에서의 Ajax 요청 방법 / axios 설치 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Lifecycle Hook(예전 문법) vs useEffect(요즘 문법) 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] SASS 개념, 설치 및 기본 문법 저번 dori-coding.tistory.com 1. 서버에 데이터 보내기 (POST 요청) axios.post('서버URL', 서버에 보낼 데이터); + 요청시의 header 설정도 가능 axios.post('https://codingapple1.github.io/shop/data2.json', {id : 'test', pw : 1234}) ...

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Lifecycle Hook(예전 문법) vs useEffect(요즘 문법) 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] SASS 개념, 설치 및 기본 문법 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] styled-components를 이용한 class없는 CSS 스타일링 저 dori-coding.tistory.com 1. Ajax란? 서버에 새로고침 없이 요청을 할 수 있게 도와줍니다. 서버는 누군가 요청을 하면 데이터를 가져다주는 프로그램입니다. 요청은 서버에 요청하는 방법을 뜻하는데, 크게 사용하는 요청 방법은 2가지입니다. - GET : 데이터, 웹페이지 같은 것을 읽고 싶을 때 서버에 보내..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] SASS 개념, 설치 및 기본 문법 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] styled-components를 이용한 class없는 CSS 스타일링 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React Router 3 :: URL 파라미터로.. dori-coding.tistory.com 1. Lifecycle Hook Component는 '등장 - 업데이트(재렌더링) - 퇴장' 주기가 있습니다. Lifecycle Hook은 Component의 주기 중간에 명령을 줄 수 있습니다. 가장 유용한 Hook은 componentDidMount()와 componentWillUnmount() 입니다. c..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] styled-components를 이용한 class없는 CSS 스타일링 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React Router 3 :: URL 파라미터로 상세페이지 100개 만들기 저번 게시물에 이어서 작성해보겠습니다. (코드 참고) [React] React Router 2 :: Link, H.. dori-coding.tistory.com 1. SASS 란? CSS 전처리기(Preprocesser)라고도 합니다. CSS를 좀 더 프로그래밍 언어스럽게 작성 가능하여, CSS에서 변수, 연산자, 함수, extend, import 등을 사용할 수 있습니다. 단, 브라우저는 SASS 문법을 모르기 때문에 SASS..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React Router 3 :: URL 파라미터로 상세페이지 100개 만들기 저번 게시물에 이어서 작성해보겠습니다. (코드 참고) [React] React Router 2 :: Link, History, Switch 기능 저번 게시물에 이어서 작성해보겠습니다. (저번 게시물 코드 참고) [React] React Router 1 :: 세팅.. dori-coding.tistory.com 1. 'style-components' 라이브러리를 사용하는 이유 Component를 만들다보면 CSS가 많아지고, 실수로 class명을 중복으로 선언하여 CSS도 겹칠 수가 있는데 이를 방지하기 위해 'style-components' 라이브러리는 class ..

저번 게시물에 이어서 작성해보겠습니다. (코드 참고) [React] React Router 2 :: Link, History, Switch 기능 저번 게시물에 이어서 작성해보겠습니다. (저번 게시물 코드 참고) [React] React Router 1 :: 세팅과 기본 라우팅 저번 게시물에 이어서 페이지를 나누는 React Router를 작성해보겠습니다. (저번 게시물 dori-coding.tistory.com 1. 컴포넌트에 데이터바인딩 하기 현재 Detail.js에 컴포넌트가 존재하는데 '상품명', '상품 설명' 등이 임시로 출력되어 있습니다. 이 부분에 데이터바인딩을 해줄 예정입니다. function Detail() { let history = useHistory(); return( 상품명 상품 설..