iOYES iOYES

안녕하세요. 그린입니다🟢 오늘 포스팅은 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로 수치를 줄것인지 퍼센트로 수치를 줄것인..

안녕하세요. 그린입니다🟢 이번 포스팅에서는 계속 쭉 이어서 FlexLayout에 대해 학습해보겠습니다! 주제는 4번 항목인 Absolute Positioning입니다🙌 Absolute Positioning을 직독직해 해보면 "절대 위치"로 해석이 됩니다. 그러면 우리는 Flexbox를 컨테이너 혹은 상위 뷰에서 어떤 위치로 배치할지에 대해 알아보겠다고 짐작할 수 있겠습니다! 사용법 아래와 같이 위치를 잡기 위해서는 2가지가 있습니다. 상대적 위치로 지정하던지 아니면 절대적 위치로 지정하던지! 우리는 줄곧 이전 포스팅에서 대부분 상대적 위치를 통해 각 요소들을 잡았습니다. 그런데 이번 핵심은 절대적 위치입니다. 우선적으로 position 메서드를 사용합니다. view.flex.position(.relati..

안녕하세요. 그린입니다🟢 이번 포스팅에서는 FlexLayout의 Flexbox items properties에 대해 학습해보겠습니다🙋🏻 Flexbox 항목 속성으로 해석이 되는데요. FlexContainer도 flex 항목이기에 지금 소개해드릴 항목 속성들은 모두 컨테이너에도 적용이됩니다🙌 이번 개념은 FlexLayout 깃헙 리드미와 Naver D2 FlexLayout 사용 레퍼런스를 참고했습니다! https://github.com/layoutBox/FlexLayout GitHub - layoutBox/FlexLayout: FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementati Fle..