iOYES iOYES

안녕하세요. 그린입니다🟢 이번 포스팅에서는 아주 예전부터 궁금했었는데 까먹고 있던 라이브러리 하나 보고 가려고합니다ㅎㅎ 바로 SkeletonUI 라는 외부 라이브러리입니다. 데이터를 받아올때 패칭이 완료되기전에 빈 공간으로 UI를 보여주는것보다 아래와 같은 이러한 데이터가 들어올 영역에 대해 뼈대를 잡는것이라 보면 될것 같아요. 이로 인해 조금 더 자연스러운 UI 경험을 시켜줄 수 있으며 빈 뷰로 나오면 버그라고 인식하기 쉬운 반면 이런것들을 적용시켜두면 로딩중이구나~ 라고 인식할 수 있어 사용자 경험에 더 좋은 영향을 끼칩니다🙌 그럼 이걸 쉽게 구현해놓은 SkeletonUI에 대해 알아보시죠! 아마 아주 간단할것 같아요 이번 포스팅은ㅎㅎ SkeletonUI? 공식 리드미에서의 설명이 아주 간단히 되어 ..

안녕하세요. 그린입니다🟢 이번 포스팅에서는 코코아팟으로 라이브러리를 사용할때 배포 타겟 관련하여 컴파일 오류가 나는 현상을 해결해보려합니다! 에러 현상 우선 증상은 아래와 같습니다. 사용하려는 라이브러리들을 코코아팟으로 의존성 관리를 해주고 있는 상태입니다. 그래서 모두 Podfile에 잘 정의되어 있을것이고 엑스코드에서 컴파일 할때 아래와 같이 타겟 관련 오류가 나타납니다. Alamofire 라이브러리로 예를 들겠습니다! 예를 들자면 이래요! 알라모파이어를 사용하는데 pod install 시에 해당 라이브러리의 최신 메인 반영된 버전을 다운받겠죠? 그런데 에러를 보면 해당하는 코드들은 다 "iOS 10 이상부터 사용할 수 있다"라고 알려주는걸 볼 수 가 있어요. 그럼 문제는 뭐냐?! 에러 원인 바로 아..

안녕하세요. 그린입니다🟢 오늘 포스팅은 R.swift라는 라이브러리에 대해서 알아보려합니다🙌 R.swift? R.swift가 뭘까요? 이름만 들어도 아예 감이 오지 않고 생소하죠. 공식 리드미에서는 Swift 프로젝트에서 이미지, 폰트, 컬러와 같은 유형의 자동 완성 리소스를 생성해 사용할 수 있다라고 장점이 어필되면서 설명을 하고 있습니다. 즉 필요한 에셋 등의 리소스를 직접 복잡하게 사용하는것이 아닌 자동 완성과 강한 타입을 통해 편하게 사용할 수 있는겁니다. R.swift 적용 예시 예를들어 기존에 프로젝트서 파일에 이미지, 폰트, 컬러, 뷰, 문자열 등을 넣고 사용할때는 아래처럼 사용하셨을거에요. let icon = UIImage(named: "settings-icon") let font = UI..

안녕하세요. 그린입니다🟢 이번 포스팅에서는 이미지 캐싱을 처리해주는 NukeUI에 대해 알아보겠습니다🙌 이미지 캐싱을 처리해주도록 도와주는 대표적인 라이브러리로 Kingfisher와 NukeUI가 있죠? 그리고 요즘은 애플에서 제공하는 AsyncImage로도 많이 쓰이는것 같더라구요. 저는 이중에 NukeUI가 편리하다고 생각하고 성능 상 이점도 존재하기에 이를 학습해봤어요. 그럼 NukeUI가 어떤것이고 어떻게 사용할 수 있는지 자세히 알아보시죠! NukeUI? 아시다시피 Nuke라는 라이브러리에서 파생되었어요. SwiftUI 환경에 가장 최적화시켜 LazyStack과 같이 지연 이미지 로딩을 제공해줍니다. 즉 AsyncImage와 비슷하다고 할 수 있겠어요! 기존 SwiftUI에서 Image라는 기능..

안녕하세요. 그린입니다🟢 이번 포스팅에서는 SwiftLint에 대해 뿌셔보겠습니다! 코드 컨벤션을 체크해주는 툴이 필요한 이유 우선 다들 동료 개발자와 협업을 하면서 코드 컨벤션을 맞춰가는 과정들은 많이 겪으셨을거에요. 때로는 프로젝트를 처음부터 시작해서 팀원들과 킥오프 후 그라운드 룰을 수립하면서 코드 컨벤션을 같이 정의하기도하고 때로는 현업에서 프로젝트 도중에 조인하게 되었을때 이미 갖춰진 코드 컨벤션을 익히고 따르기도 합니다. 그런데 이렇게 같이 컨벤션을 정립하고 맞춰가고 문서화까지 시켜 매번 참고해도 너무 좋지만 이렇게 정해진 컨벤션들에 대해 Xcode에서 컴파일 시 어긋난 부분에 대해 알려주거나 더 나아가 강제로 컨벤션을 따르게 해준다면 너무 편하겠죠? 이럴때 SwiftLint, SwiftFor..

안녕하세요. 그린입니다🟢 이번 포스팅에서는 드디어 FlexLayout ReadMe의 마지막 섹션 Paddings와 Extra UIView methods에 대해 학습하겠습니다🙋🏻 Padding vs Margin? 저번 포스팅에서는 Margin에 대해 다뤘어요. 그런데 이번엔 Padding! 둘다 여백을 주는것은 동일한데 어떤 차이가 있을까요? 아주 아주 비슷하지만 가장 확실한 차이가 있습니다. 우선 아래 비교 그림을 보시죠! 디자인 감각이 없어서 색 조합이라던지... 아무튼 엉망이지만 이걸로 대변할 수 있습니다! 전체적인 View가 있을것이고 이게 상위 혹은 부모뷰가 될 수 있어요. 여기에 Content들이 담겨요. 그럴때 Margin은 보시다시피 Content 전체와 상위뷰간 여백을 나타냅니다. 즉 외부..

안녕하세요. 그린입니다🟢 이번 포스팅에서는 이제 거의 다왔어요..! FlexLayout 리드미 뿌시기의 마지막 바로 전 섹션인 Margins에 대해 학습해보겠습니다🙌 Margins 마진이 뭘까요? 마진은 여백을 의미합니다. 즉 해당 뷰가 어떤 뷰만큼을 기준으로 어느정도 여백을 가지고 있냐가 마진입니다. 즉 잘게 쪼개서 보면 총 뷰가 가질 수 있는 여백 방향은 4방향입니다. 위,아래,좌,우🏃🏻 이 방향에서 같은 레벨의 뷰 혹은 상위뷰와의 오프셋을 지정해줍니다. 그럼 Margin을 적용할 수 있는 메서드들에 대해 알아보시죠🙋🏻 Margins의 여러가지 메서드 1. marginTop(_ value: CGFloat) / marginTop(_ percent: FPercent) - CGFloat 혹은 퍼센트 값으로..

안녕하세요. 그린입니다🟢 이번 포스팅에서는 FlexLayout의 Adjusting the Size 목록을 독파해보겠습니다🙌 Adjusting the size? 해석하면 사이즈를 적용하다 입니다. UI 요소 및 뷰들의 레이아웃을 잡으면서 가장 중요하다고 까다로운것이 이 사이즈죠🥲 디자이너와 협업 시 피그마 등의 툴을 사용해 각 컴포넌트들이 어떤 사이즈를 가지고 있고 최대/최소 사이즈는 어떻게 설정되있는지등이 기재된걸 보고 개발자는 그걸 코드로 구현해줘야합니다. 이러한 작업이 없다면 원하는 디자인과는 다른 결과를 초래할거에요! 그렇기에 쉬울 수 있지만 가장 중요한 부분이라고 생각합니다😁 사이즈를 적용시키는 메서드 크게 3개로 나눌 수 있고 또 그 안에서 CGFloat로 수치를 줄것인지 퍼센트로 수치를 줄것인..