[230229] 스파르타 코딩 클럽 4일차 '1~3 Review & Project' | TIL

1~3 Review

1~3주차 수업에 들어있던 내용을 토대로 강의없이 내가 만들고싶은대로 KBO 구단 목록 어플을 만들어볼거다.
구단 별 이름을 클릭하면 창단년도랑 역대 우승, 간략한 정보들이 보이고 뒤로가기 버튼이 있도록 해볼거다.
그러기 위해서 Table View Cell을 사용하는 것은 너무 무의미하다고 생각이 되기 때문에, 버튼 형태로 꾸며볼 생각이다.

Main KBO Logo 삽입 (그림 삽입)

1. Assets에 들어가서 원하는 그림 파일을 불러와서 저장한다.

2. UIImageView를 생성한 후 IBOutlet으로 링크한 뒤 mainLogo라는 이름을 붙여주었다.

3. 이미지 로딩 방법이 변경되었는데, mainLogo.image = #imageLiteral() 이라고 써야한다.

대/소문자도 맞추고 마지막 괄호도 반드시 붙여야한다. 그러면 빈 이미지 그림으로 변경되는데 거기서 클릭하면 원하는 이미지를 넣을 수 있게 된다.

4. 잘 들어갔는지 확인

쨘

5. 이후 구속도 야무지게 잡아주었다.

각 구단별 Button 생성

1. Table View Cell을 사용할까 했지만 아직까지 각 Cell 별로 화면을 링크시키는 방법을 모른다. 때문에 버튼 10개로 생각해서 움직여볼까한다.

2. Button 10개 생성 후 Stack View에 집어넣어서 spacing은 10으로 설정하였다.

컬러는 팀 고유 컬러에 맞게 Background 컬러를 선택해주었고, 이제 이동할 화면을 만들어서 각 구단별 정보를 넣어줄 생각이다.

구단 배열은 ABCD순으로 정했다!

3. 이후 View Controller를 이용해 Segue를 통해 show detail화면을 구현해서 구단 로고와 구단 이름까지 띄우는 것이 목적이다.

4. 각 화면에 맞게 Navigation Controller를 깔고 모든 버튼마다 Segue를 달아 화면이 넘어가도록 설정하였다.

5. 각 구단별 구단명, 글자색, 배경색, 구단로고는 해당 방법을 사용하여 집어넣었다.

.image = #imageLiteral()

6. NewDetailViewController로 넘기기 위해 segue를 조정해주었으며 네임드 튜플을 활용하였다. let data를 선언하여 한 번에 넘기는 것이 편할 것 같다고 생각했기 때문이다. (식별자는 10개 구단 전부 showDetail로 통일했다)

7. 이것은 viewController에서 네임드 튜플로 전송된 정보를 받아 변경하는 방법이다. segue를 통한 전달일 때는 viewdidload에서 불러와야 한다는 사실은 잊지 않아야 할 것 같다.

문제 발생

1. 상위 8개 구단은 정상적으로 구단 이미지와 구단명이 변경되는데 하위 2개 구단은 전혀 변경되지 않는 모습이다.

문제 해결을 위한 노력

1.문제 해결을 위해 Segue도 다시 끊었다가 연결해보고, IBOutlet도 다시 끊고 연결해보았지만 증상이 똑같았다.
그래서 segue로 넘기는 중간에 문제가 발생했나싶어 dump를 찍어보았는데 이상을 발견하지 못했다.

2. IBOutlet도 segue문제도 아니라면 받는 쪽인 NewDetailViewController쪽에서 문제가 발생했을 것이라고 생각하여 간단히 print를 찍어보았다.

3. 잘되는 한화를 찍었을 때는 Optional("한화 이글스"), Optional("1 1")이 제일 마지막에 제대로 인풋을 받았는데

안되는 랜더스를 찍어보니 nil값이 두 번 들어가는 기현상을 발견했다.

분명 코드를 똑같은 것으로 복사 붙여넣기를 했는데 안되는 것이 이상해서 didset으로 해결해보고자했지만 결과가 달라지진 않았다.

4. 코드 문제는 아닌 것으로 생각하여 segue를 열심히 지우고 다시 만들어보던 순간 갑자기 삼성 라이온즈가 제대로 펼쳐지기 시작했다.

segue에서 initializer를 입력하지 않았더니 정상적으로 작동이 된 것이다.

최소한의 연결은 필요하니 두산과 연결된 하나의 initializer를 제외하고 showDetail로 이어둔 9개의 initializer 및 segue를 전부 삭제하였다.

그랬더니 된다.

5. 이유는 어차피 식별자를 통해서만 이동할텐데 의미없이 segue를 같은 식별자로 10개나 만들어둔것이 말이 안되는 일이었다.

왜 8개만 성공했는지는 모르겠으나 최대 보유가능 갯수가 8개였나싶기도 하다.

6. 이처럼 하나의 식별자만 이용할 경우 segue를 하나만 쓰면 된다는 사실을 깨달았다.

7. 이처럼 두 구단이 모두 잘 열리게 바뀐 것을 볼 수 있었다.

앞으로의 계획

1. 이 어플이 그냥 구단의 역사와 전통성, 연고지 등을 표기하는 어플로 끝날 수도 있다.

2. 하지만 가능하다면 선수 및 구단별 응원가를 즉시 재생할 수 있는 뮤직 스테이션 느낌으로 꾸며볼 생각도 있다.

오늘의 느낀 점

1. 모르는 분야가 있다면 확실히 공부하고 덤빌 것.

2. 끝까지 segue를 펼치는 것에 있어서는 잘못한 점이 하나도 없다고 맹신하며 오류를 찾고자 애썼다. 하지만 결국 가장 최근에 배웠기에 가장 확실하다고 생각했던 segue의 문제였다. 모든 가능성을 열어두고 처음부터 하나씩 찾다보면 금방 찾았을텐데 이건 아니고... 하며 넘기면서 자꾸 헛다리만 짚다보니 시간과 노력이 많이 들어간 트러블 슈팅이었다. 앞으로도 만들면서 버그가 없을 수 없으니까 디버깅하는 자세를 고쳐나가야겠다고 생각이 들었다.

3. 결국 개발자의 눈과 직감이 제일 중요하다. 오늘은 운이 좋아서 찾아냈지만 몇 시간이 지나도 못찾았던 것으로 보아 내가 태도를 고치지 않으면 평생 못찾을 수도 있었다. 좋은 경험을 했다고 생각한다.

오늘의 결과물

1. 메인 화면

 

10개 구단별 디테일 페이지. 참고로 이미지 및 구단명은 아직 구속을 잡지 않았다!

 

To be continued...