Project.다원 Ensemble_개발(7)_장비 상세 화면 개발


흠.. 오늘로써 설계 문서에 맞춰서 일.단.은. 화면단의 개발은 끝났습니다.

이제 버그 수정과 디자인이 썩 맘에 들지않아 더 깔끔하게 다듬어주는 작업이 남아있기는 한데, 이건 천천히 작업하는걸로 하고, 내일부터는 이제 DB 데이터와 연동하는 작업을 들어가볼까합니다. 

근데 벌써 1시 41분이네;; 오늘도 빠르게! 보여드리고 넘어가도록 하죠!


Wireframe & 화면설계서 (링크)

 

Project.다원 Ensemble_설계(7)_장비관리-장비상세 Wireframe&화면설계서(3)

Project.다원 Ensemble_설계(7)_장비관리-장비상세 Wireframe&화면설계서(3) 계속해서 장비관리입니다! 앞으로 화면 1개만 더 나오면 끝나겠네요! 벌써 설계서 PPT가 27장이 되었네요 ㅋㅋㅋ 으아 ㅋㅋㅋ 2�

karzin.tistory.com

Wireframe (장비관리-장비상세_tab1)

Wireframe (장비관리-장비상세_tab1)

 

화면설계서 (장비관리-장비상세_tab1)

화면설계서 (장비관리-장비상세_tab1)

 

개발 화면 (장비관리-장비상세_tab1)

개발 화면 (장비관리-장비상세_tab1)

아직 DB연동이 안되어 있어 세세한 데이터의 정보까지는 처리하지 않았습니다.

이 부분 확인하시어 일단은 프레임만 보시면 될 것 같습니다!


Wireframe (장비관리-장비상세_tab2)

Wireframe (장비관리-장비상세_tab2)

 

화면설계서 (장비관리-장비상세_tab2)

화면설계서 (장비관리-장비상세_tab2)

 

개발 화면 (장비관리-장비상세_tab2)

개발 화면 (장비관리-장비상세_tab2) *Modal hide

 

개발 화면 (장비관리-장비상세_tab2) *Modal show

 

흠흠.. Modal도 그렇고 좀 다듬어야할게 한둘이 아니네요.

2시까지 마무리작업을 생각했으니, 오늘은 일단 여기까지~


아무래도 문제는 디자인!

좀 더 공을 들이면 깔끔하게 뽑을 수 있을 거 같습니다.

(일단 지저분한 저 파란색 테마는 좀 빼도록 하고, 테두리랑에서도 파란색을 제거를 ㅡㅡ,, <- 참고로 저는 파란색 엄청 싫어합니다. 빨강x검정이 진리...지만 여기서 그런짓했다가는 싸대기맞을듯싶네요 ㅋㅋㅋㅋㅋㅋㅋ)

 

디자인은 차츰차츰 해소해나가야죠. 어차피 틀은 어느정도 잡아뒀다고 생각해서 디자인 쯤이야..^^

(??????????? 어디서 나오는 자신감인가.. 난 졸려죽겠.....)

 

빠르게 작성했다고 생각했는데 벌써 1시 56분...ㅋ 내일(? 이아니라 오늘)을 위해서 얼른 취침하러 가봐야겠습니다!

 

아! 그러고보니 오늘도 비가 많이 온다고 하는 모양이니 조심하시고, 침수피해 없으시기 바라겠습니다.

비도 맞으면 감기걸릴 수 있으니 꼭 우산 챙기셔서 건강도 조심하시구요!!

 

그럼 오늘도 고생많으셨습니다~~

 

버전정보 (v1.0)

 - v1.0 2020.07.31 배포

 

* 본 게시글의 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 본 게시글의 이미지는 전부 (이미지 내의 픽토그램 등) 직접 제작했음을 명시합니다.

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

 

Project.다원은 개인(karzin)이 기획, 분석, 설계, 디자인, 개발, 유지보수 등

모든 부분을 혼자 맡아 진행하는 개인 프로젝트입니다.

Project.다원 Ensemble

Karzin

abbeea@naver.com

 


Project.다원 Ensemble_개발(6)_장비 목록 화면 개발


오늘따라 엄청 졸리네요;; 이제 목요일 들어가서 그런가..? 잘 모르겠네요;; 

음.. 오늘도 커피 5잔정도 마신거같은데 이러네요;;ㄷㄷㄷ

간만에(올해 설날 이후로 간만에 길게 쉰거같은데..) 휴식기간을 가지다가 다시 업무와 프로젝트 그리고 공부를 또 열심히(?????) 병행하는게 몸이 못따라오는건지.. 어쩐건지..;;

일단은 버그 생각 않고 장비목록 화면만 빠르게 뽑아내고 좀 쉬어야지 싶어서 빠르게 진행했습니다.

아마 추후에 고쳐야할게 많을 듯 싶네요...ㅠㅠ

 

그냥 어떻게 진행되었는지만 화면 뽑아낸것만 보여주고 바로 취침하러가겠슴다 ㅠ;


wireframe & 화면설계서 (링크)

 

Project.다원 Ensemble_설계(6)_장비관리-장비목록 Wireframe&화면설계서(2)

Project.다원 Ensemble_설계(6)_장비관리-장비목록 Wireframe&화면설계서(2) 오늘은 낮에 커피를 한잔만 마셨더니 엄청 피곤하네요;; 아무래도 카페인이 부족한 모양입니다.ㅎ;; 그래서 빠르게! 오늘 할 ��

karzin.tistory.com

Wireframe

장비목록 Wireframe

 

화면설계서

장비목록 화면설계서


장비목록 화면 개발 내역

장비목록 개발 화면

 


대충 만들어서 그런가 만들고나서 이거저거 눌러보니 벌써부터 보이는 버그가..

일단 필요한 화면 얼른얼른 쳐내고 DB와 연동하는 작업 진행하면서 다듬어가야겠네요 에궁..

(그나저나 디자인이 파랗파랗한게 영 맘에 안드네.. 날잡고 디자인도 그냥 다시 잡아줘야겠네요 ㅋㅋㅋㅋㅋㅋㅋㅋ)

 

일단은 아까 맨 위에 써놓은 것처럼 오늘은 정말 너무 너무 피곤해서 먼저 자러가보겠습니다;;; (ㅠㅅㅠ)

 

오늘도 고생많으셨습니다.~

 

버전정보 (v1.0)

 - v1.0 2020.07.30 배포

 

* 본 게시글의 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 본 게시글의 이미지는 전부 (이미지 내의 픽토그램 등) 직접 제작했음을 명시합니다.

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

 

Project.다원은 개인(karzin)이 기획, 분석, 설계, 디자인, 개발, 유지보수 등

모든 부분을 혼자 맡아 진행하는 개인 프로젝트입니다.

Project.다원 Ensemble

Karzin

abbeea@naver.com


Project.다원 Ensemble_기능검토(3)_Thymeleaf Layout Dialect


간만에 개발을 진행하면서 아쉬운 부분이 있어 검색을 통해 추가한 Thymeleaf Layout Dialect에 대해서 설명을 해볼까 합니다.

사실 이전에 Template Engine 자체를 Thymeleaf를 사용하겠다고 개발정보에 떡하니 작성은 했으나, Thymeleaf Layout Dialect에서의 조금 다른 layout기능이 필요하여 dependency에 추가를 해주었습니다.

오늘은 이 기능을 살짝 맛보기 수준으로 설명을 하고 계속해서 개발을 진행하면서 괜찮은 정보가 있다면 공유를 하도록 하겠습니다.


 

기능 검토 - Issue

우선 사건의 발단(?)은 이랬습니다.

Thymeleaf Layout Dialect를 사용하게 된 시작

위의 이미지를 보시는것처럼 저는 Common적인 요소를 어떻게하면 더 편리하게(?) 활용을 할 수 있을까?

재활용이 용이할까? 라는 생각으로 시작을 하게 되었습니다.

 

사실 이러한 기능은 Thymeleaf에서도 지원을 안하는건 아닙니다.

다만, 조금 더 소스의 길이가 길어질 뿐 (그리고 그만큼 개발자인 저도 귀찮아질 뿐...) 사용에는 큰 지장은 없었습니다.

그럼에도 불구하고 저는 더 나은 방법을 찾고 싶었고, 그에 대한 해답으로 제시한 것이 Thymeleaf Layout Dialect 였습니다.

 

우선 기존에는 어떤 느낌이었는지를 그림으로 보여드리겠습니다.

기존에 사용하던 방식을 나타낸 그림

기존 사용하던 방식

위와 같이 기존에 사용하던 방식은 top과 left의 메뉴를 일일이 화면에 replace를 해주어야 했습니다.

사실 하나씩 replace를 해주면 금방끝나는거겠지만, 화면이 계속해서 늘어남에 따라 replace해주어야하는 양도 그만큼 늘어날 것이고, 화면이 더 늘어나기 전에 해결을 해둠으로써 저의 잠자는 시간을 지키기위해 좀 더 편리함을 추구 하기 위해 검색을 해보았습니다.

 

변경된 방식을 나타낸 그림

변경된 방식

검색의 결과, 저는 위 그림처럼 contents를 기존의 layout의 특정영역(즉 기존 layout의 contents영역)에 바꿔치기를 해주는 방식을 찾아냈습니다.

이게 바로 Thymeleaf Layout Dialect이었고, 간편하게 dependency만 추가해주면 정말 편리하게 사용할 수 있었습니다.

(사실 dependency추가 안해놓고 왜 안되냐고 삽질하면서 20분 날려먹은건 비밀입니다..)

 

장단점

이 방식의 최대의 장점은 기존의 layout의 틀만 잡아놓고, 변경을 해둘 contents의 부분만 잘 잡아놔주면, 개발자는 해당 contents만 작업을 해주면, 미리 layout에 잡아놓은 common적인 요소들은 그냥 기본적으로 딸려온다는 점이죠.

그만큼 소스작업에 있어서도 굉장한 편리성이 느껴집니다.

 

대신 단점은 contents만이 아니라 common요소에 대한 커스텀이 필요할 때에는 common요소에 대해서 단일화면에서만 사용하기 위한 용도로는 수정이 불가하다는 점이 있습니다.

이럴때에는 기존에 사용하던 Thymeleaf의 replace나 include기능을 사용해 커스텀을 이용해주면 되겠지만 말이죠.

 

Thymeleaf Layout Dialect의 License

mvnrepository를 이용하면 License의 정보를 쉽게 파악할 수 있는데요,

Thymeleaf Layout Dialet의 License는 Thymeleaf와 동일한 Apache 2.0입니다.

큰 문제없이 사용이 가능할것으로 보여 License만 체크 후 바로 dependency에 추가했습니다 ㅋㅋㅋ

 


으헉.. 벌써 2시 7분이네요!

내일을 위해서 얼른 자야겠네요ㅠㅠ

공부는 즐거운데 시간은 항상 왜 이렇게 빨리지나가는지 아쉽기만합니다 ㅠㅠㅠ

 

 

버전정보 (v1.0)

 - v1.0 2020.07.29 배포

 

* 본 게시글의 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 본 게시글의 이미지는 전부 (이미지 내의 픽토그램 등) 직접 제작했음을 명시합니다.

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

 

Project.다원은 개인(karzin)이 기획, 분석, 설계, 디자인, 개발, 유지보수 등

모든 부분을 혼자 맡아 진행하는 개인 프로젝트입니다.

Project.다원 Ensemble

Karzin

abbeea@naver.com

 

 


Project.다원 Ensemble_개발(5)_장비 등록 화면 개발


휴식을 갖기 전에 열심히 베이스를 깔아놔서 그런지 화면 개발은 화면 하나당 하루(대략 1~2시간 정도)정도 잡으면 될 것 같네요. (휴일이었으면 하루면 다 만들 듯..)

일단 기능적인 요소를 제거하고 front와 back단 조금 잡아주는 부분까지만을 1~2시간 정도로 잡고 있습니다. 사실 하나 완성되면 그 이후는 더 금방 끝날것도 같지만..

오늘은 그런 의미에서 개발 진척된 부분 가지고 나와봤습니다!


우선 개발 진행되고 있는 장비 등록을 보여드리기 전에! 잊으셨을 수 있으니, Wireframe과 화면설계서를 한번 보여드리고 진척사항을 설명하도록 하겠습니다.

여기서는 설계단의 자세한 설명은 생략하고 이미지만 보여드릴 예정입니다.

혹시라도 설계관련 자세한 사항은 아래 링크를 통해 장비등록의 Wireframe과 화면설계서를 보시는걸 추천드립니다.

 

Wireframe & 화면설계서 (링크)

 

Project.다원 Ensemble_설계(5)_장비관리-장비등록 Wireframe&화면설계서(1)

Project.다원 Ensemble_설계(5)_장비관리-장비등록 Wireframe&화면설계서(1) 역시 저는 설계하다보면 괜한거 하나하나까지 꼼꼼히 따져가면서 하게되네요;;; 역시 귀찮은 성격,,,(?!?!?) 아니나다를까 설계�

karzin.tistory.com

Wireframe

장비등록 Wireframe

 

화면설계서 - PC 버전

장비등록 화면설계서 - PC버전

 

화면설계서 - Mobile 버전

장비등록 화면설계서 Mobile 버전


설계서를 토대로 개발 진행된 사항 - PC 버전

장비등록 개발 화면 (PC)

어찌보면 Prototype이라고 하기에는 아쉬운 수준의 미완성적인 개발된 내역입니다.

처음 몇몇 Component들 잡아주는 부분이 시간이 걸렸을 뿐이지, 아마 이후부터는 개발에 좀 더 속도가 붙지 않을까 싶습니다.

일단 input box 안에 들어간 내용들은 직접 입력해본 내용물입니다.

화면설계서와 비슷하게 만드려고 노력은 했지만, 역시나 디자인이 조금 아쉽기는 하네요.

이 디자인은 조금씩 다듬어가면서 계속해서 업그레이드 해나갈 예정이니 지금은 아쉽더라도 기능을 붙여가면서 조금씩 만져봐야겠습니다 ㅋㅋ

 

설계서를 토대로 개발 진행된 사항 - Mobile 버전

장비등록 개발 화면 (Mobile)

모바일에서는 지금은 이러한 화면을 보여주고는 있는데, 해당부분은 실제 테스트를 통해서 변경될 수 있는 부분이 많이 있을 듯 합니다.

아무래도 사용하면서 불편한 부분들도 몇몇 보일텐데 그러한 부분들은 점차 해결해나가야할 것 같습니다.

 

음! 그러고보니 모바일버전에서 메뉴를 누르게되면 어떤 느낌인지 궁금하실 수 있는데 이 부분은 아래와 같은 느낌입니다! 퍼런색으로 다 칠해놨더니 조금 아쉬운 부분이 많아서 ㅋㅋㅋㅋ 심심할때마다 디자인은 계속 변경해봐야겠습니다 ㅋㅋㅋ

모바일에서의 메뉴


첫 화면이 드디어 뽑히게 되어 아마 이후 화면들은 금방금방 뽑아낼 수 있을 것 같습니다. (칼국수!?_)

그만큼 첫 화면이 중요한게 아무래도 틀이 잡혀가는데 시간이 생각보다 많이 들어서.. 역시 시작이 조금 걸릴뿐이지 이후는 별다른 기능의 Component들만 아니라면 금방금방 뽑혀 나올 것 같습니다.

화면만 대충이라도 나와주면 DB연동작업(특히 Back-end단)이 한창 시작될 것 같네요.

뭐.. Component 중에서도 제가 좀 손을 봐야하는 부분이 몇몇 있기는 한데.. 이것저것 하나씩 잡고 진행하다보면 어느정도 작업이 마무리 되어가지않을까 생각합니다.

 

일단 오늘은 이정도에서 마무리하고, 기능검토 게시글도 같이 작성중이던게 있어서 그 부분까지만 작성하고 취침하러 가봐야겠네요 ㅋㅋㅋ

 

오늘도 고생 많으셨습니다~

 

 

버전정보 (v1.0)

 - v1.0 2020.07.29 배포

 

* 본 게시글의 이미지에 들어간 글씨체는 네이버 나눔 글씨체인 나눔스퀘어 Bold를 사용했습니다.

* 본 게시글의 이미지는 전부 (이미지 내의 픽토그램 등) 직접 제작했음을 명시합니다.

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

 

Project.다원은 개인(karzin)이 기획, 분석, 설계, 디자인, 개발, 유지보수 등

모든 부분을 혼자 맡아 진행하는 개인 프로젝트입니다.

Project.다원 Ensemble

Karzin

abbeea@naver.com




[Swift5] TableView 만들기 (custom cell을 만들어 보기)


저의 경우 아이폰 개발을 하면서 TableView를 많이 사용하게 되었는데, 덕분에 많은 부분 깨닳음(??)이 있었습니다.

오늘은 간단하게(?) TableView를 만들고 입맛에 맞춰 Custom Cell을 만드는 방법을 알아보도록 하겠습니다. 


Storyboard 작업

자, 우선 프로젝트를 생성해주시고, Main.storyboard를 선택합니다.

 

그리고 Component 중 Table View를 화면에 드래그해서 추가해줍니다. 

화면에 Table View Component 추가

 

다음으로 Table View에 보일 Cell(Table View Cell)을 앞서 만든 Table View 내에 추가해줍니다.

Table View에 Table View Cell 추가

 

Table View Cell 내 Content View 내부의 원하시는 Component를 추가해줍니다.

(여기서는 예시로 Image View, Label, Button을 추가했습니다.(왼쪽부터 순서대로))

Table View Cell 내 Content View에 원하시는 Component를 추가합니다.

 

이제 View Controller에 연결된 Class(Source 단)로 이동합니다.

(연결된 Class 정보를 잘 모르시겠다면, 처음 기본적으로 생성된 Controller의 Class는 보통 ViewController.swift입니다. 좌측에서 ViewController.swift 파일을 선택하시거나, 하단의 이미지처럼 ViewController의 Class를 확인 후 이동해 주세요.)

 

여기까지 따라오셨다면, Storyboard에서 초기작업이 끝났습니다.

단, 완벽히 끝난건 아니고, 이후부터는 Class(Source)와 Storyboard(View)를 왔다갔다하시면서 작업을 해야합니다.

 

ViewController Class 작업

처음 생성된 ViewController

 

Table View를 이용하기 위해서는 이동하신 Controller에 Table View를 동작하기 위한 Class를 상속받아야 합니다.

여기서는 Table View의 기능을 처리할 delegate(대리자) - UITableViewDelegate와 Tablew View Cell등을 제어하여 데이터를 처리할 datasource(데이터 소스) - UITableViewDataSource를 상속해줘야 합니다.

(저는 extension(확장)하는 방식으로 진행했습니다.)

 - UITableViewDelegate : Table View에서 Cell을 선택하거나, 어떠한 기능을 처리

 - UITableViewDataSource : Table View에서 Cell을 보여주기 위해 Table View의 Row나 Section은 어떻게 구현을 할것이며, Cell은 어떻게 만들어줄 것인지를 제어

   -> UITableViewDataSource 내에는 필수(Required) 함수들이 있습니다.

   -> func tableView(func tableView(UITableView, numberOfRowsInSection: Int) -> Int

   -> func tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell

   -> 위 두 함수가 그것이며, 각각 section내에 몇개의 row가 있는지, 각 index별 cell의 정보를 어떻게 담고 있는지를 알려주기 위한 함수입니다.(하단 그림 참조)

 

ViewController를 extension(확장)하여 UITableViewDataSource, UITableViewDelegate를 상속시켜줍니다.

 

UITableViewCell Class 작업

이제 위에서 선언한 필수 함수 내부에 code를 구현을 해야겠죠!

하지만, 그 전에 우리는 UITableViewCell을 Return해줄 Class의 생성이 필요합니다.

그래서 우선은 code의 구현은 잠시 미루고 Class를 생성해주기로 합시다!

Cocoa Touch Class를 선택한 상태로 Next

Cocoa Touch Class 선택 -> Next

 

Class의 이름을 지어주고, 상속받을 Class를 선택해줍니다.

(편의상 Class의 이름은 CustomCell로 지었으며, Return할 UITableViewCell의 Class를 생성하고 있으니 상속받을 Class는 UITableViewCell을 선택해줍니다. - 하단 이미지 참조)

UITableViewCell을 상속하는 CustomCell을 만들어줍니다.

 

생성된 CustomCell Class.

UITableViewCell을 상속받는 CustomCell의 생성이 완료되었습니다.

 

이제 다시 Main.storyboard로 이동하셔서 Cell과 위에서 만드신 CustomCell을 연결해주는 작업을 합니다.

CustomCell의 Class 연결

그리고 Table View Cell의 Identifier를 지정해줍니다.

(여기서는 편의상 customCell로 지정했습니다.)

Tablew View Cell의 Identifier 지정

 

마지막으로 Main.storyboard와 앞에서 생성한 CustomCell.swift 파일을 나란히 열어두고,

기존에 만든 Component(ImageView, Label, Button)을 CustomCell Class에 선언해줍니다.

선언 방식은 Component를 마우스 우클릭하신 상태로 CustomCell Class(.swift)파일로 옮기시면 됩니다. - 하단 이미지 참조

화살표처럼 Componet를 마우스 우클릭한 상태로 소스단으로 드래그

 

자! 여기까지 오셨다면 Table View에서 Return해줄 Table View Cell Class는 다 만들어준겁니다!

 

ViewController Class 작업

이제 기존에 열어두신 화면 그대로에서 CustomCell Class 쪽만 ViewController Class로 변경해줍니다.

이 후 미리 Main.storyboard에 생성한 Table View를 제어하기 위해 위 Componet 선언한 방식처럼 Class(ViewController.swift)쪽에 선언합니다.(마우스 우클릭 한 상태로 드래그)

Table View를 제어하기위해 ViewController에 선언해줍니다.

 

마지막으로 CustomCell에 보여줄 Data와 code 생성합니다.

(하단 이미지의 소스코드는 게시글 아래쪽으로 더 내려보시면 설명과 함께 다시 정리되어있습니다.)

이제 code를 추가합니다.

 

cellName = String 형식으로, 위에서 정의한 Table View Cell의 Identifier 입니다. 저는 편의상 "customCell"로 지정하였으므로 cellName에는 "customCell" 대입해주고 있습니다.

cellTitle = Array 타입으로, ImageView의 iamge 정보를 나타냅니다. 더불어 Label의 text에 image값을 String 형식으로 넣어주기 위한 변수입니다.

 

viewDidLoad 함수의 [tableView_custom.delegate = self]

 - 기존에 선언해둔 TableView - tableView_custom에 delegate를 지정합니다.(self 즉, 소스 하단에 extension(확장)한 UITableViewDelegate의 정보를 대입합니다.)

viewDidLoad 함수의 [tableView_custom.dataSource = self]

 - 기존에 선언해둔 TableView - tableView_custom에 dataSource를 지정합니다.(self 즉, 소스 하단에 extension(확장)한 UITableViewDataSource의 정보를 대입합니다.)

 

extension ViewController class의 [func tableView(func tableView(UITableView, numberOfRowsInSection: Int) -> Int] 함수

 - 화면에 보여줄 row의 갯수를 나타냅니다. 여기서는 cellTitle.count 이므로 선언된 cellTitle 변수에는 3개의 값이 들어 있으므로 3을 return하게 됩니다.

extionsion ViewController class의 [func tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell] 함수

 - 화면에 보여줄 cell을 지정합니다. function내에는 cellName("customCell")의 customCell을 선언했고, 이 customCell에 있는 Component imageView_custom과 label_custom의 정보(이미지, 텍스트)를 변경해주고 있습니다. (즉, Cell 내부 이미지와 텍스트는 짝이 되어 보일겁니다.)

 

완성된 프로젝트 Run

이제 완성된 프로젝트를 실행해 봅시다!

아이폰 11 Simulator


ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tableView_custom: UITableView!
    let cellName:String = "customCell"
    let cellTitle : Array<String> = ["pencil.circle", "doc.circle", "bolt.circle"]

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        tableView_custom.delegate = self
        tableView_custom.dataSource = self
    }

}

 

extension ViewController: UITableViewDataSource, UITableViewDelegate {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return cellTitle.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let customCell = tableView_custom.dequeueReusableCell(withIdentifier: cellName, for: indexPath) as! CustomCell

        customCell.imageView_custom.image = UIImage(systemName: cellTitle[indexPath.row])
        customCell.label_custom.text = cellTitle[indexPath.row]

        return customCell
    }
    
}

cellName = String 형식으로, 위에서 정의한 Table View Cell의 Identifier 입니다. 저는 편의상 "customCell"로 지정하였으므로 cellName에는 "customCell" 대입해주고 있습니다.

cellTitle = Array 타입으로, ImageView의 iamge 정보를 나타냅니다. 더불어 Label의 text에 image값을 String 형식으로 넣어주기 위한 변수입니다.

 

viewDidLoad 함수의 [tableView_custom.delegate = self]

 - 기존에 선언해둔 TableView - tableView_custom에 delegate를 지정합니다.(self 즉, 소스 하단에 extension(확장)한 UITableViewDelegate의 정보를 대입합니다.)

viewDidLoad 함수의 [tableView_custom.dataSource = self]

 - 기존에 선언해둔 TableView - tableView_custom에 dataSource를 지정합니다.(self 즉, 소스 하단에 extension(확장)한 UITableViewDataSource의 정보를 대입합니다.)

 

extension ViewController class의 [func tableView(func tableView(UITableView, numberOfRowsInSection: Int) -> Int] 함수

 - 화면에 보여줄 row의 갯수를 나타냅니다. 여기서는 cellTitle.count 이므로 선언된 cellTitle 변수에는 3개의 값이 들어 있으므로 3을 return하게 됩니다.

extionsion ViewController class의 [func tableView(UITableView, cellForRowAt: IndexPath) -> UITableViewCell] 함수

 - 화면에 보여줄 cell을 지정합니다. function내에는 cellName("customCell")의 customCell을 선언했고, 이 customCell에 있는 Component imageView_custom과 label_custom의 정보(이미지, 텍스트)를 변경해주고 있습니다. (즉, Cell 내부 이미지와 텍스트는 짝이 되어 보일겁니다.)

 

 

CustomCell.swift

import UIKit

class CustomCell: UITableViewCell {

    @IBOutlet weak var imageView_custom: UIImageView!
    @IBOutlet weak var label_custom: UILabel!
    @IBOutlet weak var button_custom: UIButton!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        // Configure the view for the selected state
        
    }

}

앞서 마우스 우클릭 드래그를 통해 선언해준 Componet 정보들이 담겨있습니다.

Cell 내부 ImageView -> imageView_custom

Cell 내부 Label -> label_custom

Cell 내부 Button -> button_custom


간단(?)하게 설명만 하려했더니 생각보다 길어져버렸네요;;;

스터디 하는 김에 겸사겸사 하긴했는데.. 내용이 너무 길어져버려서..;;;

혹시 이해안가시면 댓글 작성해주세요. 최대한 다시 설명드리겠습니다 ㅠㅠ

 

 

버전정보 (v1.0)

 - v1.0 2020.07.22 배포

 

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

 

Karzin

abbeea@naver.com


[Xcode] 에러해결 : Failed to register bundle identifier. The app identifier "~" cannot be registered to your development team because it is not available. Change your bundle identifier to a unique string to try again.


iOS개발을 하다보면 간혹 아래와 같은 문제를 만나볼 수 있습니다.

 

Showing All Messages

Failed to register bundle identifier. The app identifier "~" cannot be registered to your development team because it is not available. Change your bundle identifier to a unique string to try again.

 

위 에러에 대한 원인과 해결방안에 대해서 알아보도록 하겠습니다.


원인

또 에러..

에러만 뜨고 빌드 조차 진행이 안될건데, 해당 문제는 Bundle Identifier가 고유하지 않아 생기는 문제입니다.  (아마 이미 사용중인 경우가 거의일겁니다.)

 

 

해결

 

에러 메세지를 읽어보면 대충 이런 뉘앙스입니다.

bundle identifier의 등록을 실패했고, 앱의 identifier "~"를 사용할 수 없어 당신의 개발팀에 등록할 수 없으므로 , 당신의 bundle identifier를 고유한 문자열로 변경하고 다시 시도해보세요.

 

메세지처럼 Bundle Identifier를 변경해줌으로써 해결이 가능합니다.

(이미지의 inputbox부분을 고유한 Bundle Identifier로 변경)

 


위 에러.. 솔직히 어려운건아닌데,

저 푸릇푸릇한 개발 초보시절에는(지금도 초보지만..) 에러문장이 나와도 그냥 안되니까 당황해서 저거 하나가지고 엄청 시간잡아먹기도 했었습니다 ㅠㅠ (제가 바보라..)

그때 기억 생각나서 게시글 작성해보게되네요 ㅋㅋ;;

 

누군가에게는 도움이 되기를 바라면서..

 

 

버전정보 (v1.0)

 - v1.0 2020.07.21 배포

 

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

 

Karzin

abbeea@naver.com


Project.다원 Ensemble_개발(4)_메뉴 제작


으 항상 코딩하다보면 시간을 확인을 못하네요 ㅠㅠ

 

벌써 2시 20분입니다!!!

 

때문에 빠르게 게시글 작성하고 넘어가겠습니다!

(사실 그닥 보여줄만한게 없습..)

 


음.. 아무래도 메뉴는 그렇게 어려운부분은 아니라서 자작할 필요성을 느껴서 시작했습니다.

그리 오래걸리진 않았습니다.

다만, 일이 있어서 ㅠㅠ

후딱 보고 가시죠!

 

 - 메뉴가 닫혀있을 때

메뉴가 닫혀있을 때 (하위 요소 존재시)

* 해당화면은 하위 요소가 존재하는 경우를 나타냅니다.

 

 - 메뉴가 열려있을 때

메뉴가 열려있을 때 (하위 요소 존재시)

* 해당화면은 하위 요소가 존재하는 경우를 나타냅니다.

 

아직은 디자인이 심플하기만하고 지향하는건 다 못보여주지만,

일단 간단하게 만들어놓고 개발진행하면서 기능과 함께 차근차근 변경할 예정입니다!

 


별거아닌데 iOS 막힌부분 푸느라고 늦어졌습..

어쨌든 빨리 자야겠네요 ㅠㅠ

맨날 자는 시간이긴하지만..;;

 

+ 앞으로는 매일같이 ~되었다보다는 중간중간에 정산해서 올리도록하겠습니다. 아무래도 back단은 개발을 진행하더라도 눈에 보이지 않는 부분들인 경우가 많다보니 꼭 필요한 경우나, 문제가 있을때 해결방법등을 공유해볼까합니다!

 

버전정보 (v1.1)

 - v1.0 2020.07.21 배포

 - v1.1 2020.07.22 내용 추가

 

 

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

 

Project.다원은 개인(karzin)이 기획, 분석, 설계, 디자인, 개발, 유지보수 등

모든 부분을 혼자 맡아 진행하는 개인 프로젝트입니다.

Project.다원 Ensemble

Karzin

abbeea@naver.com


[Xcode] 에러해결 : iPhone is not available


아침부터 끙끙 앓고 있던 문제였는데,

실제 아이폰을 연결해서 테스트를 진행하려보니 iPhone is not available가 뜨고 진행이 안되는 문제가 있었습니다.

 

알고보니 Xcode와 iOS 버전이 맞지않아 그러는거라고..

(정확히는 SDK버전.)

 

오전중 계속 잡은거 치고 해결방법은 단순했는데, 저는 이걸 해결하겠다고 시간을 잡아먹기만.. (.......)

역시 사람은 모르면 검색을 해봐야합니다 ㅋㅋㅋ (저는 왜 검색안하고 계속 맥미니를 껏다키고 폰의 usb도 빼고껴고를 반복을 했는지...)

 


원인

위에서 언급한것처럼 Xcode에 있는 SDK버전이 맞지 않아서 그렇습니다.

저의 경우 금요일날 퇴근전에 아이폰을 업데이트를 진행해놓고 나갔는데 (iOS 13.5 -> iOS 13.6) 이게 원인이 되었습니다. ㅠㅠ

반나절간 재접속시키고 폰 연결해제도해보고 별짓을..

 

해결

해결방법은 쉽습니다.

1. 에뮬레이터로 테스트를 하거나,

2. iOS버전을 낮추거나 (...)

3. 위 해결방법들보다는 그냥 Xcode의 버전을 올려주는게 정답이겠죠? 

 - 찾아보니 iOS 13.6을 사용하려면 Xcode의 버전을 11.6으로 올려줘야합니다.

 - 지금 제가 사용중인 버전은 11.5이므로 Xcode의 버전올림이 필요하네요.

 

이유는 모르겠지만, 자동업데이트가 안되나봅니다.. (분명 가능했던거같았는데...)

 

저의 경우 App Store에서 직접 찾아서 다운로드 버튼눌렀습니다.

** 설치 전 혹시 모를 충돌을 방지하기 위해 켜져있는 Xcode와 에뮬레이터 그리고 폰의 연결을 해제해주세요.

 

xcode를 검색해서 설치 진행!

 


흠.. 아무래도 앞으로는 개발 테스트중일때에는 폰의 업데이트는 최대한 보류하는걸로..ㅠㅠ

 

버전정보 (v1.0)

 - v1.0 2020.07.20 배포

 

* 저작권에 위반될 수 있는 컨텐츠(이미지, 동영상 등)나 게시글은 삭제되거나 수정될 수 있습니다.

* 문제의 여지가 될 수 있는 컨텐츠의 경우 댓글 달아 주시면 빠른 시일 내에 조치하도록 하겠습니다.

* Karzin은 항상 공부중입니다. 설명이 틀리거나 잘못된 부분이 있다면 의견내주시는대로 수정하도록 하겠습니다.

 

Karzin

abbeea@naver.com

+ Recent posts