hoxy 당신 노트북 사과세요?
개요 ¶
- 맥북을 사고 macOS, iOS개발을 안하면 솔직히 좀 억울합니다 가격 개에바
- 호갱이 안되게 iOS를 공부합시다!!
개인 macbook이 있어야 참가 가능합니다ㅜ.ㅜ(애플이또ㅎㅎ)
너무너무 참가하시고 싶어하는 고주형을 위해서 6피에서 진행하기로 했습니다
- 6피 공사가 1달 더 미뤄져서 팀플실에서 할 예정입니다
- 6피 공사가 1달 더 미뤄져서 팀플실에서 할 예정입니다
커리큘럼 ¶
- 매주 주어진 과제를 해 오고, 각자의 코드를 돌아가면서 리뷰하면서 개념을 정리하는 방식으로 스터디가 진행됩니다.
- 스터디원은 매주 공식문서를 1개씩 읽어오고, 발표해야 합니다
.png ":)")
- 시간은 1시간~1시간반정도, 진도와 학습 상황에 따라 달라질 수 있음
1주차 ¶
- 웹 브라우저를 띄울 수 있는 어플 만들기
- WKWebView
- 기능 : 뒤로가기, 앞으로가기, 새로고침, 어플 껐다 키면 마지막으로 본 페이지 다시 실행
참고 문서
- 공식문서) https://developer.apple.com/documentation/webkit/wkwebview
- https://hyowonee.github.io/19-42-iOS-WKWebView.html
- https://www.spaceotechnologies.com/create-web-browser-wkwebview-ios-tutorial/
3주차 ¶
- music player만들기
- https://www.edwith.org/boostcourse-ios/project/20/content/18#evaluation
- 조건 :
* 재생 버튼을 누르면 음악을 재생하고, 일시정지 버튼으로 바뀝니다.
* 슬라이더가 움직입니다.
화면 1(재생기) - 일시정지
* 일시정지 버튼을 누르면 음악을 멈추고, 재생 버튼으로 바뀝니다.
* 슬라이더가 정지합니다.
화면 1(재생기) - 시간표현
음악이 재생됨에 따라 타임 레이블과 슬라이더의 값이 밀리세컨드 단위(0.01초)로 변경됩니다.
화면 1(재생기) - 슬라이더 동작슬라이더의 위치를 변경해 현재 재생위치를 조절할 수 있습니다.
화면 1(재생기) - 화면 초기화음악을 모두 재생하면 버튼, 레이블, 슬라이더가 맨 처음 상태로 되돌아갑니다.
기준 세부항목화면 1(재생기) - 화면구성 재생 버튼, 타임 레이블, 슬라이더가 화면 X축 중앙에 위치합니다.
또, 각각의 요소는 서로의 영역을 침범하거나 겹치지 않으며 화면 밖으로 나가지 않도록 합니다.
화면 1(재생기) - 초기값설정 타임 레이블과 슬라이더의 초기값은 0입니다.
기준 세부항목
코딩 스타일 Swift API 가이드라인에 따라 코드가 작성됐습니다.
* 옵셔널을 안전하게 사용합니다. 매개변수 등을 통해 전달된 옵셔널을 강제로 추출하는 것을 지양합니다.
*
기능 분리
* 모든 기능을 한 메서드나 타입에 몰아 작성하지 않았습니다. 기능에 따라 적절하게 타입 또는 메서드를 분리하여 작성했습니다.
코딩 스타일 Swift API 가이드라인에 따라 코드가 작성됐습니다.
- 타입(클래스, 구조체, 열거형 등) 이름
- 메서드(함수) 이름
- 프로퍼티 이름
- 변수, 상수 이름
- 중괄호 소괄호의 열림 닫힘의 줄바꿈이 일관성있게 작성되었습니다
- 필요없는 코드나 소스파일을 남겨두지 않습니다.
* 옵셔널을 안전하게 사용합니다. 매개변수 등을 통해 전달된 옵셔널을 강제로 추출하는 것을 지양합니다.
*
guard, if let 등 옵셔널 바인딩을 통해 옵셔널을 안전하게 사용합니다.기능 분리
* 모든 기능을 한 메서드나 타입에 몰아 작성하지 않았습니다. 기능에 따라 적절하게 타입 또는 메서드를 분리하여 작성했습니다.
기준 세부항목
오류 애플리케이션이 동작 도중 오류로 종료되지 않습니다.
아이콘 애플리케이션 아이콘이 정상적으로 홈화면에 표시됩니다.
오토레이아웃 다양한 기기의 가로/세로 모드에서 모두 콘텐츠를 정상적으로 확인 가능합니다.
* 오토레이아웃을 활용하여 다양한 화면상황에 대비합니다.
오류 애플리케이션이 동작 도중 오류로 종료되지 않습니다.
아이콘 애플리케이션 아이콘이 정상적으로 홈화면에 표시됩니다.
오토레이아웃 다양한 기기의 가로/세로 모드에서 모두 콘텐츠를 정상적으로 확인 가능합니다.
* 오토레이아웃을 활용하여 다양한 화면상황에 대비합니다.
4주차 ¶
- 회원가입 페이지 완성하기
- 다양한 기능!
- https://www.edwith.org/boostcourse-ios/project/20/content/18#evaluation
화면 1 - 로그인 화면
화면구성
아이디와 패스워드를 입력하는 필드가 있고, 각각 알맞은 플레이스홀더(placeholder)가 적혀있습니다.
상단에는 사이트와 관련된 이미지를 보여주며, 그 아래에는 로그인 버튼과 회원가입 버튼이 있습니다.
기능
로그인 버튼은 눌러도 아무 반응이 없으며 회원가입 버튼을 누르면 화면2로 전환됩니다.
아이디와 패스워드를 입력하는 필드가 있고, 각각 알맞은 플레이스홀더(placeholder)가 적혀있습니다.
상단에는 사이트와 관련된 이미지를 보여주며, 그 아래에는 로그인 버튼과 회원가입 버튼이 있습니다.
기능
로그인 버튼은 눌러도 아무 반응이 없으며 회원가입 버튼을 누르면 화면2로 전환됩니다.
화면 2 - 회원가입 화면(기본정보)
화면구성
상단 오른쪽에는 아이디, 패스워드, 패스워드 확인을 하는 필드가 있고, 각각 알맞은 플레이스홀더(placeholder)가 적혀있습니다.
상단 왼쪽에 이미지뷰가 있고, 그 아래에는 자기소개를 위한 텍스트뷰가 위치합니다.
텍스트뷰 아래의 왼쪽에는 '취소'버튼이 위치하며, 그 오른쪽에는 '다음'버튼이 위치합니다.
기능
상단 왼쪽의 이미지뷰를 탭하면 UIImagePickerViewController가 뜨고, 이미지를 간단히 편집해 프로필 사진으로 선택할 수 있습니다.
프로필 이미지뷰는 정사각형이며, 이미지뷰 내부에 보이는 이미지는 이미지 원래의 비율을 유지합니다.
화면 중간의 텍스트 뷰에서 자기소개를 작성할 수 있습니다.
화면 왼쪽 하단의 '취소' 버튼을 누르면 모든 정보가 지워지고 이전 화면1로 되돌아갑니다.
사용자가 모든 정보를 기입한 상태가 아니라면 화면 오른쪽 하단의 '다음' 버튼은 기본적으로 비활성화되어있으며, 프로필 이미지, 아이디, 자기소개가 모두 채워지고, 패스워드가 일치하면 '다음' 버튼이 활성화됩니다.
상단 오른쪽에는 아이디, 패스워드, 패스워드 확인을 하는 필드가 있고, 각각 알맞은 플레이스홀더(placeholder)가 적혀있습니다.
상단 왼쪽에 이미지뷰가 있고, 그 아래에는 자기소개를 위한 텍스트뷰가 위치합니다.
텍스트뷰 아래의 왼쪽에는 '취소'버튼이 위치하며, 그 오른쪽에는 '다음'버튼이 위치합니다.
기능
상단 왼쪽의 이미지뷰를 탭하면 UIImagePickerViewController가 뜨고, 이미지를 간단히 편집해 프로필 사진으로 선택할 수 있습니다.
프로필 이미지뷰는 정사각형이며, 이미지뷰 내부에 보이는 이미지는 이미지 원래의 비율을 유지합니다.
화면 중간의 텍스트 뷰에서 자기소개를 작성할 수 있습니다.
화면 왼쪽 하단의 '취소' 버튼을 누르면 모든 정보가 지워지고 이전 화면1로 되돌아갑니다.
사용자가 모든 정보를 기입한 상태가 아니라면 화면 오른쪽 하단의 '다음' 버튼은 기본적으로 비활성화되어있으며, 프로필 이미지, 아이디, 자기소개가 모두 채워지고, 패스워드가 일치하면 '다음' 버튼이 활성화됩니다.
화면 3 - 회원가입 화면(부가정보)
화면구성
화면 상단에는 전화번호를 입력할 수 있는 텍스트 필드가 있습니다.
텍스트 필드 하단에는 선택한 생년월일을 표시할 수 있는 레이블이 있으며 그 하단에는 날짜를 선택할 수 있는 피커가 있습니다.
피커 하단에는 '이전', '취소', '가입' 버튼이 위치합니다.
기능
사용자가 모든 정보를 기입한 상태가 아니라면 '가입' 버튼은 기본적으로 비활성화되어있습니다. 전화번호와 생년월일이 채워지면 '가입' 버튼이 활성화됩니다. 또, 활성화된 '가입' 버튼을 선택하면 화면1로 되돌아가고, 가입한 아이디가 화면1의 아이디 필드에 입력되어있습니다.
'이전' 버튼을 누르면 현재 정보를 저장해두고 화면2로 돌아가며, '취소' 버튼을 누르면 모든 정보가 지워지고 화면1로 돌아갑니다.
전화번호 필드를 누르면 숫자키패드가 올라옵니다.
생년월일 선택은 UIDatePicker를 활용합니다.
UIDatePicker의 숫자가 바뀌면 생년월일 레이블에 즉각 반영됩니다.
Singleton 구현
애플리케이션 구현에 필요한 싱글턴 인스턴스를 생성하여 활용합니다.
싱글턴 클래스 이름은 UserInformation으로 합니다.
화면 상단에는 전화번호를 입력할 수 있는 텍스트 필드가 있습니다.
텍스트 필드 하단에는 선택한 생년월일을 표시할 수 있는 레이블이 있으며 그 하단에는 날짜를 선택할 수 있는 피커가 있습니다.
피커 하단에는 '이전', '취소', '가입' 버튼이 위치합니다.
기능
사용자가 모든 정보를 기입한 상태가 아니라면 '가입' 버튼은 기본적으로 비활성화되어있습니다. 전화번호와 생년월일이 채워지면 '가입' 버튼이 활성화됩니다. 또, 활성화된 '가입' 버튼을 선택하면 화면1로 되돌아가고, 가입한 아이디가 화면1의 아이디 필드에 입력되어있습니다.
'이전' 버튼을 누르면 현재 정보를 저장해두고 화면2로 돌아가며, '취소' 버튼을 누르면 모든 정보가 지워지고 화면1로 돌아갑니다.
전화번호 필드를 누르면 숫자키패드가 올라옵니다.
생년월일 선택은 UIDatePicker를 활용합니다.
UIDatePicker의 숫자가 바뀌면 생년월일 레이블에 즉각 반영됩니다.
애플리케이션 구현에 필요한 싱글턴 인스턴스를 생성하여 활용합니다.
싱글턴 클래스 이름은 UserInformation으로 합니다.
참고자료 ¶
- 문법 : https://www.inflearn.com/course/스위프트-기본-문법/
iOS 공식문서
- UIStackView : https://developer.apple.com/documentation/uikit/uistackview
- stack view AutoLayout Guide : https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html
- Delegation : https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/Delegation.html
- Protocol : https://docs.swift.org/swift-book/LanguageGuide/Protocols.html#//apple_ref/doc/uid/TP40014097-CH25-ID267
강의
- 무료 ) https://www.raywenderlich.com/ios/learn
- 유료 ) 야곰의 iOS (inflearn), https://www.udacity.com/course/ios-developer-nanodegree--nd003
- https://zeddios.tistory.com/607?category=682195 : 쉽게 쓰여지고, 최근 문서 많음 갓제드
