본문 바로가기

Happyer16

 (314)
Interface를 이용하여 Callback 구현하기 정의 Caller가 Callee를 호출하는 것이 아니라 Callee가 Caller를 호출하는 것 예를 들어, 파일을 읽는 function에 읽고 난 후 처리해야 할 로직을 파라미터로 넘겨주면, 해당 function 안에서 파일 관련 처리를 다하고 파라미터로 넘어간 로직이 실행이 된다. 왜 사용함? 비동기적으로 처리가 가능하고, 코드 재사용성이 가능함 ( 함수 추상화가 가능함 ) 그래서 UI나 비동기 처리 시스템에서 많이 사용한다.
Tip code template 생성 1) File > Snippets > 아래 내용 복사 '.source.js': 'React Component': 'prefix': 'rc' 'body': ''' import React, { Component, PropTypes } from 'react'; const propTypes = { }; const defaultProps = { }; class ${1:MyComponent} extends Component { constructor(props) { super(props); } render() { return( ${1:MyComponent} ); } } ${1:MyComponent}.propTypes = propTypes; ${1:MyComponent}.defaultPr..
#3. Redux Flux 문제점 사용자와 상호작용은 뷰와 이루어지기 때문에 가끔 뷰가 모델을 업데이트해야 되는 경우가 있다. App이 작은 경우는 문제가 발생하지 않지만, Model간의 dependency를 물고 있는 경우, 변경이 비동기적으로 일어나는 경우를 생각하면 예측하지 못한 에러가 발생할 수 있다. 이것은 데이터 흐름을 디버그하기도 어렵게 만든다. 실제로 페이스북에서 읽지않은 메세지가 1이라 떠있었는데 확인해보면 읽은 메시지였던 경우가 있었다. 해결책 : 단방향 데이터 흐름
TroubleShooting 1. Uncaught Error : Invariant Violation: Element type is invalid: expected a string ( for built-in components) or a class/function but got:object import { Router } from 'react-router' : imports the default export import Router from 'react-router' : imports the export 'Router' from the file 2. Unterminated JSX contents 3. 화면이 보이지 않은 문제 ( this.props.children ) 상황 : this.props.children에 태그가 붙지 않아 화..
함수 전달하기(Command Pattern) 함수 전달 일부분의 동작만 달라 함수를 생성자에 넘겨줘서 그걸 이용하고 싶은 경우 Command Pattern이라는게 있네
#2. ReactJS 시작하기 CODEPEN 설정, ES6 클래스 ES6클래스를 사용하기 위해 Preprocessor는 Bable을 사용한다. Codepen의 다음과 같은 기능을 사용하지 않고 설정을 하려면 node install 한후 그에 맞는 명령어를 옵션에 더해야한다. 이런 것도 IDE에서 제공해주는 편리한 기능인 것 같다. JSX의 특징 XML 같인 생긴 애를 native Javascript로 변경해준다. 이게 어디서 동작하는가? Babel이 JSX Loader를 이용하여 코드를 변환해준다. 질문 : HTML과 Javascript 즉 UI와 behavior를 한 곳에 짜는건 잘못된 거 아닌가요? => 간단한 application에서는 괜찮지만 규모가 큰 application에서는 수만개의 UI와 각각의 behavior가 있는데..
#1. ReactJS 소개 소개 JavaScript 어플리케이션을 어떻게 구조화 할까? AngularJS? Ember? 뭐를 사용해야 되는거지??ReactJS는 프레임워크( 틀을 제공 - 필요기능 대부분 구현되어 있어 틀을 벗어날 수 없음 )가 아닌 UI를 만들기 위한 라이브러리이다.즉, 다른 프레임워크나 라이브러리와 혼용해서 사용할 수 있다. React는 무엇인가 : Virtual DOM과 Reconciliation React는 HTML Element들을 Virtual DOM을 이용해 표현하고 있다. Virtual DOM 은 가상의 HTML Element들을 가지고 있다가, 새로 그릴때 필요한 부분만 업데이트 ( DOM 조작 ) 하는 방식이다. jQuery를 사용하는 경우 밑의 예제처럼 셀렉터를 이용하여 해당 DOM을 찾은 후 ..
브라우저는 어떻게 동작 하는가? 소개 우리가 가장 많이 사용하는 웹브라우저에서 www.naver.com 입력시 어떤 과정을 거쳐 네이버 메인화면을 보여주는지에 대해 알아보자. 이 글에서는 오픈소스 브라우저에 대해 알아볼 것이다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 자원을 요청하고 그 자원을 브라우저에 표시해주는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 형태일 수도 있다. 자원의 주소는 URI에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTML을 해석하여 브라우저에 그려준다. 초창기에는 해당 명세를 만드는 W3C(World Wide Web Consortium)을 잘 따르지 않아 호환성 문제를 심각하게 겪었지만 최근에는 대부분의 브라우저가 명세를 따르고 있다. 브라우저의 사용자 인터페이스는 ..
TroubleShooting 1. plugin을 못찾아서 pom.xml 실패하고 배포과정에 포함시키지 못함 - 해결 : 해당 plugin을 zip으로 묶어서 install new software를 해주면 됨 ( eclipse - install details에 해당 plugin이 설치되어 있지 않으면 실패)
close() 함수 Stream이란? 우리가 키보드에 A를 입력한 경우 화면에 A가 출력이 되는데, 키보드의 A가 입력됐음을 듣고 파일에 A를 전송해주는 것을 누가할까? 바로 입출력을 도와주는 Stream이다. 키보드 뿐만 아니라, 프린트,마우스, 기타 기기들의 입출력을 도와준다. 사용자의 입장에서 입력을 하면 InputStream, 데이터가 나가면 OutputStream이 있다. InputStream은 Stream으로 데이터를 보냅니다. OutputStream은 Stream에 있는 데이터들을 목적지( e.g. 파일 )로 보내버립니다. ( flush()가 다음과 같은 역할을 합니다. ) 우리는 하드웨어적인 복잡한 과정을 신경쓰지 않고 Stream을 사용하기만 하면 됩니다. InputStream - close() 동작 과정 ..

티스토리툴바