IT & Mobile

Object oriented 디자인 패턴


객체 지향 디자인 패턴(Object-Oriented Design Patterns)은 소프트웨어 개발에서 반복적으로 발생하는 문제들을 해결하기 위해 공통된 설계 방법을 제공하는 패턴들의 집합입니다. 이러한 패턴들은 객체 지향 프로그래밍에서 유용하게 사용될 수 있으며, 코드의 재사용성, 유지보수성, 확장성 등을 향상시킬 수 있습니다. 여기서는 몇 가지 대표적인 객체 지향 디자인 패턴에 대해 설명하겠습니다.

Singleton Pattern (싱글턴 패턴): 이 패턴은 오직 하나의 인스턴스만 생성하고, 그 인스턴스에 접근할 수 있는 전역적인 접근점을 제공합니다. 주로 리소스를 공유하거나 설정 정보와 같은 단일 객체를 공유해야 할 때 사용됩니다.

Factory Pattern (팩토리 패턴): 객체의 생성을 처리하는 패턴으로, 객체를 생성하기 위한 인터페이스를 정의하고, 서브 클래스에서 어떤 클래스의 인스턴스를 생성할지를 결정합니다. 이를 통해 객체 생성 코드를 클라이언트로부터 분리시킬 수 있습니다.

Observer Pattern (옵저버 패턴): 이벤트 발생 시 관찰자(옵저버)들에게 자동으로 알림을 보내는 패턴입니다. 주로 한 객체의 상태 변화에 따라 다른 객체들이 업데이트되어야 하는 상황에서 사용됩니다.

Strategy Pattern (전략 패턴): 알고리즘을 정의하고, 이를 사용하는 클라이언트와 분리시키는 패턴입니다. 각각의 알고리즘을 캡슐화하고, 런타임 시에 알고리즘을 변경할 수 있습니다.

Decorator Pattern (데코레이터 패턴): 객체의 기능을 동적으로 확장하기 위해 사용되는 패턴입니다. 기존 객체를 감싸는 데코레이터 클래스를 생성하여, 새로운 동작을 추가하거나 변경된 동작을 제공합니다.

Proxy Pattern (프록시 패턴): 실제 객체에 대한 대리자(Proxy)를 제공하는 패턴으로, 클라이언트와 실제 객체 사이에 중간 계층을 두어 추가적인 기능을 제공하거나 접근을 제어할 수 있습니다.

Template Method Pattern (템플릿 메서드 패턴): 알고리즘의 구조

Scanner sc = new Scanner(System.in);
String s = sc.nextLine();


첫번재 n을 숫자로 읽고 라인 쭉 읽는 방법.
int n=sc.nextInt();
String []s=new String[n+2];

for(int i=0;i<n;i++){
   s[i]=sc.next();
}
      
기존 방식. 
try {
            BufferedReader br=new BufferedReader(new InputStreamReader(System.in));
            int k = 5;
            
            List<Integer> ret = new ArrayList<>();
            while ( k-- > 0) {
                String st = br.readLine();
           }

java8이후 17까지 업데이트된 기능들.

jshell

immutable Factory

var (추론 type)

javac+java -> java

람다형 switch  (--enable-preview -source 12 필요?)

다중문자열

record ( Lombok없이 setter getter자동 추가..)

casting없는 instanceof

sealed (class, interface ) : 상속 범위제한

Stream.toList() 직접변환 추가. (java 16)

람다형 switch : (break도 없어도 됨)

        String typeOfDay = switch (day) {
            case "MON", "TUE", "WED", "THU", "FRI" -> "Weekday";
            case "SAT", "SUN" -> "Weekend";
            default -> "Invalid day";
        };

Text Block 추가

String json = """
              {"name": "ChatGPT",
               "type": "AI"
              }
              """;

그 외 

java9의 모듈시스템  ( Project Jigsaw 의 결과물로 JPMS 탄생)   참고: https://limdevbasic.tistory.com/21 

참고: https://www.devkuma.com/docs/java/version/

students.stream()
                .sorted(Comparator.comparing(Student::getCgpa).reversed()
                        .thenComparing(Student::getFirstName)
                        .thenComparing(Student::getId))
                .map(Student::getFirstName)
                .collect(Collectors.toList());

Double을 Checker(Comparator)에서 비교시에는 *100 이런거 하면 안됨. (미세 소수 오류발생)

class Checker implements Comparator<Student> {

    @Override
    public int compare(Student p1, Student p2) { 
        return Double.compare(p2.getScore(),p1.getScore()); //DESC
    }    
}

anonymous Comparator 클래스 생성으로 비교하는 법. 1. => compare(int 아니고=> Integer인 부분 주의 필요)

int[] intArr = new int[] {1,2,6, 4, 9, 7};

        List<Integer> sortedInt = Arrays.stream(intArr).boxed()
                .sorted(new Comparator<Integer>() {
                    @Override
                    public int compare(Integer a, Integer b) {
                        return Integer.compare(a,b);
                    }
                 })
                .collect(Collectors.toList());


        log.info(""+sortedInt);

anonymous Comparator 클래스 생성으로 비교하는 법. 2

        int[] intArr = new int[] {1,2,6, 4, 9, 7};

        int maxInt = Arrays.stream(intArr).boxed()
//                .max(Integer::compare)
                .max(new Comparator<Integer>() {
                    @Override
                    public int compare(Integer a, Integer b) {
                        return Integer.compare(a,b);
                    }
                 })
                .orElse(-1);

1. array <-> stream

int array -> Arrays.stream(.. )으로 바꾸면 intStream()이 되므로 Integer stream으로 바꾸려면 .boxed()를 써야한다. 

    //cards {1,2,2, 7, 9, 9, 8} 중에 pair들 빼고 최대 값구하기
    public static int solutions(int[] cards) {


        Map<Integer, Long> counting = Arrays.stream(cards).boxed()  //intStream()을  stream()으로 바꿔야함
                .collect(Collectors.groupingBy( i->i, Collectors.counting()))  //<Integer, Long>
                ;

        Integer ret = counting.entrySet().stream()
                .filter( e -> e.getValue() == 1)
                .map( e -> e.getKey())
                .max( Integer::compare ) //need STUDY max(Comparator 임)
                .orElse(-1); //.intValue();

        //TEST code: 둘다 오류임 : study필요
//        Integer ret = Arrays.stream(cards).boxed()
//                .max(Comparator.comparingInt());
//                .max(Integer.compare());

        return ret;
    }

ERROR FIX:  Inreger.compare() => Integer::compare     & add.   .orElse(-1) 

Integer::compare 대신에 Comparator.comparing(e -> e) 도 됨. 

1. Modal을 Dom외부에서 렌더링 하려면 ?  ReactDom.createPortal 을 사용한다.

2. 하위컴포넌트이 click이벤트가 상위 컴포넌트로 전달되는걸 방지 하려면?  e.stopPropagation() 을 사용.

3. redux의 mapDispatchToProps란 ?  redux의 액션을 dispatch하는 함수들을 React컴포넌트의 props로 매핑한다.
    redeux는 보통 store.dispatch()로 디스패치하지만, mapDispatchToProps를 사용하면 props로 바로 받아서 사용가능.

4. React.PureComponent의 용도는?  shouldComponentUpdate()를 내장해, props/state 가 바뀔때만 render호출. 

5. (React V16.8~) useEffect의 로 window resizing이 가능하다.  : 음, 당연히 되는거 아닌지 study필요.

6. Redux container란?  간단하게는 connect()함수를 사용해서 생성 가능하고, 상태를 구독하여 강태각 변경될때마다 Component다시 렌더링 하는 역할.  dispatch함수들을 props로 전달.

7. setState의 두번째 파라미터 용도는? default callback 지정.  => state가 업데이트 완료된 후에 수행 됨. 

1. useState 

2. useEffect      userEffect (()=> {},[])일때 초기화  ,[abc] )일때는 abc의 state가 변할때마다 호출.

3. useContext : props로 여러번 여러군데 넘기는게 불편할때 약간 global 변수의 개념.

=>  Provider 파일을 따로 만들고 children props를 이용하면 특정 컴포넌트만  reload하는 구조로 발전가능하다. (1번방식)
          2번 방식도 동작은 하는데  여러개의 childComponent를 사용할때 문제가 될 수 있다.  모두 다 reload 된다.

2번 방식;
export const MyContext = useContext({a:1, b:2, 함수});

<MyContext.Privider value = 옵셔널 지정> 예: {value, setValue}
  <ChildComponent>
</MyContext.Provider>

===ChildComponent
const [value,setValue] = useContext(MyContext)

========== Additional Hooks =============

4. useRef  input같은 것의 반복적인 state호출 방지용.

const inputRef = useRef(null);
const someFunction = () => {
	console.log(inputRef.current.value) //값이 찍힘. inputRef.current.focus()도 많이 씀.
}

<input type="text" ref={inputRef} />

    => 기존방식 대비 value와, onChange 가 없어도 된다. (값이 바뀔때 마다 뭘 하진 않고, 필요시 전체값만 읽는 경우에 최적)

5. useMemo  : cache기능 함수의 return값을 cache해 놓고, state가 바뀔때만 다시 계산함.

6. useCallback: useMemo와 거의 같은데 함수 자체를 cache함.
 참고: react-native에서는 useFocusEvent와 결합하여 goBack()으로 이동시에 자동 화면 새로고침에 사용가능.

   useEffect(() => {
        console.log("ConsignDetail consigneeCd", consigneeCd);
        search();

        //아래 H/W키처리 코드 => useCallback으로 대체
        // const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackPress);
        // return () => backHandler.remove(); // 컴포넌트 언마운트 시 이벤트 핸들러 제거

    }, [consigneeCd, refreshTime]);


    useFocusEffect(
        useCallback(() => {
            // 화면으로 돌아올 때의 처리
            setRefreshTime(Date.now().toString());
            console.log("ConsignDetail화면 진입")
            return () => {
                // 화면이 벗어날 때의 처리
            };
        }, [])
    );

7. useReducer : 몇가지 state를 모아서 한꺼번에 반영. => setState 여러번하는거 보다 효과적.

8. useLayoutEffect :  useEffect와 비슷한데, UI를 blocking함,  UI용 좌표계산 같은 걸 할때 효과적.

9.  useImperativeHandle  : forwardRef()와 함께사용해서 자식Component가 부모Component에 메소드 노출. 
예제

부모 컴포넌트

    const setPreviewPageNo = (pageNo) => {
        if (refPdfViewer.current) {
            refPdfViewer.current.setPageNo(pageNo);
        }
    };
    
    <PdfViewer file={docGen.previewUrl}
               onLoadSuccess={(count) => {setPreviewPageCount(count)}}
               ref={refPdfViewer}
    />
    
    
 자식 컴포넌트 : setPageNo를 부모에 전달. 
 const PdfViewer = forwardRef(({file, onLoadSuccess, showPagination}, _ref) => {
 
    const [currentPageNo, setCurrentPageNo] = useState(0);
 
    useImperativeHandle(_ref, () => ({
        setPageNo: (pageNo) => {setCurrentPageNo(pageNo)},
    }));
 
 }

10. useDebugValue: 리액트 devTool에 state컴포넌트 같은걸 출력. 주로 customHook 안에서 사용. 

React내의 <div 나 <image에 style을 주는 예제.

<div style={{
	display: "flex",
    flexDirection: "column",
    padding:10,
    border: "1px solid grey",
    widht: "30%",
    marginTop: 10,
    gap: 10,
    justifyContent:"space-between"
    }}
>
 <img
 	src = {product.thumbnail}
    alt = {product.title}
    style = {{ height: 200, objectFit: "cover" }} 
                        //cover는-꽉차게(비율유지), contain-안에포함, fill-꽉차게 비율깨짐)
    />
</div>

CSS specicificity:  인라인 style1순위, ID 2순위, class 3순위, 요소 4순위 => 1,0,0,0 혹은 1000 형태로 표현됨. 0010 은 class임.

 =>  p { color:red;]  .p1 { color:green; } 이면  p는 0.0.0.2 이고  .p1은 0.0.1.0 이라서  .p1이 힘이 우선 적용된다...

   (p가 0.0.0.1이 아니고 0.0.0.2인 이유는 아직 잘 모르겠음) => 암기: Inline + ICA(id,class, attribute)

CSS Selectors: 

• Universal Selector:   * {  padding: 10px; }
• Element Type Selector:    ul {border: solid 1px #ccc;}
• ID selector:   #myContainer { width: 90px; margin: 0 auto; }  =>  <div id="myClass"/>
• Class selector:  .box {width: 20px;}  => <div class="box">
• Descendant 결합:   #container .box{ float:left; }   =>  <div id="container">   <div class = "box">   HI  </div>  </div>
• 1단계 Child만 결합:  #container> .box{ float:left; }    위예제는 모든 자손들 box 다 포함이지만, > 사용시 딱 1단계 child만 적용
• 동일레벨(sibiling) 결합: h2 ~ p {font-weight: bold;} =>   <h2> A </h2>   <p> B </p>  도  굵게 됨.
  #container ~ .box  라고 동일 레벨선상의 두 요소에 전체적으로 적용이 됨.
• 요소(attribute) selector:    input [type="text"]  {background-color:#fff;}    =>  <input type="text"> 에 적용됨.

Internal Style Sheet VS. External  :    (external:  <link rel="stylesheet" href="blabla.css">  )

    html 안에서 직접 CSS사용하고 싶으면 <style> </style> 테그만 있으면 된다.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: lightblue;
    }
    h1 {
      color: white;
      text-align: center;
    }
    p {
      font-size: 18px;
      color: darkblue;
    }
  </style>
</head>

function a() { } 보다 ,    const a = () => {} 로 쓰는게 좋다.

==> 이유 1. function은 생성자인지 함수용도인지 헤깔리지만, const는 항상 함수 용도이다.  생성자가 필요하면 class로 쓰면 된다.

         이유 2. const의 우측 ()=>{} 이걸 변수에 대입하는 느낌으로 array안 이나, 함수 parameter등 동일한 방식으로 사용가능하단.

단,

let object= {

    name: 'kim'

    run : ()=> {}   까지는 굿인데, {}안에서 this는 못 쓰는 문제가 있어, 이때는 function써도 되지만 위 문제들 때문에 그냥
    run() {..}        쓰면 된다.

}

closure: 내부함수가 외부함수의 변수를 access할 수 있다. (상식수준임) =>  예제코드에선 function이 이너함수를 리턴하는 형태가 많음.

Javascript map과 forEach의 차이점.  map은 매번 뭔가를 리턴을 한다. 따라서 array를 map시 새 array가 생긴다.

[ CSS 로 이동예정]

CSS specicificity:  인라인 style1순위, ID 2순위, class 3순위, 요소 4순위 => 1,0,0,0 혹은 1000 형태로 표현됨. 0010 은 class임.

 =>  p { color:red;]  .p1 { color:green; } 이면  p는 0.0.0.2 이고  .p1은 0.0.1.0 이라서  .p1이 힘이 우선 적용된다...

   (p가 0.0.0.1이 아니고 0.0.0.2인 이유는 아직 잘 모르겠음)