개발새발, 써놓기

ScrollView는 여러 컴포넌트와 view를 담을 수 있는 스크롤되는 container

https://reactnative.dev/docs/using-a-scrollview

import React from 'react';
import {Image, ScrollView, Text} from 'react-native';

const logo = {
  uri: 'https://reactnative.dev/img/tiny_logo.png',
  width: 64,
  height: 64,
};

// 아래로 스크롤바를 밀어서 페이지 이동할 수 있다. 
// pagiongEnabled prop을 넣으면 swipe 될 때 scroll view의 size 몇 개를 넘기고 멈춘다. 
// 자세한 사항: https://reactnative.dev/docs/scrollview#pagingenabled
// maximumZoomScale, minimumZoomScale prop을 통해서 사용자가 줌인, 줌아웃 가능하게 할 수도 있음.
// 화면에 맞지 않는 긴 리스트가 있다면 FlatList 사용 권장
const App = () => (
  <ScrollView>
    <Text style={{fontSize: 96}}>Scroll me plz</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>If you like</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>Scrolling down</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>What's the best</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>Framework around?</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 80}}>React Native</Text>
  </ScrollView>
);

export default App;

FlastList 변하지만 구조적으로 유사한 데이터의 스크롤되는 리스트를 담는 컴포넌트. 시간이 지남에 따라 변하는 아이템이 있는 데이터의 긴 리스트에 잘 작동한다.

★ 일반적인 ScrollView와 달리 화면에 현재 보이는 요소들만 렌더링한다. 한 번에 모드 요소를 렌더링하지 않음. ★

FlastList 컴포넌트는 data와 rederItem 두 가지의 prop이 필수이다. data는 리스팅할 데이터. renderItem은 데이터에서 하나 꺼내서 렌더링되는 컴포넌트를 돌려준다. 

import React from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        // 데이터들을 전부 Text 컴포넌트로 렌더링 된다. 
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
};

export default FlatListBasics;

section header 를 통해 논리적으로 구분되는 데이터를 렌더링하고 싶으면 SectionList를 사용할 수 있다.

import React from 'react';
import {SectionList, StyleSheet, Text, View} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const SectionListBasics = () => {
  return (
    <View style={styles.container}>
      <SectionList
        sections={[
          {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
          {
            title: 'J',
            data: [
              'Jackson',
              'James',
              'Jillian',
              'Jimmy',
              'Joel',
              'John',
              'Julie',
            ],
          },
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
        renderSectionHeader={({section}) => (
          <Text style={styles.sectionHeader}>{section.title}</Text>
        )}
        keyExtractor={item => `basicListEntry-${item}`}
      />
    </View>
  );
};

export default SectionListBasics;

list view 공통의 특징으로 서버에서 가져오는 데이터를 보여준다. 

서버에서 가져오는 데이터에 관한 자세한 문서: https://reactnative.dev/docs/network 

Text input은 사용자가 글을 입력할 수 있게하는 핵심 컴포넌트.

onChangeText: 텍스트가 변할때마다 호출되는 함수

onSubmitEditing: submit될 때 호출되는 함수

https://reactnative.dev/docs/handling-text-input

import React, {useState} from 'react';
import {Text, TextInput, View} from 'react-native';

const PizzaTranslator = () => {
  // text는 시간에 따라 변하므로 state에 저장한다.
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text
          .split(' ')
          .map(word => word && '🍕')
          .join(' ')}
      </Text>
    </View>
  );
};

export default PizzaTranslator;

※ 변하는 것만 re-render 한다.

https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable 

// AS-IS
function App() {
  /* 여기에서 키보드 타자를 칠 때마다 (onChange될 때 마다) 
     setFirstName 을 통해 함수를 호출하고 다시 렌더링 되는데, 
     re-rendering performance를 최적화 하기 위해서는,
     <PageContent /> 는 input의 state에 영향을 받지 않으므로
     input의 state를 다루는 컴포넌트를 따로 만든다. */
  const [firstName, setFirstName] = useState('');
  return (
    <>
      <form>
        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
      </form>
      <PageContent />
    </>
  );
}

// TO-BE
function App() {
  return (
    <>
      <SignupForm />
      <PageContent />
    </>
  );
}

function SignupForm() {
  const [firstName, setFirstName] = useState('');
  return (
    <form>
      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
    </form>
  );
}
/* 이 경우 performance가 상당히 향상되는데, 
   이제는 키입력에 따라 onChange 이벤트가 호출될 때,
   SignupForm만 다시 렌더링하기 때문이다. */

https://reactnative.dev/docs/intro-react

공식문서 읽고 공부...:) 

The Basics

import React from 'react';
import {Text} from 'react-native';

// 컴포넌트는 함수로 시작.
const Cat = () => {};
// 컴포넌트를 청사진으로 간주. 함수 컴포넌트가 return하는 무엇이든간에 React element로 랜더링 된다.
// React element는 스크린에 보고싶은 것을 묘사해줌.

// 예시로 <Text>를 렌더링하는 Cat 컴포넌트.
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

// export default를 통해 어플에 걸쳐서 사용할 수 있게 export 할 수 있다. 
export default Cat;

Curly Braces

import React from 'react';
import {Text} from 'react-native';

// 중괄호{} 안에 변수 값을 넣을 수 있다. 
const Cat = () => {
  const name = 'Maru';
  return <Text>Hello, I am {name}!</Text>;
};

const getFullName = (
  firstName: string,
  secondName: string,
  thirdName: string,
) => {
  return firstName + ' ' + secondName + ' ' + thirdName;
};

// 중괄호{} 안에 함수를 넣을 수 있다.
const Cat = () => {
  return <Text>Hello, I am {getFullName('Rum', 'Tum', 'Tugger')}!</Text>;
};

export default Cat;

이런 JSX 문법은 React library안에 있는 것이므로 import React from 'react' 를 작성하지 않으면 기능하지 않는다. 

import React from 'react';
import {Text, TextInput, View} from 'react-native';

const Cat = () => {
  return (
  // <View>안에 <Text>와 <TextInput>을 들여쓰면 React Native는 함께 랜더링 한다. 
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="Name me!"
      />
    </View>
  );
};

export default Cat;

import React from 'react';
import {Text, View} from 'react-native';

const Cat = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
};

// 다른 컴포넌트를 렌더링하는 컴포넌트를 parent component라고 한다.
// 여기에서는 Cafe가 parent component이고, Cat이 child component이다. 
const Cafe = () => {
  return (
    <View>
      <Text>Welcome!</Text>
      <Cat />
      <Cat />
      <Cat />
    </View>
    /* Cat 컴포넌트를 <Cat> 을 사용함으로써 여러번 렌더링 시킬 수 있다.  */
  );
};

export default Cafe;

import React from 'react';
import {Text, View} from 'react-native';
//Props는 properties의 줄임말로 Props를 통해 React component를 커스터마이징 할 수 있다.

// 각각의 Cat이 다른 name을 갖게 하는 예제이다. 
type CatProps = {
  name: string;
};

const Cat = (props: CatProps) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
};

const Cafe = () => {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
};

export default Cafe;

import React from 'react';
import {Text, View, Image} from 'react-native';

const CatApp = () => {
  return (
  /* <Image>를 사용할 경우 source라는 prop을 이용한다. 
     {{ }} 를 주목해보면 두 개의 중괄호가 있다.
     JSX에서 JavaScript 값은 {}로 참조되는데, 이것은 문자열보다 props로 넘길 때 유용하다.
     하지만 JS오브젝트 또한 중괄호로 표시된다. 
     따라서 JS오브젝트를 JSX에서 넘길 때 {}로 감싸게 된다.*/
    <View>
      <Image
        source={{
          uri: 'https://reactnative.dev/docs/assets/p_cat1.png',
        }}
        style={{width: 200, height: 200}}
      />
      <Text>Hello, I am your cat!</Text>
    </View>
  );
};

export default CatApp;

State

컴포넌트가 어떻게 보여지는지 설정하는데 사용하는 argument --> props

컴포넌트의 개인 데이터 저장소 --> state

state는 사용자와의 상호작용에서 혹은 시간이 지남에 따라 변화되는 데이터를 다루는데 유용하다.

state는 컴포넌트에게 기억할 수 있게 한다. 

--> 시간이 지남에 따라 변화될 것이라고 생각되는 컴포넌트 데이터를 추적하는데 state를 쓴다. 

예시로, cat cate에서 두마리의 배고픈 고양이가 있고 시간이 지남에 따라 허기의 상태가 달라질 것임. 밥주기 버튼을 누르면 배고픈 고양이가 배불러지는 상태로 변경된다.

컴포넌트에 state를 추가하는 방법은 React's useState Hook을 부르는 것이다. Hook 이란 함수가 React 의 특징으로 채여지는 것. 예를 들어 useState는 함수 컴포넌트에 state를 추가하는 Hook이다. 

// useState를 import한다.
import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';

type CatProps = {
  name: string;
};

const Cat = (props: CatProps) => {
  /* 시간이 지남에 따라, 혹은 사용자와의 상호작용을 통해 변화될 것이라고 생각되는 데이터에 useState
     useState는 문자열, 숫자, Boolean, 배열, Object 어느 데이터라도 추적하는데 사용된다.
     useState는 초기 값으로 상태 변수를 만드는데, 여기서 isHungry라는 상태변수의 초기 값은 true이다.
     어떻게 이름을 짓는 상관 없는데, 아래의 패턴으로 하면 편리하다.
     [<getter>, <setter>] = useState(<initialValue>)
     
     useState를 통해 isHungry 라는 상태 변수를 만든다. */
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? 'hungry' : 'full'}!
      </Text>
      
      <Button
        //Button에 onPress라는 Prop을 줘, 누구든 버튼을 누르면 onPress가 fire하고, setIsHungry(false)를 부른다.
        onPress={() => {
          setIsHungry(false);
        }}
        // isHungry가 false면 Button의 disabled prop이 true가 되어 타이틀이 바뀐다. 
        disabled={!isHungry}
        title={isHungry ? 'Give me some food, please!' : 'Thank you!'}
      />
    </View>
  );
};

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};

export default Cafe;

※ isHungry가 const임에도 재할당이 가능하다. state-setting function이 불러질 때 컴포넌트가 다시 랜더링되고, Cat function이 다시 실행된다. 

예를 들어

import java.util.Date;

public class person {
    Date birthDt;
    int age;
    String name;
    String address_country;
    String address_city;
    String address_detail;
    String hobby;
    char gender;
    double weight;
    double height;

    public Date getBirthDt() {
        return birthDt;
    }

    public void setBirthDt(Date birthDt) {
        this.birthDt = birthDt;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAddress_country() {
        return address_country;
    }

    public void setAddress_country(String address_country) {
        this.address_country = address_country;
    }

    public String getAddress_city() {
        return address_city;
    }

    public void setAddress_city(String address_city) {
        this.address_city = address_city;
    }

    public String getAddress_detail() {
        return address_detail;
    }

    public void setAddress_detail(String address_detail) {
        this.address_detail = address_detail;
    }

    public String getHobby() {
        return hobby;
    }

    public void setHobby(String hobby) {
        this.hobby = hobby;
    }

    public char getGender() {
        return gender;
    }

    public void setGender(char gender) {
        this.gender = gender;
    }

    public double getWeight() {
        return weight;
    }

    public void setWeight(double weight) {
        this.weight = weight;
    }

    public double getHeight() {
        return height;
    }

    public void setHeight(double height) {
        this.height = height;
    }
}

person class가 있고, 

import java.util.Comparator;

public class PeopleCompareUtil implements Comparator<Object> {
    /**
     * Compares its two arguments for order.  Returns a negative integer,
     * zero, or a positive integer as the first argument is less than, equal
     * to, or greater than the second.<p>
     * <p>
     * The implementor must ensure that {@link Integer#signum
     * signum}{@code (compare(x, y)) == -signum(compare(y, x))} for
     * all {@code x} and {@code y}.  (This implies that {@code
     * compare(x, y)} must throw an exception if and only if {@code
     * compare(y, x)} throws an exception.)<p>
     * <p>
     * The implementor must also ensure that the relation is transitive:
     * {@code ((compare(x, y)>0) && (compare(y, z)>0))} implies
     * {@code compare(x, z)>0}.<p>
     * <p>
     * Finally, the implementor must ensure that {@code compare(x,
     * y)==0} implies that {@code signum(compare(x,
     * z))==signum(compare(y, z))} for all {@code z}.
     *
     * @param o1 the first object to be compared.
     * @param o2 the second object to be compared.
     * @return a negative integer, zero, or a positive integer as the
     * first argument is less than, equal to, or greater than the
     * second.
     * @throws NullPointerException if an argument is null and this
     *                              comparator does not permit null arguments
     * @throws ClassCastException   if the arguments' types prevent them from
     *                              being compared by this comparator.
     * @apiNote It is generally the case, but <i>not</i> strictly required that
     * {@code (compare(x, y)==0) == (x.equals(y))}.  Generally speaking,
     * any comparator that violates this condition should clearly indicate
     * this fact.  The recommended language is "Note: this comparator
     * imposes orderings that are inconsistent with equals."
     */
    @Override
    public int compare(Object o1, Object o2) {
        Person obj1 = (Person)o1;
        Person obj2 = (Person)o2;
        int result = 0;
        if(obj1.getAge() > obj2.getAge()) {
            result = 1;
        } else {
            result = -1;
        }
        if(obj1.getAge() == obj2.getAge()) {
            if(obj1.getHeight() > obj2.getHeight()){
                result = 1;
            }
        }
        return result;
    }
}

이런 경우에

height 가 같은 경우에는 다루고 있지 않아서 에러를 내는 줄 알았는데..

Person에 age와 height 만 빼서 돌린 경우에는 에러안난다..

뭘까 . 항상 에러가 나는건 아닌 건가..

https://www.geeksforgeeks.org/timsort/ 

Comparator의 compare을 overriding 했을 때 위의 주석에 쓰여져 있는 부분을 보면 설명이 있음..

     * The implementor must ensure that {@link Integer#signum
     * signum}{@code (compare(x, y)) == -signum(compare(y, x))} for
     * all {@code x} and {@code y}.  (This implies that {@code
     * compare(x, y)} must throw an exception if and only if {@code
     * compare(y, x)} throws an exception.)<p>
     * <p>
     * The implementor must also ensure that the relation is transitive:
     * {@code ((compare(x, y)>0) && (compare(y, z)>0))} implies
     * {@code compare(x, z)>0}.<p>
     * <p>
     * Finally, the implementor must ensure that {@code compare(x,
     * y)==0} implies that {@code signum(compare(x,
     * z))==signum(compare(y, z))} for all {@code z}.

인터페이스를 구현한 클래스에서는 compare(x, y) 가 -1 이면 compare(y, z) 가 1 이어야 된다. -> 대칭성

인터페이스를 구현한 클래스에서는 추이성을 보장해야 한다. (transitivity) -> 추이성

인터페이스를 구현한 클래스에서는 compare(x, y) ==0 이면 compare(x, z) == compare(y, z) 어야 한다.  

TimSort의 정렬 알고리즘을 사용할 때 중요한 것

1. 반사성 : a와 a를비교할 때 항상 같아야 한다. ( a == a )

2. 대칭성: a > b 라면 b < a 가 되어야 한다.

3. 추이성: a < b 이고 b < c 이면 a < c 여야 한다.

4. 일관성 : 두 객체 a와 b가 같다면, 다른 비교가 반복되어도 계속 같아야 한다. 즉, compare(a,b)가 0 이라면 a와 b가 변하지 않는 한 compare(a,b)가 항상 0이어야 한다.

비교 연산에서 중요한 성질로 네 가지를 모두 만족해야 Comparator가 안전하고 일관되게 사용될 수 있다.

--> 위배되면 어쩔때는 정렬되고 어쩔때는 안되는 상황이 발생할 수 있다.

내가 정렬에 에러를 마주쳤을 때 아래 메소드를 통해서 정렬한 경우에는 정렬이 잘 되었었다. 

Comparator<Person> comparator = Comparator
    .comparing(Person::getAge)
    .thenComparing(Person::getHeight);

가독성도 좋은 듯. 

Comparator class를 따로 구현했을 때는 들어가봐야하는데..

정렬할 때 기준을 정한다면 같은 경우, 작은경우, 큰경우 를 잘 숙고 해야 함.

유의하자. 

https://www.baeldung.com/java-8-comparator-comparing

Jenkins User Handbook을 보다가 해당 챕터를 보고 의문이 생김.

https://www.jenkins.io/doc/book/using/best-practices/#dont-use-the-maven-job-type 

https://plugins.jenkins.io/maven-plugin/#plugin-content-risks

maven job type의 issue 

https://issues.jenkins.io/browse/JENKINS-19095 

또 test 가 failure 이어도 무시한다는 점.

따라서, maven job type을 사용하지 말라고 하고 있다. 

[ssh-agent] FATAL: Could not find a suitable ssh-agent provider

where ssh-agent 를 쳐서 ssh-agent 가 어디에 있는지 확인.

시스템 환경 변수 PATH 확인 시

C:\windows\System32\OpenSSH\ssh-agent.exe 

가 등록되어 있었으나.

C:\Program Files\Git\usr\bin\ssh-agent.exe 를 사용하도록 등록하고, 제일 위로 올려서 해결

https://stackoverflow.com/questions/61718761/ssh-agent-not-working-on-jenkins-pipeline

실행 중인 서버의 vm option을 확인하기 위해서는 

jps 명령어를 사용하여 알 수 있다. 

https://www.ibm.com/docs/en/semeru-runtime-ce-z/11?topic=tools-java-process-status-jps

jps -v

해당 옵션을 사용하면 vm에 전달된 option들을 확인할 수 있다.