TREASURE408

• 

  (티스토리) 페이지 스크롤시 이미지 Fade In 효과주기 본문을 스크롤하면 이미지가 바로바로 나오게 되는데 문득 생각이 든 게 스크롤 위치에 따라 이미지가 스르륵 하고 나타나게 하고 싶다는 생각이 들었습니다. 그래서 이번에는 페이지 스크롤시 이미지 Fade In 하는 방법에 대해 알아보겠습니다. 일단 이 기능을 사용하려면 Javascript를 작성해줘야 합니다. Fade In 효과 페이지가 스크롤 되면 이미지가 스르륵 하고 나오는 효과를 사용하려면 아래와 같이 작성하면 됩니다. CSS .image { opacity:0; } 이미지의 opacity(투명도) 를 0으로 설정해줘야 합니다. Javascript $(document).ready(function() { $(window).scroll( function(){ $('image').each( function(i.. FRONT-END/CSS 2021. 4. 14.

• 

  SwiftUI : DarkMode 구현하기 - Environment .DarkMode적용 법에 대해 알아보도록 합시다. DarkMode SwiftUI에서 사용자가 DarkMode인지 LightMode인지에 따라 앱 화면을 자동으로 설정해줄 수 있는 기능이 있습니다. 이것을 사용하기 위해서는 Environment에 대한 기본적인 지식이 있어야 합니다. [SwiftUI 기초/Others] - SwiftUI : EnvironmentValues 우선 간단하게 화면에 Alert버튼과 배경화면을 설정해주겠습니다. 배경화면 및 버튼 추가 ZStack { //1.배경설정 Color.yellow .edgesIgnoringSafeArea(.all) VStack { Spacer() //2. 버튼생성 Button(action: { print("버튼이 눌렸습니다.") }, label: { Te.. SWIFTUI/Others 2021. 4. 14.

• 

  [iOS / Xcode] Snippet 사용법 - 자주쓰는 코드를 저장하자! Snipped 사용법에 대해 알아보도록 합시다. Code Snippet 란? Xcode를 통해 개발을 하다 보면 주기적으로 자주 쓰는 코드들이 존재합니다. 만약 반복적인 함수를 작성해야 할 때가 있는데 이럴 때마다 함수를 다시 작성하거나 복사 붙여 넣기를 하는 것이 귀찮고 불편할 때가 많습니다. 이럴 때 아주 간편하게 사용 할 수 있는 Snippet라는 기능을 사용하면 됩니다! 실제로 우리는 iOS를 개발할 때 부터 이 기능을 사용해왔습니다. 예를 들어 if라는 코드를 작성하면 자동완성 상자가 나타나죠. 위 이미지의 왼쪽 상단에 보이는 것 처럼 중괄호{} 가 있는 항목은 Code Snippet 입니다. 이 중에 하나를 선택하면 아래와 같은 상용구 코드가 생성됩니다. 조각을 사용하는 사용하는 유일한 방법이.. TIP/iOS & MacOS TIp 2021. 4. 8.

• 

  SwiftUI를 위한 Clean 아키텍처 목차 본 게시글은 Clean Architecture for SwiftUI 게시글을 번역한 자료 입니다. 원작자의 깃허브 : Alexey Naumov UIkit이 나온 지 벌써 11년이 되었습니다. iOS SDK 가 2008년에 출시되었을 때부터 우리는 UIKit으로 앱 개발을 해왔습니다. 그 긴 시간 동안 개발자들은 각자의 앱에 적용할 최고의 아키텍처를 고민했습니다. MVC로 시작해서 MVP, MVVM, VIPER, RIBs, VIP에 이르기까지 다양합니다. 하지만 이제 큰 변화가 찾아왔습니다. SwiftUI의 등장으로 지금까지 iOS를 위해 주로 쓰이던 아키텍처 패턴들은 역사 속으로 사라질 것입니다. 좋던 싫던 SwiftUI는 iOS 개발의 미래가 될 것입니다. 그리고 우리가 아키텍처를 설계할 때 직면.. SWIFTUI/Grammar 2021. 4. 6.

• 

  SwiftUI : @Environment 프로퍼티 래퍼 Environment 에 대해 알아보도록 합시다. Environment 앞에서 다룬 Environment수식어가 뷰의 환경 요소를 변경시키기 위한 쓰기 전용의 기능이었다면, 이번에 볼 @Environment라는 프로퍼티 래퍼는 읽기 전용으로 특정 뷰에서 EnvironmentValues의 특정 요소를 읽어와 뷰 구성에 반영할 때 사용합니다. 예를 들어, 영어, 한국어, 중국어와 같이 일반적으로 사용되는 LTR(Left to Right)환경과 아랍어나 히브리어처럼 중동지역에서 사용되는 RTL(Right to Left)언어 환경에서 뷰를 서로 다르게 표현하고 싶다고 가정해보겠습니다. 이럴 땐 Environment를 사용하여 여러가지 환경 변수 중 layoutDirection을 선택하고, 레이아웃 방향에 대한 .. SWIFTUI/Grammar 2021. 4. 6.

• 

  SwiftUI : EnvironmentValues EnvironmentValues 에 대해 알아보도록 합시다. Environment SwiftUI에서는 뷰를 구성하는 데 필요한 각종 환경 설정과 관련된 정보를 EnvironmentValues타입이 관리합니다. colorScheme, timeZone, locale, calendar, layoutDirection, sizeCategory, undoManager등 기존에는 UITraitCollection을 비롯해 다양한 클래스에서 나뉘어 사용하고 관리되던 속성들을 이제 EnvironmentValues 하나에 모두 담아서 쉽게 접근하고 관리할 수 있습니다. 이 EnvironmentValues는 프레임워크에 의해 별도로 관리되고 있으므로 어떤 뷰에서든 접근할 수 있는데, 이때 얻게 되는 값은 상위 계층의 뷰가 가.. SWIFTUI/Grammar 2021. 4. 5.

• 

  SwiftUI : EnvironmentObject '뷰간에 데이터 공유' 앞 게시물 ObservedObject를 먼저 보고 오시는것을 추천합니다. 이번 게시물에서는 앞에서 썼던 코드를 재사용 합니다. 이번에는 EnvironmentObject에 대해 알아보도록 하겠습니다. EnvironmentObject 앱의 많은 뷰와 공유해야하는 데이터의 경우 SwiftUI는 EnvironmentObject속성 래퍼를 제공합니다. 이를 통해 필요한 곳 ​​어디에서나 모델 데이터를 공유 할 수 있으며, 데이터가 변경 될 때 뷰가 자동으로 업데이트 된 상태로 유지됩니다. A View에서 데이터를 생성 후 👉🏻 B View 👉🏻 C View 로 전달 후, 최종적으로 👉🏻 D View로 전달하는 대신에, 특정 뷰에서 데이터를 생성 후 B,C,D가 전달 없이 공용으로 사용 가능 하게 할 수 있습니다... SWIFTUI/Grammar 2021. 4. 5.

• 

  SwiftUI : Preview 레이아웃을 미리 보는방법 Preview 에 대해 알아보도록 합시다. Preview 동작 과정 struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } 현재 소스 에디터에 PreviewProvider프로토콜을 준수하는 타입이 존재하는지 확인. PreviewProivder프로토콜의 필수 구현 사항인 previews 타입 프로퍼티에서 뷰 생성. 액티브 스킬의 목적지로 선택한 시뮬레이터 또는 맥에 연결한 기기의 형태로 preview container 렌더링. 리뷰 컨테이너를 직접 지정해 줄 경우 3번 에서 선택한 기기를 무시하고 해당 기기 형태로 렌더링. 따라서 가장 먼저 현재 소스 에디터 상에 띄워진 파일에 Previ.. SWIFTUI/Others 2021. 4. 5.

• 

  Swift : 기초문법 [CGSize와 CGRect의 차이점과 CGPoint] CGSize와 CGRect 둘 다 직사각형을 나타내는 데 사용할 수 있기 때문에 이름이 헷갈릴 수 있습니다. 우선 CGPoint 부터 알아보도록 하겠습니다. CGPoint 정의 : 2차원 좌표계의 점 을 포함하는 구조체. 간단하게 생각하면 X축 Y축 처럼 (1, 2) 이런 식으로 점을 찍는 것입니다. 예를 들어 1은 X좌표 2는 Y좌표를 나타냅니다. iOS에서는 이것을 CGPoint라고 합니다. CGPoint가 어떻게 구현되는지 아래에서 확인해보겠습니다. Public struct CGPoint { public var x: CGFloat public var y: CGFloat public init() public init(x: CGFloat, y: CGFloat) } CGSize 정의 : 너비와 높이 값 .. SWIFT/Grammar 2021. 4. 4.

• 

  SwiftUI : AspectRatio / GeometryReader / GeometryProxy AspectRatio / GeometryReader / GeometryProxy SwiftUI View에서 Image를 만들 때, 그것의 내용의 크기에 따라 자체의 크기를 자동으로 불러옵니다. 따라서 사진이 1000x500이면 Image view도 1000x500이 됩니다. 이것은 가끔은 사용자가 원할 때도 있지만, 대부분은 더 낮은 크기로 이미지를 보여주고 싶을 때가 있습니다. 어떻게 이미지를 사용자의 화면 너비에 맞게 만들 수 있는지 알아보도록 하겠습니다. 일단 Example 이라는 이미지를 Assets에 넣어준 후, 간단하게 코드를 입력합니다. struct ContentView: View { var body: some View { VStack { Image("Example") } } } → 프리뷰에.. SWIFTUI/Image 2021. 4. 4.

• 

  (CODE) 자동으로 두 줄로 문장을 나눠주는 메서드 문장을 나눠주는 메서드 SwiftUI로 텍스트를 작성하면 길게 구성된 문장의 텍스트를 화면에 적절하게 나타내기 위해 두 줄 또는 세 줄로 보여 주고 싶을 때가 있습니다. 예를 들어 안녕하세요 서근입니다. 저의 블로그에 찾아와 주셔서 감사합니다. 라는 문장이 있을 때 '저의'에서 '저'이라는 글자 까지가 문장의 절반에 해당됩니다. 그래서 이 글자를 기준으로 앞과 뒤에서 가장 가까운 띄어쓰기를 찾아서 문장을 두 줄로 나눕니다. 결과적으로 "안녕하세요 서근입니다. 저의" + "\n" + "블로그에 찾아와 주셔서 감사합니다." 이라는 형태로 구분되게 됩니다. 위처럼 사용하기 위해서는 메서드를 작성해야 합니다. Code /* 한 문장으로 길게 구성된 텍스트를 화면에 적장하게 나타내기위해 두 줄로 나누워 주는 기능.. USEFUL CODE 2021. 3. 31.

• 

  SwiftUI Project9 : CustomTabView (geometryReader) CustomTabView 우선 MyView 라는 SwiftUI 파일을 생성해서 위에 보이는 메인 배경 뷰를 만들어 주겠습니다. // MyView.swift import SwiftUI struct MyView: View { //타이틀과 배경색을 변수로 지정 var title: String var bgColor: Color var body: some View { ZStack { bgColor //safeArea 부분까지 채워줌 .edgesIgnoringSafeArea(.all) Text(title) .font(.largeTitle) .foregroundColor(.white) .fontWeight(.bold) } } } struct MyView_Previews: PreviewProvider { static .. PROJECT/Simple 2021. 3. 26.

• 

  (CODE) 베젤이 없는 기종과 있는 기기에 SafeArea 각각 적용법 SafeArea 적용 방법 SwiftUI 코드를 작성하면서 베젤이 없는 기종 (iPhone X 이후 기종)과 베젤이 있는 기종(iPhone 6 / 7 / 8 ...) 모두에 .edgesIgnoringSafeArea()를 적용한 frame을 사용하면 베젤이 있는 기종과 없는 기종의 화면이 달라지게 됩니다. 이럴 때에는 "iPhone 12에는 SafeArea를 적용시키고, iPhone SE에는 적용하지마!" 라고 코드를 작성해줘야 합니다. SwiftUI에는 아직 이것을 지원하지 않기때문에 UIKit을 사용해야 합니다. // bottom 0의 뜻은 베젤이 있는 기종을 뜻함 UIApplication.shared.windows.first?.safeAreaInsets.bottom == 0 이제 위 코드를 frame.. USEFUL CODE 2021. 3. 25.

• 

  (CODE) DateFormatter - 한국날짜 형식으로 Text SwiftUI의 Text 뷰에는 화면에서 날짜를 더보기 좋게 만드는 두 가지 date formatters 가 있습니다. 하나는 단일 날짜를 처리하고, 다른 하나는 날짜 범위를 처리합니다. date formatter를 대한민국의 날짜로 만들어 주기위해 작성해줘야 하는것이 있습니다. static let dateformat: DateFormatter = { let formatter = DateFormatter() formatter.dateFormat = "YYYY년 M월 d일" return formatter }() 이렇게 dateformat을 만들어주고, 이제 Text로 출력을 해줘야 하는데 오늘의 날짜를 우선 생성해줘야 합니다. var today = Date() var body: some View .. USEFUL CODE 2021. 3. 23.

• 

  SwiftUI: 탭하여 키보드 숨기는방법 - hideKeyboard() 키보드를 숨기는 방법 TextField 등 바깥 쪽을 탭하여 Storyboard와 SwiftUI 앱 모두에서 키보드를 쉽게 해제하는 방법을 알아 보겠습니다. SwiftUI 1. 편의상 새로운 Swift 파일을 생성해서 hideKeyboard extension을 생성해주겠습니다. import Foundation import SwiftUI extension UIApplication { func hideKeyboard() { guard let window = windows.first else { return } let tapRecognizer = UITapGestureRecognizer(target: window, action: #selector(UIView.endEditing)) tapRecognizer.c.. USEFUL CODE 2021. 3. 22.