본문 바로가기

728x90

🍎 iOS138

[🧩 Creative Coding] 컬러풀한 물결 웨이브 만들기(feat. Interactive Developer) 안녕하세요 Foma 💻 입니다! 오늘은 저번에 줄에 매달려 흔들리는 상자 만들기 에 이어서 인터랙티브 디벨로퍼님의 튜토리얼 움직이는 웨이브를 Swift로 구현한 것을 정리해보려고 합니다! 바로 시작할게요~ 아래는 인터랙티브 디벨로퍼 김종민님의 튜토리얼 영상입니다. Preview 1. S자 곡선 그리기 S자 곡선을 그리기 위해서 시작과 끝을 정해주고 사이에 두 점이 필요합니다. 그리고 사이의 점을 위로 당기거나 아래로 당겨주면 아래와 같은 S자 곡선이 그려집니다. 2. 움직이는 웨이브 만들기 연결된 선의 사이 두 점을 위 아래로 이동시키면 웨이브가 움직이는 것처럼 보이겠죠? 3. 여러 웨이브 만들기 우선 시작과 끝을 아래와 같이 두 점으로 정해줍니다. 그리고 그 사이에 있는 점 4개를 1,2,3,4라고 부.. 2021. 12. 16.

[🧩 Creative Coding] 줄에 매달려 흔들리는 상자 만들기 (feat. Interactive Developer) 안녕하세요 Foma 💻 입니다! 오늘은 줄에 매달려 흔들리는 상자를 만들어 볼건데요. 이건 제가 존경하는 개발자이기도 한 인터랙티브 디벨로퍼 김종민님의 유튜브 채널에 올라온 튜토리얼 중 하나인데요. 예전부터 이런 창의적인 코딩, 예술적인 코딩을 하고싶은 욕심이 많았었는데 이번 기회에 김종민님을 따라서 구현해보려고 합니다. 위 영상을 보며 나름 제 방식대로 Swift를 사용해서 구현해보았습니다. 바로 시작할게요~ View 먼저 상자와 빨간 점을 UIView로 세팅해줍니다. (저는 상자 가운데에 제 이름을 넣어서 보여줄 거기 때문에 label도 넣었습니다.) let square:UIView = { let view:UIView = UIView() view.backgroundColor = .systemCyan .. 2021. 11. 23.

[SwiftUI] @State란? 안녕하세요 Foma 💻 입니다! 요즘 SwiftUI 공부를 하고 있는데 @State가 많이 쓰이긴 하는데 뭔지 정확히는 모르겠더라구요. 그래서 @State에 대해서 정확히 정리해보려고 합니다! 바로 시작할게요~ @State 란? 애플 공식 문서에는 아래와 같이 설명합니다. 해석해보면 SwiftUI에서 관리하는 값을 읽고 쓸 때 사용하는 것이라고 하네요. 개요를 살펴보면 아래와 같습니다. 1. 상태값이 변경되면 View를 다시 계산하고 업데이트 합니다. 2. 인스턴스 값이 아니라 값을 읽고 쓰는 수단입니다. 3. 주의할 점은 뷰의 바디 안에서 또는 뷰에서 호출한 메소드에서만 접근해야 하므로 뷰의 클라이언트가 접근하지 못하도록private로 선언해야 합니다. 4. 사용할 때는 $와 함께 사용하면 됩니다. 구.. 2021. 11. 7.

[iOS/UI] 이미지 줌으로 확대/축소하기(feat. 스크롤뷰) 안녕하세요 Foma 💻 입니다! 오늘 알아볼 것은 이미지를 확대하는 방법입니다. 바로 시작할게요~ Storyboard 레이아웃은 아래와 같이 스크롤뷰에 이미지뷰가 포함되게 해주세요. ViewController 먼저 이미지뷰와 스크롤뷰를 연결해주세요. @IBOutlet weak var imageView: UIImageView! @IBOutlet weak var scrollView: UIScrollView! 초기 세팅은 아래와 같이 해주세요. 1. 이미지뷰의 이미지를 원하는 것으로 세팅해줍니다. 2. 스크롤뷰의 딜리게이트를 현재 뷰컨트롤러로 설정해주세요. (아직 오류가 날거에요.) 3. 스크롤뷰의 처음 줌스케일을 정해줍니다. (따로 설정하지 않으면 1.0입니다.) 4. 스크롤뷰의 최소 줌스케일을 정해줍니다... 2021. 11. 3.

[Design Pattern] MVVM(Model - View - ViewModel) 패턴이란? (feat. Swift) 안녕하세요 Foma 💻 입니다! 오늘은 정말 오랜만에 디자인 패턴을 정리하게 되었는데요. 그 중에서 가장 인기(?)있고 핫한 MVVM 디자인 패턴을 다뤄보려고 합니다. (SwiftUI 또한 기본 디자인 패턴으로 MVVM을 사용합니다.) 바로 시작할게요~ MVVM(Model - View - ViewModel)패턴이란? 🧐 MVVM은 하나의 소프트웨어 아키텍처 패턴 으로 GUI 코드로 구현하는 그래픽 사용자 인터페이스(뷰)의 개발을 비즈니스 로직 또는 백엔드 로직(모델)로부터 분리시켜서 뷰가 어느 특정한 모델 플랫폼에 종속되지 않도록 해준다. MVVM의 뷰 모델은 값 변환기인데, 이는 뷰 모델이 모델에 있는 데이터 객체를 노출(변환)하는 책임을 지기 때문에 객체를 관리하고 표현하기가 쉬워진다는 것을 의미한다.. 2021. 10. 19.

[iOS/Framework] Quick/Nimble이 뭘까? (feat. 사용법) 안녕하세요 Foma 💻 입니다! 테스트 주도 개발을 찾아보다가 우연히 많은 개발자분들이 Quick과 Nimble을 사용하고 있다는 것을 알게 되었습니다. 그래서 오늘은 Quick과 Nimble이 어떤 것이고 어떻게 사용하는지 알아보려고 합니다. 바로 시작할게요~ Quick 먼저 Quick은 아래와 같이 자신들을 소개하고 있습니다. RSpec, Specta,Ginkgo에서 영감을 받은 Swift 및 Objective-C를 위한 행동 중심 개발 프레임워크입니다. 즉 iOS 전용 BDD 프레임워크라는 것이죠. 정말 놀랍게도 한국어 버전으로 문서가 제공되어 있어 구체적으로 궁금하신 분들은 여기에서 읽어보시길 바랍니다. GitHub - Quick/Quick: The Swift (and Objective-C) te.. 2021. 8. 31.

[RIBs] AddMemo 구현하기 (메모 추가하기) 안녕하세요 Foma 💻 입니다! 저번 시간엔 메모를 수정하고 삭제하는 것까지 구현했는데요. 오늘은 AddMemoViewController를 구현하고 메모를 추가하는 것을 구현해보도록 하겠습니다. 바로 시작할게요~ AddMemoRIB 스토리보드와 뷰컨트롤러를 포함한 AddMemoRIB을 만들어주세요. AddMemoViewController.storyboard AddMemoViewController는 숫자를 입력할 텍스트필드와 추가버튼을 눌러줍니다. 텍스트필드엔 숫자만 들어가야하므로 keyboard type을 numberPad로 만들어줍니다. StoryboardInstantiate 새로운 스토리보드 뷰인 AddMemoViewController를 enum에 추가해줍니다. enum Storyboard: Stri.. 2021. 8. 26.

[RIBs] Memo 삭제,수정 구현해보기 안녕하세요 Foma💻 입니다! 저번 시간에 Memo까지 이동해서 화면을 보여주는 것까지 구현했었는데요. 오늘은 Memo화면에서 일어나는 삭제,수정을 구현해보도록 하겠습니다. 바로 시작할게요~ MemoViewController.storyboard 스토리보드 화면 구성은 아래와 같습니다. 뷰컨트롤러에 테이블뷰를 넣어주고 테이블뷰 셀은 MemoTableViewCell을 따로 만들어주었습니다. 테이블뷰셀은 정보를 표시해줄 Label,삭제버튼.더하기버튼으로 구성되어있습니다. Memo 메모는 간단하게 숫자만 가지고 있는 객체로 만들어줍니다. struct Memo { let number:Int } MemoData 원래 서버와 통신을 해서 데이터를 가져와야하지만...귀찮으니깐 .. 전역으로 선언한 데이터를 미리 세팅해.. 2021. 8. 26.

[RIBs] Router를 이용해 화면 전환해보기 (feat. Memo) 안녕하세요 Foma👟 입니다! 오늘은 RIBs 아키텍처를 사용하여 화면 전환하는 법에 대해서 알아보도록 하겠습니다. 기존 Uber의 튜토리얼을 따라하려고 했으나... 저는 잘안되더라구요... 그래서 다른 좋은 튜토리얼이 없을까? 하고 열심히 찾아보다가 SimpleMemo를 RIBs로 구현한 튜토리얼 찾게되었습니다. GitHub - eunjin3786/SimpleMemo-RIBs: SimpleMemo를 RIBs로 바꿔보자 :-) SimpleMemo를 RIBs로 바꿔보자 :-). Contribute to eunjin3786/SimpleMemo-RIBs development by creating an account on GitHub. github.com 전 포스팅에서 RootRIB에서 LoggedOutRIB을.. 2021. 8. 24.

[RIBs] Interactor로 비니지스 로직 처리해보기 (feat. 초기세팅) 안녕하세요 Foma 👟 입니다! 저번 글에서 RIBs 에 대한 이론을 다뤘는데요. (혹시 안보신 분들은 여기 에서 보고 와주세요~) 오늘은 Uber에서 직접 제공하는 튜토리얼을 한번 따라해보면서 구현해보려고 합니다! 바로 시작할게요~ 프로젝트 생성 가장 먼저 RIBs 튜토리얼을 따라할 프로젝트를 생성해줘야겠죠? 저는 RIBs Example로 이름 짓겠습니다. Pod init & install 저는 CocoaPod을 이용해서 RIBs를 설치하도록 하겠습니다. 터미널에서 프로젝트가 있는 경로로 이동해 pod init을 해주시면 pod file이 생길거에요. 팟파일에 아래 코드를 추가합니다. (버전은 바뀔 수 있으니 공식 깃헙에서 확인해주세요!) pod 'RIBs', '~> 0.9' 추가한 다음 pod ins.. 2021. 8. 18.

[Design Pattern] RIBs란?(feat. Uber) 안녕하세요 Foma👟 입니다! 오늘은 Uber에서 만든 프레임워크인 RIBs에 대해서 알아보도록 하겠습니다. iOS계에서 아주 고수이신 '민소네'님도 여러 디자인 패턴을 거쳐서 RIBs에 정착하게 되었다고 하고 또 많은 회사에서 RIBs 프레임워크를 사용하고 있더라구요. 그래서 어떤 점이 장점이고 또 어떻게 사용하는지에 대해서 다뤄보도록 하겠습니다! 바로 시작할게요~ RIBs란? 공식 깃헙에선 이렇게 소개합니다. RIBs는 Uber의 모바일 크로스 플랫폼 아키텍처 프레임워크입니다. RIB이라는 이름은 이 아키텍처의 핵심 구성 요소인 Router, Interactor 및 Builder의 약어입니다. 이 프레임워크는 많은 수의 엔지니어와 중첩 상태가 있는 모바일 앱을 위해 설계되었습니다. 제공 RIBs 아키.. 2021. 8. 18.

[iOS] Code Snippet 사용해보기(feat. 코드 자동완성) 안녕하세요 Foma 👟 입니다! 오늘은 Xcode에서 원하는 코드를 단축어만 입력하면 자동으로 완성해주는 Code snippet에 대해서 알아보겠습니다. 바로 시작할게요~ Code Snippet이란? 코드 스니펫은 자주 쓰는 코드들을 미리 작성해두고 단축어를 이용해서 간편하게 코드를 완성할 수 있는 아주 유용한 기능입니다. 평소에 guard문이나,switch문을 입력하면 아래와 같이 뜨는걸 많이 보셨을거에요. Guard Statement,Switch Statement를 엔터를 하면 아래와 같이 자동으로 코드가 입력되는 것이 바로 코드 스니펫입니다. Code Snippet 사용해보기 이미 만들어진 코드 스니펫이 많지만 자주 쓰는 코드는 모두 다르잖아요? 이제 코드 스니펫을 커스텀에서 사용하는 방법에 대해서.. 2021. 8. 17.

이전 1 2 3 4 5 ··· 12 다음

728x90

티스토리툴바