예스30

[JAVA] Stream 중간연산

키키수수 — Tue, 30 Mar 2021 11:56:58 +0900

중간연산

스트림은 마치 데이터베이스에 질의를 하는 것과 같은 느낌, 중간 연산과 최종 연산으로 분류할 수 있으며 중간 연산은 연속해서 연결할 수 있다. 반면 최종 연산은 한번만 가능하다.

지연된 연산, 최종 연산이 수행되기 전까지 중간 연산은 수행되지 않는다.

`skip(), limit()` 자르기

class StreamTest {

    @Test
    public void 자르기() {
        // 1 ~ 9 까지 배열 생성
        int[] one2nine = IntStream.range(1, 10).toArray();
        assertThat(one2nine).isEqualTo(new int[]{1, 2, 3, 4, 5, 6, 7, 8, 9});

        // 3번째 요소까지 스킵, 그 후 두개만
        int[] four2five = Arrays.stream(one2nine)
                .skip(3)
                .limit(2)
                .toArray();
        assertThat(four2five).isEqualTo(new int[]{4, 5});

        // 소스에서 처음 5개만
        int[] one2five = Arrays.stream(one2nine).limit(5).toArray();
        assertThat(one2five).isEqualTo(new int[]{1, 2, 3, 4, 5});
    }
}

`filter(), distinct()` 거르기

class StreamTest {
    @Test
    public void 거르기() {
        int[] numbers = new int[]{1, 1, 2, 2, 4, 5, 5, 7, 9};

        // 짝수만
        // Stream<T> filter(Predicate<T> predicate);
        int[] evenNumbers = Arrays.stream(numbers)
                .filter(v -> v % 2 == 0)
                .toArray();
        assertThat(evenNumbers).isEqualTo(new int[]{2, 2, 4});

        // 중복제거
        // Stream<T> distinct()
        int[] distinctNumbers = Arrays.stream(numbers)
                .distinct()
                .toArray();
        assertThat(distinctNumbers).isEqualTo(new int[]{1, 2, 4, 5, 7, 9});
    }
}

`sorted()` 정렬

Stream<T> sorted();
Stream<T> sorted(Comparator<? super T>comparator);

Comparator 대신 int값을 반환하는 람다식을 사용하는 것도 가능함, 파라미터가 없는 매서드는 스트림을 기본정렬한다. 단, 스트림의 요소가 Comparable을 구현하지 않았다면 예외가 발생한다.

Comparator는 많은 API가 있지만 가장 기본적인 메서드는 아래와 같다.

comparing(Function<T, U> keyExtractor);
comparing(Function<T, U> keyExtractor,Comparator<U> keyComparator);

스트림의 요소가 comparable을 구현했을 경우 파라미터가 한개인 메서드를 사용하고, 그렇지 않은경우는 Comparator를 지정한다. 기본형의 경우 comparing() 대신 comparing기본형()을
사용한다. 정렬 조건을 추가할 때는 thenComparing()을 사용한다.

학생스트림을 학년순, 반순, 성적으로 정렬하는 방법은 아래와 같다.

Arrays.stream(stuArr).sorted(Comparator.<Student>comparingInt(v->v.getHak())
                .thenComparingInt(v->v.getBan())
                .thenComparingInt(v->v.getScore())
).forEach(System.out::println);

`map()`

스트림의 요소에서 원하는 값만 뽑아내거나 특정 형태로 변환해야 할때 사용한다. mapToInt, mapToDouble, mapToLong등 기본형 스트림으로 변환하는
메서드도 있다.

mapToInt의 경우 IntStream이 반환되는데 count()만 지원하던 Stream과 달리 기본형스트림은 숫자를 다루는데 편리한 메서드들을 제공한다.
아래의 메서드는 최종연산으로 호출 후에는 스트림이 닫힌다.

sum()
average()
max()
min()

위의 네가지 결과를 얻으려면 스트림을 네번 생성해야되는데 그 귀찮음을 방지한 summaryStatistics() 라는 메서드가 제공된다.

@Test
public void 써머리(){
  IntSummaryStatistics scoreStat = Arrays.stream(stuArr).mapToInt(v -> v.getScore()).summaryStatistics();

  log.info(String.valueOf(scoreStat.getSum()));
  log.info(String.valueOf(scoreStat.getMax()));
  log.info(String.valueOf(scoreStat.getMin()));
  log.info(String.valueOf(scoreStat.getAverage()));
  log.info(String.valueOf(scoreStat.getCount()));
}

`peek()`

연산과 연산 사이에 올바르게 처리되었는지 확인하고 싶을때 사용한다. foreach와 달리 스트림의 요소를 소모하지 않기때문에
중간연산들 사이에 넣어도 문제가 되지 않는다.

`flatMap()`

스트림의 요소가 배열이거나, map의 연산결과가 배열일 경우, 즉 스트림의 타입이 Stream<T[]>의 경우 Stream로 다룰 수 있도록 한다.

스트림의 요소가 배열일때, map의 연산결과가 배열일때
그 배열에서 모든 요소를 꺼내 하나의 스트림으로 감쌀때

Stream<String[]> -> Stream<String>

[JAVA] Stream

키키수수 — Tue, 30 Mar 2021 11:55:30 +0900

스트림

데이터 소스가 무엇이던 간에 같은 방식으로 다룰 수 있게 추상화 함, 즉 배열이나 컬렉션뿐만 아니라 파일도 모두 같은 방식으로 다룰 수 있음

특징

1. 데이터 소스를 변경하지 않음

데이터를 읽기만 할 뿐 데이터 소스를 변경하지 않음

2. 일회용

한번 사용하면 닫혀서 다시 사용할 수 없음

3. 내부 반복으로 처리

스트림으로 작성한 코드가 간결할 수 있는 이유는 내부반복

class Stream {
    void forEach(Consumer<? super T> action) {
        Objects.requireNonNull(action);
        for (T t : src) {
            action.accept(t);
        }
    }
}

4. 연산

스트림은 마치 데이터베이스에 질의를 하는 것과 같은 느낌, 중간 연산과 최종 연산으로 분류할 수 있으며
중간 연산은 연속해서 연결할 수 있다. 반면 최종 연산은 한번만 가능하다.

지연된 연산, 최종 연산이 수행되기 전까지 중간 연산은 수행되지 않는다.

생성

컬랙션

컬랙션의 최고 조상인 Collection에 stream()이 정의 되어 있음, 그러므로 list, set의 구현체들은 모두 스트림을 생성할 수 있음

List<String> stringList = new ArrayList<>(Arrays.asList("김","은", "수", "김"));
Stream<String> listStream = stringList.stream();
listStream.forEach(System.out::println);

System.out.println();

Set<String> stringSet = new HashSet<>(Arrays.asList("김","은", "수", "김"));
Stream<String> setStream = stringSet.stream();
setStream.forEach(System.out::println);

배열

Stream과 Arrays에 정의되어 있음

Stream.of(T... values);
Stream.of(T[] t);
Arrays.stream(T[] t);
Arrays.stream(T[] t, int startIncluesive, int endExcluesive);
IntStream.of(int... values);
IntStream.of(int []);

특정 범위의 정수

IntStream.range(begin, end)

Intsream.rangeClosed(begin, end)

임의의 수

크기가 정해지지 않은 무한스트림이 생성되며 limit() 메서드를 사용해 제한해야함

IntStream randomIntStream = new Random().ints()

LongStream randomLongStream = new Random().longs()

IntStream randomIntStream = new Random().ints(5)

각 요소를 계산하여 스트림 생성

람다식에 의해 계산되는 값들을 무한스트림을 생성한다.

첫번째 파라미터로 지정한 값부터 시작하여 f 함수로 의해 계산된 결과를 다시 seed 값으로 설정하고 계산을 반복하며 생성한다.

Stream<T> iterate(T seed, UnaryOperator<T> f)

파라미터가 없는 람다식을 이용해 계산되는 값을 이용하여 생성한다.

Stream<T> generate(Supplier<T> s)

파일

java.nio.file.Files는 파일을 다루는데 유용한 메서드들을 제공, list()는 지정된 디렉토리에 있는 파일의 목록을 소스로하는
스트림을 리턴함

Stream<Path> pathStream = Files.list(Path dir)

파일 내용의 행을 요소로 하는 스트림

Stream<String> contentStream = Files.lines(Path path)

Stream<String> contentStream = lines(); // BufferedReader클래스

[JAVA] 람다식 기본

키키수수 — Tue, 30 Mar 2021 11:54:09 +0900

Lambda Expression

JDK 1.8에 추가

메서드를 하나의 식(expression)으로 표현한것
메서드를 람다식으로 표현하면 메서드의 이름 이 없어지므로, 람다식을 '익명함수(anonymous function)'라고 함
반환 타입이 없음

메서드의 매개변수로 전달될 수 있고 메서드의 결과로 반환될 수 있으며 이로인해 메서드를 변수처럼 다루는 것이 가능해짐

메서드와 함수의 차이

함수라는 이름은 수학에서 가져온 것이며 개념이 유사함.
객체지향의 개념에서는 함수 대신 객체의 행위나 동작을 의미하는 메서드라는 용어를 사용함

메서드는 함수와 같은 의미지만 특정 클래스에 반드시 속해야 한다는 제약이있음
하지만 람다식은 메서드가 하나의 독립적인 기능을 하기 때문에 함수라는 용어가 사용됨

람다식 작성

람다식에 선언된 매개변수의 타입은 추론이 가능한 경우는 생략할 수 있음, 반환타입이 없는 이유도 항상 추론이 가능하기 때문
익명함수답게 메서드에서 이름과 반환타입을 제거, 선언부와 몸통사이에 ->를 추가
```
int sum(int a, int b){
  return a + b;
}
(int a, int b) -> {return a + b;}
```
반환값이 있는 메서드의 경우, return문 대신 식으로 대신할 수 있음, 식의 연산결과가 자동적으로 반환값이됨. 이때 문장이 아닌 식이므로 끝에 ;를 붙이지 않음
```
(int a, int b) -> a + b
(int a, int b) -> {return a + b;}
```
선언된 매개변수가 하나일 경우 괄호 생략가능, 단 매개변수의 타입을 선언했다면 괄호를 생략할 수 없음
```
a -> a * a
(int a) -> a * a
```
괄호 안의 문장이 하나일 때는 괄호를 생략할 수 있음, 문장의 끝에 ;을 붙이지 않으며 return 문일 경우 괄호는 생략할 수 없음
```
a, b -> a + b
a, b -> {return a + b;}
```

함수형 인터페이스 (functional interface)

람다식은 익명클래스의 객체와 동등하다.

public void 익명클래스(){

     AnonymousClass anonymousClass = new AnonymousClass() {
         @Override
         public void hello() {
             System.out.println("hello Anonymous");
         }
     };

     AnonymousClass lambda = () -> System.out.println("hello anonymous");

     anonymousClass.hello();
     lambda.hello();
}

람다식으로 정의된 익명 객체의 메서드를 어떻게 호출 할 수 있을까? 참조변수가 있어야 객체의 메서드를 호출 할 수 있을탠데 람다식의 참조변수는 뭐라고 해야할까?
```
타입 f = (a, b) -> a > b ? a : b;
```

참조변수 f의 타입은 참조형이므로 클래스 또는 인터페이스가 가능함.

람다식과 동등한 메서드가 정의되어 있어야 참조변수로 익명 객체(람다식)의 메서드를 호출할 수 있음

interface AnonymousClass {
 void hello();
}
@Test
void 익명클래스2() {
AnonymousClass anonymousClass = () -> System.out.println("람다");
anonymousClass.hello();
}

매개변수의 타입, 개수, 반환값이 일치할 경우 대체가 가능
함수형 인터페이스는 오직 하나의 추상 메서드만 정의되어 있어야함, 단 static 메서드와 default 메서드는 개수의 제한이 없음

@FunctionalInterface를 붙일 경우 컴파일러가 함수형 인터페이스를 올바르게 정의하였는지 확인해 줌

외부 변수를 참조하는 람다식

람다식 내에서 참조하는 지역변수는 final이 붙지 않았어도 상수로 간주되며 람다식 내에서 참조하고 있는 지역 변수는
식 내에서나 다른 어느 곳에서도 변수의 값을 변경하는 일은 허용하지 않는다.

    int classVariable = 5;

    @Test
    public void 람다식의지역변수참조() {
      int c = 1; // == final int c = 1;

      lambda.FunctionSum sum = (a, b) -> {
        a = a + 20;
        classVariable = 50;
        return a + b + classVariable + c;
      };

      log.info("result :{}", sum.sum(3, 5));
    }

java.util.function 패키지

일반적으로 자주 쓰이는 형식의 메서드를 함수형 인터페이스로 미리 정의해 둠, 가능한 이 패키지의 인터페이스를 활용하라

Runnable : void run()
파라미터와 리턴값 없음
Supplier<T> : T get()
리턴값만 있음
Consumer<T> : void accept(T t)
파라미터만 있음
Function<T, R> : R apply(T t)
파라미터와 리턴값 있음 
Predicate <T> : boolean test(T t)
파라미터와 리턴값이 있고 리턴타입은 boolean, 조건식을 람다로 표현할때 사용한다.

파라미터가 두개인 함수형 인터페이스

2개인 경우 함수인터페이스에 Bi가 붙음, 보통 파라미터 타입으로 T를 사용하므로 알파벳순 T, U, V, W가 파라미터의 타입으로 사용됨

BiConsumer<T, U> : accept(T t, U u)
BiPredicate<T, U> : test(T t, U u)
BiFunction<T, U, R> : R apply(T t, U u)
Supplier의 경우 파라미터가 없는 메서드를 갖고있고 리턴타입이 두개가 될순 없으므로 Bi는 존재하지 않음

리턴타입이 3개 이상 필요할경우 직접 선언하여 만들어야함

UnaryOperator<T> T apply(T t) : Function의 sub
BinaryOperator<T> T apply(T t, T t2) : BiFunction의 sub

[React] props와 state

키키수수 — Mon, 22 Mar 2021 17:50:29 +0900

Props

properties를 줄인 표현으로 컴포넌트 속성을 설정할때 사용한다. 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정한다.

props 기본값 설정 방법

defaultProps를 사용한다.

const MyComponent = props => {
  return <div>안녕하세요, {props.name}입니다.</div> 
}

MyComponent.defaultProps = {
  name: '설정하지 않은 이름'
}

<MyComponent/>

propTypes를 통한 props검증

참고

필수 props를 지정하거나 props의 타입을 지정할떄는 propTypes를 사용한다. defaultProps를 설정하는 방법과 유사하다.

prop에 유효하지 않은 값이 전달 되었을 때, 경고문이 JavaScript 콘솔을 통해 보인다. propTypes는 성능상의 이유로 개발 모드(Development mode) 에서만 확인된다.

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

태그 사이의 내용을 보여주는 children

컴포넌트 태그 사이의 작성한 문자열을 컴포넌트 내부에서 사용하고 싶을 경우 children을 사용한다.

const MyComponent = props => {
  return <div>안녕하세요, {props.name} {props.children}</div> 
}

<MyComponent name='김은수'>입니다.</MyComponent>

클래스형 컴포넌트에서 props 사용하기

this.props로 참조한다. defaultProps, propsTypes 모두 동일한 방법으로 사용 가능하다.

읽기 전용

함수 컴포넌트나 클래스 컴포넌트 모두 props를 수정해선 안된다. React는 유연하지만 한가지 엄격한 규칙이 있으며 모든 React Component는 자신의 props를 다룰 때 반드시 순수 함수처럼
동작해야 한다.

//순수함수, 입력값을 바꾸혀 하지 않는다. 입력값이 동일하다면 동일한 결과를 반환한다.
function sum(a, b) {
  return a + b;
}

//순수함수가 아니다. 입력값을 변경한다.
function withdraw(account, amount) {
  account.total -= amount;
}

State

State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어된다.

클래스형 컴포넌트가 지니고 있는 state
함수형 컴포넌트에서 useState() 라는 함수를 통해 사용하는 state

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock/>,
  document.getElementById('root')
);

<Clock /> 컴포넌트가 ReactDOM.render()로 전달되었을 때 React는 Clock 컴포넌트의 constructor를 호출
constructor 생성자 내부에서 Clock이 현재 시각이 포함된 객체로 this.state 를 초기화
React는 Clock 컴포넌트의 render() 메서드를 호출
React는 화면에 표시되어야 할 내용을 알게 됨
React는 Clock의 렌더링 출력값을 일치시키기 위해 DOM을 업데이트
Clock 출력값이 DOM에 삽입되면, React는 componentDidMount() 생명주기 메서드를 호출
componentDidMount() 내부에서 Clock 컴포넌트는 매초 컴포넌트의 tick() 메서드를 호출하기 위한 타이머를 설정하도록 브라우저에 요청
매초 브라우저가 tick() 메서드를 호출
tick() 내부에서는 setState()에 현재 시각을 포함하는 객체를 호출하면서 UI 업데이트를 진행
setState() 호출 덕분에 React는 state가 변경된 것을 인지하고 화면에 표시될 내용을 알아내기 위해 render() 메서드를 다시 호출
이 때 render() 메서드 안의 this.state.date가 달라지고 렌더링 출력값은 업데이트된 시각을 표현
React는 이에 따라 DOM을 업데이트합니다.
Clock 컴포넌트가 DOM으로부터 한 번이라도 삭제된 적이 있다면 React는 타이머를 멈추기 위해 componentWillUnmount() 생명주기 메서드를 호출.

state 올바르게 사용하기

직접 state를 수정하지 않는다.

this.state를 지정 할 수 있는 유일한 공간은 constructor 하나다.

// 이 코드는 컴포넌트를 리렌더링하지 않는다.
this.state.comment = 'Hello';

setState()를 사용한다.

this.setState({comment: 'Hello'});

state 업데이트는 비동기적일 수 있다.

React는 성능을 위해 컴포넌트에 작성된 setState() 함수들을 단일 업데이트로 한번에 처리할 수 있다.
this.props, this.state가 비동기적으로 업데이트 될 수 있기 때문에 다음 state을 이용하는 작업에서 해당 값에 의존해서는 안된다.

아래와 같은 코드는 실패할 수 있다.

this.setState({
  counter: this.state.counter + this.props.increment,
});

객체보다는 함수를 인자로 사용하는 다른 형태의 setState() 함수를 사용하여 해결할 수 있다. 첫번째 파라미터는 이전 state, 두번쨰 파라미터는 업데이트가 적용된 시점의 props를 받는다.

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

state 업데이트는 병합된다.

별도의 setState() 호출을 사용해 독립적으로 업데이트할 수 있습니다. 이후에 state는 병합되어 업데이트 된다.

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

  render({

<.../>
}

)
;
}

Top-down

“하향식(top-down)” 또는 “단방향식” 데이터 흐름이라고 한다. 모든 state는 항상 특정한 컴포넌트가 소유하고 있으며 그 state로부터 파생된 UI 또는 데이터는 오직 트리구조에서 자신의 **
“아래”에 있는 컴포넌트에만 영향을 미친다.**

[React]Component란?

키키수수 — Mon, 22 Mar 2021 17:49:17 +0900

Component

컴포넌트의 이름은 항상 대문자로 시작한다. React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다.
div 는 HTML 태그로 인식하고, Welcome은 컴포넌트로 인식하며 범위내에 Welcome 컴포넌트가 있어야 한다.

<div></div>
<Welcome/>

클래스형 컴포넌트

state 기능 및 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있다. render() 함수가 필수다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

함수형 컴포넌트

state와 라이프 사이클 API의 사용이 불가하지만, Hooks 기능으로 대체할 수 있게 됐다. 공식 매뉴얼에서는 컴포넌트 작성시
함수형 컴포넌트의 사용을 적극 권한다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

컴포넌트 랜더링

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다.

const element = <Welcome name="Sara" />;

React는 사용자 정의 컴포넌트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다.
이 객체를 props라고 한다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />; // {props.name} === 'Sara'

ReactDOM.render(
  element,
  document.getElementById('root')
);

[React] Element란?

키키수수 — Mon, 22 Mar 2021 17:48:13 +0900

Element

엘리먼트는 컴포넌트의 구성요소이며 React앱의 가장 작은 단위다. 엘리먼트는 화면에 표시할 내용을 기술한다.

<div id="root"></div>

root 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하며 이것을 root DOM 노드라고 부른다. 일반적으로 React로 구현된 앱은 하나의 Root DOM 노드가 있다.

React 엘리먼트를 root DOM 노드에 렌더링 하려면 ReactDOM.render(element, document.getElementById('root'))에 전달하면된다.

렌더링을 마친 엘리먼트를 수정하기

React 엘리먼트는 불변객체다. 생성한 이후에는 자식이나 속성을 변경할 수 없고 특정 시점의 UI를 보여준다.
UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 ReactDOM.render()에 전달하는 것이다.

변경된 부분만 업데이트 하기

ReactDOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다.

매초 전체 UI를 다시그리도록 엘리먼트를 만들었지만 React DOM은 내용이 변경된 텍스트 노드만 업데이트한다.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

[React] JSX란?

키키수수 — Mon, 22 Mar 2021 17:46:19 +0900

jJSX

// 문자열도 HTMl도 아닌 코드
const element = <h1>Hello, world!</h1>;

자바스크립트를 확장한 문법, React Element를 생성한다.

Expression

모든 자바스크립트 표현식이 사용 가능하고 { }를 사용하여 감싸면 된다.

const name = 'Eunsoo';
const el = <h1>{name}</h1>;

Compile

Babel's doJSX => React.createElement() => React Element

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Attributes, Inline Style

JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다. e.g. JSX에서 class는 className가
되고 tabindex는 tabIndex가 된다.

const element = <div tabIndex="0"></div>;

React 에서 스타일을 적용할 때는 문자열 형태로 넣는것이 아닌 객체 형태로 넣어줘야한다.

const style = {
  backgroundColor: 'black',
  fontSize: '48px',
  fontWeight: 'bold'
}

XSS 방지

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
모든 항목은 렌더링 되기 전에 문자열로 변환된다.

Tag

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야함, Virtual Dom에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 Dom트리 구조로 이루어져야 한다 라는 규칙이
있음

조건

표현식안에서는 if 조건문을 사용할 수 없지만 외부에서는 가능하다.

// 표현식 외부에서 if 문
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

AND(&&)

true && expression은 항상 expression으로 평가된다.
false && expression은 항상 false로 평가된다.

따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 됩니다. 조건이 false라면 React는 무시합니다. false로 평가될 수 있는 표현식을 반환하면 && 뒤에 있는 표현식은 건너뛰지만 false로 평가될
수 있는 표현식이 반환된다.

// && 조건이 true일 경우 expresssion을 출력 false일 경우 null
console.log(true && 1 > 0 && 'success'); //success 
console.log(true && 1 < 0 && 'success'); //false

OR(||)

true && expression은 항상 true 평가된다.
false && expression은 항상 expression으로 평가된다.

// || 조건이 true일경우 조건 출력 false일 경우 expression 출력
console.log(1 > 0 || 'success'); //true 
console.log(1 < 0 || 'success'); //success


const App = () => {
  const name = undefined;
  return name;
}
export default App

리엑트 컴포넌트의 함수에서 undefined를 반환하는 경우 리엑트에서 오류를 발생시킨다. || 연산을 사용하여 값이 undefined일 경우 기본값을 설정하여 오류를 피할 수 있다.

const App = () => {
  const name = undefined;
  return name || '값이 없다.';
}
export default App

반면 JSX 내부에서 undefined를 렌더링 하는것은 오류가 나지 않는다.

const App = () => {
  const name = undefined;
  return <h1>{name}</h1>;
}
export default App

Comment

{/* 이렇게 */}

[JAVA] Stream skip(), limit() 사용법

키키수수 — Wed, 17 Mar 2021 15:06:56 +0900

class StreamTest {

    @Test
    public void 자르기() {
        // 1 ~ 9 까지 배열 생성
        int[] one2nine = IntStream.range(1, 10).toArray();
        assertThat(one2nine).isEqualTo(new int[]{1, 2, 3, 4, 5, 6, 7, 8, 9});

        // 3번째 요소까지 스킵, 그 후 두개만
        int[] four2five = Arrays.stream(one2nine)
                .skip(3)
                .limit(2)
                .toArray();
        assertThat(four2five).isEqualTo(new int[]{4, 5});

        // 소스에서 처음 5개만
      int[] one2five = Arrays.stream(one2nine).limit(5).toArray();
      assertThat(one2five).isEqualTo(new int[]{1, 2, 3, 4, 5});
    }
}

깨끗한 코드

키키수수 — Thu, 11 Mar 2021 16:29:20 +0900

나는 내가 짠 코드에 자부심을 느끼고 내 이름을 적어두고 싶다. 내 코드를 읽고 고개를 끄덕이게 만들고 싶다. '이거 누가 작업한거에요?' 라는 질문에
'저요!' 라고 당당히 얘기하고 싶다. 설령 그게 질책이라도, 등에서 식은땀이 나도록 까여도 내 코드를 읽고 어드바이스를 준다면, 그리고 그걸로 내가 성장한다면 그걸로 좋다.

그래서 이 책을 읽었다. ~~잘난척하고 싶어서. 카하하하핳~~
읽어주길 바란다면 쉽게 읽을 수 있어야 하니까. 술술 읽혀야 하니까.

깨끗한 코드란?

'안돌아가는 프로그램보다 돌아가는 쓰레기가 더 좋다. ' 라고 안도하지말자
나중에 손보겠다는 없다. 만들때 잘 만들자.

르블랑의 법칙, 나중은 결코 오지 않는다.
기한을 맞추는 유일한 방법은 언제나 코드를 최대한 깨끗하게 유지하는 습관이다.
보는 사람에게 즐거움을 선사해야 한다.
나쁜 코드는 나쁜 코드를 '유혹'한다. 나쁜 코드를 고치려면 오히려 더 나쁜 코드를 만들게 된다.

깨진 창문

누구도 상관하지 않는다는 인상을 픙기고 사람들이 관심을 끊는다.
창문이 더 깨져도 상관하지 않으며 마침내는 자발적으로 창문을 깬다.
나쁜 코드는 너무 많은 일을 하려 애쓰다가 의도가 뒤섞이고 목적이 흐려진다.

깨끗한 코드는 한가지에 집중하고 주변 상황에 현혹되거나 오염되지 않은 채 한길만 걷는다.
깨끗한 코드는 잘 쓴 문장처럼 읽힌다.

해결할 문제의 긴장을 명확히 드러내고, 긴장이 쌓이며 클라이막스에 이르렀다가
명백한 해볍을 제시하며 긴장과 문제를 풀어내야 한다.
반드시 필요한 내용만 담는다.
다른 사람이 고치기 쉽다. 읽기 쉬운 코드와 고치기 쉬운 코드는 엄연히 다르다.

테스트 케이스가 없는 코드는 깨끗한 코드가 아니다.
깨끗한 코드는 주의 깊게 짰다는 느낌을 주고 고치려고 살펴봐도 딱히 손 댈곳이 없다.

이미 작성자가 모든 사항을 고려했으므로, 고칠 궁리를 하다보면 언제나 제자리로 돌아온다.
초반부터 간단한 추상화를 고려한다.
중복 줄이기
표현력 높이기
읽으면서 짐작한 대로 돌아가는 코드

코드를 깨끗하게 짜고 나서..

시간이 지나도 언제나 깨끗하게 유지해야한다. 코드의 퇴보를 막아야한다.

채크아웃할 때보다 좀 더 깨끗한 코드를 채크인 한다. (지속적인 개선)

보이스카우트 규칙
캠프장은 처음 왔을 때보다 더 깨끗하게 해놓고 떠나라

[단위테스트] Spring test

키키수수 — Thu, 25 Feb 2021 16:46:20 +0900

Spring Test

테스트가 독립적이라고 해서 매번 스프링 컨텍스트, 즉 컨테이너를 새로 만드는 것은 매우 비효율적.
스프링 테스트는 사용하는 컨텍스트를 캐싱해ㅔ 여러 테스트에서 하나의 컨텍스트를 공유할 수 있는 방법을 제공한다.

즉 동일한 컨텍스트 구성을 갖는 테스트끼리는 같은 컨텍스트를 공유하는것
공유는 메서드 사이에서만 가능한 게 아니라 여러 클래스 사이에서도 가능하다.

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-test</artifactId>
    <version>${org.springframework-version}</version>
    <scope>test</scope>
</dependency>

1. @RunWith(SpringJunit4ClassRunner.class)

ApplicationContext를 만들고 관리하는 작업을 할 수 있도록 jUnit의 기능을 확장
jUnit에서는 테스트 메소드별로 객체를 따로 생성해 관리하는 반면 Spring-Test 라이브러리로 확장된 jUnit에서는 컨테이너 기술을 써서 싱글톤으로 관리되는 객체를 사용해 모든 테스트에 사용

2. @ContextConfiguration(locations = "classpath:xml파일위치")

스프링 빈(Bean) 설정 파일의 위치를 지정
@RunWith 어노테이션은 컨테이너를 생성하겠다는 의미인데, 어떤 파일을 참조할지 모르는 상태이기 때문에 이 어노테이션을 함께 써줘야함
파일 위치의 루트는 src/test/resources이며 운영 설정 파일을 이곳에 복사해놓고 사용해도 됨