뇌 채우기 공간

1. Axios란? - 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 2. 설치 yarn add axios import axios from "axios"; 3. 사용방법 1. 리액트 프로젝트에 shared 폴더에 Request.js 파일을 만든다. import axios from "axios"; const instance = axios.create({ baseURL: "서버주소" // 요청을 www.aa.com/user로 보낸다면, www.aa.com까지 기록 }); // 가지고 있는 토큰 넣어주기! // 로그인 전이면 토큰이 없으니 못 넣어요. // 그럴 땐 로그인 하고 토큰을 받아왔을 때 넣어줍시다. // instance.defaults.head..

1. react-daum-postcode 설치 npm install react-daum-postcode 2. 코드 내장함수로 onCompletePost가 있는데 주소를 검색해서 클릭하면 저절로 닫히면서 data로 값들이 넘어온다. 그중에서 나는 address를 쓸 것이다. import React, { useEffect, useState } from "react"; import DaumPostcode from "react-daum-postcode"; const Post = (props) => { const address = props.address; const setAddress = props.setAddress; const onCompletePost = (data) => { console.log(data..

마켓 컬리 클론코딩 中 헤더 부분에 검색에서 입력을 하면 상품 검색 페이지로 넘어가서 상품명이 검색어를 포함하면 보여주게 하고 싶었다. 순서 1. 뷰 만들기 열심히 개발자 도구를 보고 따라 만들면 된다. 2. App.js에서 라우트 주기 나는 이렇게 검색어로 라우트를 줬다. 3. 헤더에서 검색어를 SearchItem 페이지로 넘겨주기 헤더에서 입력한 값을 엔터를 치면 search에 검색어를 잡고 가게끔 만들어줬다. 4. SearchItem 페이지에서 match.params로 받기 word로 넘겨줬으니 props.match.params.word는 입력한 검색어가 나오게 된다. 나는 상품 검색 페이지에 있는 input에서도 검색이 되게 하고 싶기 때문에 useState를 사용해서 초기값은 받아온 검색어로 하..

문제발생! 이 페이지에서 저기 표시한 것이 다른 컴포넌트이다. 즉 CartPage라는 컴포넌트에서 CountNum이라는 컴포넌트를 불렀으니 CartPage가 부모이고 CountNum이 자식 컴포넌트이다. 자식 컴포넌트에 보이는 저 숫자를 CartPage로 넘겨주고 싶다고 생각했다. 해결 부모에서 useState를 사용하여 CountNum에 props로 넘겨줬다. CountNum에서는 props로 받아와서 사용 CountNum.js import React from "react"; import styled from "styled-components"; const CountNum = (props) =>{ const num = props.num; const setNum = props.setNum; const d..

버튼을 누르면 popup이 떴다가 1초후에 다시 닫힌다. 1초후에 setPopup(false)가 실행됨

문제 리덕스에 리듀서에 문제가 있다고 뜸 오류 코드 defaultState for reducer handling ㅇㅇㅇㅇ should be defined 해결 initalState를 안넣어줘서 그런 문제가 생김

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1. Header에서 달을 이동시키자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 import React from "react"; import { Header, Calendar } from '../components'; import moment from "moment"; import styled from "styled-components"; function FullCalendar() { const [calendarYM , setCalendarYM] = React.useState(moment()); const [today , setToday] = React.u..

이런 캘린더를 한번 만들어보자! 1. 프로젝트 생성 yarn create react-app calendar 프로젝트를 생성한다. 2. styled-components , moment 설치 yarn add styled-components yarn add moment 3. 폴더구조 일단 이렇게 만들어줬다. pages -> 한 페이지 components -> 중간 단위의 컴포넌트 elements -> 최소 단위 컴포넌트 4. 최소단위 컴포넌트 일단 text 컴포넌트와 버튼 컴포넌트를 만들어보겠다. Text 컴포넌트 elements/Text.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 import Re..