레퍼런스 마이닝

자바스크립트에서 자주 사용하는 객체 전달 의미로 사용되는 = 은 참조를 의미한다. 대부분이 참조만으로도 기능상의 문제가 없이 작동하기 때문이다. 아래 예제는 참조한 객체의 key 값 변경이 미치는 영향을 알아본 것이다. 일반적인 상황에서는 데이터가 중간에 변동될 일이 없다. 하지만 얕은 복사, 깊은 복사가 필요한 경우가 있다. 간단한 예를 들어 복사하는 방법을 알아보자. 얕은 복사(Shallow Copy) 얕은 복사에는 다양한 방법이 제공된다. // JQuery extend() var data = { key: 'trend' }; var ref = $.extend({}, data); console.log(data); console.log(ref); data.key = 'issue'; console.log(..

React 개발 중에 나타난 Warning이다. Warning이라 큰 문제는 없지만 console에 자꾸 나타나는 것은 언젠가는 바로 잡아야 한다. DocumentTitle.js 31 라인 div와 DocumentTitle.js 30 라인 p 태그의 문제라고 친절히 알려준다. 태그의 문제가 있다. 퍼블리셔가 작업한 HTML을 그대로 가져와 Component를 구성하였는데 React의 꼼꼼함에 걸린 셈이다. ... p 태그는 인라인 요소만 포함 할 수 있다. div 태그는 블럭 요소이므로 p 태그 안에 div 태그를 넣는 것은 부적절하다는 의미이다. 원인은 생각보다 간단하다. React는 태그에 대해 엄격한 성격을 가지고 있다. 태그를 열고 닫고를 정확히 해야 하며 또한 성격에 맞게 제대로 사용해야 한다.

String에서 Boolean으로 변환하는 방법을 알아보도록 하자. 별생각 없이 형 변환을 하다가는 오류를 범할 수 있다. API response로 Boolean 타입의 객체가 오면 문제가 되지 않지만 String 타입의 'true', 'false'로 response를 받는 경우도 종종 있다. 간단하게 if 문 구성을 String 비교로 해도 되지만 Boolean의 의미가 퇴색되어 버린다고 할까 뭔가 부족한 느낌이다. 다른 방법으로 Boolean 함수를 생각할 수 있지만 이 또한 문제가 있다. 아래 코드로 간단하게 확인해 보자. Boolean(null); //false Boolean(undefined); //false Boolean(NaN); //false Boolean(''); //false Boole..

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 자바스크립트 라이브러리로 오직 유저 인터페이스 뷰(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 컴포넌트를 함수형 컴포넌트로 변경하자.