레퍼런스 마이닝

경기도 어린이박물관 첫 번째 방문이다. 두 아이도 아직 어리기에 약간의 체험 느낌의 놀이 박물관이라 이르다는 생각 때문에 방문하지 않고 있다가 이번 어린이집 여름방학에 맞춰 방문하게 되었다. 일단 기본 입장료도 저렴한 편인데 경기도민이라 더 저렴(50% 할인)하다. 방문했을 때가 평일이었는데 다 같이 어린이집이 쉬어서 그런지 많은 아이들과 함께 할수 있었다. 경기도 어린이박물관은 첫째, 셋째 주 토요일 일요일은 무료입장이다. 경기도 어린이박물관에는 시원하게 흐르는 폭포가 있다. 무더위를 날려줄 듯 하지만 폭염에는 실내가 정말 최고이다. 너무나 덥다. 경기도 어린이박물관은 총 3층으로 구성되어 있다. 1층 - 튼튼놀이터, 자연놀이터, 작은 생태관, 아기 둥지, 초등학교에 간다면? 2층 - 건축작업장, 우리..

ESLint 문법 검사 및 자바스크립트 코딩 스타일을 위해서 ESLint라는 도구를 사용한다. 사전에 정의된 코딩 스타일과 맞지 않으면 경과나 에러가 나타나 질 좋은 코드를 작성할 수 있게 도와준다. Guides 코드 작성에 안내선을 표시해 준다. 코드의 시작과 끝을 안내선을 통해 한번에 파악하기 쉽고 심플하고 정리된 코드를 얻을 수 있다. Reactjs code snippets React 관련 템플릿을 단축키로 쉽게 작성할 수 있다. (rcc, rcf 등)

Chart.js 라이브러리를 사용하여 Line Chart에서 마우스오버시 가상의 선을 추가해 보자. // hover vertical line const originalLineDraw = Chart.controllers.line.prototype.draw; Chart.helpers.extend(Chart.controllers.line.prototype, { draw : function() { originalLineDraw.apply(this, arguments); if (this.chart.tooltip._active && this.chart.tooltip._active.length) { const activePoint = this.chart.tooltip._active[0]; const ctx = thi..

리액트 개발에 있어 필수인 크롬 개발자 도구를 소개한다. 기본적으로 제공되는 크롬 개발자 도구에서는 리액트 정보를 확인할 수 없다. 필요한 플러그인을 설치하자. 크롬 웹 스토어에서 react를 검색하여 React Developer Tools을 설치하자. 설치가 완료되면 React로 구성된 페이지에서 개발자도구를 열면 React 탭이 나타난다. 리액트 컴포넌트들과 Props 값을 쉽게 확 인할 수 있다. 또한 설정 모양의 아이콘을 클릭하고 Highlight Updates 옵션을 활성화하면 리렌더링 될 때마다 빈도에 따라서 하늘색 -> 초록색 -> 노란색 -> 빨간색 순으로 표시가 된다.

React 자바스크립트 라이브러리로 오직 유저 인터페이스 뷰(View)만을 위한 라이브러리이다. Virtual DOM DOM(Document Object Model)은 객체로 문서 구조를 표현하는 방법이다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 절차를 가진다. 1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다. 2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다. 3. 바뀐 부분만 실제 DOM에 적용한다. Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 있다. JSX 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼다. 코드로..

마지막으로 CSS를 적용하여 보다 보기 좋은 화면으로 만들어 보자. CSS 언급은 따로 하지 않겠다. /* index.css */ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color:#EFF3F7; height: 100%; } html, #root{ height:100%; } /* App.css */ .App { padding:50px; display: flex; justify-content: space-around; flex-w..

지난 시간에 API를 통해 영화 리스트까지 정보를 불러오는 것을 완성하였다. 추가적으로 필요한 정보는 포스터, 제목, 장르, 평점, 설명 등을 Component에 추가 구성해보자. App.js에 _renderMovies() 함수에서 추가로 받을 수 있는 정보를 기술하여 Movie Component에 전달한다. Movie.js Movie 컴포넌트에서 기본적인 HTML 구조를 잡았으며 각 정보별로 세분화된 Component를 구성하였다. 각각의 propTypes도 추가 작성하였다. 아직 css가 입혀지지 않았지만 데이터 정보는 완성되었다.

promise도 배웠고, 이번엔 Await, Async를 배울 차례이다. Await, Async는 지난 시간에 작성한 라인들을 조금 더 분명하게 작성해주는 도구이다. fetch를 _callApi함수로 변경하였고 _getMovies 함수를 만들어 componentDidMount()에서 사용하였다. _getMovies는 async이며 _callApi 작업이 완료되고 return 하기를 기다린다는 뜻으로 await를 사용하였다. _callApi는 영화 리스트를 JSON 포멧으로 반환하였다.

AJAX(Asynchronous JavaScript And XML) JSON(JavaScript Object Notation) 이제 AJAX를 공부를 시간이다. 요즘에 XML의 비중이 낮고 JSON 비중도가 높아졌다. 오브젝트를 자바스크립트로 작성하는 기법이다. AJAX를 리액트에 적용하는 방법은 심플하다. FETCH를 이용해서 URL에서 응답을 받아오자. 사용할 URL은 리액트 이전에 이야기한 YTS-API를 사용할 것이다. 아래 링크를 참조하자. [프로그래밍/ReactJS] - [ReactJS] 리액트 #3 웹 서비스 만들기 JSX [ReactJS] 리액트 #3 웹 서비스 만들기 JSX 지금까지 리액트에 대한 소개 및 필요한 프로그램 설치를 진행하였다. 이번 포스팅부터 실제 영화 앱을 만들어 보도록 ..

모든 컴포넌트가 state가 있는 것은 아니다. 어떤 컴포넌트는 state 없는 stateless functional 컴포넌트이다. state가 필요 없는 컴포넌트는 함수형 컴포넌트라고 한다. 오직 props 밖에 없을 때 사용된다. 그냥 return을 하기 위해 존재하기 때문이다. MoviePoster 클래스 컴포넌트와 함수형 컴포넌트의 결과적 차이는 없다. 함수형 컴포넌트는 function render가 없고, 라이프사이클도 존재하지 않는다. 오직 return만 존재한다. 이번에는 Movie 컴포넌트를 함수형 컴포넌트로 변경하자.