오늘도앱개발

[TIL] 포도맛(스레드) 에러

민궝 — Sat, 16 Mar 2024 14:32:54 +0900

프로젝트를 하던 중에 안나오던 포도맛 에러가 나왔다..

UI 업데이트 관련된 코드는 메인스레드에서 돌아가게 보장해줘라!! 라는 에러다

기능이 구현되는덴 지장이 없었지만 노란색이든 보라색이든 경고성 에러도 없어야 마음이 편하다,,

물론 없애는게 맞고..!

아무튼 나는 저 recordOrder 프로퍼티에 보라색 줄이 떠서 recordOrder가 문제가 있는줄 알고 쓰인 곳을 다 찾아봤다

근데 전혀 문제가 되는 곳이 없었다,,

뭐지?!?!?!

도저히 못찾겠어서 빌드해서 언제 저 에러가 뜨는지 확인해봤다

근데 이게 머선일,,

문제는 CompletionView가 나타날때 저 에러가 뜨는 것이었다..

isShowingCompletionView가 CompletionView을 호출하는 프로퍼티다

isShowingCompletionView 프로퍼티가 바뀔때 코드는 한군데 밖에 없다.

바로 여기..!!

비동기 코드를 실행하는 Task안에 써주니 저 포도맛 에러를 뱉은것이었다..

바로 고쳐주자

Task안에서도 isShowingCompletionView를 메인스레드에서 돌아가게 바꿔주었다

그리고 다시 빌드해보니 당연히 에러가 없어졌다 ㅎㅎㅎㅎ

내가 깨달은건 보라색 줄이 뜨는 곳이 에러가 나는게 아니었다,,

다음에 포도맛 에러가 뜨면 실행 후 어느 부분에서 포도를 뱉는지 확인해보자!!

[Git] History에서 특정 파일삭제

민궝 — Fri, 15 Mar 2024 17:09:12 +0900

프로젝트가 마무리 될 때 쯤

원격저장소에 보이면 안되는 파일이 있었다,,

바로 GoogleService-Info.plist 파일이었다

분명 .gitignore에 설정을 해놓았지만 왜 때문인지 올라간 것 이었다

이유를 찾아보니 캐시 때문이라고 한다

우선 캐시를 삭제해주자..!

1. git rm -r --cached .

현재 branch의 모든 디렉토리 파일에서 캐시를 제거하는 명령어

git rm : 파일 삭제
-r : 하위 디렉토리 포함
--cached : 캐시
. : 디렉토리의 모든 파일

→ 현재 branch에서 하위 디렉토리 포함 모든 파일에서 캐시를 삭제

이제 commit, push를 해주면 해당 파일은 안올라갈것이다

하지만 나의 상황은 이미 올라가서 History commit에서 삭제시켜줘야 한다

먼저 작업을 하기전에 중요한게 있다

이제 History의 파일을 제거해보자

2. git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch 경로/파일명.확장자' --prune-empty --tag-name-filter cat -- --all

모든 branch의 커밋 히스토리에서 특정 파일을 찾아 제거하는 명령어

git filter-branch : 커밋 히스토리 재작성
--force : 강제 커밋
--index-filter : 커밋 인덱스 수정
'git rm --cached --ignore-unmatch 경로/파일명.확장자'
- git rm : 파일 삭제
- --cached : 캐시
- --ignore-unmatch : 파일이 존재하지 않아도 넘어감
- 경로/파일명.확장자 : 제거할 파일의 경로
--prune-empty : 필터링 작업 후 결과적으로 빈 커밋이 생성되었을 경우 해당 빈 커밋을 제거
--tag-name-filter cat : 모든 커밋 태그를 그대로 유지
-- --all : 모든 브랜치에 대해 작업을 수행

→ 모든 브랜치의 특정파일을 포함한 커밋에서 파일을 삭제하고 해당 커밋이 만들어진 빈 커밋을 제거해줘 그리고 커밋 태그를 그대로 유지하고 커밋 히스토리를 재작성

음,,,,, 우선 무지하게 긴 명령어다..

처음에 뜻도 모르고 블로그를 보고 일단 써봤다

파일을 삭제하는데 성공했지만 commit 개수가 달라져서 당황했다,,

파일을 삭제하고 싶은거지 commit을 삭제하고 싶진 않아서였다

이유는 --prune-empty 때문이었다.

이 명령어는 커밋에서 특정파일이 삭제되면 빈 커밋이 되기때문에 필요없는 커밋이라 생각하고 삭제하는 명령어다.

즉 특정 파일만 올린 commit 이었던거다 (이 파일만 올라간 commit이 왜 있는지는 의문이다..)

아무튼 상관없는 커밋이지만 나는 기존 브랜치와 커밋 개수가 달라지는건 원하지 않아서 --prune-empty 는 뺐다.

그리고 나는 현재 브랜치만 작업을 해주고싶어서 -- --all 도 뺐다.

이 두 옵션은 선택이다. 나머지는 해줘야 한다.

작업이 성공하면

Ref refs/remotes/origin/main was rewritten

이라는 문구가 뜬다.

실패하면 파일 경로를 잘 적어주었는지 확인하자!!

이제 성공하면 커밋 히스토리를 변경하면서 커밋 해시값이 싹 다 바뀐다.

이제 add, commit, push를 해서 커밋 히스토리가 변경된 브랜치로 바꿔주자

히스토리가 변경되었기 때문에 push할때 강제푸시를 해야한다 (backup 브랜치를 만들라고 한 이유)

git push origin --force --all

all은 모든 브랜치를 의미하는거기 때문에 현재 브랜치만하고 싶으면 빼자

[ActionSheet] title 안나오게 할 수 있을까?

민궝 — Mon, 31 Jul 2023 17:29:09 +0900

SwiftUI로 카카오톡 채팅을 구현하던중 채팅방을 나갈때 뜨는 sheet가 무엇인지 찾아보았다.

구글링을 해보니 ActionSheet라는 것을 쓴다고 한다.

구현 코드는 이렇다 !

struct ContentView: View {
    
    @State private var kakaoActionSheet = false 
    
    var body: some View {
        VStack {
            Button {
                kakaoActionSheet = true
            } label: {
                Image(systemName: "door.left.hand.open")
            }
            .actionSheet(isPresented: $kakaoActionSheet) {
                ActionSheet(title: Text("채팅방을 나가면 대화내용이 모두 삭제되고\n채팅목록에서도 사라집니다."), 
                			buttons: [.destructive(Text("나가기")),
                            		  .destructive(Text("신고하고 나가기")),
                                      .cancel(Text("취소"))])
            }
        }
       
    }
}

.sheet나 .alert와 같이 @State변수를 만들고 true값으로 바뀔 때 동작하는 것은 같다.

코드는 view의 modifier로 .actionSheet를 달아주고 ,

isPresented에 @State변수 값 ,

그 안에 ActionSheet를 만들어 주면된다.

구현 영상

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

ActionSheet(title: Text, message: Text?, buttons: [ActionSheet.Button])

ActionSheet의 형태는 이렇다.

먼저 title은 반드시 Text로 써줘야 한다. 안써주면 넣으라고 에러가 뜬다..

message는 title밑에 나온다. massage는 없어도 빌드가 된다.

그래서 내가 생각하기엔 message가 옵셔널 타입이니까 message는 없어도 되고 title,buttons는 반드시 써줘야 된다고 생각했다.

그래도 혹시 몰라서 buttons도 지워봤다.

근데 이게 왠일..! buttons는 안써도 title처럼 넣어주라는 에러가 안뜬다 !

그럼 어떻게 나오는거지..?

버튼은 안써줘도 .cancel 버튼이 하나가 나온다. 음 그렇다면..

역시 공식문서를 찾아보니 .cancel 버튼 하나가 초기화가 돼 있다 !!

이렇게 채팅방 나가기를 구현해서 ActionSheet를 알게 되었다~~

잠시 후..

ActionSheet는 채팅방 나가기 뿐 아니라 전화링크로 올라올때도 쓰인다. 이런식으로..!

근데 이 ActionSheet는 위에 title이 없다.

하지만 title은 반드시 써줘야 되기 때문에 title에 값을 ""로 주면 저렇게 뜨겠지 하고

코드를 구현해보았다.

struct ContentView: View {
    
    @State private var callActionSheet = false
    
    var body: some View {
        VStack {
            Button {
                callActionSheet = true
            } label: {
                Image(systemName: "phone")
            }
            .actionSheet(isPresented: $callActionSheet) {
                ActionSheet(title: Text("") , buttons: [.default(Text("통화  1899-9900")),
                    .cancel(Text("취소"))])
            }
        }
       
    }
}

결과는 .. !!

어라.. title에 빈값을 줘도 자리는 그래도 차지하고 있다..

하지만 title에는 Text를 반드시 넣어줘야 한다

구글링을 해봤더니 방법을 찾았다~~~~~!!

우선 위에서 공부했던 ActionSheet는 deprecated 되었다고 한다!

deprecated는 애플에서 더 이상 지원하지 않는다는 것이다.

하지만 애플은 무조건 deprecated를 시키는게 아니라 대체할 것을 만들고 시키니까 걱정안해도 된다.

위 처럼 ActionSheet 대신에 confirmationDialog를 사용하라고 친절하게 말해준다.

ActionSheet를 지우고 confirmationDialog로 코드를 바꿨다.

struct ContentView: View {
    
    @State private var callActionSheet = false
    
    var body: some View {
        VStack {
            Button {
                callActionSheet = true
            } label: {
                Image(systemName: "phone")
            }
            .confirmationDialog("",  isPresented: $callActionSheet) {
                Button("통화 1899-9900", role: .none) {}
                Button("취소", role: .cancel) {}
                
            }
        }
    }
}

구현방식도 ActionSheet와 비슷하다.

modifier로 .actionSheet -> .confirmationDialog 바꿔주고

titlekey에 String 값,

isPresented에 @State변수 값 ,

그 안에 Button들을 넣어주면 된다.

ActionSheet에서 title에 반드시 Text를 써줘야 했던것과 다르게 title 영역이 사라졌다.

그럼 titlekey에 ""를 안주고 값을 넣어주면 title이 생기겠지? "전화걸기" 라는 값을 넣어주자 !

 .confirmationDialog("전화걸기",  isPresented: $callActionSheet) {
                Button("통화 1899-9900", role: .none) {}
                Button("취소", role: .cancel) {}
                
}

결과는...!

어라..? 역시 단순하지 않다ㅎㅎㅎㅎ 원인이 뭔지 찾아보자..

func confirmationDialog<A>(
    _ titleKey: LocalizedStringKey,
    isPresented: Binding<Bool>,
    titleVisibility: Visibility = .automatic, @ViewBuilder actions: () -> A
) -> some View where A : View

내가 쓴 confirmationDialog의 형태를 보면 이렇게 돼있다.

딱 봐도 titleVisibility를 써야 될거 같지 않나!

따로 써주지 않으면 기본값으로 .automatic으로 돼있는데 안나오는걸 보니 바꿔 줘야겠다.

.confirmationDialog("전화걸기",  isPresented: $callActionSheet, titleVisibility: .visible) {
                Button("통화 1899-9900", role: .none) {}
                Button("취소", role: .cancel) {}   
}

titleVisibility의 타입은 Visibility로 돼있다.

Visibility는 애플에서 제공하는 enum이다.

Visibility의 case는 automatic, visible , hidden으로 돼있다.

automatic이 정확히 뭔지는 잘모르겠지만 visible과 hidden은 그냥 단어만 봐도 보여짐, 숨김이 명확하다.

그래서 나는 visible로 썼다!! 결과는..!!

역시 내가 생각한대로 title이 나왔다!!

당근마켓도 보면 title칸이 없는걸 보니 confirmationDialog를 쓴것같다.

(SwiftUI로 앱제작이 됐다면 UIkit의 ActionSheet는 title을 안보이게 할 수 있는것 같다.)

내가 배운점은

AcitonSheet는 title에 Text가 들어가야 돼서 자리를 반드시 차지한다.

confirmationDialog는 title Visibility로 title을 숨기고 보이게 할 수 있다.

AcitonSheet는 deprecated 되었으니 이왕이면 confirmationDialog 쓰는게 좋겠다 !

[Codable] color값 사용하기(연산프로퍼티)

민궝 — Wed, 12 Jul 2023 00:55:18 +0900

SwiftUI에서 데이터를 JSON형식으로 변환하려면 Codable프로토콜을 채택해야 한다.

import Foundation
import SwiftUI

struct Sticker: Codable, Identifiable {
    var id: UUID = UUID()
    var memo: String
    var color: Color // <- 이놈 때문에 안됨
    var date: Date
    
    var dateString: String {
    
        let dateFormatter: DateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy-MM-dd EEEE HH:mm"
        
        return dateFormatter.string(from: date)
    }
}

하지만 위에서 Color 데이터타입은 Codable프로토콜에 맞지 않기 때문에 에러가뜬다.

Codable은 Decodable과 Encodable 프로토콜로 이루어진 typealiars(별명)인데

Decodable과 Encodable의 "Conforming Types(=적합한 타입)"에는 Color타입이 없다.

그래서 color를 연산프로퍼티로 만들어 해결할 수 있다.

Why?

연산 프로퍼티로 만든 color 값을 Codable에 포함할 수 있는 이유는 연산 프로퍼티가 실제 값을 저장하는 것이 아니라 계산에 의해 값을 반환하기 때문입니다.

Codable은 실제 값을 저장하는 프로퍼티만 인식하므로, 연산 프로퍼티는 직접 Codable을 준수할 필요가 없습니다.

즉, 연산 프로퍼티는 값을 직접 저장하지 않지만, 코드를 통해 값을 계산하고 반환하므로 이를 활용하여 값을 Codable에 포함시킬 수 있게 됩니다.

1. 먼저 colorIndex : Int 를 만들자

var colorIndex: Int = 0

2. color의 get 연산 프로퍼티를 만들어서 colorIndex의 값을 swich문에 넣은 뒤 color값이 나오게 하자

var color: Color {
        get {
            switch colorIndex {
            case 0:
                return .cyan
            case 1:
                return .purple
            case 2:
                return .blue
            case 3:
                return .yellow
            case 4:
                return .brown
            default:
                return .white
            }
        }
}

3. color의 set 연산 프로퍼티를 만들어서 받아온 color값을 swich문에 넣은 뒤 colorIndex에 저장하자

-> set에 newValue(받아온 color값)

var color: Color {
        get {
            switch colorIndex {
            case 0:
                return .cyan
            case 1:
                return .purple
            case 2:
                return .blue
            case 3:
                return .yellow
            case 4:
                return .brown
            default:
                return .white
            }
        }
        
        set { 			  // set으로 colorIndex에 저장
            switch newValue {     // newValue(받아온 color값) 
            case .cyan:
                colorIndex = 0
            case .purple:
                colorIndex = 1
            case .blue:
                colorIndex = 2
            case .yellow:
                colorIndex = 3
            case .brown:
                colorIndex = 4
            default:
                colorIndex = 5
            }
        }
    }

(연산프로퍼티는 set은 생략가능하지만 get은 생략할수 없어서 get먼저 생각하거나 동시에 생각하자.)

3. 그럼 이제 JSON형식으로 encode할때 color값이 들어가진다.

4. 다시 JSON형식을 decode하면 값이 그대로 가져와진다.

5. 이제 코드에 color값을 불러오면 color의 get 연산 프로퍼티가 실행되어 colorIndex 값에 맞는 color 값을 쓸 수 있다.

[Clone App] Login - SwiftUI (#1)

민궝 — Thu, 6 Jul 2023 16:49:58 +0900

스터디에서 SwiftUI로 로그인 화면을 만들어 보기로 했다!

데이터가 저장되고 실제 로그인되는건 아니지만 로그인화면의 다양한 기능을 구현해야 한다.

우선 화면 구성은 위 사진과 같다.

먼저 1주차에선 화면 구성, 이메일 정규식, 비밀번호 텍스트 필드, 로그인 동의를 구현하기로 했다.

화면구성

1. Log in (navigationTitle) : NavigationStack 이나 NavigationView를 써서 안쪽 view에 .navigationTitle("Log in")을 주면된다.

struct ContentView: View {

 var body: some View {
        NavigationView {
            VStack {
            
            }.navigationTitle("Log in")
        }
  }      
}

2. Description text (Text) : 위 코드 VStack안에 Text("Introduce your credentials" )써주면 된다.

 Text("Introduce your credentials")

3. Email textField (TextField) : TextField() 안에 비었을 때 보여질값 , 바인딩 될 text 값을 넣으면 된다.

@State private var userID: String = "" //@State로 TextField의 text값이 바뀔때마다 값이 바뀜
									   
TextField("ID" , text: $userID)
        .fontWeight(.bold) //글씨체 두껍게
     	.padding() //주변 뷰들과 간격 벌리기
        .foregroundColor(.black) //글씨색깔 검정색
        .frame(maxWidth: .infinity) //폭넓이 최대
        .background(.bar) //배경색
        .cornerRadius(10) //모서리 둥글게
        .keyboardType(.emailAddress) //이메일 형식의 키보드 올라오게

4. Password secured textField (SecureField) : 입력되는 값이 가려지기 위해 SecureField를 쓴다. TextField와 마찬가지로 비었을 때 보여질값 , 바인딩 될 text 값을 넣으면 된다.

@State private var userPassword: String = "" //@State로 SecureField의 text값이 바뀔때마다 값이 바뀜
  
SecureField("PASSWORD" , text: $userPassword)
        .fontWeight(.bold) //글씨체
        .padding() //버튼과의 간격
        .foregroundColor(.black) //글씨색깔
        .frame(maxWidth: .infinity) //폭넓이 최대
        .background(.bar) //배경색
        .cornerRadius(10) //모서리 둥글게

5. Toggle (Toggle) : Toggle도 작동하려면 TextField와 마찬가지로 바인딩 될 Bool값이 필요하다. isOn에 바인딩 값을 넣어주면 된다. Bool값이 false면 닫히고 true면 열린다.

@State private var loginAgree: Bool = false //@State로 Toggle의 값이 바뀔때마다 값이 바뀜
HStack {
        Text("Agree to terms and conditions").font(.caption2)
        Toggle(isOn: $loginAgree) {
                            
        }
}

6. Sign in Button (Button) : 로그인 버튼이고 action과 label로 구현한다. action에는 버튼을 눌렀을때 이벤트 , label에는 버튼 UI를 나타낸다. 버튼을 눌렀을때 이메일 정규식이 맞고 로그인 동의가 되어야만 로그인 성공 메시지가 뜬다.

@State private var message: String = "" //로그인 여부에 따라 보여질 메시지 값
@State private var isValidEmail: Bool = false  //이메일 형식 여부 값

Button {
        checkLogin() //로그인 함수                       
} label: {
        Text("Sign in")
        .fontWeight(.bold) //글씨체
        .foregroundColor(.white) //글씨색깔
        .frame(width : 300) //폭넓이
        .padding() //주변뷰들과 간격 넓힘
        .background(.blue) //배경 : 파랑색
        .cornerRadius(10) //모서리 둥글게
}

//이메일 정규표현식 확인하기 위한 함수
 func isValidEmailAddress(_ email: String) -> Bool { 
        let emailRegex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
        //일반적인 이메일 주소 패턴
        
        let emailPredicate = NSPredicate(format: "SELF MATCHES %@", emailRegex) 
        //NSPredicate를 이용하여 주어진 문자열이 자기 자신과 정규식 패턴과 일치하는지를 평가
        
        return emailPredicate.evaluate(with: email)
        //입력한 이메일이 위의 정규식과 일치 불일치를 Bool값
}

//로그인 함수
func checkLogin() {
        isValidEmail = isValidEmailAddress(userID) 
        //userID를 위 함수에 보내서 이메일 정규식이 맞는지 확인 맞으면 true , 틀리면 false
        
        if loginAgree == false { //로그인 동의 토글값이 false이면 
            message = "로그인 동의를 해주세요"
        } else if isValidEmail == false { //이메일 형식이 false이면
            message = "이메일 형식이 아닙니다"
        } else {
            message = "아이디 : \(userID) 비밀번호 : \(userPassword)"
        }
}

구현영상

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

전체코드

struct ContentView: View {
    @State private var userID: String = ""
    @State private var userPassword: String = ""
    @State private var loginAgree: Bool = false
    @State private var message: String = ""
    @State private var isValidEmail: Bool = false
    var body: some View {
        NavigationView {
                   VStack {
                       Text("Introduce your credentials")
                       TextField("ID" , text: $userID)
                               .fontWeight(.bold) //글씨체 두껍게
                               .padding() //주변 뷰들과 간격 벌리기
                               .foregroundColor(.black) //글씨색깔 검정색
                               .frame(maxWidth: .infinity) //폭넓이 최대
                               .background(.bar) //배경색
                               .cornerRadius(10) //모서리 둥글게
                               .keyboardType(.emailAddress) //이메일 형식의 키보드 올라오게
                       
                       SecureField("PASSWORD" , text: $userPassword)
                               .fontWeight(.bold) //글씨체
                               .padding() //버튼과의 간격
                               .foregroundColor(.black) //글씨색깔
                               .frame(maxWidth: .infinity) //폭넓이 최대
                               .background(.bar) //배경색
                               .cornerRadius(10) //모서리 둥글게
                       
                       Spacer().frame(height : 30)
                       
                       HStack {
                               Text("Agree to terms and conditions").font(.caption2)
                               Toggle(isOn: $loginAgree) {
                                                   
                               }
                       }
                       
                       Spacer().frame(height : 30)
                       Button {
                               checkLogin() //로그인 함수
                       } label: {
                               Text("Sign in")
                               .fontWeight(.bold) //글씨체
                               .foregroundColor(.white) //글씨색깔
                               .frame(width : 300) //폭넓이
                               .padding() //주변뷰들과 간격 넓힘
                               .background(.blue) //배경 : 파랑색
                               .cornerRadius(10) //모서리 둥글게
                       }
                       
                       Spacer().frame(height : 30)
                       Text("\(message)")
                       Spacer()
                   }.navigationTitle("Log in").padding()
               }
    }
    
    //이메일 정규표현식 확인하기 위한 함수
     func isValidEmailAddress(_ email: String) -> Bool {
            let emailRegex = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
            //일반적인 이메일 주소 패턴
            
            let emailPredicate = NSPredicate(format: "SELF MATCHES %@", emailRegex)
            //NSPredicate를 이용하여 주어진 문자열이 자기 자신과 정규식 패턴과 일치하는지를 평가
            
            return emailPredicate.evaluate(with: email)
            //입력한 이메일이 위의 정규식과 일치 불일치를 Bool값
    }

    //로그인 함수
    func checkLogin() {
            isValidEmail = isValidEmailAddress(userID)
            //userID를 위 함수에 보내서 이메일 정규식이 맞는지 확인 맞으면 true , 틀리면 false
            
            if loginAgree == false { //로그인 동의 토글값이 false이면
                message = "로그인 동의를 해주세요"
            } else if isValidEmail == false { //이메일 형식이 false이면
                message = "이메일 형식이 아닙니다"
            } else {
                message = "아이디 : \(userID) \n비밀번호 : \(userPassword)"
            }
    }
}

[Swift] 프로퍼티 옵저버

민궝 — Mon, 19 Jun 2023 20:06:21 +0900

프로퍼티 옵저버(Property Observer) 란?

프로퍼티의 값이 변경될 때 특정 동작을 수행하는 기능으로 '저장 프로퍼티'에 추가할 수 있다.

1. willSet : 프로퍼티의 값이 변경되기 직전에 호출되는 옵저버 (주로 newValue와 함께 사용)

2. didSet : 프로퍼티의 값이 변경된 후에 호출되는 옵저버 (주로 oldValue와 함께 사용)

class Counter {
    var value: Int {
        willSet(newValue) {
            print("값이 변경될 예정입니다: 현재 값: \(value), 변경될 값: \(newValue)")
        }
        didSet(oldValue) {
            print("값이 변경되었습니다: \(value), 변경되기 전 값: \(oldValue)")
        }
    }
    
    init() {
        self.value = 0
    }
    
    func increment() {
        value += 1
    }
}

let counter = Counter()
counter.increment()

// 값이 변경될 예정입니다: 현재 값: 0, 변경될 값: 1
// 값이 변경되었습니다: 1, 변경되기 전 값: 0

순서

willSet 실행
저장 프로퍼티 name 값 변경
didSet 실행

[SwiftUI] VStack

민궝 — Mon, 19 Jun 2023 02:21:33 +0900

SwiftUI에서 VStack은 세로로 정렬된 뷰의 컨테이너입니다.

VStack은 Vertical Stack의 약자로, 포함된 뷰들을 위에서 아래로 쌓아 올리는 방식으로 레이아웃을 구성합니다.

SwiftUI 공식문서에 따르면 VStack은 alignment , spacing , content 의 매개변수를 받을 수 있습니다.

1. alignment

기본적으로 VStack은 뷰들을 중앙 정렬합니다.

하지만 alignment 매개변수를 사용하여 다른 정렬 방식으로 변경할 수 있습니다.

예를 들어, .leading, .trailing 등의 alignment 값을 지정할 수 있습니다.

.center: 뷰를 수직 방향으로 중앙 정렬합니다. 이는 VStack의 기본 정렬 옵션입니다.
.leading: 뷰를 수직 방향으로 왼쪽 정렬합니다.
.trailing: 뷰를 수직 방향으로 오른쪽 정렬합니다.

코드를 통해 쉽게 알아보겠습니다.

struct ContentView: View {
    var body: some View {
        VStack {
            VStack(alignment: .leading){
                Text("This")
                Text("leading")
            }.padding()  //왼쪽 정렬
            
            VStack(alignment: .trailing){
                Text("This")
                Text("trailing")
            }.padding()  //오른쪽 정렬
        }
    }
}

2. spacing

spacing은 포함된 뷰 사이의 수직 간격을 포인트 단위로 정의합니다.

양수 값이면 뷰들 사이에 간격이 생성되고, 음수 값이면 뷰들이 서로 겹쳐질 수 있습니다.

코드를 통해 쉽게 알아보겠습니다.

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) { 
            Text("View 1")
                .padding()
                .background(Color.blue)
            
            Text("View 2")
                .padding()
                .background(Color.red)
            
            Text("View 3")
                .padding()
                .background(Color.green)
        }
    }
}

spacing값이 0 일땐 뷰들이 간격없이 붙어있습니다.

 VStack(spacing: 50)

-spacing값이 50일때

 VStack(spacing: -30)

-spacing값이 -30일때

3. content

content는 View 를 포함하고 배치하는 컨테이너 역할을 합니다.

alignment의 .center처럼 기본으로 설정돼있어 써주지 않아도 됩니다.

코드로 알아보겠습니다.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
            .padding()
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, content: {
            Text("Hello, world!")
                .padding()
        })
    }
}

위의 코드는 결과적으로 아래코드랑 같은 코드입니다.

VStack에 기본으로 설정돼있기 때문에 굳이 써주지 않아도 되기 때문입니다.

[Swift] instance , type 메서드 차이와 class , struct , enum 차이

민궝 — Sun, 11 Jun 2023 16:42:37 +0900

instance, class , static 메서드

class ExampleClass{

  func instanceMethod(){
    print("instance 메서드")
  }   // instance 메서드
  
  class func classMethod(){
     print("class 메서드")
  } // class 메서드 
  
  static func staticMethod(){
     print("static 메서드")
  } // static 메서드 
  
}

class메서드와 instance메서드 차이

let instance: ExampleClass = ExampleClass()
instance.instanceMethod() // Result : instance 메서드

ExampleClass.classMethod() // Result : class 메서드

instance메서드: 실체화 즉, 인스턴스를 생성해야 사용 가능합니다

class메서드 : 인스턴스 생성하지 않고 직접 호출 가능합니다

class메서드와 static메서드 차이

ExampleClass.classMethod() // Result : class 메서드
ExampleClass.staticMethod()// Result : static 메서드

class메서드와 static메서드는 타입 메서드라 부릅니다

타입 메서드는 위 코드처럼 인스턴스 생성하지 않고 직접 호출 가능합니다

그래서 이 코드에선 둘의 차이점을 찾을 수 없습니다

class메서드 : sub class에서 override가 가능합니다.

static메서드 : sub class에서 override 할 수 없습니다.

https://www.youtube.com/watch?v=ZMGNdrZaN1g&list=PLgOlaPUIbynoqbQw_erl3L2w7vfOTCtFD&index=34

공통점 : 메모리에 올리지 않고 사용할 수 있다

차이점 : static에는 final이라는 의미가 포함되어있어 오버라이드가 불가능함

struct란?

class : 공유해서 사용하는 개념. 참조하는 값이 바뀌면 기존 값도 바뀜!

struct : 복사해서 사용하는 개념. 참조하는 값이 바뀌어도 기존 값에는 영향이 없음!

사용처 : 데이터 모델에 주로 사용!

/* Value Type */
struct testStruct {
  var name = ""
  var age = 0
}

/* Reference Type */
class testClass {
  var name = ""
  var age = 0
}

class , struct , enum 의 차이

	class	struct	enum
확장(extention)	O	O	O
프로퍼티,메소드	O	O	O
상속	O	X	X
저장 프로퍼티	O	O	X
초기화(init) 함수	O	O	X
타입 메소드	O	X	X
타입(Type)	reference	value	value
메모리(Memory)	heap	stack	stack

코드로 보는 reference타입과 value타입의 차이

//구초체 예제
struct exStruct {
    var name: String = "구조체"
    
    func hello() {
        print("\(name)")
    }
    
}
//구조체는 값 타입이기 때문에 let으로 하면 프로퍼티값 변경 불가
var stc: exStruct = exStruct() 
stc.name = "구조체 입니다"
stc.hello()


//클래스 예제
class exClass {
    var name: String = "클래스"
    
    
    func hello() {
        print("\(name)")
    }
    
}

//클래스는 참조 타입이기 때문에 let으로 해도 프로퍼티값 변경 가능
let cls: exClass = exClass()
cls.name = "클래스 입니다"
cls.hello()

[CS] 교착상태와 기아상태

민궝 — Sun, 11 Jun 2023 14:46:21 +0900

교착상태 (DeadLock)

면접 질문 :

교착상태와 교착상태 해결방법에 대해서 설명해주세요.
교착상태 발생조건에 무엇이 있는지 얘기해주세요.

1. 두 개 이상의 프로세스가 자원을 점유한 상태(멀티 프로그래밍 환경)에서 서로 원하는 자원을 얻기 위해 무한정한 기다림 상태에 빠지는 것입니다. 이에 대한 해결방법은 예방, 회피, 탐지 및 회복이 있습니다.

2. 상호배제 , 점유와 대기 , 비선점 , 순환대기가 있으며 4가지 조건 모두 성립해야 교착상태가 발생 할 수 있습니다.

교착상태란 ?

두 개 이상의 프로세스가 서로의 작업이 끝나기만을 기다리고 있어 둘 다 영원히 끝나지 않는 상황

= 데드락(DeadLock) 이라고도 함

교착상태 발생조건

아래 4가지 조건이 모두 만족되는 경우 데드락이 발생할 가능성이 있다.
→ 하나라도 만족하지 않으면 발생하지 않음

상호 배제 (Mutual exclusion)
- 한 번에 프로세스 하나만 해당 자원을 사용할 수 있다 (자원 = 임계영역)
- 사용 중인 자원을 다른 프로세스가 사용하려면 요청한 자원이 해제될 때까지 기다려야 한다.
- ex) 한 개의 화장실을 한 개의 키를 갖고 여러명이서 사용하려 할 때
점유와 대기(Hold and wait)
- 자원을 최소한 하나 보유하고, 다른 프로세스에 할당된 자원을 점유하기 위해 대기하는 프로세스가 존재해야 한다.
- ex) 인원이 한정된 오마카세를 먹고 있음과 동시에 유명 카페를 테이블링 할 때
비선점 (No preemption)
- 이미 할당된 자원을 강제로 빼앗을 수 없다.
- 프로세스가 작업을 마친 후 자원을 자발적으로 반환할 때까지 기다려야 한다.
- ex) 가득 찬 피팅룸을 사용하려 할 때
순환대기 (Circular wait)
- 대기 프로세스의 집합이 순환 형태로 자원을 대기하고 있어야 한다.
- Hold and wait 관계의 프로세스들이 서로를 기다림
- ex) 4개의 교차로의 좌회전 신호 대기 중인 차들

교착상태 해결방법

데드락이 발생하지 않도록 예방(prevention) 하기
데드락 발생 가능성을 인정하면서도 적절하게 회피(avoidance) 하기
데드락 발생을 허용하지만 데드락을 탐지(detection)하여, 데드락에서 회복(Recovery)하기

1️⃣ 예방 (Prevention)

교착 상태가 발생하기 전에 미리 조치를 취하는 방식으로, 교착 상태 발생 조건 중 하나를 제거함으로써 해결한다.

상호 배제 조건 방지
- 모든 자원을 공유 허용
점유와 대기 조건 방지
- 모든 자원에 대해 선점 허용
비선점 조건 방지
- 필요 자원을 한번에 할당
순환 대기 조건 방지
- 자원에게 순서 부여를 통해 프로세스 순서의 증가 방향으로만 자원 요청

단점 : 자원낭비가 심함

2️⃣ 회피 (Avoidance)

프로세스가 자원을 요구할 때, 시스템은 자원을 할당한 후에도 안정 상태로 남아있는가를 확인하여 교착 상태를 회피하는 방법

교착상태가 발생할 가능성을 배제하지 않고 교착상태가 발생하면 적절히 피해나가는 방법이다.
리소스 할당의 측면에서, 교착상태가 발생할 가능성이 있는 자원 할당(unsafe allocation)을 하지 않는다.
주로 은행원 알고리즘(Banker's Algorithm)이 사용된다.

단점 : 오버헤드 발생

은행원 알고리즘

은행원 알고리즘은 다익스트라가 제안한 기법으로, 은행에서 모든 고객의 요구가 충족되도록 현금을 할당하는데서 유래한 기법
각 프로세스에게 자원을 할당하여 교착상태가 발생하지 않으며 모든 프로세스가 완료될 수 있는 상태는 안전상태, 교착상태가 발생할 수 있는 상태는 불안전 상태 라고 한다.
은행원 알고리즘을 적용하기 위해서는 자원의 양과 사용자(프로세스) 수가 일정해야 한다.
은행원 알고리즘은 프로세스의 모든 요구를 유한한 시간안에 할당하는 것을 보장한다.

import Foundation

class Bank {
    var available: Bool = true // 은행원의 사용 가능 여부
    
    let queue: DispatchQueue = DispatchQueue(label: "bankQueue") // 공유 자원에 대한 동시 액세스를 관리하기 위한 큐
    
    func deposit(amount: Int) {
        queue.sync {
            guard available else {
                print("은행원이 사용 중입니다. 대기해주세요.")
                return
            }
            
            available = false
            print("입금 처리 중...")
            // 입금 작업 수행
            Thread.sleep(forTimeInterval: 2)
            print("입금 완료.")
            
            available = true
        }
    }
    
    func withdraw(amount: Int) {
        queue.sync {
            guard available else {
                print("은행원이 사용 중입니다. 대기해주세요.")
                return
            }
            
            available = false
            print("인출 처리 중...")
            // 인출 작업 수행
            Thread.sleep(forTimeInterval: 2)
            print("인출 완료.")
            
            available = true
        }
    }
}

// 테스트
let bank = Bank()

DispatchQueue.concurrentPerform(iterations: 10) { index in
    let randomAmount = Int.random(in: 100...1000)
    
    if index % 2 == 0 {
        print("프로세스 \(index): \(randomAmount)원 입금 시도")
        bank.deposit(amount: randomAmount)
    } else {
        print("프로세스 \(index): \(randomAmount)원 인출 시도")
        bank.withdraw(amount: randomAmount)
    }
}

3️⃣ 탐지 (Detection)

데드락이 발생하면 빠르게 발견하고 문제를 해결하는 것

시스템에 교착상태가 발생했는지 점검하여 교착상태에 있는 프로세스와 자원을 발견한다.
교착상태 발견 알고리즘과 자원 할당 그래프 등을 사용한다.

단점 : 자원을 요청할 때마다 탐지 알고리즘을 실행하면, 오버헤드가 발생

4️⃣ 회복 (Recovery)

교착 상태를 일으킨 프로세스를 종료하거나 할당된 자원을 해제하면서 회복

1. 프로세스 종료 방법

교착 상태의 프로세스 모두 중지
교착 상태가 제거될 때까지 한 프로세스씩 중지

2. 자원 선점 방법

자원을 빼앗긴 프로세스는 강제 종류 이후 재시작
교착 상태에 빠진 프로세스가 필요로 하는 자원을 강제로 가져옴

기아상태 (Starvation)

면접 질문 :

교착상태와 기아상태의 차이점에 대해서 설명해주세요.

교착상태와 기아상태는 둘 다 다중 프로세스 환경에서 발생하는 문제지만, 교착상태는 자원의 순환 대기와 관련된 조건을 충족하며 시스템 전체적으로 발생하는 문제이며, 기아상태는 특정 프로세스가 자원에 접근할 수 없는 상태로 인해 발생하는 문제입니다.

기아상태란 ?

특정 프로세스보다 우선순위가 낮아 원하는 자원을 계속 할당받지 못해 자원을 무기한으로 기다리는 상황

기아상태 발생조건

교착상태의 비선점 현상이 계속된다면 기아상태가 된다. (내피셜)

기아상태 해결방법

에이징(Aging) 기법

기아상태를 회피하기 위해 낮은 우선순위를 가진 프로세스들을 기다린 만큼 우선순위를 높여주는 방법이다.
아무리 우선순위가 낮은 대상이라도 그 대상을 기다리는 다른 대상이 있을 수 있으니 늦게라도 자원이 할당되어 처리되도록 해야 한다. 대기시간에 비례하여 우선순위를 부여함으로써 기아 현상을 방지한다.
ex) 피팅룸 사용시 자리가 꽉 찼을 때 직원이 먼저 온 사람들 순서대로 대기표를 부여하는 것

[CS] 세마포어와 뮤텍스

민궝 — Wed, 7 Jun 2023 19:58:43 +0900

여러 개의 프로세스가 동시에 실행할 수 있는 멀티 코어 시스템은 시스템의 성능 향상을 가져왔지만 동시에 "프로세스 간의 공유 자원 접근 관리"라는 문제를 가져왔습니다.

즉, 공유된 자원에 여러 프로세스 혹은 쓰레드가 동시에 접근하면서 문제가 발생하는데 이렇게 다수의 컴포넌트가 공유 중인 자원을 동시에 읽거나 수정할 때 생기는 문제를 "동기화 문제"라고 하며 이러한 문제는 스핀락, 뮤텍스, 세마포어를 통해서 해결할 수 있습니다.

동기화(Synchronization)

여러 프로세스나 쓰레드가 공유하는 자원의 일관성을 유지하는 것
여러 프로스세나 쓰레드가 동시에 하나의 자원에 접근할 때 접근 순서를 정해 일관성을 유지해준다.

임계 영역(Critical Section)

여러 프로세스가 데이터를 공유하며 수행될 때, 각 프로세스에서 공유 데이터를 접근하는 프로그램 코드 블록
임계 영역은 작업들이 리소스를 같이 사용할 수 있는 공유 자원이 있는 곳이므로 한 작업이 자원을 점유하면, 다른 자원은 리소스를 점유한 작업이 종료될 때까지 기다려야 한다.

교착 상태(Dead Lock)

• 두 가지 이상의 작업이 서로 상대방의 작업이 끝나기를 하염없이 기다리는 상태를 말한다.

교착 상태가 발생하려면 아래의 4가지 조건을 모두 만족해야만 한다
1. 상호 배제
2. 점유 대기
3. 비선점
4. 순환 대기

상호 배제 (Mutal Exclusion)

• 임계 구역을 어느 시점에서 단지 한 개의 프로세스만이 사용할 수 있도록 하며, 다른 프로세스가 현재 사용 중인 임계 구역에 대해 접근하려고 할 때 이를 금지하는 행위

이 중에서 상호 배제 조건을 해결하기 위해 등장한 방법이 뮤텍스(Mutex)와 세마포어(Semaphore)이다.

세마포어(Semaphore)

멀티프로그래밍 환경에서 다수의 프로세스나 스레드의 여러 개의 공유 자원에 대한 접근을 제한하기 위해 사용되는 동기화 기법
공유된 자원의 데이터 혹은 임계영역등에 여러 프로세스 혹은 스레드가 접근하는 것을 막아줌(즉, 동기화 대상이 하나 이상)
세마포어에서 잠금이 해제되길 기다리는 프로세스는 세마포어 큐에 저장되어 있다가, 신호를 받으면 큐에서 나와 임계 구역에 진입한다

서버에 프린터기 다섯대가 물려있다고 치자. 사용자가 프린트를 사용하려고 서버에 요청을 보냈다. 그러면 공유자원 즉 프린터가 5개 있으니까 세마포어는 처음에 5로 설정된다. 그리고 프린터를 사용자가 사용할 때마다 하나씩 세마포어가 감소된다. 그러다가 사용할 프린터가 없어지면 세마포어는 조만간 0이 되고, 다 쓰고 반환하면 세마포어는 다시 +1 증가한다. 이런식으로 생각하면 된다.

세마포어(Semaphore) 접근 함수 : wait(), signal()

이를 위해 제공되는 함수가 wait()과 signal() 이다.

P(wait)

임계 구역 들어가기 전에 수행
세마포어 값을 감소시킨다
세마포어 값이 0보다 작으면 기다린다 -> wait
세마포어 값이 0보다 크거나 같으면 리턴한다 -> 프로세스가 임계 구역에 진입 가능

V(signal)

임계 구역에서 나올 때 수행한다
세마포어 값을 증가시킨다
대기 중인 프로세스를 깨운다

뮤텍스(Mutex)

한 쓰레드 또는 프로세스에 의해 소유될 수 있는 Key를 기반으로 한 상호 배제 기법
공유된 자원의 데이터 혹은 임계영역등에 하나의 프로세스 혹은 스레드가 접근하는 것을 막아줌(즉, 동기화 대상이 하나)
임계구역을 가진 쓰레드들의 실행시간이 서로 겹치지 않고 각각 단독으로 실행 (상호배제) 되도록 하는 기술

뮤텍스(Mutex) 접근 함수 : lock(), unlock()

lock()

현재 임계 구역에 들어갈 수 있는 권한을 얻는다
만약 다른 프로세스/스레드가 lock을 잡고 있다면 lock을 놓아줄 때까지 대기한다

unlock()

임계 구역을 모두 수행한 후 호출한다
unlock을 호출하면 lock을 기다리던 다른 프로세스/스레드 들이 lock을 잡을 수 있다

뮤텍스와 세마포어의 이해하기 쉬운 예시

https://worthpreading.tistory.com/90

뮤텍스(Mutex)와 세마포어(Semaphore)의 차이

이 글은 Medium에 개시된 글입니다. Medium에서 보시면 좀 더 유쾌한 환경에서 글을 보실 수 있습니다. 뮤텍스(Mutex)와 세마포어(Semaphore)의 차이 Toilet problem 동시성 프로그래밍의 가장 큰 숙제는 ‘공

worthpreading.tistory.com

뮤텍스와 세마포어 차이점

1️⃣ 동기화 대상의 개수

Mutex는 동기화 대상이 only 1개 일 때 사용한다.
Semaphore는 동기화 대상이 1개 이상일 때 사용한다.

즉,

세마포어는 세마포어의 변수 개수만큼의 프로세스/스레드가 공유 자원에 접근할 수있다
- 세마포어는 세마포어 변수 값만큼의 공유자원이 존재하고, 각 공유자원 당 하나의 스레드가 접근이 가능하다
- 즉, 한 번에 세마포어 변수 개수만큼 각 공유자원에 스레드가 접근이 가능하다
반면, 뮤텍스는 오직 1개의 프로세스 또는 스레드만 공유자원에 접근할 수 있다
- 뮤텍스는 공유 자원이 1개이다

2️⃣ 세마포어는 뮤텍스가 될 수 있지만, 뮤텍스는 세마포어가 될 수 없다.

Mutex는 0, 1로 이루어진 이진 상태를 가지므로, Binary Semaphore이라고도 불린다.

3️⃣ 자원 소유에 차이가 있다.

뮤텍스는 자원 소유가 가능하고 책임을 갖는다. (상태가 0과 1뿐이므로 Lock 가질 수 있음)
- lock : 현재 임계구역에 들어갈 권한을 얻어옴 (만약 다른 쓰레드/프로세스가 임계구역 수행중이면, 종료할때까지 대기한다.)
- unlock : 현재 임계구역을 모두 사용했음을 알림. (대기중인 다른 쓰레드/프로세스가 임계구역에 진입할 수 있음)
세마포어는 자원을 소유하지 못한다.

4️⃣ 뮤텍스는 소유하고 있는 쓰레드만이 이 뮤텍스를 해제할 수 있다.

반면, semaphore는 semaphore를 소유하지 않는 쓰레드가 semaphore를 해제할 수 있다.

5️⃣ Semaphore는 시스템 범위에 걸쳐 있고, 파일 시스템 상의 파일로 존재한다.

반면 뮤텍스는, 프로세스의 범위를 가지며, 프로세스가 종료될 때 자동으로 clean up 된다.

면접 예상 질문

1.세마포어와 뮤텍스의 차이점은 무엇인가요?

세마포어는 여러 스레드가 동시에 접근할 수 있는 상황에서 사용될 수 있으며, 뮤텍스는 임계 영역에 단 하나의 스레드만이 접근해야 하는 상황에서 사용됩니다.

2.세마포어와 뮤텍스를 사용하는 이유는 무엇인가요?

자원 공유에 대한 동시성 문제를 해결하기 위해 사용됩니다.

세마포어는 스레드의 개수를 제어하거나 리소스의 허용 가능한 개수를 제한하는 데 사용되고

뮤텍스는 임계 영역에 대한 상호 배제를 구현하기 위해 사용됩니다.

3.세마포어와 뮤텍스의 구현 방식은 어떻게 되나요?

세마포어는 일반적으로 정수 값과 대기 큐를 사용하여 구현됩니다. 세마포어의 값을 증가시키거나 감소시키는 연산은 원자적으로 처리되어야 하며, 대기 큐에서 스레드를 깨우거나 대기시키는 동작도 조절되어야 합니다.

뮤텍스는 일반적으로 상태 변수와 스레드 대기 큐를 사용하여 구현됩니다. 뮤텍스는 잠금 상태와 잠금 해제 상태의 두 가지 상태를 가지며, 잠금 상태에 있는 뮤텍스를 획득하려는 스레드는 대기 큐에 들어가고, 잠금 해제 상태가 되면 다음 스레드가 뮤텍스를 획득할 수 있습니다.