오토레이아웃

오토레이아웃은 뷰의 제약 사항을 바탕으로 뷰 체계 내의 모든 뷰의 크기와 위치를 동적으로 계산합니다. 오토레이아웃은 애플리케이션을 사용할 때 발생하는 외부 변경과 내부 변경에 동적으로 반응하는 사용자 인터페이스를 가능하게 합니다.

즉, 오토 레이아웃이란 애플 기기의 다양한 사이즈에 구애받지 않고 시각적으로 동일한 화면을 구성하기 위한 기능으로 뷰의 위치(x,y 앵커)와 크기를 정해주면 자동으로 레이아웃을 그려주는 것이다.

오토 레이아웃이 발생하는 경우는 외부 변경과 내부 변경이 있을 때이다.

외부 변경(External Changes)

외부 변경은 슈퍼뷰의 크기나 모양이 변경될 때 발생한다.

• 사용자가 아이패드의 분할뷰(Split View)를 사용하거나 사용하지 않는 경우(iOS).
• 장치를 회전하는 경우(iOS). 활성화콜(active call)과 오디오 녹음 바가 보여지거나 사라지는 경우(iOS).
• 다른 크기의 클래스를 지원하기 원하는 경우
• 다른 크기의 스크린을 지원하기 원하는 경우

즉, 콘텐츠를 담는 틀 자체에 변경이 일어나는 경우를 말한다.

내부 변경(Internal Changes)

내부 변경은 사용자 인터페이스의 뷰의 크기 또는 설정이 변경되었을 때 발생한다.

• 애플리케이션 변경에 의해 콘텐츠가 보여지는 경우
• 애플리케이션이 국제화를 지원하는 경우
• 애플리케이션이 동적 타입을 지원하는 경우

콘텐츠(이미지, 텍스트 길이) 마다 사이즈는 다를 것이고, 같은 콘텐츠여도 언어마다 텍스트의 길이가 다를것이며, 사용자마다 폰트 사이즈나 이미지 크기 등을 다르게 설정할 수 있으므로 내부 콘텐츠의 사이즈에는 변화가 있게 된다.

NSLayoutConstraint

기존 스토리보드를 이용하지 않고 코드상에서 오토 레이아웃을 구현하는 방법은 NSLayoutConstraint 인스턴스 생성을 사용하여 제약조건을 지정하는 것이다.

오토 레이아웃 방정식

오토 레이아웃은 view의 x,y,width,height만 정해주면 알아서 굴러가는 방식이기 때문에 뷰들의 상대적인 크기나 위치를 정해줘야 한다. 코드상으로는 방정식을 통해 구현해야하고, 이를 오토 레이아웃 방정식이라고 한다.

즉,

view1.attr1 = view2.attr2 * multiplier + constant

의 꼴이 되고, 이를 정리하면 다음과 같이 된다.

item.attribute = toItem.attribute * multiplier + constant

구현 예시

이제 코드 상으로 어떻게 구현을 하는지 살펴보자.

1. 텍스트필드를 버튼 오른쪽 8포인트 떨어져 위치시킴

 NSLayoutConstraint(item: button, 
               attribute: .right,
               relatedBy: .equal,
               toItem: textField,
               attribute: .left,
               multiplier: 1.0,
               constant: 8.0)

2. 버튼의 너비가 최소 50 이상이 되도록 함

 NSLayoutConstraint(item: button,
               attribute: .width,
               relatedBy: .greaterThanOrEqual,
               toItem: nil,
               attribute: .notAnAttribute,
               multiplier: 1.0,
               constant: 50.0)

3. purpleBox가 superView를 기준으로 왼쪽(Leading) 간격은 50포인트, 오른쪽(Trailing) 간격은 50포인트로 설정

 NSLayoutConstraint(item: purpleBox,
               attribute: .left,
               relatedBy: .equal,
               toItem: self.view,
               attribute: .left,
               multiplier: 1.0,
               constant: 50.0)

 NSLayoutConstraint(item: purpleBox,
               attribute: .right,
               relatedBy: .equal,
               toItem: self.view,
               attribute: .right,
               multiplier: 1.0,
               constant: -50.0)

4. topField와 bottomField의 세로 사이의 간격을 10포인트로 설정

 NSLayoutConstraint(item: topField,
               attribute: .bottom,
               relatedBy: .equal,
               toItem: bottomField,
               attribute: .top,
               multiplier: 1.0,
               constant: -10.0)

5. maroonView와 blueView의 간격이 없음

 NSLayoutConstraint(item: maroonView,
               attribute: .right,
               relatedBy: .equal,
               toItem: blueView,
               attribute: .left,
               multiplier: 1.0,
               constant: 0.0)

6. button의 너비는 100포인트이고 우선도는 20으로 설정

 NSLayoutConstraint(item: button,
               attribute: .width,
               relatedBy: .equal,
               toItem: nil,
               attribute: .notAnAttribute,
               multiplier: 1.0,
               constant: 100.0).priority = UILayoutPriority(rawValue: 20)

오토 레이아웃에서는 우선도 개념이 들어가 있어 NSLayoutConstraint(...).priority = UILayoutPriority(rawValue: 20) 와 같이 우선도(1 ~ 1000)를 정해줄 수 있다. 숫자가 높을수록 우선도가 높다.

7. flexibleButton의 너비 값이 70포인트보다 크거나 같고 100포인트보다 작거나 같도록 제약

 NSLayoutConstraint(item: flexibleButton,
               attribute: .width,
               relatedBy: .greaterThanOrEqual,
               toItem: nil,
               attribute: .notAnAttribute,
               multiplier: 1.0,
               constant: 70.0)

 NSLayoutConstraint(item: flexibleButton,
               attribute: .width,
               relatedBy: .lessThanOrEqual,
               toItem: nil,
               attribute: .notAnAttribute,
               multiplier: 1.0,
               constant: 100.0)

8. button1, button2, textField와 superView의 간격은 표준 간격(8포인트)이며 textField의 너비 값은 20포인트보다 크거나 같도록 제약

 // button1
 NSLayoutConstraint(item: button1,
               attribute: .left,
               relatedBy: .equal,
               toItem: self.view,
               attribute: .left,
               multiplier: 1.0,
               constant: 8.0)

 // button2
 NSLayoutConstraint(item: button2,
               attribute: .left,
               relatedBy: .equal,
               toItem: button1,
               attribute: .right,
               multiplier: 1.0,
               constant: 8.0)

 // textField
 NSLayoutConstraint(item: textField,
               attribute: .left,
               relatedBy: .equal,
               toItem: button2,
               attribute: .right,
               multiplier: 1.0,
               constant: 8.0)

 NSLayoutConstraint(item: textField,
               attribute: .width,
               relatedBy: .greaterThanOrEqual,
               toItem: nil,
               attribute: .notAnAttribute,
               multiplier: 1.0,
               constant: 20.0)

 NSLayoutConstraint(item: textField,
               attribute: .right,
               relatedBy: .equal,
               toItem: self.view,
               attribute: .right,
               multiplier: 1.0,
               constant: -8.0)

Visual Format Language

단순히 NSLayoutConstraint에 인자를 넣어 뷰를 구현하기에는 복잡하므로, 약간의 ASCII art를 통해 시각화하여 인자를 단순화하도록 한 것이다. NSLayoutConstraint.constraints(...) 또는 NSLayoutConstraints.constraintsWithVisualFormat(...)을 통해 구현한다.

NSLayoutConstraint.constraints(withVisualFormat:options:metrics:views:)

• withVisualFormat: Visual Format Language(VFL)를 넣는다. 수평(H:) 또는 수직(V:) 제약 조건을 지정한다. 아래 1번 ~ 8번 참조.

• options: 뷰와 관련된 추가적인 세부 조정을 지정할 수 있는 옵션 배열이다. 제약의 방향, 정렬 등을 조절한다.

.alignAllLeft: 뷰들의 왼쪽 가장자리를 정렬
.alignAllRight: 뷰들의 오른쪽 가장자리를 정렬
.alignAllTop: 뷰들의 상단 가장자리를 정렬
.alignAllBottom: 뷰들의 하단 가장자리를 정렬
.alignAllLeading: 뷰들의 leading(문서의 시작 방향에 따라 왼쪽 또는 오른쪽) 가장자리를 정렬
.alignAllTrailing: 뷰들의 trailing(문서의 시작 방향에 따라 오른쪽 또는 왼쪽) 가장자리를 정렬
.alignAllCenterX: 뷰들의 x축 중심을 정렬
.alignAllCenterY: 뷰들의 y축 중심을 정렬
.alignAllBaseline: 뷰들의 기준선을 정렬
.alignAllFirstBaseline: 뷰들의 첫 번째 텍스트 기준선을 정렬
.alignAllLastBaseline: 뷰들의 마지막 텍스트 기준선을 정렬

• metrics: VFL 문자열 내에서 수치를 참조하는 데 사용되는 딕셔너리 인자다. 예를 들어, metrics: ["margin": 15]과 같이 지정하고 VFL에서 margin을 참조하고 조정할 수 있다.

• views: VFL 문자열 내에서 뷰 이름을 참조하는 딕셔너리다. 각 키는 VFL 문자열에서 사용되는 뷰 이름이고, 해당하는 값은 그 이름을 가진 뷰 객체를 뜻한다. views: ["myView": myViewInstance]와 같이 지정하면 VFL에서 myView라는 이름으로 myViewInstance를 참조할 수 있다.

1번

 H:[button]-8-[textField] 
     또는 
 H:[button]-[textField]

2번

 H:[button(>=50)]

3번

 H:|-50-[purpleBox]-50-|

4번

 V:[topField]-10-[bottomField]

5번

 H:[maroonView][blueView]

6번

 H:[button(100@20)]

7번

 H:[flexibleButton(>=70,<=100)]

8번

 H:|-[find]-[findNext]-[findField(>=20)]-|

NSLayoutAnchor

//사이즈
widthAnchor
heightAnchor

//수직
topAnchor
bottomAnchor
centerYAnchor

//수평
leadingAnchor
trailingAnchor
leftAnchor
rightAnchor
centerXAnchor

//래이블 텍스트 줄 기준
firstBaselineAnchor
lastBaselineAnchor

Xcode 사용법

• 프로젝트 생성 및 코드작성
• 인터페이스 빌더를 활용한 UI 구성
• 유용한 단축키

발생했던 문제

sigining과 관련해 "Xcode couldn't find any iOS App Development provisioning profiles matching ~" 문제가 발생. 이는 프로파일 프로비저닝과 관련한 문제, 즉 app을 만들 때 app의 안정성을 보장하기 위한 애플의 서명절차와 관련한 문제다.

이는 애플 개발자 계정을 구매한 뒤 developer.apple.com에서 "인증서, 식별자 및 프로파일" 항목을 클릭, appID나 device 등을 등록하면 해결이 된다.

참고

• 애플 XCode 공식 문서
• What is a provisioning profile & code signing in iOS?

Assets

에셋 카탈로그(Asset Catalog)는 애플리케이션에 사용될 다양한 에셋을 관리한다. 에셋 카탈로그는 에셋과 다양한 디바이스의 속성(디바이스의 특징, 사이즈 클래스, 주문형 리소스, 특정 타입의 정보)에 대한 파일의 mapping을 통해 리소스에 접근 할 수 있게 해준다.

에셋 카탈로그의 콘텐츠는 3가지 타입을 갖는다.

• Folders : 에셋 카탈로그 폴더는 다른 그룹 폴더나 에셋 폴더를 포함할 수 있다.
• JSON files : .json 확장자 파일로서 속성에 대한 정보를 포함하고 있다.
• Content files : 이미지, 음원 등 리소스 파일을 나타낸다.

참고 애플 Asset catalog 공식문서

앱 시닝(App Thinning)

앱 시닝이란 애플리케이션이 디바이스에 설치될 때 앱 스토어와 운영체제가 그 디바이스의 특성에 맞게 설치하도록 하는 설치 최적화 기술이다. 이를 통해 애플리케이션의 설치용량을 최소화하고 다운로드의 속도를 향상시킬 수 있다. 앱 시닝의 기술 구성요소는 슬라이싱(slicing), 비트코드(bitcode), 주문형 리소스(on-demand resource)가 있다.

애플 Reducing your app’s size 공식문서 App thinning, Bitcode, Slicing: tutorial (iOS app)

UIKit 스토리보드

스토리보드에서 Type을 Custom으로 변경하면 selected 됐을 때 이미지를 변경할 수 있다. Cmd + shift + L : 라이브러리에서 요소 선택

• UILabel

  일반 텍스트를 말한다.

• UIButton

• UISlider

@IBOutlet 속성으로 StoryBoard에서 버튼이나 레이블같은 컴포넌트와 연결된다.

@는 컴파일러에게 코드의 특정 부분에 대한 메타데이터를 제공한다. 데코레이터, 어노테이션과 유사한 개념이다.

IBAction은 Event가 일어난 경우 호출되는 Action을 정의해둔 것이고, IBOutlet은 값에 접근하기위한 변수 스토리보드와 연결 IB는 Interface Builder의 약어.

AVFoundation

Apple 플랫폼에서 사운드 및 영상 미디어의 처리, 제어, 가져오기 및 내보내기 등 광범위한 기능을 제공하는 프레임워크다. AV는 AudioVideo 다.

주요 기능은 다음과 같다.

• 미디어 재생 및 편집(QuickTime 동영상 및 MPEG-4 파일 재생/생성/편집, HLS 스트림 재생: 재생가능 파일 목록)
• 디바이스 카메라와 마이크를 이용한 영상 녹화 및 사운드 녹음
• 시스템 사운드 제어
• 문자의 음성화

AVFoundation 공식문서

NSDataAsset

NSDataAsset는 에셋 카탈로그에서 데이터 애셋을 로드하는 데 사용되는 클래스다. 이 클래스는 주로 애플리케이션의 에셋 카탈로그에 저장된 이미지나 사운드, 비디오 등의 데이터를 로드하고 이를 메모리에 저장하는 데 사용된다.

let soundAsset: NSDataAsset = NSDataAsset(name: "sound")

NSDataAsset 인스턴스를 생성할 때 "sound"라는 이름을 지정하면, 애플리케이션은 "sound"라는 이름의 에셋을 에셋 카탈로그에서 찾아 로드하려고 시도한다. 그런 다음 이 데이터는 NSDataAsset의 data 속성에 저장되고, 이 속성을 통해 데이터에 접근할 수 있다.

NS 접두어는 NeXTSTEP에서 유래됐다. Objective-C와 Cocoa 프레임워크의 많은 클래스 이름에 'NS' 접두어가 붙어 있는데, NS- 로 시작되는 클래스는 Objective-C와의 호환성이 유지된다.

Cocoa Touch

Cocoa Touch는 iOS, iPadOS, watchOS 등 애플의 모바일 운영 체제를 위한 UI 프레임워크로, 기존 macOS를 위한 cocoa 프레임 워크의 AppKit대신 UIKit를 사용해 터치 이벤트 및 센서 데이터 처리 등 모바일에서 요구되는 기능을 추가한 것이다.

코코아 설명 공식문서

Foundation : 문자열 처리, 날짜 및 시간 처리, 네트워크 통신, 스레드 관리 등과 같은 기본적인 데이터 관리

UIKit: 사용자 인터페이스를 구축하고 관리하는 데 사용되는 클래스를 제공한다. 창, 패널, 버튼, 메뉴, 스크롤 바 등의 GUI 요소를 담당

JDBC -> JDBC Template -> JPA -> 스프링 데이터 JPA

🌱 JDBC (Java Database Connectivity):

JDBC는 자바에서 데이터베이스에 접근할 수 있도록 해주는 API. 이를 통해 SQL 질의를 실행하고, 데이터베이스에서 데이터를 읽고 쓸 수 있다. 그러나 JDBC는 드라이버를 등록하고 DB연결, 쿼리문 작성/실행, 결과 반환, DB 연결 종료 등의 과정을 코드로 일일이 작성해야하고, try-catch 예외 처리가 필요하다. 따라서 반복되는 과정을 템플릿화한 것이 JDBC 템플릿이다

🌱 JDBC Template:

JDBC Template은 데이터베이스 연결의 생성과 종료, SQL 질의의 실행, 결과 처리 등을 자동화해준다. 개발자는 비즈니스 로직에 집중할 수 있다. 실제 아래 링크에 가면 JdbcTemplate 코드를 볼 수 있는데 엄청 긴 것을 확인할 수 있다. https://github.com/spring-projects/spring-framework/blob/main/spring-jdbc/src/main/java/org/springframework/jdbc/core/JdbcTemplate.java

🌱 JPA (Java Persistence API):

JPA는 자바에서 ORM (Object-Relational Mapping) 기능을 제공하는 API다. ORM은 객체 지향 프로그래밍과 관계형 데이터베이스를 매핑해주는 기술로, JPA를 사용하면 개발자는 SQL 질의를 직접 작성하지 않고 객체지향 코딩 방식으로 DB를 조작할 수 있게된다. 다만 PK가 아닌 키를 대상으로는 JPQL(Java Persistence Query Language)을 작성해야 한다. JPQL은 JPA(Java Persistence API)가 제공하는 쿼리 언어로서, SQL과 유사하지만 객체 지향적인 측면을 가지고 있다.

JPQL은 SQL과 달리 데이터베이스 테이블이 아닌 자바 엔티티 객체를 대상으로 작동한다. 예를들어 "select m from Member m"라는 JPQL 문장은 "Member"라는 엔티티 객체를 모두 선택하라는 의미다. JPQL은 연결된 DB에 상관없이 동일한 자바 코드를 작성할 수 있도록 한다. JPA 구현체가 JPQL을 데이터베이스의 쿼리 언어(SQL 등)로 변환한다. DB가 변경되더라도 JPQL은 변경되지 않아 코드의 이식성이 증가한다.

🌱 Spring Data JPA:

스프링 데이터 JPA는 JPA를 좀 더 편리하게 사용할 수 있도록 하는 라이브러리다. 레포지토리 인터페이스를 만들기만 하면 스프링 데이터 JPA가 자동으로 구현체를 생성해준다.

Swift는 애플이 2014년에 발표한 프로그래밍 언어로, C와 Objective-C에 비해 간결하고, 모던하며 안전한 코드를 작성하기 위해 설계되었다.

• 안전성: Swift는 명시적인 변수 선언을 통해 데이터 타입의 일관성을 보장하며, 초기화되지 않은 변수나 널(null) 값 참조와 같은 프로그래밍 오류를 방지하도록 설계.
• 퍼포먼스: Swift는 최적화된 컴파일러를 사용하여 고성능의 애플리케이션을 제작 가능.
• 현대적인 언어 구조: Swift는 최신 프로그래밍 언어 디자인 패턴을 채택, 가독성과 유지 보수가 좋음. 함수형 프로그래밍과 객체지향 프로그래밍, 프로토콜 지향 프로그래밍의 요소를 모두 포함.

공식문서 welcome swift - About swift

공식 문서에 따르면 스위프트는 다음과 같은 modern programming patterns을 가지고 있다.

• Variables are always initialized before use.

  var myVar: Int  // 변수 선언
  myVar = 10  // 변수 초기화
  print(myVar)  // 변수 사용

• Array indices are checked for out-of-bounds errors.

  let myArr : Array<Int> = [0, 1, 2]
  

print(myArr[2]) // 2 출력 print(myArr[3]) // Index out of range

---

- Integers are checked for overflow.
```swift
var myInt : Int = Int.max
print(myInt)
print(myInt + 1) // 컴파일 에러

• Optionals ensure that nil values are handled explicitly.

  var optionalVar: Int? = nil
  if let unwrapped = optionalVar {
    print("Value: \(unwrapped)")
  } else {
    print("Value is nil")
  }

• Memory is managed automatically.

  class MyClass {
    var name: String
    init(name: String) {
        self.name = name
    }
  }
  var ref: MyClass? = MyClass(name: "Swift")
  ref = nil  // ref가 nil로 설정되면 MyClass 인스턴스는 메모리에서 자동으로 제거

• Error handling allows controlled recovery from unexpected failures.

  enum MyError: Error {
    case runtimeError(String) // 연관값(associated value)
  }
  do {
    throw MyError.runtimeError("An error occurred")
  } catch MyError.runtimeError(let errorMessage) {
    print("Caught an error: \(errorMessage)")
  } catch {
    print("Unknown error occurred")
  }

  에러는 enum으로 선언하여 사용하게 되는데, 함수처럼 사용되는 것은 연관값이다.

또 Swift는 강력한 타입 추론과 패턴 매칭 기능이 있다.

Swift combines powerful type inference and pattern matching with a modern, lightweight syntax, allowing complex ideas to be expressed in a clear and concise manner.

Version Compatibility

공식문서 welcome swift - Version Compatibility

2023년 6월 기준 Swift 5.9버전에 대해 기술하고 있으며, 다음 기능들은 5.9버전 이후 버전에서만 사용될 수 있다.

• Functions that return an opaque type require the Swift 5.1 runtime.

Opaque type은 불필요한 정보를 감춰 코드를 간결하게 만드는 방법이다.

• The try? expression doesn’t introduce an extra level of optionality to expressions that already return optionals.

do { try } catch { } 꼴의 문법에서의 try를 말한다. try에는 try? 옵셔널과 try! 옵셔널이 있다.

• Large integer literal initialization expressions are inferred to be of the correct integer type. For example, UInt64(0xffff_ffff_ffff_ffff) evaluates to the correct value rather than overflowing.

타입 추론에 따라 아래 선언을

let largeNumber = 0xffff_ffff_ffff_ffff

다음과 같이 해석한다는 것.

let largeNumber: UInt64 = 0xffff_ffff_ffff_ffff

package basics.core.discount;

import basics.core.member.Grade;
import basics.core.member.Member;

public class RateDiscountPolicy implements DiscountPolicy {

    private int discountPercent = 10;

    @Override
    public int discount(Member member, int price) {
        if (member.getGrade() == Grade.VIP) {
            return price * discountPercent / 100;
        } else {
            return 0;
        }
    }
}

하지만

public class OrderServiceImpl implements OrderService {
    private final MemberRepository memberRepository = new MemoryMemberRepository();
//    private final DiscountPolicy discountPolicy = new FixDiscountPolicy();
    private final DiscountPolicy discountPolicy = new RateDiscountPolicy();

    @Override
    public Order createOrder(Long memberId, String itemName, int itemPrice) {
        Member member = memberRepository.findById(memberId);
        int discountPrice = discountPolicy.discount(member, itemPrice);

        return new Order(memberId, itemName, itemPrice, discountPrice);
    }
}

구체적인 인스턴스에 의존하는 코드를 짜버렸다. 그래서 의존하지 않는 코드를 짜면,

public class OrderServiceImpl implements OrderService {
    private final MemberRepository memberRepository = new MemoryMemberRepository();
    private DiscountPolicy discountPolicy;;

    @Override
    public Order createOrder(Long memberId, String itemName, int itemPrice) {
        Member member = memberRepository.findById(memberId);
        int discountPrice = discountPolicy.discount(member, itemPrice);

        return new Order(memberId, itemName, itemPrice, discountPrice);
    }
}

구현체가 없어 실제 실행을 해보면 NPE(null pointer exception)가 발생한다.

=> 누군가 대신 구현 객체를 생성해 주입해줘야 한다 => appConfig의 등장 appConfig에서 생성자를 통해서 주입이 됨

AppConfig

package basics.core;

import basics.core.discount.DiscountPolicy;
import basics.core.discount.FixDiscountPolicy;
import basics.core.discount.RateDiscountPolicy;
import basics.core.member.MemberService;
import basics.core.member.MemberServiceImpl;
import basics.core.member.MemoryMemberRepository;
import basics.core.order.OrderService;
import basics.core.order.OrderServiceImpl;

public class AppConfig {

    public MemberService memberService() {
        return new MemberServiceImpl(memberRepository());
    }

    private MemoryMemberRepository memberRepository() {
        return new MemoryMemberRepository();
    }

    public OrderService orderService() {
        return new OrderServiceImpl(memberRepository(), discountPolicy());
    }

    public DiscountPolicy discountPolicy() {
//        return new FixDiscountPolicy();
        return new RateDiscountPolicy();

    }
}

MemberServiceImpl

package basics.core.member;

public class MemberServiceImpl implements MemberService {
    private final MemberRepository memberRepository;

    public MemberServiceImpl(MemberRepository memberRepository) {
        this.memberRepository = memberRepository;
    }

    @Override
    public void join(Member member) {
        memberRepository.save(member);
    }

    @Override
    public Member findMember(Long memberId) {
        return memberRepository.findById(memberId);
    }
}

OrderServiceImpl

package basics.core.order;

import basics.core.discount.DiscountPolicy;
import basics.core.member.Member;
import basics.core.member.MemberRepository;

public class OrderServiceImpl implements OrderService {
    private final MemberRepository memberRepository;
    private final DiscountPolicy discountPolicy;;

    public OrderServiceImpl(MemberRepository memberRepository, DiscountPolicy discountPolicy) {
        this.memberRepository = memberRepository;
        this.discountPolicy = discountPolicy;
    }

    @Override
    public Order createOrder(Long memberId, String itemName, int itemPrice) {
        Member member = memberRepository.findById(memberId);
        int discountPrice = discountPolicy.discount(member, itemPrice);

        return new Order(memberId, itemName, itemPrice, discountPrice);
    }
}

MemberApp

package basics.core;
import basics.core.AppConfig;
import basics.core.member.Grade;
import basics.core.member.Member;
import basics.core.member.MemberService;

public class MemberApp {
    public static void main(String[] args) {
        AppConfig appConfig = new AppConfig();
        MemberService memberService = appConfig.memberService();
        Member member = new Member(1L, "memberA", Grade.VIP);
        memberService.join(member);
        Member findMember = memberService.findMember(1L);
        System.out.println("new member = " + member.getName());
        System.out.println("find Member = " + findMember.getName());
    }
}

OrderApp

package basics.core;

import basics.core.member.Grade;
import basics.core.member.Member;
import basics.core.member.MemberService;
import basics.core.order.Order;
import basics.core.order.OrderService;

public class OrderApp {
    public static void main(String[] args) {
        AppConfig appConfig = new AppConfig();

        MemberService memberService = appConfig.memberService();
        OrderService orderService = appConfig.orderService();

        Long memberId = 1L;
        Member member = new Member(memberId, "memberA", Grade.VIP);
        memberService.join(member);

        Order order = orderService.createOrder(memberId, "itemA", 10000);

        System.out.println("order = " + order);
    }
}

제어의 역전 모든 제어권은 AppConfig가 갖고, 나머지 소스코드는 자기 로직만 수행한다. AppConfig 처럼 객체를 생성하고 관리하면서 의존관계를 연결해 주는 것을 IoC 컨테이너 또는 DI 컨테이너라 한다.

정적의존관계 vs 동적 의존관계

정적인 클래스 의존관계 클래스가 사용하는 import 코드만 보고 의존관계를 쉽게 판단할 수 있다. 정적인 의존관계는 애플리케이션을 실행하지 않아도 분석할 수 있다. 클래스 다이어그램을 보자 OrderServiceImpl 은 MemberRepository , DiscountPolicy 에 의존한다는 것을 알 수 있다. 그런데 이러한 클래스 의존관계 만으로는 실제 어떤 객체가 OrderServiceImpl 에 주입 될지 알 수 없다.

동적인 객체 인스턴스 의존 관계 애플리케이션 실행 시점에 실제 생성된 객체 인스턴스의 참조가 연결된 의존 관계다.

스프링으로 변경

package basics.core;

import basics.core.discount.DiscountPolicy;
import basics.core.discount.FixDiscountPolicy;
import basics.core.discount.RateDiscountPolicy;
import basics.core.member.MemberService;
import basics.core.member.MemberServiceImpl;
import basics.core.member.MemoryMemberRepository;
import basics.core.order.OrderService;
import basics.core.order.OrderServiceImpl;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class AppConfig {

    @Bean
    public MemberService memberService() {
        return new MemberServiceImpl(memberRepository());
    }

    @Bean
    public MemoryMemberRepository memberRepository() {
        return new MemoryMemberRepository();
    }

    @Bean
    public OrderService orderService() {
        return new OrderServiceImpl(memberRepository(), discountPolicy());
    }

    @Bean
    public DiscountPolicy discountPolicy() {
//        return new FixDiscountPolicy();
        return new RateDiscountPolicy();

    }
}

AppConfig에 @Bean 어노테이션 추가

package basics.core;
import basics.core.AppConfig;
import basics.core.member.Grade;
import basics.core.member.Member;
import basics.core.member.MemberService;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.AnnotationConfigApplicationContext;

public class MemberApp {
    public static void main(String[] args) {
//        AppConfig appConfig = new AppConfig();
//        MemberService memberService = appConfig.memberService();
        ApplicationContext applicationContext = new AnnotationConfigApplicationContext(AppConfig.class);
        MemberService memberService = applicationContext.getBean("memberService", MemberService.class);

        Member member = new Member(1L, "memberA", Grade.VIP);
        memberService.join(member);
        Member findMember = memberService.findMember(1L);
        System.out.println("new member = " + member.getName());
        System.out.println("find Member = " + findMember.getName());
    }
}

package basics.core;

import basics.core.member.Grade;
import basics.core.member.Member;
import basics.core.member.MemberService;
import basics.core.order.Order;
import basics.core.order.OrderService;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.AnnotationConfigApplicationContext;

public class OrderApp {
    public static void main(String[] args) {
//        AppConfig appConfig = new AppConfig();

//        MemberService memberService = appConfig.memberService();
//        OrderService orderService = appConfig.orderService();

        ApplicationContext applicationContext = new AnnotationConfigApplicationContext(AppConfig.class);
        MemberService memberService = applicationContext.getBean("memberService", MemberService.class);
        OrderService orderService = applicationContext.getBean("orderService", OrderService.class);

        Long memberId = 1L;
        Member member = new Member(memberId, "memberA", Grade.VIP);
        memberService.join(member);

        Order order = orderService.createOrder(memberId, "itemA", 10000);

        System.out.println("order = " + order);
    }
}

ApplicationContext를 통해 @Bean으로 등록된 객체를 가져옴

기존에는 개발자가 AppConfig 를 사용해서 직접 객체를 생성하고 DI를 했지만, 이제부터는 스프링 컨테이너를 통해서 사용한다. 스프링 컨테이너는 @Configuration 이 붙은 AppConfig 를 설정(구성) 정보로 사용한다. 여기서 @Bean 이라 적힌 메서드를 모두 호출해서 반환된 객체를 스프링 컨테이너에 등록한다. 이렇게 스프링 컨테이너에 등록된 객체를 스프링 빈이라 한다. 스프링 빈은 @Bean 이 붙은 메서드의 명을 스프링 빈의 이름으로 사용한다. ( memberService , orderService ) 이전에는 개발자가 필요한 객체를 AppConfig 를 사용해서 직접 조회했지만, 이제부터는 스프링 컨테이너를 통해서 필요한 스프링 빈(객체)를 찾아야 한다. 스프링 빈은 applicationContext.getBean() 메서드를 사용해서 찾을 수 있다. 기존에는 개발자가 직접 자바코드로 모든 것을 했다면 이제부터는 스프링 컨테이너에 객체를 스프링 빈으로 등록하고, 스프링 컨테이너에서 스프링 빈을 찾아서 사용하도록 변경되었다.

UI를 구성하는 모든 단위로 클래스의 인스턴스다. 그래픽이나 데이터를 처리하는 함수를 가진다. 각 위젯에는 named args를 넣어주게 된다.

stateless 위젯

상태가 없는 정적인 위젯이다. 스크린에 존재하면서 데이터를 저장하지 않고 아무 변화도 없다. 한 번 렌더링되면, 그 상태가 변하지 않는다. 데이터가 변하지 않거나 위젯이 다시 렌더링될 필요가 없는 경우에 사용한다. (로고, 아이콘 등)

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Hello, I am a stateless widget'),
    );
  }
}

stateful 위젯

계속해서 변화가 있는 위젯이다. 사용자의 인터렉션에 따라 변한다. 사용자 입력이나 API 응답과 같이 동적인 데이터를 처리하거나, 사용자와의 상호작용을 통해 상태가 변화하는 경우 사용한다.

플러터 프레임워크는 createState()를 통해 값이 동적으로 변하는 페이지를 렌더링한다.

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Counter Value: $counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  final Color color;

  MyStatefulWidget({this.color});

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: widget.color,
    );
  }
}

State

상태(state)란 애플리케이션에서 시간이 지남에 따라 변경될 수 있는 데이터를 의미한다. StatefulWidget은 createState() 메소드를 통해 상태를 생성하고 관리한다.

플러터 프레임워크는 State와 같이 제너릭을 통해 반환된 State 인스턴스를 StatefulWidget과 연결한다. 이는 State 객체가 자신을 소유한 StatefulWidget에 대한 정보를 갖고 있어야 하기 때문이다. State는 StatefulWidget의 데이터를 읽고, 변경 사항이 있을 경우 setState()를 호출하여 화면을 다시 빌드한다. setState() 메서드를 사용하면 변한 상태 값에 대해 리렌더링 해준다.

createState

createState() 함수는 StatefulWidget의 인스턴스를 만들 때 호출되는 함수로, State 클래스의 인스턴스를 반환한다. State 인스턴스는 StatefulWidget의 생명주기 동안 지속되는 상태를 갖고 있다.

StatelessWidget은 상태를 유지하지 않기 때문에 createState와 같은 상태 관리 메서드가 필요하지 않다.

widget 객체

State 객체가 생성될 때는 widget 객체를 자동으로 생성한다. widget은 State 객체 내에서 사용할 수 있고, 현재 State 객체와 연결된 StatefulWidget 인스턴스를 참조한다. 즉, State 객체가 자신의 부모 StatefulWidget의 속성에 접근할 수 있도록 한다.

initState

initState() 메서드는 State 객체가 생성될 때 한 번만 호출되며, 위젯이 초기화되는 로직을 넣는 곳이다.

데이터를 불러오거나, 스트림을 설정하거나, 애니메이션을 초기화하는 등의 작업을 수행할 수 있다. 위젯이 트리에 삽입되기 전에 호출되므로 화면이 그려지기 전에 준비해야 하는 모든 것을 설정하는 데 사용된다.

@override
void initState() {
  super.initState();

  // initialize data, start animations, etc.
}

dispose

dispose() 메서드는 StatefulWidget이 위젯 트리에서 제거되기 전에 호출된다. 위젯이 더 이상 필요하지 않을 때 그 위젯과 관련된 모든 리소스를 정리하는 데 사용된다.

컨트롤러를 dispose하거나, 스트림을 닫거나, 메모리에 남아있는 객체를 삭제하는 등의 작업을 수행할 수 있다.

@override
void dispose() {
  // dispose resources like controllers, streams, etc.

  super.dispose();
}

김영한님 강의 기록

스프링 세팅

스프링 부트 3.0을 선택하면

1. Java 17 이상을 사용해야 합니다.
2. javax 패키지 이름을 jakarta로 변경해야 합니다. 오라클과 자바 라이센스 문제로 모든 javax 패키지를 jakarta로 변경하기로 했습니다. 패키지 이름 변경 예)

   # JPA 애노테이션
   javax.persistence.Entity jakarta.persistence.Entity 

스프링에서 자주 사용하는 @PostConstruct 애노테이션

javax.annotation.PostConstruct jakarta.annotation.PostConstruct

스프링에서 자주 사용하는 검증 애노테이션

javax.validation jakarta.validation

```

비즈니스 요구사항

회원

회원을 가입하고 조회할 수 있다. 회원은 일반과 VIP 두 가지 등급이 있다. 회원 데이터는 자체 DB를 구축할 수 있고, 외부 시스템과 연동할 수 있다. (미확정)

주문과 할인 정책

회원은 상품을 주문할 수 있다. 회원 등급에 따라 할인 정책을 적용할 수 있다. 할인 정책은 모든 VIP는 1000원을 할인해주는 고정 금액 할인을 적용해달라. (나중에 변경 될 수 있다.) 할인 정책은 변경 가능성이 높다. 회사의 기본 할인 정책을 아직 정하지 못했고, 오픈 직전까지 고민을 미루고 싶다. 최악의 경우 할인을 적용하지 않을 수 도 있다. (미확정)

회원 도메인 개발

회원 도메인 협력관계

• 기획자와 개발자가 같이 협업하는 단계

회원 클래스 다이어그램

• 개발자가 구현 어떻게 할지 정하는 단계

회원 객체 다이어그램

• repository가 동적으로 결정되기 때문에 실제 사용하는 인스턴스 관계를 명시

1. Member 클래스를 구현 -> id/name/grade/생성자/getter/setter
2. MemberRepository 인터페이스 -> 메모리 구현체 Class
3. MemberService 인터페이스 -> 구현체인 MemberServiceImpl

할인 정책 도메인 개발

주문 도메인 전체

역할과 구현을 구분해야 한다.

주문 도메인 클래스 다이어그램

주문 도메인 객체 다이어그램1

주문 도메인 객체 다이어그램2

협력 관계는 그대로 유지된다.

=> Spring의 등장

Spring 설정이 복잡 => Spring Boot 등장

스프링의 핵심 철학?

스프링 릴리스 history

2004년

🌱 스프링 프레임워크 1.0 릴리스

스프링의 주요 특징인 제어의 역전(IoC) 컨테이너, Dependency Injection, Spring MVC, JDBC 추상화 등이 소개, XML 기반의 빈 설정

2006년

🌱 스프링 프레임워크 2.0 릴리스

XML 스키마를 통한 설정 지원, AspectJ를 통한 Aspect-Oriented Programming (AOP) 기능 향상, 스프링 웹 플로우와의 통합 등이 추가. 2.5에서 Annotation 기반의 설정 도입

2009년

🌱 스프링 프레임워크 3.0 릴리스

REST 웹 서비스, 표현언어(EL), 표준 검증 지원 등이 추가, @Configuration 애노테이션을 통한 자바 기반 설정이 처음 도입

2013년

🌱 스프링 프레임워크 4.0 릴리스

Java 8 도입, 람다 표현식과 메서드 참조 지원, 실시간 웹 애플리케이션 개발을 위한 WebSocket 및 STOMP 메시징을 지원

2014년

🌱 스프링 부트 1.0 릴리스

스프링 프레임워크의 설정을 단순화하고 빠른 프로토타이핑이 가능, 기본적인 템플릿과 설정을 제공하는 Spring Boot Starter 도입, Tomcat, Jetty, Undertow 등의 내장 서버 지원

2017년

🌱 스프링 프레임워크 5.0 릴리스

비동기 처리를 위한 spring-webflux 모듈(Reactive Programming 모델) 도입, Kotlin 언어에 대한 일급 지원 도입, Junit 5에 대한 지원, 모듈 단위 개선, 코어 컨테이너 개선

2018년

🌱 스프링 부트 2.0 릴리스

스프링 프레임워크 5.0 및 Reactor Core 3.1에 대한 기본 지원, Kotlin 지원 등

2022년

🌱 스프링 프레임워크 6.0 릴리스

Java 17기반으로 변경, RPC 지원 종료, 새로운 AOT 엔진 도입 등

🌱 스프링 부트 3.0 릴리스

Java 17 기반, native 지원 확대

Dart에는 var 타입과 dynamic 타입이 존재 var 타입에는 아무 자료형이나 넣을 수 있지만, 첫 자료형 타입으로 고정시켜 준다. 반면 dynamic 타입은 아무 자료형이나 막 바꿔서 넣어줄 수 있다.

var name = "jinhyeok";
name = 123;

이렇게 하면 컴파일 에러가 난다.

dynamic name = "jinhyeok";
name = 123;

이렇게 하면 괜찮다.

이 외 기본 자료형은 int, String, double, bool 등등이 있다.

List, Map 자료형

List, Map은 그냥 써도 되고, < > 제너릭을 넣어서 선언해도 된다.

List nums = [5, 4, 3, 2, 1];

// 또는

List<int> nums = [5, 4, 3, 2, 1];

  Map dics = {
    "cat" : "성격이 드러운 애완동물",
    "dog" : "성격이 온순한 애완동물",
  };

  // 또는

  Map<String, String> dics = {
    "cat" : "성격이 드러운 애완동물",
    "dog" : "성격이 온순한 애완동물",
  };

List 선언 시

List myList = [];

List myList = new List();

두 가지 방식으로 선언이 가능한데, new List()에 특정 수를 입력하면 List의 길이를 제한할 수 있다.

List myList = new List(5);

fianl vs const

const는 build time에 값이 정해져 있어햐 한다. 반면 final은 run time에 값이 결정된다

void main() {
  final now1 = new DateTime.now();  // 가능

  const now2 = new DateTime.now();  // 불가능
}

for loop

for (int i = 0; i < 10 ; i++) // 첫번째 방법


List<int> items = [1, 2, 3, 4, 5];
for (item in items) // 두번째 방법

continue/break

void main() {
  for (int i = 0; i < 5; i++) {
    if (i == 3) {
      continue;
    }
    print('hello ${i}');
  }
}

...

void main() {
  int i = 0;
  while(i < 5) {
    if (i == 3) {
      i++;
      continue;
    }
    print('hello $i');
    i++;
  }
}

...
/* 결과
hello 0
hello 1
hello 2
hello 4
*/

void main() {
  for (int i = 0; i < 5; i++) {
    if (i == 3) {
      break;
    }
    print('hello ${i}');
  }
}

...

void main() {
  int i = 0;
  while(i < 5) {
    if (i == 3) {
      break;
    }
    print('hello ${i}');
    i++;
  }
}

...

/* 결과
hello 0
hello 1
hello 2
*/

collection if

var nav = ['Home', 'Furniture', 'Plants', if (promoActive) 'Outlet'];

collection for

var listOfInts = [1, 2, 3];
var listOfStrings = ['#0', for (var i in listOfInts) '#$i'];

함수 Optional Params/default 인자

void main() {
  double result1 = add(1,2);

  print(result1);

  double result2 = add(1,2,0);

  print(result2); 
}

double add(double x, double y, [double z = 100]) {
  return (x + y + z);
}

//[dobule z]로만 하면 옵셔널

이를 named parameter 방식으로도 바꿀 수 있다.

void main() {
  double result1 = add(1,2);

  print(result1);

  double result2 = add(1,2, z: 0);

  print(result2); 
}

double add(double x, double y, {double z = 100}) {
  return (x + y + z);
}

typedef

void main() {
  int res1 = calculator(2,3,add);
  int res2 = calculator(2,3,sub);

  print(res1); // 5
  print(res2); // -1
}


typedef Operation(int x, int y);

int add(int x, int y) {
  return (x + y);
}

int sub(int x, int y) {
  return (x - y);
}

int calculator(int x, int y, Operation op) {
  return op(x, y);
} 

Class

참고로 private 변수를 선언할때는 _(under bar)를 붙여준다. 다만 private 변수는 파일 단위에서 공유되기 때문에 같은 파일에서는 public 변수처럼 사용된다.

class Person {
  final name;
  final age;

  Person(String name, int age)
    : this.name = name,
      this.age = age;

  void introduce() {
    print('안녕하세요, 제 이름은 $name이고, 나이는 $age살입니다.');
  }
}

void main() {
  Person person = Person('홍길동', 25);
  person.introduce();
}

fromMap을 사용해 초기화

fromMap을 이용해 생성자 초기화 리스트를 정의하는 방법은 데이터베이스에서 읽은 데이터나 네트워크를 통해 받은 데이터를 Dart 객체로 변환할 때 사용하는 방법이다. fromMap 메서드는 Map 타입의 데이터를 클래스의 인스턴스로 변환하는데 사용된다.

class Person {
  String name;
  int age;

  Person(this.name, this.age);

  Person.fromMap(Map<String, dynamic> map) 
    : this.name = map['name'],
      this.age = map['age'];

  void introduce() {
    print('안녕하세요, 제 이름은 $name이고, 나이는 $age살입니다.');
  }
}

void main() {
  Map<String, dynamic> personMap = {'name': '홍길동', 'age': 25};
  Person person = Person.fromMap(personMap);
  person.introduce();
}

나머지 클래스 내용은 공식 문서 를 참고하자

비동기 처리 : Future/async/await

플러터에서 Future는 자바스크립트에서의 Promise라고 보면 된다.

import 'dart:math';

Future<int> getRandomNumber() async {
  var random = new Random();
  int num = await Future.delayed(Duration(seconds: 3), () => random.nextInt(100));
  print("got a number of $num");
  return num;
}

void main() async {
  print('Fetching random number...');
  int randomNumber = await getRandomNumber();
  print('Random number: $randomNumber');
}

함수 리턴에 Future를 적용하면 return값이 Future가 아니어도 자동 적용된다. Future에 대한 비동기 처리는 async/await 구문을 적용해 처리한다.

stream

또 다른 비동기 처리 방식으로는 stream이 있다. Future는 처리가 끝나면 알려주는 방식이고, Stream은 구독 방식이다.

Stream을 생성하고 관리하는 두 가지 방법이 있는데, async/yield 방식과 streamcontroller 방식이다. async와 yield는 Stream의 데이터를 자동으로 생성하고 관리하고 싶을 때 사용하고, StreamController는 Stream의 데이터를 수동으로 관리하고 싶을 때 사용한다.

Stream<int> countStream(int to) async* {
  for (int i = 1; i <= to; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i;  // 다음 값 발생
  }
}

void main() async {
  print('Start counting...');

  await for (int number in countStream(5)) {
    print(number);
  }

  print('Stream finished.');
}

import 'dart:async';

void main() {
  final controller = StreamController<int>();

  final streamListener = controller.stream.listen((val) {
    print('Received: $val');
  }); //listen하고 있다가 값을 전달 받으면 프린트

  for (int i = 1; i <= 5; i++) {
    controller.sink.add(i); // 값 stream에 전달
  }

  controller.close();
}

Future vs Stream

Future는 단일 값에 대한 비동기 작업을 나타낸다. Future는 하나의 값에 대한 결과가 준비되면 완료(complete) 상태가 되고, 그 값은 then이나 async/await를 통해 얻을 수 있다.

반면 Stream은 시간이 지남에 따라 여러 값을 생성할 수 있는 비동기 시퀀스다. Stream을 사용하면 시간이 지나면서 발생하는 이벤트를 처리하거나, 데이터를 순차적으로 처리할 수 있다. Stream은 시간에 따른 결과들을 리턴(yield)하고, 각 결과는 개별적인 Future로 처리된다.

Future는 한 번의 작업에 대한 완료를 기다리는 데 적합하며, Stream은 시간이 지남에 따라 발생하는 여러 이벤트를 처리하는 데 적합하다.

Command + O: 클래스를 찾을 때 사용 Command + Shift + O: 파일을 찾을 때 사용 Command + Shift + F: 전체 프로젝트에서 텍스트 검색

Command + Shift + R: 전체 프로젝트에서 텍스트 변경

Command + Option + L: 코드 자동 정렬

Command + Shift + Enter: 현재 줄 완성

Command + P: 메서드나 생성자의 매개변수 정보를 보여줍니다.

Command + Shift + Backspace: 마지막 수정된 위치로 이동 Command + F12: 현재 파일의 구조 보기 Command + B: 선언이나 정의로 이동 (Command + click)

Command + /: 주석 토글 Command + Option + Up/Down: 이전/다음 메서드나 클래스로 이동합니다.

Control + Option + O: 사용되지 않는 import 제거

Command + []: 이전/다음 편집 위치로 이동 Command + Shift + []: 이전/다음 파일로 이동 Command + Shift + +/-: 모든 코드를 접거나 펼치기.

Command + Shift + T : 같은 이름의 테스트코드 작성

Ctrl + R : 최근 실행 다시 실행

Ctrl + space : 변수 이름/클래스 이름 제안

Option + enter : import 선택

Shift + F6 : rename

Ctrl + T : 리팩토링 관련 기능 찾기

Command + option + M : 선택된 코드 영역 묶어서 빼내기/메서드로 만들기

Option + enter : static import

Shift + 화살표 : 코드 선택 Shift + fn + 화살표 : 코드 뭉텅이로 선택 Ctrl + g : 밑에 있는 같은 단어 선택 Ctrl + Cmd + G : 같은 단어 전체 선택

Shift + Option + 화살표 : 코드 줄 이동

Spring Bean은 Spring IoC(Inversion of Control) 컨테이너에서 관리하는 객체를 의미한다. Spring Framework의 핵심 개념 중 하나로, Spring 컨테이너에 의해 인스턴스화, 조립, 관리되는 객체다. 특정 클래스에 종속적이지 않아, 코드의 유연성을 높이고 테스트를 용이하게 한다.

Spring Bean의 주요 특징은 다음과 같다:

🌱 Singleton Scope:

기본적으로 Spring Bean은 Singleton Scope를 가진다. Spring 컨테이너 내에서 각 빈은 하나의 인스턴스만 존재하게 된다.

🌱 Life Cycle Callbacks:

Spring Bean은 초기화 및 소멸 과정에서 특정 동작을 수행할 수 있다. InitializingBean 및 DisposableBean 인터페이스를 구현하거나, @PostConstruct 및 @PreDestroy 어노테이션을 사용하여 이러한 콜백을 정의할 수 있다.

🌱 Dependency Injection:

Spring Bean은 Dependency Injection(DI)을 통해 다른 Bean에 의존성을 주입할 수 있다. 이는 객체 간의 독립성을 유지시켜 코드의 재사용성 및 유지보수성을 높인다.

스프링빈을 등록하는 두 가지 방법

아래와 같은 컨트롤러가 있을 때,

@Controller
public class MemberController {

    private final MemberService memberService;

    @Autowired //-> 주입된 서비스를 자동으로 가져다가 연결
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }
}

1. 컴포넌트 스캔 방식

@Controller, @Service, @Repository 어노테이션을 써주고, 각 생성자에는 @Autowired 어노테이션을 써서 의존성을 주입시켜야 한다.

@Service
public class MemberService {
    private final MemberRepository memberRepository;
    @Autowired
    public MemberService(MemberRepository memberRepository) {

        this.memberRepository = memberRepository; // 의존성 주입
    }

    ...

 }


@Repository
public class MemoryMemberRepository implements MemberRepository{

    private static Map<Long, Member> store = new HashMap<>();
    private static long sequence = 0L;

    ...

}

각 @Service, @Repository 어노테이션은 @Component 어노테이션의 특수한 경우로 이렇게 컴포넌트 스캔으로 자동의존관계를 설정하면 스프링빈에 등록된다.

2. @Configuration 작성

스프링빈에 등록하는 다른 방법으로는 @Service/@Repository 어노테이션을 삭제하고 @Configuration 어노테이션이 있는 자바코드를 새로 작성하는 것이다.

@Configuration
public class SpringConfig {
    @Bean
    public MemberService memberService() {

        return new MemberService(memberRepository());
    }

    @Bean
    public MemberRepository memberRepository() {

        return new MemoryMemberRepository();
    }
}

장단점

컴포넌트 스캔방식은 쉽다는 장점이 있지만, 나중에 MemoryMemberRepository를 DbMemberRepository로 교체하기가 까다롭다. 반면 Bean 등록 방식은 return 부분에 바꿔주기만 하면 된다.

cd build/libs

이제 java -jar로 SNAPSHOT.jar 파일을 실행한다.

지울때는 ./gradlew clean build

JAVA 설치

OracleJDK는 유료버전이고, JDK가 필요한 몇몇 개발도구의 경우 무료 버전인 OpenJDK 설치를 강제한다. 따라서 OpenJDK를 설치했다.

brew install openjdk
or
brew install openjdk@17 // @ 뒤에 버전 특정

zsh에서 사용할 때 아래와 같이 export 하는 과정을 거쳐줘야 한다.

설치 당시에는 Flutter 설치 시 설치됐던 OpenJDK버전과 인텔리J의 버전 호환이 맞지 않아 인터넷 검색을 통해 복잡한 과정을 거쳐 설치했다. 정리를 해뒀어야 하는데 경황상 그러지 못했다.

java -version으로 결과가 잘 나오면 설치된 것이고, 그렇지 못하면 해당 에러 메시지를 검색을 통해 해결하도록 하자.

차후 Java를 다시 설치할 일이 생기면 정리해보도록 하겠다.

참고로 자바는 회사마다 사용하는 버전이 다르다고 하니 그때그때 맞춰 설치하면 되겠다.

인텔리J 설치

VSCode도 확장 설치를 통해 자바/스프링을 사용할 수 있다. 하지만 다들 인텔리J를 추천해서 CE 버전을 설치해 사용해보도록 한다. 아래 사이트에 접속해서 무료로 사용 가능한 CE 버전을 다운로드 받는다. 충분히 익숙해지면 유료버전을 써보도록 하자. https://www.jetbrains.com/idea/download/#section=mac

spring initializr

https://start.spring.io 에 접속하면 스프링 프레임워크를 사용하기 위한 기본 세팅을 할 수 있다.

• Project 예전에는 라이브러리 관리 툴로 Maven을 사용했는데 최근에는 Gradle로 옮겨오는 추세라고 한다. Groovy가 Java용이라고 한다.
• Language 자바를 선택해준다.
• Spring Boot 괄호가 없는 게 정식 버전이다.
• Java 사용하는 버전에 맞게 선택한다.
• Packaging Jar War는 자바를 빌드하고 배포할 때 사용되는 형식이라 한다.

JAR (Java ARchive): JAR 파일은 자바 클래스 파일(.class), 메타데이터와 리소스 (텍스트, 이미지 등)을 압축한 패키지로, 이는 자바 플랫폼에 내장된 도구인 'jar'를 사용하여 만들 수 있다. JAR 파일은 주로 라이브러리를 공유하거나 간단한 자바 애플리케이션을 배포하는데 사용된다.

WAR (Web application ARchive): WAR 파일은 웹 애플리케이션을 패키징하는 데 사용되는 파일 형식이다. 이 형식은 HTML, JSP, JavaScript, CSS 등의 웹 리소스와 서블릿, 자바 클래스, 자바 라이브러리 등을 포함할 수 있다. WAR 파일은 주로 서블릿 컨테이너 (예: Tomcat)에 배포되어 웹 애플리케이션을 실행하는데 사용된다.

학습 단계에서는 Jar형식을 이용한다.

이제 필요한 라이브러리에 대한 환경을 세팅하는 항목이다. spring web, thymeleaf 등 필요한 라이브러리를 설치한다.

이후 다운로드 받은 뒤 압축을 풀고 intellij에서 .gradle 파일을 오픈하면 된다.

추가로 cmd + , 세팅에 들어가서 gradle 항목으로 검색 들어가면 Build and Run에 Gradle이 Default로 설정돼 있다. intellij IDEA로 바꾸면 좀더 빠르게 빌드될 수 있다.

🟡 JS에서 값을 대입한 변수는 그 값을 가진 것이 아니라 그 값을 가리키는 메모리 주소를 갖고 있다.

🟡 JS에는 참조 카운트가 있어서 아무도 참조하지 않는 메모리는 수거(GC)된다.

🟡 JS에서 원시형이나 참조형 모두 사실은 특정 데이터에 대한 주소를 참조하고 있는 것이다. 참조형은 단지 참조를 중첩해서 한 것에 불과하다.

🟡 JS에서는 함수 선언식보다는 함수 표현식을 사용하는 것이 더 안전하다.

🟡 JS에서 this는 활성화된 실행 컨텍스트를 가리킨다. 활성화되지 않으면 전역객체를 가리킨다. 따라서 함수로서 호출할때는 전역객체를, 메서드로서 호출할 때는 객체를 가리킨다.

🟡 this는 변수에 저장이 가능하다. 변수로 저장해놓으면 해당 객체를 언제든지 불러올 수 있다.

🟡 화살표 함수는 this 바인딩을 생략하므로 상위 스코프의 this를 활용 가능하다.

🟡 JS에서 클로저는 외부 함수의 변수를 내부 함수가 참조하는 상황에서 내부 함수를 다른 컨텍스트에 전달해서 사용할 때 일어나는 현상이다. 이는 GC의 참조 카운트와 연관이 있다.

🟡 참조 카운트를 0으로 만들면 GC가 메모리를 수거한다. 카운트를 0으로 만드는 방법은 변수에 null 또는 원시타입을 할당하는 것이다.

# Stage 0
FROM node:18.15.0-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Stage 1
FROM nginx:1.23.4-alpine
COPY --from=0 /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 컨테이너가 시작될 때 실행할 명령어
CMD ["nginx", "-g", "daemon off;"]

이 중 COPY --from=0 에 주목해보자. --from=0 옵션 명령어는 멀티 스테이지 빌드(Multi-stage build)에서 사용되는 문법이다. 멀티 스테이지 빌드를 사용하면, 여러 개의 이미지를 한 개의 Dockerfile로 구성하고, 각 스테이지에서 빌드한 결과물을 다음 스테이지로 전달할 수 있다. 이를 통해 최종적으로 생성되는 이미지의 크기를 줄이고 더 효율적인 빌드 과정을 구현할 수 있다.

좀더 자세히 살펴보자.

COPY --from=0 /app/build /usr/share/nginx/html 에서

--from=0: 이 플래그는 이전 스테이지에서 생성된 파일이나 디렉토리를 현재 스테이지로 복사하는 것을 뜻한다. 여기서 0은 이전 스테이지를 가리키는 인덱스로, Dockerfile의 첫 번째 FROM 문에 해당한다.

따라서 첫 번째 스테이지(Node.js 이미지를 기반으로 하는 스테이지)에서 빌드된 React 앱의 결과물을 두 번째 스테이지(Nginx 이미지를 기반으로 하는 스테이지)로 전달하고, 최종적으로 생성되는 Docker 이미지에 포함시킨다.

이렇게 함으로써 빌드 도구와 관련된 불필요한 파일들은 제외된다.

https://meyerweb.com/eric/tools/css/reset/

import React from "react";
import Router from "./Router";
import { createGlobalStyle } from "styled-components";

const CssDefault = createGlobalStyle`
    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
`;

function App() {
    return (
        <>
            <CssDefault />
            <Router />
        </>
    );
}

export default App;

폰트 https://fonts.google.com 색 정하기 https://flatuicolors.com

css import하는 방법들

1. CSS 파일 import

import style.css 하고 태그 id또는 classname으로 css 설정

.container {
  background-color: lightblue;
  padding: 10px;
}

import React from 'react';
import './style.css';

function Component() {
  return (
    <div className="container">
      This is an example using a normal CSS import.
    </div>
  );
}

export default Component;

2. 인라인 방식

<tag>에 style={{속성}}

import React from 'react';

function Component() {
  const style = {
    backgroundColor: 'lightblue',
    padding: '10px',
  };

  return (
    <div style={style}>
      This is an example using inline styles.
    </div>
  );
}

export default Component;

3. css 모듈

import someStyle from style.module.css하고 태그에 className={someStyle.someclassName}

.container {
  background-color: lightblue;
  padding: 10px;
}

import React from 'react';
import styles from './style.module.css';

function Component() {
  return (
    <div className={styles.container}>
      This is an example using CSS Modules.
    </div>
  );
}

export default Component;

4. style component

npm i styled-components

import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;

const BoxOne = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
`;

const BoxTwo = styled.div`
  background-color: tomato;
  width: 100px;
  height: 100px;
`;

const Text = styled.span`
  color: while;
`;

function App() {
  return (
    <Father>
      <BoxOne>
        <Text>Hello</Text>
      </BoxOne>
      <BoxTwo></BoxTwo>
    </Father>
  );
}

export default App;

props사용

const BoxOne = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

const BoxTwo = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

const Text = styled.span`
  color: while;
`;

function App() {
  return (
    <Father>
      <BoxOne bgColor="teal">
        <Text>Hello</Text>
      </BoxOne>
      <BoxTwo bgColor="tomato"></BoxTwo>
    </Father>
  );
}

상속

const ChildStyle = styled(BoxOne)`
    border-radius: 50px;
`;

as

<Text as="a">Hello</Text>

<a>태그로 바꿔줌

속성 부여

const Input = styled().input.attrs({required:true, maxLength:10})`
    border-radius: 50px;
`;

theme

태그로 감싸게 되면 theme={mytheme}이 props 인자로 자동으로 넘거가게 된다.

import {ThemeProvider} from "styled-components";
...

const darkTheme = {
  textColor: "whiitesmoke",
  bgColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  bgColor: "whitesmoke",
}

ReactDOM.render(
    <ThemeProvider theme={darkTheme}>
        <App />
    </ThemeProvider>
  )

const Title = styled.h1`
    color: ${(props) => props.theme.textColor};
`;

컴포넌트를 만드는 방법에는 function과 class 두가지가 있다. 예전에는 class를 사용했으나 최근에는 function을 많이 사용한다.

/* function type */
import React from "react";

function App() {
    return <div className="App"></div>;
}

export default App;

/* class type */
import React, { Component } from "react";
class App extends Component {
  render() {
    return (
      <div className="App"></div>
    )
  }
}

함수형을 사용하는 이유는

⭐️ 간결함: 함수형 컴포넌트는 클래스 컴포넌트보다 코드가 간결하고 가독성이 높습니다. 이는 코드를 작성하고 유지 관리하기가 더 쉽다.

⭐️ 훅(Hooks)의 도입: React 16.8부터 훅이 도입되어 함수형 컴포넌트에서도 상태 관리와 생명주기 메서드를 사용할 수 있게 되었다. 이로 인해 함수형 컴포넌트의 기능이 크게 향상되었다.

⭐️ 성능: 함수형 컴포넌트는 클래스 컴포넌트보다 메모리 사용량이 적고, 성능상의 이점이 있다.

⭐️ 테스트 용이성: 함수형 컴포넌트는 순수 함수로 작성되므로 테스트하기가 더 쉽다. 클래스 컴포넌트의 경우 테스트하기 어려운 부분이 있을 수 있다.

⭐️ 커뮤니티 및 라이브러리 지원: React 커뮤니티와 라이브러리는 점점 함수형 컴포넌트에 더 많은 지원을 제공하고 있습니다. 앞으로의 발전 방향을 고려할 때 함수형 컴포넌트를 사용하는 것이 좋다.

프로젝트 생성

npx create-react-app [폴더] --template typescript

npm i react-router-dom
npm i react-query
npm i styled-components

--template typescript를 깜빡했다면 앱에서 아래 명령어를 실행

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

타입스크립트를 사용하므로 타입 정의를 제공해야 한다. https://github.com/DefinitelyTyped/DefinitelyTyped

npm i --save-dev @types/styled-components
npm i --save-dev @types/react-router-dom
npm i --save-dev @types/react-query

• defaul로 설치된 것들 다 지우고 앱개발

• npx 실행 후 npm start하면 앱 다시 실행

• css는 name.module.css로 import하여 사용

타입스크립트를 사용할 때는

간단하게 배포

npm run build
npx serve -s build

Browser Router 방식

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.tsx

<Router />를 삽입한다.

import Router from "./Router";

function App() {
  return (
    <div>
      <Router />
    </div>
  );
}

export default App;

Router.tsx

path를 통해 라우트를 설정한다. element로 각각 Home과 Login 모듈을 가져온다. Header 모듈은 중복을 피하기 위함이다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Header from "./screens/components/Header";
import Home from "./screens/Home";
import Login from "./screens/Login";

function Router() {
    return <BrowserRouter>
        <Header></Header>
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
        </Routes>
    </BrowserRouter>
}

export default Router;

screens/Home.tsx

function Home() {
    return <h1>Home</h1>
}
export default Home;

screens/Login.tsx

function Login() {
    return <h1>Login</h1>
}
export default Login;

screens/components/Header.tsx

import { Link } from "react-router-dom"

function Header() {
    return (
        <h1>
            <ul>
                <li>
                    <Link to={"/"}>Home</Link>
                </li>
                <li>
                    <Link to={"/login"}>Login</Link>
                </li>
            </ul>
        </h1>
    );
}

export default Header;

createBrowserRouter 방식

index.tsx에 <App /> 대신 RouterProvider를 삽입. router를 가져온다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { RouterProvider } from 'react-router-dom';
import router from './Router';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Router.tsx

Routes 컴포넌트를 하나하나 설정하는 대신 createBrowserRouter로 배열 형식으로 삽입.

import { Route, Routes, createBrowserRouter } from "react-router-dom";
import Header from "./screens/components/Header";
import Home from "./screens/Home";
import Login from "./screens/Login";
import App from "./App";

const router = createBrowserRouter([
    {
        path: "/",
        element: <App />,
        children: [
            {
                path: "",
                element: <Home />,
            },
            {
                path: "login",
                element: <Login />,
            },
        ],
    },
]);

export default router;

App.tsx

Router 컴포넌트 대신 Header 컴포넌트와 Outlet 컴포넌트를 삽입. Outlet컴포넌트는 하위 라우트가 설정돼 있으면 해당 컴포넌트를 갖고와 주는 역할.

import { Outlet } from "react-router-dom";
import Header from "./screens/components/Header";

function App() {
  return (
    <div>
      <Header />
      <Outlet />
    </div>
  );
}

export default App;

헤더 링크를 버튼으로 변경

Header.tsx

useNavigate 훅을 사용.

import { Link, useNavigate } from "react-router-dom"

function Header() {
    const nav = useNavigate();
    const onLoginClick = () => {
        nav("/login");
    };
    return (
        <h1>
            <ul>
                <li>
                    <Link to={"/"}>Home</Link>
                </li>
                <li>
                    <button onClick={onLoginClick}>Login</button>
                </li>
            </ul>
        </h1>
    );
}

export default Header;

에러 메시지로 크래시 방지

errorElement를 추가해준다.

const router = createBrowserRouter([
    {
        path: "/",
        element: <App />,
        children: [
            {
                path: "",
                element: <Home />,
                errorElement: <CrashError />,
            },
            {
                path: "login",
                element: <Login />,
                errorElement: <CrashError />,
            },
        ],
        errorElement: <NotFound />,
    },
]);

export default router;

퍼셉트론은 X = [x1, x2, ...] 가 인풋일 때 y를 아웃풋으로 가짐

y = 0 (WX <= ⍬) or 1 (WX > ⍬), where ⍬ = threshold

위 식을 재정립 하면,

y = 0 (WX + b <= 0) or 1 (WX + b > 0), where b = bias

#AND Perceptron
import numpy as np

def AND(x1, x2):
  X = np.array([x1, x2])
  W = np.array([0.5, 0.5])
  b = -0.5
  theta = 0.5
  y = np.sum(X * W) + b
  if y <= 0:
    return 0
  elif y > 0:
    return 1

print(AND(1,1)) #1
print(AND(1,0)) #0
print(AND(0,1)) #0
print(AND(0,0)) #0

#OR Perceptron
import numpy as np

def OR(x1, x2):
  X = np.array([x1, x2])
  W = np.array([0.5, 0.5])
  b = -0.4
  y = np.sum(X * W) + b
  if y <= 0:
    return 0
  elif y > 0:
    return 1

print(OR(1,1)) #1
print(OR(1,0)) #1
print(OR(0,1)) #1
print(OR(0,0)) #0

#NAND Perceptron
import numpy as np

def NAND(x1, x2):
  X = np.array([x1, x2])
  W = np.array([-0.5, -0.5])
  b = 0.6
  y = np.sum(X * W) + b
  if y <= 0:
    return 0
  elif y > 0:
    return 1

print(NAND(1,1)) #0
print(NAND(1,0)) #1
print(NAND(0,1)) #1
print(NAND(0,0)) #1

그러나 single layer perceptron은 XOR을 분류 할 수 없다는 치명적인 단점이 있다.

이를 개선한 것이 multi layer perceptron이다.

import numpy as np

def NOR(x1, x2):
  s1 = NAND(x1, x2)
  s2 = OR(x1, x2)
  y = AND(s1, s2)
  return y

print(NOR(1,1)) #0
print(NOR(1,0)) #1
print(NOR(0,1)) #1
print(NOR(0,0)) #0

...사실 NAND 게이트로 모든 논리 표현이 가능. 즉, 컴퓨터 설계도 가능. 이론적으로 1개의 히든레이어를 가진 퍼셉트론으로도 비선형 시그모이드 함수를 활성화 함수로 사용하면 컴퓨터를 만들 수 있음.

복잡한 계산을 하기 위해선 W의 가중치를 실험적으로 적절히 배합해 줘야 함.

퍼셉트론은 활성화 함수로 step function 사용. 신경망은 활성화 함수로 시그모이드 함수, ReLU 등 사용.