개인히스토리저장소

작성일자 : 2020.02.23

목표 : Spring App 구동 후 특정 작업 실행

1. ApplicationRunner 사용 (Parameter 활용 가능)

package com.example.demo.test;

import org.springframework.boot.ApplicationArguments;
import org.springframework.boot.ApplicationRunner;
import org.springframework.stereotype.Component;

import java.util.Arrays;

@Component
public class RunAfterApplicationStart implements ApplicationRunner {
    @Override
    public void run(ApplicationArguments args) {
        System.out.println("ApplicationRunner Example");
        System.out.println(Arrays.toString(args.getSourceArgs()));
    }
}

2. CommandLineRunner 사용 (Parameter 활용 가능)

package com.example.demo.test;

import org.springframework.boot.CommandLineRunner;
import org.springframework.stereotype.Component;

import java.util.Arrays;

@Component
public class RunAfterApplicationStart implements CommandLineRunner {
    @Override
    public void run(String... args) {
        System.out.println("CommandLineRunner Example");
        System.out.println(Arrays.toString(args));
    }
}

3. EventListener 사용

package com.example.demo.test;

import org.springframework.boot.context.event.ApplicationReadyEvent;
import org.springframework.context.event.EventListener;
import org.springframework.stereotype.Component;

@Component
public class RunAfterApplicationStart {
    @EventListener(ApplicationReadyEvent.class)
    public void test() {
        System.out.println("ApplicationReadyEventListener Example");
    }
}

작성일자 : 2020.01.26

환경 : npm 6.12.0, react-router-dom 5.1.2, 

목표 : 특정 링크를 클릭하여 경로를 이동하며, 경로 이동 시 특정 위치에 보여지는 Component의 변환

1. react router 설치

2. Routing Component

Rounting에 사용할 단순 문구를 출력하는 Component 생성

Hello.js

import React, { Component } from 'react';

class Hello extends Component {
    render(){
        return (
            <div>
                Hello
            </div>
        )
    } 
}

export default Hello;

Home.js

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                Home
            </div>
        )
    }
}

export default Home;

3. Router 설정

import React, { Component } from 'react';

import Hello from './component/Hello'
import Home from './component/Home'

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div>
      
        <Router>
          <Link to="/"> default </Link> 
          <Link to="/hello"> hello </Link>
          <Route exact path="/" component={Home}/>
          <Route path="/hello" component={Hello}/>
        </Router>
        
      </div>
    )
  }
}

export default App;

-  "DisplayWord" 가 Router Component 위치에 보여지며, 해당 문구를 클릭 시 해당 path로 이동

-  path로 접근할 경우 해당 위치에 ComponentName의 Component가 보여짐

-  exact : Default Matching 규칙

4. 확인

4.1 '/' 경로 접근시 or default 문구 클릭 시 

4.2 /hello 경로 접근 시 or hello 문구 클릭 시

작성일자 : 2020.01.16

case1 : 부모 -> 자식 데이터 전달

부모 컴포넌트 

자식 컴포넌트

- 부모 컴포넌트에서 자식 컴포넌트에 데이터 직접 전달

case2 : 자식 -> 부모 데이터 전달

부모 컴포넌트

자식 컴포넌트

- 부모 컴포넌트에서 자식 컴포넌트에 함수를 데이터로서 전달 후, 해당 함수를 통해 자식 데이터를 부모에게 전달