[SLP 개발일지] 공개용

Day1 2022-11-07

[ 개발 내용 ]

1. 프로젝트 기본 세팅 (그룹, 뷰 생성 + 기본 Color Extension 세팅 + BaseVC/BaseView 생성 ... 등)
2. Onboarding (3pages) : CollectionView + Pagecontrol로 구성.

 

[ 의문점 & 해결점 & 미해결된 부분 & 고려할 지점 ]

Q. 디자인을 반영하는게 생각보다 어렵다. 모든 기기에 대응해야할건데, 과연 고정값으로 해결될 일인가?
A. 고정값(절대적 수치)만 사용하는 거 아님. + 비율로도 해도 됨.
예를 들어 확인 버튼의 경우,
1) 여백을 16 고정값으로 잡거나,
2) 90% 의 너비로 하겠다. 
이런식으로 사람마다 방법이 다름. 어떤 device 에서도 깨지지 않게 만든다. 는 대정의만 놔두고 할 것.
디바인스 1-2개에 디자인 -> 모든 레이아웃에 적용.
현업에서도 딱 어떤 규칙이 있진 않음. 디자이너와 적절히 협의하는 지점이 많다.

미해결점:
* Onboarding page -스크롤했을 때 중앙에 딱 오지 않고 약간 오른쪽으로 치우친 경향있음. 고쳐야함.

 

Day2 2022-11-08

[ 개발 내용 ]

[ Login Auth ]
1. PhoneAuthVC - UITextField Left Padding
2. Custom UIButton -반복되는 Button custom으로 만듬.
3. Firebase Auth 연동 (Phonenumber + SMSCode verification)

- 전화번호 입력창에서 유효한 전화번호 넣은 경우 SMSCode 입력화면으로 이동 -> SMSCode 입력화면에서 유효한 SMSCode 넣으면 다음화면으로 이동.

 

[ 의문점 & 해결점 & 미해결된 부분 & 고려할 지점 ]

Q. 회원인증 페이지들에서 중복되는 View들이 많은데, (위에 있는 UILabel 및 버튼)
중복되는걸 BaseView에 모으고 이걸 상속받으면 쉽지 않을까?
다만, UILabel과 버튼 사이에 계속해서 바뀌는 TextField, 성별 선택 부분 등이 적절한 위치에 배치되어야하는 지점이 문제.
 

미해결점: SMSCode 맞는거 넣으면 Main으로 가버림... 회원가입 화면으로 가게끔 해야함.

 

Day3 2022-11-09

[ 개발 내용 ]

1. 폰트 설치 및 적용

  1) info.plist 수정

  2) VC에 테스트해서 프린트 출력 성공

  3) String Extension 세팅 (디자인에 있는 이름치면 바로 적용되게)

2. 휴대폰 인증 화면에서 010-xxxx-xxxx 하이픈 자동 생성, 유효성 검사 후 버튼 색상 바뀌게

3. 회원가입 UI 뷰

 

Day4 2022-11-10

[ 개발 내용 ]

1. 새싹 bundle id 및 파이어베이스 info.plist 교체 + swagger를 통한 회원가입

2. 닉네임 조건 설정 (//10자 이내 글자수 제한 및 백스페이스 감지)

3. toast 오픈소스라이브러리 import : toast + extension.swift 파일로 만듬. uiviewcontroller를 extension했음.

 

[ 의문점 & 해결점 & 미해결된 부분 & 고려할 지점 ]

1. 화면 전환 방법을 push 로 하면, 파이어베이스 인증 지점에서 다음 버튼을 누르면 자꾸 pop이 된다. -> 원인 파악 필요.

-> 이전에는 overfullscreen으로 해서 성공했었음. ㅠㅠㅠ 

 

2. 한명당 1대의 기기만 사용할 수 있다고 했는데 어디서 지켜야하는 부분인지?

->새싹 번들로 교체 후, Mac에서 시뮬레이터 그리고 딱 1개의 아이폰만 build 해볼 수 있다.

 

3. 전화번호 1개당 몇 개의 닉네임까지 가입할 수 있는걸까?

만약 1개의 닉네임만 가입이 된다면, 어떻게 서버에다가 테스트를 해볼 수 있는걸까?!

 

Day5. 2022-11-11

<What I did>

1. CustomButton + Extension 에 함수 여러개 생성

inactive, fill() 등 해놓고

활성화, 비활성화때마다 색깔 쓰는게 아니라 함수로 퉁치기

 

위에처럼 쓰는 코드가 더 나을까?

아니면 그냥

mainView.sendBtn.backgroundColor = Constants.BaseColor.green 이거 한줄로 끝내는게 나을까?

 

2. nickname textfield 1자 이상으로 변경시 초록색 버튼으로 바뀌게

다시 0자로 되면 회색버튼으로 바뀌게.

 

3. SwiftKeyChain 오픈소스라이브러리 사용해서 idToken값 받아옴. + 서버 통신

(https://eunjin3786.tistory.com/1)

idtoken 값을 서버와 통신해서 statusCode별로 그에 따른 처리를 해줌.

 

firebase인증은 되어있지만 서버에 가입 안된 신규 회원 / 기존 회원으로 분기처리. 

아래에서 더 세분화되게 분기처리.

 

 case 406, 202: print("미가입 회원. 닉네임화면으로 이동 / 또는 금지된 닉네임 사용한 자")

case 401: print("firebase 인증 오류")

case 500, 501: print("서버 점검중입니다. 관리자에게 문의해주세요.")

self.showToast(message: "서버 점검중입니다. 관리자에게 문의해주세요.")

 

Day6. 2022-11-12

1. Splash 화면

Q. top 고정값 말고 비율로 만드는 방법?? 1/3 지점에 로고를 위치시켜야 할 것 같은데.

스토리보드, 코드 둘 다 문제

->A. CenterY multiplier.

 

2. Splash 화면 및 서버 통신 안될 때 새로운 ViewController 만들고 거기에다가 토스트 메시지 띄우기.

->해당 뷰에서 분기점을 만들어서 온보딩/홈화면/닉네임가입화면 띄우는 것 함

Q. idToken값이 매번 바뀌는데(1시간마다 변하는데) 그러면 유저는 1시간마다 한번씩 로그인(파이어베이스 인증)을 무조건 해야하는건가?

 

Day7. 2022-11-13

1. 생년월일 DatePicker

- Date -> String 변환해서 년,월,일 각각 TextField에 넣기

2. 만 17세 이상만 가입하게 설정

 

Day8. 2022-11-14

<What I did>

1. 이메일 형식 검사

2. 키보드 형태 바꾸기

3. 회원가입

idToken, FCMToken, 전화번호 UserDefaults로 저장해놓음

이유?

1) idToken값 저장해 놓아야 406 에러 떴을 때, 탈퇴처리된 사람인거랑 아닌거랑 구분 가능.

2) FCMToken값: Appdelegate에서 생성되므로 나중에 서버 통신시 불러옴

3) 전화번호: NoNetworkViewController에서 전화번호까지만 인증한 사용자의 경우(파이어베이스O, 서버가입X), 닉네임입력 화면부터 시작하기 때문에, 전화번호를 가지고 있어야 이걸 이용해서 나중에 서버에 가입시킬 수 있음.

 

 

<오늘 이슈>

회원가입시 401 Firebase Token Error 는 언제 뜰 수 있는 걸까?

401 에러: idToken이 1시간 뒤 만료 되었을 때 뜨는 경우 말고 다른 경우는 없는 것 같다고 판단.

그렇다면 해결책: idToken refresh 함수 만들어서 처리

(내 코드의 경우 회원가입 parameter들을 서버에 보낼 때, idToken을 refresh하는 코드가 들어있어서 401 에러가 날 경우는 없을 것 같다고 판단하여 따로 처리하지 않음)

 

회원가입 외에도 401 에러가 뜨는 경우 처리 (idToken 1시간마다 만료)

방법1) 내정보화면, 새싹찾기 등 화면에서도 idToken refesh 함수를 viewDidLoad마다 띄워준다

방법2) 도이님 의견: BaseViewController에 심어서 해당 VC를 상속 받으면 자동으로 모든 뷰마다 해당 처리 할 수 있음.

 

Day9. 2022-11-15

1. TabBarVC UI 만들기 

2. 내 정보(MyInfo) UI 만들기

-아이디어: 섹션을 나누는 것보단 1개의 섹션 안에 multi cells로 구성 (2가지)

 

Day10. 2022-11-16

1. <내 정보 관리> 화면:

Expandable TableView Cell 하나에 3개의 큰 UIview를 넣는다.

그리고 각각의 UIView 안에서 stackview로 구성.

StackView - Snapkit으로 구성.

 

-> 이렇게 하려다가 Expandable TableView Cell , Fixed TableView Cell  두개로 나눠서 했음

그리고 Expandable TableView Cell 안에 UIView여러개 넣어서 특정 View를 show, hidden 하는 식으로 처리.

 

Day11. 2022-11-17

<내 정보 관리> 화면: 정말 스냅킷 지옥 ㅠㅋㅋ

어제 오늘 하루 종일 내 정보관리 UI만하게 되었다...

 

Snapkit 하면서 느낀점

1. CollectionView 또는 버튼을 넣을 때 무조건 background color .red, .blue 이런식으로 만들기

(얼마만큼 차지하는지가 너무 안 보이고 때로는 그냥 하얗게 글씨도 배경도 표시되어서 되는지 안되는지도 모름)

 

2. StackView 짤 때,

lazy var genderView: UIStackView = {

        let view = UIStackView(arrangedSubviews: [genderLabel, maleBtn, femaleBtn])

        view.axis = .horizontal

        view.distribution = .fill

        view.alignment = .fill

        return view

    }()

 

위에 파란색글씨처럼 해놓으면 밑에 

 private func layout() { 코드 안에서

        

        self.contentView.addSubview(fixedStackView)

위에처럼 addSubView를 따로 할 필요가 없다.

예를 들면, 

//        [nickLabel, downBtn].forEach {

//            nickStackView.addSubview($0)

//        }

        

//        [titleLabel, titleStackView, reviewLabel, textView].forEach {

//            expandableView.addSubview($0)

 

위에 저런것들 다 할 필요 없어짐.

 

3. Snapkit으로 StackView 관련 짤 때 주의점:

 view.axis = .horizontal

이게 vertical 인지 horizontal인지 잘 볼 것.

실컷 짜다가 시뮬레이터 돌렸을 때 모든 뷰가 하나로 겹쳐보인다?? 거의 백퍼 이걸 의심하면 됨 ㅠㅠ

 

Day12. 2022-11-18

1.<내 정보 관리> UI 다듬기

1) 셀 클릭시 배경 회색으로 변하는거 막기

2) 테이블뷰 셀 라인 없애기

3) StackView 관련

Content hugging vs. compression resistance

 

2. <메인 지도> 화면

1) UISegmentedControl로 구성

 

Day13. 2022-11-19

[ What I did ]

1. <메인 지도> 화면

1) UISegmentedControl 로 전체,남자,여자 버튼 표시하려고 했으나 가로로 뒤집는게 너무 안되어서 UIStackview에 버튼 3개 넣는걸로 바꿈

 

2) Snapkit

* width, height 크기 같을 때 한번에 표시하는 방법: make.size.equalTo(24)

 

* StackView 관련 새롭게 알게된 점:

 

- stackView 안에 3가지 버튼을 fillequally로 넣는 경우, stackview자체에는 높이를 지정하지 않고, 안에 채우는 버튼들의 각각 height가 정해지면 자동으로 stackview의 크기는 결정됨.

그리고 이 때, 안의 3가지 버튼들 크기가 모두 같게 하는 것이므로 3가지 버튼 중 아무거나 하나만 constraints 걸어놓으면 됨.

 

-  StackView안에 라벨, 버튼을 넣고 싶을 때, 각각이 스택뷰를 꽉 채우지 않고 여백을 넣으면 무조건 에러가 남. (Snapkit에서)

그래서 StackView들을 UIView로 다 바꾸고 그 안에 라벨, 버튼 넣는식으로 했더니 오류 다 해결 됨.

스택뷰는 무조건 안에 요소들을 꽉꽉 채우고 특히 정률로 만들 때 쓰는게 좋은 것 같고, 안에 여백이 필요하면 무조건 피하는게 나은 것 같다.

 

 

[ 발생 이슈 ]

1. <메인 지도> 화면

-> 전체,남자,여자 선택하는 StackView에서. 테두리 둥글게 + 그림자 동시에 처리할 수 있는 방법이 있을까?

        view.clipsToBounds = true

        view.layer.masksToBounds = false

     

위에 빨간색 두줄이 충돌해서 

clipsToBounds로 둥글게 해야함과 동시에

maskToBounds로 그림자를 표시해야하는데...

masksToBounds를 false로 하면 바깥에 깎는걸 막아 그림자를 나타낼 수 있는데

여튼 이 두속성이 충돌해서 문제. 해결방법을 모르겠다...

 

Day15. 2022-11-21

[ What I did ]

1. 회원탈퇴 뷰 만들기 ( https://jellysong.tistory.com/82 ) - 1h 15m 소요

2. multislider 라이브러리 이용해서 완성 - 1h 소요

3. 회원탈퇴 기능 구현 (서버 연동)

4. 내정보관리 서버연동

 

 

Day16. 2022-11-22

1. 오늘 잡아낸 오류

 

: 실수해서 탈퇴시 '로그인' 통신을 계속해서 하고 있었는데, 

print로 찍히는것은 아래와 같이 나왔지만, 계속 로그인 성공(200)이 되었다.

failure(alamofire.aferror.responseserializationfailed(reason: alamofire.aferror.responseserializationfailurereason.decodingfailed(error: swift.decodingerror.keynotfound(codingkeys(stringvalue , swift.decodingerror.context(codingpath: [], debugdescription: "no value associated with key codingkeys

 

마치 파이어베이스 오류(401) 과 동시에 로그인 성공(200) 이 나오는 것 같았는데,

잘못했던 점은 User struct파일에다가 codable 한 값 중에 idToken 을 넣었어서 틀렸던 것.

서버 통신에서 바디 결과값에 idToken은 아예 없는데 자꾸 idToken 을 반환하라고 코드에 적었기 때문에 오류가 났었다.

-> 해결: User struct파일에다가 codable 한 값 중에 idToken 를 지움.

 

-오류를 해결하다가, FCM token 은 디바이스 인식을 위해 발급하는 토큰임을 알게되었고,

원래 idToken 발행시마다 FCM token이 발행되는 건가 했는데? test해보니 그게 아님을 알게됨.

아마 회사 정책상마다 FCM token 갱신시점이 다르겠으나, 통상적으로는 FCM token 발급 이유가 푸시 메시지를 보내기 위한 디바이스 인식하기 위해서이고, 기기가 바뀌거나 앱을 지웠다가 다시 까는 시점 정도쯤에서 갱신을 하는게 좋겠다고 판단.

해당 코드는 추후 푸시 메시지 할 때 적용시키기로 생각했다.

 

 

2. 회원 탈퇴 서버와 연동해서 성공시킴

 

Day17. 2022-11-23

코로나 확진

 

Day18. 2022-11-24

1. 새싹찾기 뷰에서 원래는 테이블뷰 안에 컬렉션뷰 하려고 했으나...

컬렉션뷰 안에  헤더:ReusableView / 나머지 구성.

-intrinsic content 자동으로 하기 위해서 UIView,Label로 하려다가 UIButton으로 다 바꿈

 

Day19. 2022-11-25

1. 새싹찾기 뷰에서 서치바를 커스텀으로 변경(텍스트필드 안에 돋보기 넣고 서치바 느낌으로 만듬)

 

Day20. 2022-11-26

-final 키워드 붙이기

붙이는 이유: overriding 을 막음으로써 Static Dispatch 의 효과(컴파일 때 overriding 되지 않는건 지나쳐감으로써 속도 및 성능 향상에 도움)