이미지 저장을 위한 API 호출 순서는 다음과 같습니다.

1. 버킷에 이미지 저장을 하기 위한 Signed URL 발급을 받기 위한 POST API를 호출합니다. 이미지는 UUID 키로 보내줍니다.
2. 발급받은 Signed URL로, 이미지를 Data 형태로 PUT method로 보내줍니다.
3. 그 후 이미지와 그외 저장할 내용들을 다시 POST합니다.

🛠 해결 과정

1. 이미지를 UUID 키로 바꾸기

• 처음에 UUID 키라고 해서 좀 어렵게 생각했던 것 같습니다. 이미지 자체를 변환하는 것이 아니라, 이미지를 저장하는 버킷에서 이미지를 구분할 수 있도록 하는 고유한 키값을 만들어서 보내주는 것이라고 생각하였습니다.

  //WriteActiveQuestViewController
  func saveQuest() {
    let uuidKey = UUID().uuidString
    ByeBooLogger.debug("UUID: \(uuidKey)")
    self.viewModel.action(.didTapCompleteButton(
        questID: self.questID,
        answer: self.answerText,
        emotionState: self.emotionState,
        image: self.image,
        imageKey: uuidKey)
    )
  }

  뷰컨트롤러에서, 뷰모델의 action 함수를 호출하는 부분에서 UUID를 생성해서 저장할 내용들을 파라미터로 넘겨주었습니다.

  func postActiveQuest(
    questID: Int,
    answer: String,
    emotionState: String,
    image: Data,
    imageKey: String
  ) async throws {
    let url = try await makeSignedURL(imageKey: imageKey)
  
    try await putImage(signedURL: url, image: image)
    try await saveQuest(questID: questID, answer: answer, emotionState: emotionState, imageKey: imageKey)
  }

Repository 안에 있는 하나의 함수에서, 세부 로직을 각각의 비동기 private 함수로 분리하여 순차적으로 호출하도록 구성했습니다.

2. Signed URL 발급 API 호출

private func makeSignedURL(imageKey: String) async throws -> String {
    let userID: Int = userDefaultService.load(key: .userID) ?? 1
    let signedURLRequestDTO = SignedURLRequestDTO(contentType: "image/jpeg", imageKey: imageKey)

    let result = try await network.request(
        QuestAPI.images(userID: userID, request: signedURLRequestDTO),
        decodingType: SignedURLResponseDTO.self
   )

    return result.signedUrl
}

UUID를 Request에 담아 Signed URL을 발급받는 POST API를 호출합니다.

3. Signed URL로 PUT 메서드 호출

    enum QuestAPI {
        case checkQuest(userID: Int, questID: Int)
        case recording(userID: Int, questID: Int, request: SaveQuestRequestDTO)
        case active(userID: Int, questID: Int, request: SaveQuestActiveRequestDTO)
     ....
    }

원래는 엔드포인트가 같은 api들끼리 enum을 나눠서 추상화 후 호출하는 방식으로 코드를 작성했었습니다.

     private func putImage(signedURL: String, image: Data) async throws {
          try await network.request(image: image, signedURL: signedURL)
      }

하지만 PUT 메서드를 보낼 때에는 Signed URL이 엔드포인트 그 자체가 되기 때문에 추상화하여 사용이 불가능했습니다.

그래서 따로 Network service에 request 함수를 더 만들어서, PUT 메소드용으로 사용했습니다.

/// 이미지 처리
func request(image: Data, signedURL: String) async throws {
    return try await withCheckedThrowingContinuation { continuation in
    AF.upload(
        image,
        to: signedURL,
         method: .put,
         headers: ["Content-Type": "image/jpeg"]
    )
    .validate()
    .response { response in
        ByeBooLogger.network(response)
        if let error = response.error {
            ByeBooLogger.error(error)
            continuation.resume(throwing: ByeBooError.unknownError)
        } else {
            ByeBooLogger.debug("이미지 업로드 성공")
            continuation.resume()
        }
    }
}

이렇게 이미지를 보내게 되면, 버킷에 이미지가 성공적으로 저장됩니다.

4. 나머지 정보들 POST 하기

    private func saveQuest(
            questID: Int,
            answer: String,
            emotionState: String,
            imageKey: String
        ) async throws {
            let userID: Int = userDefaultService.load(key: .userID) ?? 1
            let saveQuestActiveDTO = SaveQuestActiveRequestDTO(
                imageKey: imageKey,
                answer: answer,
                questEmotionState: emotionState
            )

            let _ = try await network.request(
                QuestAPI.active(userID: userID, questID: questID, request: saveQuestActiveDTO)
            )
        }

처음에 만들었던 이미지 UUID 키를 다시 서버로 보내 나머지 정보들을 같이 POST 하면 성공적으로 이미지를 저장할 수 있게 됩니다.

결과

UITextView에서 텍스트를 입력 시 글자가 계속 깜빡거리면서, 뷰에서 사라졌다가 생기는 것이 반복되는 현상입니다 .

🧠 원인 분석

텍스트를 하나하나 천천히 입력하면서 테스트를 했을 때, 뷰에서 안보이는 글자들은 모두 폰트에서 미지원되는 글자들이었습니다.

디자인시스템에서는 SUIT 폰트를 사용하고 있었기 때문에, 폰트 사이트 눈누에서, 지원되지 않는 글자가 어떤 것인지 확인하기 위해 먼저 테스트를 했습니다.

‘고은학생’이라는 텍스트를 입력하는 과정에서, 이렇게 폰트가 깨지는 글자가 있습니다.

이경우 뷰에서 확인하게 되면

뷰에서 사라지는 글자들은 모두 폰트에서 미지원되는 글자들임을 확인할 수 있었습니다. 사용자가 입력 중일때 글자가 깜빡거리는 것처럼 보여서 UX적 측면에서 좋지 않다고 느꼈습니다.

🛠 해결 과정

Fall back 폰트를 설정해주기 위해 Core Text를 이용하였습니다. Core Text는 폰트관련 저수준 인터페이스인데, UIFont보다 더욱 정교한 처리를 구현할 수 있다고 합니다. (https://developer.apple.com/documentation/coretext/)

// String+

extension String {
    func canBeRendered(by font: UIFont) -> Bool {
        let cfFont = CTFontCreateWithName(font.fontName as CFString, font.pointSize, nil)
        return CTFontGetGlyphWithName(cfFont, self as CFString) != 0
    }
}

CTFont는 폰트를 Glyf(글리프)로 변환할 수 있습니다.

입력하고 싶은 글자의 폰트가 SUIT-Regular라면, CRFontCreateWithName 으로를 SUIT-Regular를 글리프 버전으로 만듭니다.

CTFontGetGlyphWithName 으로, 입력하고 싶은 글자가 ctFont 내에 있는지 확인하고 렌더링 여부에 따라 Bool 값을 리턴합니다. 그래서 읁, 핛 이런 글자들은 글리프에 없기 때문에 false가 리턴됩니다.

// UITextViewDelegate 
func textViewDidChange(_ textView: UITextView) {
        if textView.text.count > limitCount {
            textView.deleteBackward()
        }
//입력된 글자를 전부 받아옵니다 
        let fullText = textView.text ?? ""

// 지원안될 때 폰트를 설정합니다 (시스템폰트로 설정함)
        let fallbackFont = UIFont.systemFont(ofSize: 16)

        let suitFont = FontManager.body3R16.font

//입력된 글자를 스타일 설정 가능한 attributed string으로 초기화합니다       
        let attrStr = NSMutableAttributedString(string: fullText)

// 전체 글자를 돌면서 폰트 지원이 안되면 fallback폰트로 설정합니다 
        for (index, char) in fullText.enumerated() {
            let range = NSRange(location: index, length: 1)
            let fontToUse = String(char).canBeRendered(by: suitFont) ? suitFont : fallbackFont
            attrStr.addAttribute(.font, value: fontToUse, range: range)
            attrStr.addAttribute(.foregroundColor, value: UIColor.white, range: range)
        }

//최종적으로 글자를 할당합니다    
        textView.attributedText = attrStr

        count = textView.text.count
        textCount.text = "(\(count)/\(limitCount))"
        delegate?.changeStyle(count: count)
    }

✅ 결과

+) 여담 안드로이드에서는 이 문제를 해결할 수 없어 결국 폰트가 프리텐다드로 전면 수정되었음...

1️⃣ 구조체

구조체를 초기화하는 방법은 다움과 같습니다.

우선 초기화라는 용어에 대해 알아보면!

초기화란, 구조체, 열거형, 클래스의 인스턴스를 생성하는 것입니다. 초기화의 역할은 모든 프로퍼티를 기본값으로 초기화하는 것이며, 인스턴스 내에 기본값이 존재하지 않는 프로퍼티가 있을 경우 초기화에 실패하고, 인스턴스는 생성되지 않습니다.

정리하자면, 초기화함수가 종료되기 전까지 구조체, 클래스 내에 있는 모든 속성값들을 기본값으로 초기화해야한다는 것입니다!

1. 선언과 동시에 프로퍼티에 기본값 넣기

struct People {
    let name: String = "nayeon"
    let age: Int = 23
}

변수를 선언함과 동시에 기본값을 넣어 초기화하는 방법입니다.

2. 프로퍼티 타입 옵셔널로 설정하기

struct People {
    let name: String?
    let age: Int?
}

프로퍼티를 옵셔널로 설정하면, 자동으로 nil로 초기화됩니다.

3. init 함수에서 값 설정하기

struct People {
    let name: String?
    let age: Int?

    init(name: String) {
        self.name = name
        self.age = 23
    }
}

init함수, 즉 생성자를 통해 초기화를 진행할 수 있는데요. 프로퍼티에 직접 값을 넣지 않고 생성자에서 프로퍼티를 초기화할 수 있습니다 .

🔵 Meberwise Initializers

구조체는 사실 init도 작성하지 않고, 프로퍼티에 값을 넣어주지 않아도 에러가 나지 않습니다. 구조체는 Memberwise intializer라는 초기화를 기본적으로 제공하고 있기 때문인데요.

인스턴스의 생성을 위해 init 시 무조건 프로퍼티의 값을 설정할 수 있도록 구조체에서 생성자를 자동으로 제공합니다.

struct People {
    let name: String
    let age: Int
}

이렇게 init 함수도 작성하지 않았고, 프로퍼티에 값도 넣어주지 않았습니다. 한번 확인해볼게요!

코파일럿 쓰니까 밑에 자동으로 뜨는데 무시해주세요

이 init함수를 통해 초기화를 진행할 수 있습니다. 대신 여기서 주의할 점이 있는데요!

바로 프로퍼티가 선언된 순서를 지켜야한다는 점입니다. name → age 순으로 선언했는데, 초기화 파라미터에 age, name 이렇게 쓰게 되면 에러가 납니다.

또한, 생성자를 구조체 안에서 직접 만든 경우 memberwise initializer는 제공되지 않습니다!

2️⃣ 클래스

클래스를 초기화하는 방법은 다음과 같습니다. 큰 틀은 구조체와 비슷하지만, 몇가지 차이점이 있습니다.

1. 선언과 동시에 프로퍼티에 기본값 넣기

class People {
    let name: String = "nayeon"
    let age: Int = 23
}

변수를 선언함과 동시에 기본값을 넣어 초기화하는 방법입니다.

2. 프로퍼티 타입 옵셔널로 설정하기

class People {
    var name: String?
    var age: Int?
}

프로퍼티를 옵셔널로 설정하면, 자동으로 nil로 초기화됩니다.

대신! let은 옵셔널로 선언할 수 없습니다. 왜냐하면, class는 memberwise initializer가 제공되지 않기 때문입니다. let은 값을 바꿀 수 없는데, 옵셔널로 선언하게 되면 nil 외에는 값을 가질 수 없고, 심지어 값을 나중에 다시 생성해줄 수도 없기 때문입니다.

3. init 함수에서 값 설정하기 (Designated Initializers)

struct People {
    let name: String?
    let age: Int?

    init(name: String) {
        self.name = name
        self.age = 23
    }
}

init함수, 즉 생성자를 통해 초기화를 진행할 수 있는데요. 프로퍼티에 직접 값을 넣지 않고 생성자에서 프로퍼티를 초기화할 수 있습니다.

이 방식으로 서브클래스 초기화를 하는 경우, 반드시 슈퍼클래스의 initializer를 호출해주어야 합니다.

4. 편의 생성자 (Convenience Initializers)

모든 프로퍼티를 초기화하는 init 이니셜라이저(Designated Initializers)를 도와주는 역할입니다. init 이니셜라이저의 파라미터 중 원하는 값을 기본값으로 설정하는 방식입니다. 어쨌든 도와주는 역할이기 때문에 init 이니셜라이저는 필수적으로 구현되어야 합니다.

Convenience Initializers 가 불리는 순서인데요. 모로 가든 init 이니셜라이저가 마지막에 불리게 됩니다. 예제로 볼게요.

class Person {
    var name: String
    var age: Int

    init(name: String, age: Int){
        self.name = name
        self.age = age
    }

    convenience init(name: String){
        self.init(name: name, age: 100)
    }

    convenience init(){
        self.init(name: "unknown", age: 100)
    }
}

여기 보시면 편의생성자가 2개 생성되어있는데요.

편의 생성자 안에서는 self.init으로 init 이니셜라이저를 부르고 있습니다.

name이 파라미터에 있는 생성자랑, 파라미터에 아무것도 없는 생성자가 있습니다.

편의 생성자는 기본값을 설정해주는 생성자라고 이해하면 좀 더 쉬운데요.

이렇게 3개의 객체를 생성해봤습니다. nayeon 객체에는 name, age를 다 줬고, hyoeun 객체에는 name만, person객체에는 아무것도 주지 않았습니다.

생성자에 들어간 파라미터에 따라 각기 다른 생성자가 불리게 된 것입니다.

일반 Stack과 다르게, Lazy 키워드가 붙은 LazyVStack과 LazyHStack은 각 아이템이 필요할 때 생성됩니다. 세미나에서 배운 LazyHGrid, LazyVGrid와 비슷한 방식이라고 할 수 있습니다. VStak에 들어가는 내용이 엄청 많다면 Lazy로 관리해주는게 더 효율적이라고 합니다.

이번 주차 과제에서는 스티키헤더를 만들기 위해 LazyVStack의 pinnedViews를 이용했습니다.

 ScrollView {
     LazyVStack(pinnedViews: [.sectionHeaders]) {
        HeaderView()

        Section(header: TabbarView(selectedTab: $selectedTab)) {...
        }
   }
   ...
}

pinnedViews 파라미터에는 두가지 타입이 있습니다.

header와 footer가 있는데요. 위쪽에 만들어줄거기 때문에 section Header를 파라미터에 넣어줬습니다.

그리고 스티키헤더로 만들어줄 부분을 Section(header:)에 넣어줍니다.

☄️발생했던 트러블 슈팅

스티키헤더 위의 세이프 에리아 부분에 콘텐츠가 계속 보였습니다. 탭뷰 부분만 검정색으로 처리해주어도 그 문제가 계속되었습니다. 이 아티클을 보고, ScrollView에 padding top을 줌으로써 뷰를 짤 때 safe are와 스크롤뷰가 처음부터 떨어져있도록 여백을 주어 해결했습니다.

저장 속성

값이 저장되는 일반적인 속성입니다. var, let 으로 선언 가능하며, 객체를 초기화할 때 각 저장속성은 반드시 값을 가져야합니다. (nil로 초기화하는 것도 가능함)

지연 저장 속성

lazy 키워드로 해당 속성의 초기화를 지연시킵니다. 그래서 인스턴스가 초기화되는 시점에 해당 속성이 초기화되는 것이 아닌 해당 속성에 접근하는 순간에 개별적으로 초기화됩니다. 그래서 let으로는 선언할 수 없습니다. (let은 초기화할 때 바로 값을 고정시켜주고 싶은데, lazy는 나중으로 값 초기화를 미루니깐..)

lazy를 사용하는 이유는 다음과 같이 정리해볼 수 있습니다.

• 초기화 비용이 많이 필요한 뷰를 생성할 때

  • 바로 메모리에 올려버리면 생성 비용이 많이 들기 때문에 나중에 필요할 때 메모리에 올리는 방식으로 사용할 수 있습니다.

• 항상 필요한 것이 아니고, 특정 시점 이후에 필요한 뷰를 생성할 때

• 다른 속성을 이용해야 할때

    private let formatter = CalendarDateFormatter()
    private lazy var selectedIndex = formatter.getTodayDay()
    public lazy var selectedDate: String = weekDates[selectedIndex]

  • formatter를 사용하여 변수를 생성하고 있는데, 만약에 lazy 없이 그냥 생성하게 된다면

    

    이런 에러가 나게 됩니다. self가 available하기 전에 초기화할 수 없다고 하는데요.

  • 무슨 말이냐면….

    Swift에서는 모든 저장 속성이 초기화된 이후에서야 self(현재 인스턴스 자기 자신)가 유효해집니다. 원래는 self.fomatter.getTodayDay() 이렇게 써야하는데, 사실상 생략되어서 쓰이고 있는거죠. 그래서 self를 쓸 수 없는데 사용했다고 에러가 나는 것입니다.

계산 속성

속성의 형태를 가진 실질적 메소드입니다. 우리는 메소드를 만들 때, get, set 메소드를 많이 만들잖아요. 그런 비슷한 역할을 하는 속성입니다.

var로만 선언 가능하고, 자료형은 필수로 선언해야합니다.

struct Rectangle {
    var width: Double
    var height: Double

    var area: Double {
        get {
            return width * height
        }
        set {
            height = newValue / width
        }
    }
}

Rectangle이라는 구조체를 선언했고, 그 안에 area라는 계산 프로퍼티를 만들었습니다.

get 접근자는 area에 접근될때마다 area 값을 리턴해줍니다. set 접근자는 속성에 새로운 값이 할당되면 그 값(new Value)을 기반으로 다른 속성의 값을 조정할 수 있습니다.

var rect = Rectangle(width: 5.0, height: 10.0)

print("첫번째 height: ", rect.height)
print("첫번째 area: ", rect.area)

rect.area = 100.0

print("두번째 height: ", rect.height)
print("두번째 area: ", rect.area)

첫번째 area를 출력할 때는 get을 통해 접근하여 계산된 값을 리턴하게 됩니다.

그 이후에는 100으로 면적을 바꿔주었기 때문에, set에서 다른 속성들이 값이 바뀌게 됩니다.

타입 속성

타입 프로퍼티를 쉽게 말하면, 저장 속성과 계산 속성 앞에 static 키워드를 붙인 것입니다. 그러면 저장 타입 프로퍼티 & 계산 타입 프로퍼티가 됩니다. 이렇게 static을 붙이게 되면 자동으로 lazy하게 작동합니다.

이렇게 static이 붙으면 전역변수처럼 사용되는데요. 코드를 통해 보겠습니다.

class Person {
    static let name: String = "nayeon"
    var age: Int = 23
}

print(Person.name)

let person = Person()
print(person.age)

name에만 static을 붙여 저장 타입 프로퍼티로 만들어줬고, age는 그냥 var로 선언해주었습니다.

이렇게 static으로 선언하게 되면 객체를 선언할 필요 없이 Person.name으로 바로 접근이 가능합니다.

반면에 static으로 선언하지 않은 age는 객체를 생성해야만 age에 접근이 가능합니다.

person.name으로 하면 에러가 납니다

이때, 저장 타입 프로퍼티의 경우 항상 초기값을 선언해주어야합니다. 왜냐하면, 타입 프로퍼티는 초기화될 때 한번만 불려서 메모리에 올라가면 그 뒤로는 생성되지 않습니다. 대신 언제 어디서든 그 타입 프로퍼티에 접근할 수 있게 됩니다. 그래서 class 내의 init 함수와는 상관 없이 static으로 된 타입 프로퍼티는 무조건 초기값을 가져야합니다.

또한 위에서 static이 붙은 타입 프로퍼티는 lazy하게 작동한다고 했는데요. Person.name으로 불렸을 때, 그때 메모리에 올라가서 초기화됩니다.

하지만 static은 오버라이딩이 불가능합니다. 하지만! 앞에 static 대신 class 키워드가 붙은 계산 타입 프로퍼티는 오버라이딩이 가능합니다.

class Person {
    class var age: Int {
        get {
            return 23
        }
    }
}

class Nayeon: Person {
    override class var age: Int {
        get {
            return 24
        }
    }
}

속성 감시자 (Property Observer)

프로퍼티 옵저버는 말그대로 프로퍼티를 감시하는데요. 내가 관찰하는 프로퍼티의 값이 변경되는 것을 감지하고 알려줍니다. 이 속성 감시자는 저장 프로퍼티에 한해 추가할 수 있습니다.

속성 감시자는 두가지가 있는데요.

• willSet : 값이 저장되기 직전에 호출됨
  • 값이 저장되기 직전에, 새로운 값이 파라미터 newValue로 전달됩니다.
• didSet: 새 값이 저장된 직후에 호출됨
  • 값이 저장된 직후에, 이전 값이 파라미터 oldValue로 전달됩니다.

var name: String = "나연" {
    willSet {
        print("현재 이름: \(name), 바뀔 이름 : \(newValue)")
    }
    didSet {
        print("현재 이름: \(name), 이전 이름 : \(oldValue)")
    }
}

name = "효은"

import Foundation

struct BaseResponse <T: Decodable>: Decodable {
    let code: String
    let message: String
    let data: T?
}

하지만 일부 API에서 요청은 200으로 잘 되는데, 디코딩에러가 발생했습니다.

문제 상황은 다음과 같았습니다.

{
  "code": "s2040",
  "message": "요청이 성공했습니다."
}

PATCH api에서는 서버에서 설정한 리스폰스에 data가 오지 않았습니다. 베이스 리스폰스에는 data가 있는데, 리스폰스에는 data가 nil로 오는 것도 아니고 아예 오지 않았기 때문에 디코딩 에러가 발생했던 것입니다.

이런 경우 해결방법은 2가지가 있는데요.

1. 서버에서 data를 nil로 내려달라고 한다.
2. 클라이언트 측에서 분기처리를 해준다.

저는 2번의 방법으로 해결했습니다.

디코딩에러 트러블슈팅

struct VoidType: Decodable {}

final class SubTaskPatchService {
    let shared = BaseService.shared

    func patchSubTask(id: Int, request: SubTaskPatchRequest) async throws -> VoidType {
        do {
            let response: VoidType = try await shared.request(
                endPoint: .patchSubTasks(id),
                body: request
            )
            return response
        } catch {
            throw error
        }
    }
}

리스폰스 data 타입을 빈 구조체인 VoidType으로 설정해줍니다. 베이스 리스폰스에서 data를 T라는 제네릭타입으로 지정해주었습니다. 그래서 이 data의 타입을 빈 구조체로 지정해주는 것입니다!

 do {
            print("type\(Response.self)")
            let decoded = try JSONDecoder().decode(BaseResponse<Response>.self, from: data)
            print("디코딩된 데이터는요: ", decoded)

            if Response.self == VoidType.self {
                let successCodes = ["s2000", "s2010", "s2040"]
                guard successCodes.contains(decoded.code) else {
                    throw NetworkError.serverErrorMessage(decoded.message)
                }

                return (VoidType() as? Response) ?? {
                       fatalError("VoidType을 Response로 변환할 수 없습니다.")
               }()
            }

            guard let data = decoded.data else {
                throw NetworkError.noData
            }

            let successCodes = ["s2000", "s2010", "s2040"]
            guard successCodes.contains(decoded.code) else {
                throw NetworkError.serverErrorMessage(decoded.message)
            }

           return data
} 

그리고 리스폰스를 디코딩해주는 함수에서 data가 Void Type인 경우를 미리 분기처리해줍니다.

그러면 성공적으로 디코딩에러가 해결되는 것을 확인할 수 있습니다.

관련 PR 링크

1. UICollectionView로 캘린더 만들기

이렇게 생긴 캘린더를 만들건데요.

이렇게 구조를 짰고, 달력 부분은 컬렉션 뷰로 만들었습니다.

☄️ 여기서 생긴 트러블 슈팅..

didSelectItmeAt 함수가 호출이 아예 안되는 이슈가 있었습니다. 알고보니.. 상단에 있는 자잘한 것들을 WeekBox 뷰로 묶고, 달력을 WeekCalendar 뷰로 묶었는데 그 뷰들에 height 제약을 걸어주지 않아서 생긴 문제였습니다. 높이제약을 잘 걸었는지 항상 확인합시다...

2. Calendar Class 만들기

달력과 관련된 일들을 처리하는 Calendar Formatter Class를 만들었습니다. 이곳에서 관련된 함수들을 만들어, 날짜를 받아오는 일들은 전부 이 클래스에서 처리했습니다.

private let calendar: Calendar = {
            var calendar = Calendar(identifier: .gregorian)
            calendar.firstWeekday = 2
            return calendar
}()

투두메이트는 월요일부터 시작하기 때문에 firsrtWeekday 속성을 수정했습니다.

 private let calendarFormatter = DateFormatter()
 private let monthFormatter = DateFormatter()
 private let dateFormatter = DateFormatter()
 private var nowCalendarDate = Date()
 private var dates = [String]()

init() {
        calendarFormatter.dateFormat = "yyyy-MM-dd"
        monthFormatter.dateFormat = "yyyy년 MM월"
        monthFormatter.locale = Locale(identifier: "ko_KR")
        dateFormatter.dateFormat = "d"
        dateFormatter.locale = Locale(identifier: "ko_KR")
 }

각자 용도에 맞는 formatter를 선언해주었습니다.

• monthFormatter : 월 텍스트를 받아올 때 사용합니다.
• calendarFormatter : 현재 뷰에 보여지는 한 주간의 날짜를 yyyy-mm-dd 형식의 배열로 보여줄 때 사용합니다.
• dateFormatter : 오늘 날짜에 관련된 일들을 처리할 때 사용합니다.

3. 셀에 날짜 뿌려주기

셀에 날짜를 뿌려줄 때 다음과 같이 작성했습니다.

private func setDate(_ offset: Int) {
        weekDates = formatter.getWeekDateStringsOfWeek(offset)
        selectedIndex = formatter.getTodayDay()
        selectedDate = weekDates[selectedIndex]
        weekCollectionView.reloadData()
}

extension WeekCalendar: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: WeekCollectionViewCell.identifier, for: indexPath) as? WeekCollectionViewCell else {
            return WeekCollectionViewCell()
        }

        let date = weekDates[indexPath.item]
        let isSelected = selectedIndex == indexPath.item
        cell.dataBind(date: date, isSelected: isSelected, index: indexPath.item)
        return cell
    }
    ...
}

yyyy-mm-dd 형식으로 현재 주를 배열로 리턴해주는 함수 getWeekDateStringsOfWeek를 호출하여 weekDates 배열에 담아주었습니다.

extension WeekCollectionViewCell {
    func dataBind(date: String, isSelected: Bool, index: Int) {
        let slicedDate = Int(date.suffix(2)) ?? 1
        dayLabel.text = "\(slicedDate)"

        if isSelected {
            dayLabel.backgroundColor = .black
            dayLabel.layer.cornerRadius = 10
            dayLabel.textColor = .white
        } else {
           changeDayLabelColor(index)
       }
    }
}

데이터 바인딩 할때, dd 만 가져올 수 있도록 추출해주었습니다. Int 형식으로 변환한 이유는 01, 02, 03.. 인 날짜일 때 1, 2, 3..으로 표시해주기 위해서입니다.

4. 주간 달력 이동하기

위의 왼쪽 화살표 아이콘, 오른쪽 화살표 아이콘을 누르면 전주, 다음주로 달력을 이동해야합니다.

func getWeekDateStringsOfWeek(_ offset: Int) -> [String] {
        guard let targetDate = calendar.date(byAdding: .weekOfYear, value: offset, to: nowCalendarDate),
              let weekInterval = calendar.dateInterval(of: .weekOfYear, for: targetDate) else {
            return []
        }

        var weekDates: [String] = []
        for i in 0..<7 {
            if let date = calendar.date(byAdding: .day, value: i, to: weekInterval.start) {
                weekDates.append(calendarFormatter.string(from: date))
            }
        }
        print("이번주는요 ", weekDates)
        return weekDates
    }

offset을 주어서, 현재 날짜에서 얼마나 이동해야하는지를 체크하여 그에 따른 날짜를 리턴합니다.

extension WeekCalendar: WeekBoxMoveButtonDelegate {
    func didTapPreMoveButton() {
        print("전주 보여주세요")
        offset -= 1
        setDate(offset)
    }

    func didTapRightMoveButton() {
        print("다음주 보여주세요")
        offset += 1
        setDate(offset)
    }
}

weekbox 뷰 안의 아이콘을 눌렀을 때, delegate로 처리하여 각각 Offset 값을 다르게 주었습니다.

관련 PR

SwiftLint란 코드 스타일을 분석해주는 정적도구인데요. 내가 작성한 코드들에서 규칙에 어긋나는 코드를 찾아내서 경고 또는 빌드 에러를 반환해 주기 때문에 일관된 코드 스타일을 유지하고, 코드 품질을 향상시킬 수 있습니다. 협업 시에 일관된 코드 스타일을 유지할 수 있어 편리하다고 합니다.

SwiftLint 설치하기

저는 homebrew를 이용해서 설치했습니다.

homebrew install swiftlint

homebrew로 설치가 완료되면, xcode의 프로젝트에서 Build Phase에 들어가줍니다. 위에 +를 누르고, New Run Script Phase를 클릭해 새로운 스크립트를 만들어줍니다.

그리고 밑에 스크립트에 다음과 같이 작성해줍니다. 스크립트 이름은 SwiftLint Script로 바꿔줬습니다.

# Type a script or drag a script file from your workspace to insert its path.
if [[ "$(uname -m)" == arm64 ]]; then
    export PATH="/opt/homebrew/bin:$PATH"
fi

if which swiftlint > /dev/null; then
  swiftlint
else
  echo "warning: SwiftLint not installed, download from https://github.com/realm/SwiftLint"
fi

SwiftLint.yml 작성하기

위의 단계들이 끝나면 규칙들을 작성해야합니다. 프로젝트 루트에 .swiftlint.yml 파일을 만들어줍니다. Swiftlint 규칙은 여기서 확인할 수 있습니다

저희 팀의 코드컨벤션에 맞춰 어떤 규칙을 비활성화할지, 어떤 규칙을 추가할지에 대해 작성해주었습니다.

disabled_rules:
    # 비활성화하고 싶은 규칙
    - identifier_name
    - line_length
    - type_name
    - legacy_constructor
    - unused_setter_value
    - void_function_in_ternary
    - nesting
    - comment_spacing
    - cyclomatic_complexity

opt_in_rules:
    - function_parameter_count
    - function_body_length
    - trailing_whitespace
    - empty_count
    - empty_string
    - closure_end_indentation
    - let_var_whitespace

included:
    - TODOMate
excluded:
    - TODOMate/App/AppDelegate.swift
    - TODOMate/App/SceneDelegate.swift

included에는 프로젝트 파일을 포함시켜주고, excluded에는 AppDelegate와 SceneDelegate를 작성해서 검사에서 제외될수 있게 합니다.

이후 Cmd+B로 빌드시켜보면 규칙이 어긋나는 부분에 경고가 나타나게 됩니다.

Github Action 연결

깃허브 내에 .github/workflows 경로로 .swiftlint.yml 파일을 만들어줍니다.

그리고 다음과 같이 파일을 작성합니다.

name: SwiftLint

on:
  pull_request:
    paths:
      - '.github/workflows/swiftlint.yml'
      - '.swiftlint.yml'
      - '**/*.swift'

jobs:
  lint:
    name: Run SwiftLint
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Run SwiftLint using config file
        uses: norio-nomura/action-swiftlint@3.2.1
        with:
          args: --config TODOMate/.swiftlint.yml

이렇게 하면 pr을 올렸을 때 swiftlint가 자동으로 코드를 검사하여, 통과하지 못하면 머지를 할 수 없게 됩니다.

☄️ 트러블슈팅

빌드했을 때는 잘 되는데, pr에 올라가면 검사를 통과하지 못하는 이슈가 발생했습니다. 이때, PR내의 File Change에 들어가면 어디서 통과하지 못했는지 볼 수 있는데요. 이 경우 AppDelegate와 SceneDelegate에서 계속 통과하지 못했습니다. 이상하죠... yml 파일에서 분명 exclude시켰는데 말이죠..?

저희팀 천재리드에게 sos를 쳤는데 깃허브액션이 swiftlint yml 파일을 못찾는것 같다고 말해줬습니다. 그래서 열심히 서치를 해보다가 이 아티클을 발견했는데요!

문제는 바로 여기였습니다.

steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Run SwiftLint using config file
        uses: norio-nomura/action-swiftlint@3.2.1
        with:
          args: --config .swiftlint.yml

처음에는 args 부분에 정확한 경로명을 적어두지 않고, .swiftlint.yml만을 적어두었습니다. 이곳의 경로명을 정확하게

TODOMate/.swiftlint.yml

라고 작성해주니 성공적으로 CI 세팅을 마칠 수 있었습니다!

0. 들어가며

일급객체(First-class Object)란?

특정 조건을 만족하는 객체들을 일급객체라고 하는데요. 그 조건은 다음과 같습니다.

• 런타임 중 에도 객체가 생성이 가능해야한다.

• 객체를 전달 인자로 전달 가능하다.
• 객체를 변수나 데이터 구조 안에 담을 수 있다.
• 객체를 리턴 값으로 사용 가능하다.

⇒ 요약 : 변수나 상수처럼 사용할 수 있어야 한다!

1. enum 정의하기

1) 원시값이 없는 열거형

enum Sopt {
    case plan
    case server
    case web
    case android
    case ios 
    case design
}

enum Sopt {
    case plan, server, web, android, ios, design
}

위와 같이 열거형의 이름만 쓰고 선언해주면 원시값이 없는 열거형입니다.

실제로 사용할 때에는, 선언한 열거형이 하나의 자료형이 됩니다.

var member1: Sopt = .ios

이렇게 .을 통해 내가 선언한 case 내에서만 접근이 가능합니다.

2) 원시값이 있는 열거형

원시값(Raw Value)이 될 수 있는 자료형은 Number, Character, String 타입 총 3가지가 있습니다.

원시값을 가지고 싶다면, enum 선언 시 꼭 타입을 명시해주어야 하는데요!

🔵 Number Type

enum Member: Int {
    case ob
    case yb
    case leader
}

이렇게 Int를 명시해주게 되면, 가장 먼저 선언된 case부터 0, 1, 2.. 가 차례대로 들어가게 됩니다.

enum Member: Int {
    case ob // 0 
    case yb = 2
    case leader // 3
}

만약에 yb에 원시값을 2라고 지정해주고, leader에는 따로 원시값을 지정하지 않았다면 바로 이전 케이스의 원시값에서 +1된 값으로 세팅됩니다.

✅ 주의할점 !!

만약에 Double 타입으로 enum을 선언했다고 가정해봅시다.

enum Member: Double {
    case ob = 1.0
    case yb = 2.0
    case leader //error!
}

Double이나 Float에서는 모든 case에 원시값을 선언해주지 않으면 에러가 나게 되는데요.

바로 이전 케이스 값에 +1을 더하기 때문에, 실수값에 정수를 더할 수 없기 때문에 에러가 나게 됩니다.

그래서 이 Double이나 Float으로 enum 타입을 지정했을 때, 원시값을 지정해주고 싶다면 모든 case에 원시값을 선언해주어야 합니다. 하지만! 굳이 생략을 하고 싶다면 이전 case의 값을 정수 지정해주면 에러 없이 사용할 수 있습니다.

🔵 Character Type

enum Sopt: Character {
    case plan = "p"
    case server = "s"
    case web = "w"
    case android = "a"
    case ios = "i"
    case design = "d"
}

Character로 enum의 타입을 지정해줄 경우 반드시 모든 case에 대해 원시값을 지정해주어야합니다.

아스키코드처럼 +1을 더하면 되지 않나? 라는 생각은 안됩니다.. (아까 Float와 비슷한 이유로 이전값이 정수가 아니기 때문에 계산이 불가능합니다)

🔵 String Type

String type은 원시값을 지정하지 않으면 case 이름과 동일한 원시값이 자동으로 지정됩니다.

enum Sopt: String {
    case plan                //plan
    case server              //server
    case web                 //web
    case android             //android
    case ios = "요아정"
    case design              //design
}

✅ 원시값 접근하기

이렇게 만들어진 원시값은 rawValue 라는 속성으로 접근해주면 됩니다!

var 나연: Sopt = .ios
var 효은: Sopt = .server

print(나연.rawValue)
print(효은.rawValue)

만약 원시값이 존재하는 열거형이라면, rawValue속성을 이용해 생성자 바로 변수를 만들 수 있는데요

var 나연 = Sopt(rawValue: "ios")
var 효은 = Sopt(rawValue: "sserver")

이렇게 없는 값을 rawValue에 넣어주게 되면 효은 이라는 변수는 nil을 리턴하게 됩니다.

예제를 통해서 알아보겠습니다!

💬 예제

enum Sopt: String{
    case plan
    case server
    case web
    case ios = "요아정"
    case andriod
}

이렇게 작성된 enum을 만들어주었습니다. ios에만 “요아정”이라는 원시값을 주었어요.

var nayeon: Sopt = .ios
print(nayeon)
print(nayeon.rawValue)
print(type(of: nayeon))

실행결과를 보겠습니다.

요렇게 실행결과가 나오게 되는데요. nayeon이라는 변수에는 .ios라는 enum을 주었고, 원시값으로는 “요아정”을 지정했습니다. 타입을 확인해보면 Sopt라는 enum 타입이 나오게 됩니다.

var hyoeun = Sopt(rawValue: "sserver")
print(hyoeun)
print(type(of: hyoeun))

“sserver”라는 없는 원시값으로 새로운 Sopt 타입의 변수를 선언해보겟습니다.

실행결과를 확인해보면

hyoeun이라는 변수에는 아무것도 들어가있지 않습니다. sserver라는 원시값이 enum 내에 존재하지 않기 때문에 nil이 들어가게 되었습니다. 타입을 확인해보니 Sopt Optional 타입이네요. 없는 원시값을 넣어 변수를 생성하게 되면 리턴되는 enum은 옵셔널임을 알게 되었습니다.

2. 연관값 (Associated Values)

1) 배경

솝트의 멤버에 관련된 Enum을 만들어서, yb와 ob case를 만들어서 원시값을 지정해주려고 합니다.

enum SoptMember: String {
    case yb = "ios, 23"
    case ob = "server, 24, 35"
}

하지만 모든 YB가 ios파트에 23살은 아닐거고, 모든 OB가 서버파트에, 최근활동기수가 35기에, 24살은 아닐 것입니다. 이렇게 원시값을 사용하게 될 경우, 모든 case가 동일한 원시값을 가져야하고, case별로 지정된 하나의 값만 가질 수 있습니다. 이럴 때 바로 연관값을 사용하게 됩니다.

2) 연관값을 가지는 Enum 선언하기

enum SoptMember {
    case yb(part: String, age: Int)
    case ob(part: String, age: Int, recent: Int)
}

연관값을 선언할 때에는 case 옆에 튜플 형태로 원하는 타입을 명시하면 됩니다.

3) 연관값을 가지는 Enum 생성하기

enum을 사용할 때에는 연관값을 함께 전달하여 생성하면 됩니다.

let nayeon: SoptMember = .yb(part: "ios", age: 23)
let hyoeun: SoptMember = .ob(part: "server", age: 24, recent: 35)

4) switch 매칭

예제를 통해서 switch-case로 매칭하는 경우를 보겠습니다.

선언했던 연관값 중 하나만으로도 조건을 걸 수 있습니다.

.yb(let part, let age) 이렇게 case를 거는 경우, 연관값을 꺼내서 사용할 수 있게 됩니다.

이렇게 연관값 관련하여 아무 조건도 걸지 않으면 연관값을 무시하고 case값만 맞으면 바로 실행되게 됩니다.

스위프트에서는 let, var로 상수&변수를 선언하게 되는데요.

let sopt
var ios

이렇게만 작성하면 Type Annotation missing이라는 에러가 나게 됩니다. 에러를 해결하기 위해서는 변수의 타입을 명시적으로 지정해주어야 합니다. 컴파일러가 변수, 상수의 자료형이 무엇인지 알게 하기 위해서 타입을 명시해주어야합니다.

타입을 명시해주는 방법에는 Type Annotation, Type Inference로 2가지 방법이 있습니다.

1) Type Inference (타입추론)

타입 추론이란, 선언과 동시에 값을 초기화하는 것입니다.

let name = "nayeon"

컴파일러는 초기화된 “nayeon”이라는 값을 보고 타입을 String이라고 추론하여, name의 타입을 String으로 지정해주는 것입니다.

타입추론에 문제점이 있다면, 원하는 타입으로 추론되지 않을 가능성이 존재한다는 것입니다. 예를 들어,

let num = 13.0

나는 float 변수를 원했는데, 컴파일러는 이 변수를 double로 추론하여 지정해버리는 문제가 발생하게 됩니다.

그외에도 초기값이 없는 경우에도 문제가 발생하는데, 이 경우에 Type Annotation을 사용합니다.

2) Type Annotation (타입 주석)

타입 주석이란, 변수 선언 시 직접 자료형을 지정해주는 방법입니다.

let 변수명: 자료형
var 변수명: 자료형

위의 형식처럼 콜론 뒤에 자료형을 명시합니다.

타입 추론과 다르게, 타입을 유추할 필요가 없기 때문에 초기값이 없어도 됩니다. 또한, 컴파일러가 타입을 추론하는 시간이 더 짧다는 장점이 있습니다.

✅ Type Alias

Alias는 별칭이라는 뜻을 가지고 있습니다. 말 그대로 Type Alias는 타입에 붙일 수 있는 별칭, 약칭입니다.

주의할 점은, Type Alias는 새로운 타입을 만드는 것이 아닌, 기존 타입에 별명을 붙여 새로운 이름으로 부를 수 있게 한것입니다. 이렇게 사용하는 이유는 코드를 좀 더 간결하고, 가독성있게 작성하기 위해서입니다.

typealias 별명 = 기존타입

TypeAlias를 사용하는 방법에는 다양한 유형이 있습니다.

1) 기본 타입에 사용

typealias Name = String
let name: Name = "nayeon"

2) 사용자 정의 타입에 사용

class Student { ... }
typealias Students = Array<Student> 
var arrStudents: Students = [] //Array<Student> 대신 사용

3) 클로저에 사용

func saveData(success: ((Int) -> Int)?,
              failure: ((Error) -> Void)?,
              progress: ((Double) -> Void)?) {
}

이런 복잡한 형식의 클로저를

typealias Success = (Int) -> Int
typealias Failure = (Error) -> Void
typealias Progress = (Double) -> Void

func saveData(success: Success?,
              failure: Failure?,
              progress: Progress?) {
    // code ...
}

typealias 선언을 통해 간단하게 바꿀 수 있습니다.

4) 프로토콜에 사용

여러개의 프로토콜을 채택하는 경우, 프로토콜을 결합한 typealias를 선언하여 간결하게 코드를 작성할 수 있습니다.

공식문서에서는 UICollectionView를

An object that manages an ordered collection of data items and presents them using customizable layouts.

라고 정의하고 있습니다. 정렬된 data item을 관리하고, 커스터미이징 가능한 레이아웃을 이용해서 아이템들을 화면에 출력하게 한다고 하는데요. 세로 스크롤만 가능한 UITableView와 다르게 UICollevctionView는 가로스크롤도 지원합니다.

이번 글에서는 티빙 홈화면 예제를 통해 UICollectionView의 사용에 대해 정리해보겠습니다.

1. 컬렉션 뷰 객체 생성하기

먼저 컬렉션 뷰 객체를 만들어줍니다.

private let todayRankingCollectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())

뒤에 뭐가 많이 들어가죠..? 이게 무엇이냐면

UICollectionView를 초기화할 때 필요한 것들인데요. UITableView와 다르게 UICollectionView를 초기화할 때에는 반드시 layout이 필요합니다. UICollectionViewLayout은 컬렉션 뷰 내의 콘텐츠들이 어떻게 배치될지를 관리합니다.

그래서 UICollectionViewLayout도 지정해주려고 합니다. layout으로는 애플에서 기본적으로 제공하는 flowLayout을 사용하였습니다.

 private func todayRankingSetFlowLayout(){
        let flowLayout = UICollectionViewFlowLayout()

        let screenWidth = UIScreen.main.bounds.width
        let cellHeight: CGFloat = 146
        let visibleItems: CGFloat = 2.3
        let spacing: CGFloat = 12
        let totalSpacing = spacing * (visibleItems - 1)
        let cellWidth = (screenWidth - totalSpacing) / visibleItems

        flowLayout.itemSize = CGSize(width: cellWidth, height: cellHeight)
        flowLayout.scrollDirection = .horizontal
        flowLayout.collectionView?.isScrollEnabled = true
        flowLayout.minimumLineSpacing = spacing
        self.todayRankingCollectionView.setCollectionViewLayout(flowLayout, animated: false)
    }

• scrollDirection : 스크롤의 방향입니다. 가로방향으로 스크롤할 것이기 때문에 horizontal로 설정했습니다.
• minimumLineSpacing : 셀 사이의 간격을 spacing(12)로 설정했습니다.
• cellWidth를 계산하기 위해 (전체 스크린 width - 총 spacing) / 화면에 보일 아이템 개수 계산식을 사용했습니다.

2. 컬렉션 뷰 셀 만들기

1) 컬렉션 뷰 cell 파일 생성

subclass에서 UICollectionViewCell을 선택 후 만들어줍니다.

2) 식별자 생성하기

static let identifier: String = "RankingCollectionViewCell"

컬렉션뷰가 사용되는 뷰컨트롤러에 이 cell파일을 등록하기 위해서, cell 파일 내에 식별자를 만들어줍니다.

3) cell item의 AutoLayout 잡기

4) data bind 함수 만들기

extension RankingCollectionViewCell {
    func dataBind(_ itemData: MovieRankingModel){
        rankingNumber.text = String(itemData.ranking)
        movieImage.image = itemData.movieImg
    }
}

데이터 바인딩 함수를 만들어줍니다. 여기서는 더미데이터를 사용했기 때문에 Model 파일에서 만든 데이터를 cell 내의 UIComponent와 바인딩했습니다.

3. cell과 view controller 연결하기

다시 컬렉션뷰를 만든 뷰컨으로 돌아와서, 아까 만든 collection view cell과 뷰컨을 연결해주겠습니다.

1) register 함수 작성

아까 cell 파일에서 식별자를 만들어주었습니다. 이 식별자를 이용해 어떤 collection view에 어떤 cell을 사용할지 등록하는 과정을 거쳐야 합니다.

 private func registerTodayRankingCell(){
        todayRankingCollectionView.register(RankingCollectionViewCell.self, forCellWithReuseIdentifier: RankingCollectionViewCell.identifier)
    }

2) delegate, dataSource 채택하기

todayRankingCollectionView.delegate = self
todayRankingCollectionView.dataSource = self

UICollectionViewDelegate는 컬렉션 뷰 내에서 아이템과 사용자간 인터랙션을 관리하는 프로토콜입니다. 스크롤되었을 때 등의 작업을 이 프로토콜에서 합니다. UICollectionViewDataSource는 컬렉션 뷰 내에서 데이터와 셀을 관리하는 프로토콜입니다. 총 보여지는 셀은 몇개인지, 셀이 선택되었을지 등의 작업을 이 프로토콜이 합니다. 우리는 셀을 원하는대로 동작시키기 위해 이 프로토콜들을 채택하여 이곳에 역할을 위임해주려고 합니다.

3) delegate, dataSource 함수 구현하기

dataSource프로토콜에는 필수적으로 구현해야하는 메소드가 존재합니다. cellForItemAt, numberOfItemInSection 이라는 메소드인데요.

extension HomeTableViewCell : UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        todayRankingCollectionView :
            return movieRankingList.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
         guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: RankingCollectionViewCell.identifier, for: indexPath) as? RankingCollectionViewCell else {
                return RankingCollectionViewCell()
        }

       cell.dataBind(movieRankingList[indexPath.item])
       return cell
}

• ** numberOfItemsInSection** : 이 섹션 (컬렉션 뷰)에서 아이템을 총 몇개 표시할 지에 대한 메소드입니다. 여기서는 dummy로 가져온 데이터의 count만큼을 리턴하였습니다.

• cellForItemAt : 화면에 셀이 보여야할 때 이 함수가 호출됩니다.

  • 이때, dequeueReusableCell로, 재사용 큐에서 셀을 꺼내고 셀이 존재한다면

  • indexPath로 아이템을 구분해서 데이터바인딩을 해주고 셀을 리턴해줍니다.

    

  • 메모리 낭비를 줄이기 위해 재사용 큐를 사용합니다. 스크린 밖으로 셀이 나간다면 재사용큐에 다시 셀이 들어가고, 화면에 보이게 된다면 다시 재사용큐에서 셀이 나와 화면에 보이게 됩니다.

오류의 배경

메인페이지가 있고, 메일컴포넌트가 있었다. 메인페이지에서 sse 구독을 하고, 메일컴포넌트에서 sse 알림을 리스너하도록 했는데, 연결 후 핑이 잘 오는 것은 확인되지만 실질적인 데이터는 오지 않았다.

이것의 문제점은 바로 내 방식처럼 따로 다른 컴포넌트에 코드를 작성하게 되면 리스너가 등록되기 전에 데이터가 전송되어 클라이언트에서 확인이 불가능하다는 것이었다..!!!

해결

그래서 메인 페이지에서 sse 구독 및 리스너까지 하고, 메일컴포넌트에는 props로 데이터를 넘겨주는 것으로 수정했다.

useEffect(() => {
        if (!userId) return;

        const source = new EventSourcePolyfill(`${SERVER_URL}/sse/subscribe/${userId}`, {
          withCredentials: true,
        }); //eventsourcepolyfill에서는 withCredential을 따로 설정해서 보내주어야한다!

        source.onopen = () => {
          console.log("✅ SSE 연결 성공!");
        };

        source.addEventListener("init", (event) => {
            console.log("🟢 연결 메시지 (init):", event.data); // "connected"
        });

        source.addEventListener("onetime_event", (event) => {
            console.log("📨 수신된 데이터:", event.data);
            if (!event.data) {
                console.log("⚠️ onetime_event에 data가 없습니다:", event);
                return;
            }
            const newAlarms = JSON.parse(event.data);

            setAlarmList((prev) => [...new Set([...prev, ...newAlarms])]);
            setOneTimeAlarmList((prev) => [...new Set([...prev, ...newAlarms])]); 
            setHasReceivedOneTimeEvent(true);
            console.log(oneTimeAlarmList, hasReceivedOneTimeEvent, postNextChapterCalled);
        });

        source.addEventListener("regular_event", (event) => {
            console.log("📨 수신된 데이터:", event.data);
            if (!event.data) {
                console.log("⚠️ regular_event에 data가 없습니다:", event);
                return;
            }
            setAlarmList((prev) => [...new Set([...prev, ...JSON.parse(event.data)])]);


        });

        return () => source.close();
    }, [userId]);

데이터가 잘 오는것이 확인되었다!

https://securityinit.tistory.com/248 클라이언트에서는 위 글을 참고하여 apiClient.jsx를 작성했고, 모든 api에 withCredential을 붙여서 보낼 수 있도록 설정했다. + 401, 400에러를 캐치하여 액세스 토큰 재발급 및 리프레시토큰 만료시 로그아웃되도록 연결했다.

해결방법 (로컬)

export const apiClient = axios.create({
    baseURL: "/api",
    withCredentials: true  // ✅ 모든 요청에 쿠키 포함
});

baseURL에 /api가 붙어서 갈 수 있도록 설정했다. api를 호출할 때는,

const response = await apiClient get ("/auth/refresh");

apiClient를 불러와서 뒤에 엔드포인트만 작성했다.

프록시 설정도 추가했다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://nsmaker.o-r.kr', // 백엔드 서버 주소 
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
        ws: true,
        configure: (proxy) => {
          proxy.on('proxyReq', (proxyReq, req) => {
            if (req.url?.includes('/sse/subscribe')) {
              proxyReq.setHeader('Accept', 'text/event-stream');
              proxyReq.setHeader('Cache-Control', 'no-cache');
              proxyReq.setHeader('Connection', 'keep-alive');
            }
          });
        }
      }
    }
  }
})

그리고 혹시 몰라 크롬 브라우저의 Third-party cookie를 허용했다. 이렇게 하면 개발자도구-쿠키에서 액세스토큰, 리프레시토큰까지 잘 오는 것을 확인할 수 있었다.

해결방법 (배포)

export const apiClient = axios.create({
    baseURL: import.meta.env.VITE_SERVER_URL,
    withCredentials: true  // ✅ 모든 요청에 쿠키 포함
});

배포시에는 baseURL만 수정하였다.

이렇게 했는데도 안되면 백엔드에서 문제가 일어난 것.... 삼일을 골머리앓던 에러였는데 백엔드쪽에서 무엇인가 문제 해결 + 클라이언트 세팅으로 해결했다!

1) react cookie를 install한다.

npm install react-cookie

2) 코드

const [saveID, setSaveID] = useState(false); //아이디 저장 여부 
const [cookies, setCookie, removeCookie] = useCookies(["rememberEmail"]); //remeberEmail 이름으로 쿠키 저장

useEffect(() => {
        /*저장된 쿠키값이 있으면 check 이모티콘 TRUE 및 email에 값 세팅*/
        if (cookies.rememberEmail !== undefined) {
            setEmail(cookies.rememberEmail); //이메일 값 저장 
            setSaveID(true); //check 이모티콘 true
        }
    }, []);

const handleSaveID =(newSaveID)=>{
    if (newSaveID) {
        setCookie("rememberEmail", email, { path: "/", expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) }); //7일 유지
       } else {
        removeCookie("rememberEmail"); 
 }

//css
<CheckImoji
    onClick={() => {
          setSaveID((prev) => { // useState는 비동기적으로 동작 => 다음 렌더링에서 새로운 값이 적용
          const newSaveID = !prev;
          handleSaveID(newSaveID); //새로운 값을 계산함 
          return newSaveID;
      });
  }} />

3) App.js를 < CookieProvider >로 감싸주어야한다.

결과

한번 로그인 성공 후 다시 로그인페이지에 가보면 이메일 필드와 아이디저장 체크표시가 잘 세팅되어있는 것을 확인할 수 있다. 개발자도구 > Application > Cookie에서 쿠키를 확인할 수 있다.

 const GoResetPW =()=>{
        navigate("/profile/changePW");
 }
 <span onClick={GoResetPW()}>비밀번호 변경</span>

이렇게 onclick 이벤트 때 호출할 함수 뒤에 ()를 붙이게 되면 페이지가 새로고침되자마자 경로가 이동하게 된다.

<span onClick={GoResetPW}>비밀번호 변경</span>

하지만 이런 식으로 함수 뒤에 ()를 삭제하고 호출하게 되면 정상적으로 onclick 이벤트가 작동한다.

그 이유는 ()를 붙인 코드는 즉시 함수가 실행되기 때문이다. 컴포넌트가 렌더링되면서 즉시 함수가 실행되기 때문에 페이지가 새로고침되자마자 바로 경로가 이동하게 된다. onclick 이벤트를 정상적으로 작동하기 위해서는 ()를 빼고 함수 참조만 넘겨주어야 한다.