Daily Log

} else if (error.request) { console.log('Error', error.request); // 여기서 문제 alert('error request'); error.request에서 오류가 발생하는 문제가 생겼다. axios 라이브러리 오류처리 방법은 아래와 같다. axios.get('/user/12345') .catch(function (error) { if (error.response) { // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다. console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if..

Props Deconstructing video_item.jsx 한 줄안에 담긴 것을 꾸며볼 것이다. props를 받아올떄 아래처럼 받아올 수도 있지만. const VideoItem = props => ( {props.video.sinppet.thumbnails.mediu.url} //길어짐. 앞의 props를 생략하고 싶다면? ); 상위 컴포넌트에서 props를 전달할 때 video로 전달했으면 그 이름을 그대로 써서 const VideoItem = ({video}) => ( ); 로 써도 되고 혹은 다른이름으로 쓰고싶다면. 아래처럼사용해서 videoItem.snippet.thubnail 이런식으로 사용이 가능하다 const VideoItem = ({video: vidoItem}) => ( ); 만약에..

https://velopert.com/3533 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (ii) | VELOPERT.LOG 이 포스트는 이어지는 튜토리얼 입니다. 1편 을 먼저 읽고 오시길 바랍니다. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케 velopert.com 내용 이해 후 정리 예정

useEffect 용도: - 처음으로 Component를 Rendering한 이후에 어떤것을 하는 것. - 어떤 화면을 보여줄 때 단순히 UI만 보여주는 것이 아니라 원하는 데이터를 넣어서 보여줘야 한다! - 그리고 이러한 데이터는 데이터베이스에 있는 경우가 많다. - 그런 작업은 렌더링 이후에 작업이 가능하다. - 그래서 데이터베이스에서 데이터를 불러오는 그런 일을 useEffect를 사용해서 컴포넌트가 렌더링된 이후에 사용한다. 컴포넌트가 마운트가 되었거나 업데이트 될 때마다 호출된다. 텅텅비어진 배열을 두번째 인자로 전달한다면, 마운트가 되었을 때만 호출이 된다. 선택적으로 원하는 변수를 배열로 전달하면 걔네가 바뀔 때만 호출됨 아무것도 넣지 않으면 업데이트 될 때마다 호출이 되는 것이다! useS..

REST API에서 자주 사용하는 것 get 정보를 읽어올때 post 사용자 만들 때 put 이미 존재하는 사용자를 업뎃할 때 delete 사용자 삭제할 댸 GraphQL을 이용하지 않으면 REST API를 많이 이용하고 있음. YoutubrAPIs 에서 문서를 보며 API 사용법이 가능하고, 오른쪽에서 테스트도 가능. 결과값은 JSON 형태로 반환되는데 cURL HTTP

git으로 배포 - yarn create react-app my-app 명령어를 사용하면 git이 이미 초기화 되어있음 - git remote add origin ~~ 를 통해 깃허브에서 만든 repository 원격 저장소와 내 로컬에 있는 폴더를 연결 - 그리고 추가된 파일이 있다면 git add * 하고 -> git commit -m "작업내용작성" - git push 를 하면됨 => 자동으로 깃과 연결이 되어서 깃허브에 로컬에서 작성한 코드가 올라감. => 문제가 생기면 open ~/.gitconfig를 열고 user 정보가 정확한지 확인할 필요가있음. 나의 깃허브 아이디가 잘 입력되어 있는지. settings에 가고, github page를 master페이지로 저장. => 이때 나온 주소가 내가..

RSI 함수로는 React.createRef(); ref로 사용할 수 있음 react의 메모가 있음. 메모라는 함수 안에 function 컴포넌트를 전달해주면. PureComponent처럼 작동한다. reactHook에서 state를 쓴다는 것은 useAPI를 쓰면 된다. 변수를 선언하면서 두가지로 선언해야한다. => useState const [count, setCount] = useState(0); 변수 선언할 때 위로 실제의 스테이트 값과. 함수를 업데이트할 수 있는 setCount를 호출함. useState -> 클래스는 한번만들어지면 딱한번만 만들어지는데. 렌더함수만 반복해서 호출됨 -> 한 번 만들어진 멤버변수는 한번만 할당됨. 근데 function 함수는! 클래스가 아니라 함수라서. 컴포넌트..

- 특정컴포넌트에서 prop으로 받은 데이터를 보여주기만 한다면 해당 컴포넌트에서 state는 사용할 필요가 없다. - habit은 props로 받은 habit을 보여주기만 함 handleDelete = habit => { //filter함수로 동일하지 전달된 habit.id값이 새로만드는 habits배열의 // item요소의 id값과 동일하지 않은 것만 다시 뿌려줌 -> 그럼 삭제요청온 id값 빼고 다시 그려줌 const habits = this.state.habits.filter(item => item.id !== habit.id); this.setState({ habits }); }; javascript filter 함수에 대해 알아보자 자바스크립트 filter 함수 javascript filter..

forEach: 배열의 모든 원소에 콜백함수를 1회 실행하고 종료 map: 배열의 모든원소에 콜백함수를 1회 실행하고 새로운 배열 리턴해주고 싶을 때 사용 map은 return 값이 반드시 있음 아래는 habits 라는 배열을 map으로 돌고 하나하나있는 원소의 객체의 id, name, count를 props를 통해 Habit 컴포넌트에 넘기는 과정이다. habits.jsx import React, { Component } from 'react'; import Habit from './habit'; class Habits extends Component { state = { habits: [ { id: 1, name: 'Reading', count: 0 }, { id: 2, name: 'Running',..

State, Props : 데이터를 다룰 때 사용함 State란 컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트다. 컴포넌트 UI를 위한 데이터를 보관하는 오브젝트! 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면? 리액트가 자동적으로 우리가 구현한 redner 함수를 호출한다. =>자신이 들고 있는 값! 컴포넌트 안에서 자체적으로 데이터를 정의해서 사용함! Props란 컴포넌트 외부에서 데이터를 제공받음. 컴포넌트의 재사용을 높이기 위해서! 상황에 따라 주어진 데이터를 제공받아서 그 데이터에 맞게 UI를 보여주기 위해 사용되어짐 -> 부모 컴포넌트에서 아래와 같이 컴포넌트를 사용할 때 title, onClick을 인자로 전달해줌. 그럼 얘네가 props 오브젝트로 묶어서 L..