레퍼런스 마이닝

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..

MyBatis를 사용하다 보면 간혹 헷갈리는 부분이다. resultType, resultMap을 상황에 따라 적절하게 사용해야 한다. 우선 MyBatis 공식 사이트에서 정의하고 있는 부분을 살펴보자. resultType - 이 구문에 의해 리턴되는 기대타입의 패키지 경로를 포함한 전체 클래스명이나 별칭, collection인 경우 collection 타입 자체가 아닌 collection이 포함된 타입이 될 수 있다. resultMap - 외부 resultMap의 참조명 결과맵은 MyBatis의 가장 강력한 기능이다. 이렇게 설명하고 있다. 확 와닿지 않는 문구이지 않는가? 다시 정리해보자. resultType - 클래스명 전체 또는 Alias를 입력해야 한다. VO, DTO등의 객체를 담을 수 있는 클..

계승을 위한 설계와 문서를 갖추지 않은 '이질적(foreign)' 클래스의 하위 클래스를 만들 때 생기는 문제점을 설명하고 있다. 그렇다면 계승을 위한 설계와 문서를 갖춘다는 것은 어떤 의미일까? 상속을 위한 문서에는 재정의 가능 메서드를 내부적으로 어떻게 사용하는지(self-use) 반드시 문서에 남기라는 것이다. public이나 protected로 선언된 모든 메서드와 생성자에 대해, 어떤 재정의 가능 메서드를 어떤 순서로 호출되는지, 그리고 호출 결과가 추후 어떤 영향을 미치는지 문서로 남기라는 것이다. 클래스 내부 동작에 개입할 수 있는 훅(hooks)을 신중하게 고른 protected 메서드 형태로 제공해야 한다. protected 멤버 개수는 가능한 줄여야 한다. 너무 적으면 상속해서 쓰기에 ..

계승은 코드 재사용을 돕는 강력한 도구지만, 항상 최선이라고는 할 수 없다. 계승은 상위 클래스와 하위 클래스 구현을 같은 프로그래머가 통제하는 단일 패키지 안에서 사용하면 안전하다. 이번 절에서 다루는 문제는 '인터페이스 계승' 에는 적용되지 않는다. 어떤 클래스가 다른 인터페이스를 'implement' 하거나, 어떤 인터페이스가 다른 인터페이스를 'extends' 하는 경우에는 해당되지 않는다. 메서드 호출과 달리, 계승은 캡슐화(encapsulation) 원칙을 위반한다. 상위 클래스의 구현은 릴리즈가 거듭될수록 변경되는데 하위 클래스는 수정된 적이 없어도 망가질 수 있다. public class InstrumentedHashSet extends HashSet { private int addCoun..

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가 입혀지지 않았지만 데이터 정보는 완성되었다.