빌드를 간편하게 하기위한 스크립트 정리

packge.json에 빌드 스크립트를 추가
npm build를 사용하여 jsx -> js로 변환한다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": ".\\node_modules\\.bin\\babel .\\jsx -d .\\js --extensions .jsx --copy-files -w"
  },

메뉴 컴포넌트 작성

menu.jsx

class Menu extends React.Component {

  render() {
    const menu = [ 'Home',
      'About',
      'Service',
      'Portfolio',
      'Contact us'
    ]
    return (
      <div>
        {menu.map((x, i) => {
          return <div key={i}>
            <Link label={x}></Link>
            <br></br>
          </div>
        })}
      </div>

    ) 
  }
}

Link 컴포넌트 작성

Link.jsx

class Link extends React.Component{
  render() {
    const url = '/' + this.props.label.toLowerCase().trim().replace(' ','-')
    return (
      <a href={url}>{this.props.label}</a>
    )
  }
}

script 작성

script.jsx

let menu = document.getElementById('menu')
let root = ReactDOM.createRoot(menu)

root.render(
  <Menu></Menu>
)

해당 컴포넌트들을 html에서 로드

/menu/index.html
만약 menu가 하나의 jsx에 작성되어 있다면 하나의 js만 불러와도 될듯.

    <script src="../js/components/menu/Menu.js" type="text/javascript"></script>
    <script src="../js/components/common/Link.js" type="text/javascript"></script>
    <script src="../js/components/script.js" type="text/javascript"></script>

https://github.com/Kmmanki/react_note/tree/master/chapter09

참고 사이트

Main Component

스프링 인테그레이션은 파이프 필터 모델로 작성되며 구성은 “파이프”, “필터”, “메시지”로 이루어져 있다.

Message

스프링 인테그레이션에서 사용되는 데이터를 의미하며 사용하는 데이터를 감싼 래퍼(wrapper)이다.
즉 Message와 같은 wrapper형식으로 사용한다.

Message Channel(Pipe)

메세지 채널은 Pipe의 역할을 하며 Message를 Filter로 전달하는 역할을 한다.
메시지를 전달하는 프로듀서 채널, 메시지를 받아가는 컨슈머 채널이 ****분리되어 있어 채널간 인터셉터 등을 사용 할 수 있다.

Message Channel Interface

• MessageChannel
• PollableChannel
• SubscribeChannel

Message Channel Impliment

위의 메시지 인터페이스를 구현한 구연체들이 존재한다.

• publishSubscribeChannel: 전달받은 Message를 자신을 구독한 모든 Handler에게 전달한다.
• QueueChannel: Point to Point로 해당 채널의 컨슈머가 여럿 있더라도 하나의 컨슈머에 전달한다.
• 큐가 가득차면 send 메소드를 호출 시 sender를 블록킹한다*.
• 큐가 비어있다면 recevie호출이 블록킹 된다.*
• PriorityChannel: 큐 채널은 First -In-First-Out을 따르지만 PriorityChannel은 메시지마다 우선순위를 부여할 수 있다.
• RendezvousChannel: receive를 호출 하기 전까지 sender를 블록한다.
• DirectChannel: point-to-pint로 동작하며 PollableChannel을 구현한것이 아닌 SubscribeChannel을 구현하였기에 메시지를 직접 Handdlrt에 전달한다.
  Poller방식이 아니기 때무에 스레드를 스케줄링 하지 않아 오버헤드가 없기 때문에 Spring Integration의 디폴트 채널이다.
  구독하고 있는 MessageHandler를 호출하는 일을 메시지 디스페처에 위임한다.
• ExcutorChannel: DirectChannel과 같지만 MessageHandler를 호출하는 디스패치 수행을 TastExcutor에게 위임한다는 것이다.
• FlusMessageChannel: 리액티브 구독자가 온맨드로 컨슘해갈 수 있도록 전달받은 메시지를 변경하는 채널

MessageEndpoint(Filter)

Filter는 메시지를 컨슘하는 모든 구성요소를 말한다.

Message Transformer

메시지의 내용 및 구성요소를 변환하고 수정한 메시지를 반환하는 일을 한다.
Ex) Byte를 String으로 변환한다던지.

MessageFilter

메시지 필터는 해당 메시지를 다른 채널로 전달할지 말지를 결정한다. 필터에서는 간단한 boolean 테스트 메소드가 있으면 된다. Ex) header 값에 따른 전달 여부 판단.

MessageRouter

메시지 라우터는 해당 메시지를 여러 채널중 분기처리를 할 때 사용된다.
Ex) 콜 시작 메시지 → callStartChannel, 콜 종료 메시지 → callEndChannel

Spliter

입력 받은 메시지를 여러 메시지로 분할하는 역할을 담당하며 일반적으로 “복합”페이로드를 세분화하여 여러 메시지로 나누는데 사용한다.

Aggregator

Spliter와 반대로 여러 메시지를 하나의 메시지로 통합할 때 사용된다.

ServiceActivator

서비스 인스턴스를 메시지 시스템에 연결하기 위한 범용 엔드포인트이다. 입력 채널을 반드시 구성해야하며 반환할 수 있는 경우 출력 체널도 지정할 수 있다.

ChannelAdeptor

채널 어뎁터는 메시지 채널을 다른 시스템이나 전송 구성요소에 연결해주는 엔드포인트다. 어뎁터는 인바운드와 아웃바운드로 구성된다.

간단한 예제

https://github.com/Kmmanki/spring_integration_study_1

해당 예제는 pythonSender - Spring Integration - pythonReceiver 로 구성되어 있으며

python과 Integration은 TCP 소켓으로 연결한다.

python sender에서 1 이라는 입력을 주면 spring integration에서 1 > 2 메시지를 만들어 pythonReceiver 전달하고 pythonReceiver 는 전달 받은 메시지에 > 3을 붙여 1 > 2 > 3을 만들어 integration으로 reply한다. integration은 전달받은 1 > 2 > 3에 > 4를 붙여 1 > 2 > 3 > 4를 다시 reply하여 sender로 전송한다.

리액트 교과서 Chapter08(확장성을 고려한 React 컴포넌트)

기본속성

컴포넌트의 개발 시 모든 속성을 주입 받을 시 누락 된다면 해당 컴포넌트는 동작 하지 않을 것 이다.
또한 매번 컴포넌트 사용 시 모든 옵션들을 주입 받는 것 또한 코드가 복잡해진다.

이를 해결하기 위해 컴포넌트 작성 시 기본속성을 작성할 수 있다.

class HelloWorld extends React.Component {
  constructor(prop) {
    super(prop)
  }

  render() {
    return (
      <div>
        <p >{this.props.title}</p>
      </div>
    )
  }
}

HelloWorld.defaultProps = {
  title: 'Hello World'
}


const el =document.getElementById('content')
var root = ReactDOM.createRoot(el)

root.render(
  <div>
    <HelloWorld title="Hello"></HelloWorld>
    <HelloWorld></HelloWorld>
  </div>
)

자식컴포넌트 랜더링

컴포넌트에 {this.props.children}를 사용하여 해당 컴포넌트 내부에 있는 자식 컴포넌트를 렌더링 할 수 있다.

// 자식 엘리먼트 렌더링
class Content extends React.Component {
  constructor(prop) {
    super(prop)
  }

  render() {
    return (
      <div>
        <p >{this.props.title}</p>
        {this.props.children}
      </div>
    )
  }
}

Content.defaultProps = {
  title: 'Content!!'
}
//

const el =document.getElementById('content')
var root = ReactDOM.createRoot(el)

root.render(
  <div>
    <HelloWorld title="Hello"></HelloWorld>
    <HelloWorld></HelloWorld>

    <Content>
      <h1>Content Hi</h1>
    </Content>

    <></>
  </div>

펼침 연산자의 사용

모든 주입 받은 속성을 펼침 연산자를 사용하여 전달한다.

 render() {
    return (
      <a {...this.props} {...this.state}>네이버</a>
    )
  }

고차 컴포넌트

고차 컴포넌트는 함수의 파라미터로 리액트 컴포넌트를 전달 받아 사용하는 컴포넌트를 말한다.
근래에는 함수형 컴포넌트의 훅(hook)을 사용하기 때문에 많이 사용하지 않는다.

고차컴포넌트에 사용할 컴포넌트(내부 컴포넌트) 정의

Elements.jsx

class HiButton extends React.Component {
  render() {
    return (
      <button
        onClick={this.props.handleClick}
      >{this.props.label}</button>
    )
  }
}

class HiLink extends React.Component {
  render() {
    return (
      <a
        onClick={this.props.handleClick}
        href="#"
      >{this.props.label}</a>
    )
  }
}

class Logo extends React.Component {
  render() {
    return (
      <a
        onClick={this.props.handleClick}
        href="#"
      >{this.props.label}</a>
    )
  }
}

고차 컴포넌트(외부 컴포넌트) 함수 정의
load-website.jsx

// 컴포넌트를 파라미터로 받음
const LoadWebsite = (Component) => {
  class _LoadWebsite extends React.Component {
    constructor(props) {
      super(props)
      // 상태 생성
      this.state = {label: 'Run', handleClick: this.handleClick.bind(this)} 
    }
    // 함수생성
    getUrl() {
      return 'https://facebook.github.io/react/docs/top-level-api.html'
    }
    handleClick(event) {
      document.getElementById('frame').src = this.getUrl()
    }
    componentDidMount() {
      console.log(ReactDOM.findDOMNode(this))
    }
    render() {
      console.log(this.state)
      // 입력받은 컴포넌트 렌더링
      // 상위 컴포넌트의 상태를 하위 컴포넌트의 속성으로 사용
      return <Component {...this.state} {...this.props} />
    }
  }
  _LoadWebsite.displayName = 'EhnancedComponent'

  return _LoadWebsite
}

고차 컴포넌트의 사용
HiorContent.jsx

// 고차 컴포넌트를 생성하는 함수의 파라미터로 내부 컴포넌트 정의
let EnhancedButton = LoadWebsite(HiButton)
let EnhancedLink = LoadWebsite(HiLink)
let EnhancedLogo = LoadWebsite(Logo)

class HiOrContent extends React.Component {
  render() {
    return (
      <div>
        <EnhancedButton />
        <br />
        <br />
        <EnhancedLink />
        <br />
        <br />
        <EnhancedLogo />
        <br />
        <br />
        <iframe id="frame" src="" width="600" height="500"/>
      </div>
    )
  }
}

let el2 =document.getElementById('hi-content')
var root = ReactDOM.createRoot(el2)

root.render(
  <div>
    <HiOrContent> </HiOrContent>
  </div>
)

프레젠테이션 컴포넌트와 컨테이너 컴포넌트

데이터를 보여주는 컴포넌트와 데이터를 서버로 부터 불러오는 컴포는트를 분리하여 작성하는 것이
간결한 소스와 유지보수에 유용하다

https://github.com/Kmmanki/react_note/tree/master/chapter08

문제

풀이

if 문을 확인해보면 id가 admin이면 풀린다.
쿼리를보면 guest가 기본으로 들어가 있기 때문에

no절을 포함한 앞을 false로 만들고 이후 절에 id='admin'을 넣어야 한다.

하지만 No Quotes~ 를 보면 정규식으로 '를 제한한다.

이를 우회하기 위해 서브쿼리로 숫자 -> 문자로 치환한다.

?no=2 or id=(select concat(char(97), char(100), char(109), char(105), char(110)))

no는 1일 때 guest가 참이었으므로 2로 변경하여 False로 반환

id가 admin인 것을 찾기 위해 서브쿼리 생성

concat을 사용하여 변환된 아스키 코드를 연결

char를 사용하여 입력받은 숫자 아스키를 알파벳으로 변경