Enjoy Programming

1. Code split으로 최적화 과정중 맞닥뜨린 문제 및 해결과정 그리고 퍼포먼스 향상 2. 빌드 배포후 chunk load 에러 현상 발생. (code split, cache, webpack 등등 ) - nginx location 문제 - service worker 문제 3. firebase file download시 파일명 원본명으로 받기 작업. 위 사항은 최근 해결한 문제들과 해결된듯 한 문제들이다. 시간 날때 작성하자.. 근데 플러터 배우는데 재미있다. 바쁘다 육아하랴 일하랴 공부하랴 근데 재미있긴 하다.. 언제 개인 프로젝트 들어가지..

이제 fetch API를 이용해 movie data를 가져와보자. 그런데~ 니코쌤은 fetch보단 Axios를 더 좋은 방법이라고 한다. axios는 fetch위에 작은 layer가 올라가 있는거라고 생각하면 된다. 간단히 짚고 넘어가면 Axios는 node.js로부터 HTTP request를 만들거나 , ES6 Promise API를 지원하는 브라우저로 부터 XMLHttpRequest를 만들기 위해 사용하는 javascript 라이브러리이다. fetch()는 JSON데이터를 처리할 때 2단계를 거친다. 초기에 request를 보내고, 실제 data 오브젝트를 받으려면 response를 받는 측에서 .json()메소드를 사용해야 한다. 그리고 fetch()를 사용해서 response error가 발생했다..

component 의 life cycle까지 알아보았고. 이제 movie app을 만들기 위해 movie component를 구성해본다. state를 만들어주고 기본적으로 컴포넌트가 마운트 되면 라이프 사이클이 시작된다. 라이프 사이클은 마운트 되는 순간 시작되었으니 isLoading은 당연히 true이다. render에서 isLoading이 true이면 Loading을 아니라면~ Ready라고 알려준다. 자 이제 로딩이 끝나면 ready로 변경이 되어야 하는데~ 컴포넌트의 render를 하면 호출되는 life cycle method인 componentDidMount함수를 통해 setTimeout함수로 5초뒤 setState를 이용해 isLoading을 false로 바꿔준다. 6초뒤 브라우저는 Loadi..

react의 Components에는 function conmponent와 class component가 있다. 앞서 포스팅한 내용은 function component들이고 이제 movie app을 만들 텐데 지금부터는 class component를 사용하겠다. class를 이용해 react class component(react에 이미 내장되어 있는 class component)로 부터 App class component에 extends했다. 현재는 App은 react.Component와 같은 역할을 한다. 기본적으로 Class react component는 return을 가지고 있지 않다. 무슨 말일까. 클레스 리액트 컴포넌트는 function이 아니기 때문에 return이 없다. 대신 render m..

react에서 컴포넌트에 prop을 보내는 것 까지는 해봤는데 이게 부모 컴포넌트로부터 전달 받은 prop이 내가 예상한 prop인지 확인할 수 있어야 한다. 항상 보이지 않는 에러를 방지하기 위해서는 꼼꼼한 체크가 필수 이다. 이제 체크하는 방법을 알아보자. 이전 포스팅 코드를 그대로 쓰면서 체크해 보겠다. 먼저 list에 객체들에 각각 rating을 추가하자. rating은 모든 것을 평가한다. rating: 5.1 이런식으로 임의의 숫자를 추가한다 그리고 prop-types를 설치해준다. prop-types 라이브러리는 내가 전달 받은 props가 내가 원하는 props인지 확인 해주는 라이브러리이다. 설치가 끝났으면 import PropTypes from "prop-types"; 임포트 해주고 F..

react 에서 component는 HTML을 반환하는 함수이다. 위 react.StrictMode라고 되어있는 태그형태안의 가 컴포넌트의 형태이다. App은 다른 자바스크립트 파일에서 만든 export된 function형태의 html을 반환하는 함수인 것이다. 반드시 HTML처럼 작성해야한다. 이렇게 처럼 자바스크립트와 html사이의 조합을 jsx라고 한다. react에서 나온 매우 custom한 유일한 개념이다. 자 새로운 컴포넌트를 한번 만들어보자. src 폴더에 BlueBerry라는 자바스크립트 파일을 하나 만들고 중요한 건 컴포넌트에는 반드시 react를 import해줘야 리액트가 인식 할 수있다. 안에 블루베리 함수를 하나 만들어 리턴해준다. 그리고 모듈을 export해주면 사용가능한 comp..