도리쓰에러쓰

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [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( 상품명 상품 설..

저번 게시물에 이어서 작성해보겠습니다. (저번 게시물 코드 참고) [React] React Router 1 :: 세팅과 기본 라우팅 저번 게시물에 이어서 페이지를 나누는 React Router를 작성해보겠습니다. (저번 게시물 코드 참고) 2022.01.10 - [React] - [React] 반복문(map())을 이용하여 컴포넌트(Component) 반복 출력하기 [React] 반복문.. dori-coding.tistory.com 1. '상세페이지' 화면 Component화하기 (다른 파일에 있는 Component를 App.js로 import하여 사용하기) * src/Detail.js 파일 생성 (컴포넌트 파일은 대문자로 시작하는게 관습) * Detail.js 파일 안에 Detail() 컴포넌트 만들어..