Library
-
NukeUILibrary 2022. 6. 2. 14:31
안녕하세요. 그린입니다🟢 이번 포스팅에서는 이미지 캐싱을 처리해주는 NukeUI에 대해 알아보겠습니다🙌 이미지 캐싱을 처리해주도록 도와주는 대표적인 라이브러리로 Kingfisher와 NukeUI가 있죠? 그리고 요즘은 애플에서 제공하는 AsyncImage로도 많이 쓰이는것 같더라구요. 저는 이중에 NukeUI가 편리하다고 생각하고 성능 상 이점도 존재하기에 이를 학습해봤어요. 그럼 NukeUI가 어떤것이고 어떻게 사용할 수 있는지 자세히 알아보시죠! NukeUI? 아시다시피 Nuke라는 라이브러리에서 파생되었어요. SwiftUI 환경에 가장 최적화시켜 LazyStack과 같이 지연 이미지 로딩을 제공해줍니다. 즉 AsyncImage와 비슷하다고 할 수 있겠어요! 기존 SwiftUI에서 Image라는 기능..
-
SwiftLintLibrary 2022. 5. 30. 08:27
안녕하세요. 그린입니다🟢 이번 포스팅에서는 SwiftLint에 대해 뿌셔보겠습니다! 코드 컨벤션을 체크해주는 툴이 필요한 이유 우선 다들 동료 개발자와 협업을 하면서 코드 컨벤션을 맞춰가는 과정들은 많이 겪으셨을거에요. 때로는 프로젝트를 처음부터 시작해서 팀원들과 킥오프 후 그라운드 룰을 수립하면서 코드 컨벤션을 같이 정의하기도하고 때로는 현업에서 프로젝트 도중에 조인하게 되었을때 이미 갖춰진 코드 컨벤션을 익히고 따르기도 합니다. 그런데 이렇게 같이 컨벤션을 정립하고 맞춰가고 문서화까지 시켜 매번 참고해도 너무 좋지만 이렇게 정해진 컨벤션들에 대해 Xcode에서 컴파일 시 어긋난 부분에 대해 알려주거나 더 나아가 강제로 컨벤션을 따르게 해준다면 너무 편하겠죠? 이럴때 SwiftLint, SwiftFor..
-
FlexLayout (7)Library 2022. 5. 26. 10:11
안녕하세요. 그린입니다🟢 이번 포스팅에서는 드디어 FlexLayout ReadMe의 마지막 섹션 Paddings와 Extra UIView methods에 대해 학습하겠습니다🙋🏻 Padding vs Margin? 저번 포스팅에서는 Margin에 대해 다뤘어요. 그런데 이번엔 Padding! 둘다 여백을 주는것은 동일한데 어떤 차이가 있을까요? 아주 아주 비슷하지만 가장 확실한 차이가 있습니다. 우선 아래 비교 그림을 보시죠! 디자인 감각이 없어서 색 조합이라던지... 아무튼 엉망이지만 이걸로 대변할 수 있습니다! 전체적인 View가 있을것이고 이게 상위 혹은 부모뷰가 될 수 있어요. 여기에 Content들이 담겨요. 그럴때 Margin은 보시다시피 Content 전체와 상위뷰간 여백을 나타냅니다. 즉 외부..
-
FlexLayout (6)Library 2022. 5. 23. 14:49
안녕하세요. 그린입니다🟢 이번 포스팅에서는 이제 거의 다왔어요..! FlexLayout 리드미 뿌시기의 마지막 바로 전 섹션인 Margins에 대해 학습해보겠습니다🙌 Margins 마진이 뭘까요? 마진은 여백을 의미합니다. 즉 해당 뷰가 어떤 뷰만큼을 기준으로 어느정도 여백을 가지고 있냐가 마진입니다. 즉 잘게 쪼개서 보면 총 뷰가 가질 수 있는 여백 방향은 4방향입니다. 위,아래,좌,우🏃🏻 이 방향에서 같은 레벨의 뷰 혹은 상위뷰와의 오프셋을 지정해줍니다. 그럼 Margin을 적용할 수 있는 메서드들에 대해 알아보시죠🙋🏻 Margins의 여러가지 메서드 1. marginTop(_ value: CGFloat) / marginTop(_ percent: FPercent) - CGFloat 혹은 퍼센트 값으로..
-
FlexLayout (5)Library 2022. 5. 20. 09:45
안녕하세요. 그린입니다🟢 이번 포스팅에서는 FlexLayout의 Adjusting the Size 목록을 독파해보겠습니다🙌 Adjusting the size? 해석하면 사이즈를 적용하다 입니다. UI 요소 및 뷰들의 레이아웃을 잡으면서 가장 중요하다고 까다로운것이 이 사이즈죠🥲 디자이너와 협업 시 피그마 등의 툴을 사용해 각 컴포넌트들이 어떤 사이즈를 가지고 있고 최대/최소 사이즈는 어떻게 설정되있는지등이 기재된걸 보고 개발자는 그걸 코드로 구현해줘야합니다. 이러한 작업이 없다면 원하는 디자인과는 다른 결과를 초래할거에요! 그렇기에 쉬울 수 있지만 가장 중요한 부분이라고 생각합니다😁 사이즈를 적용시키는 메서드 크게 3개로 나눌 수 있고 또 그 안에서 CGFloat로 수치를 줄것인지 퍼센트로 수치를 줄것인..
-
FlexLayout (4)Library 2022. 5. 16. 09:38
안녕하세요. 그린입니다🟢 이번 포스팅에서는 계속 쭉 이어서 FlexLayout에 대해 학습해보겠습니다! 주제는 4번 항목인 Absolute Positioning입니다🙌 Absolute Positioning을 직독직해 해보면 "절대 위치"로 해석이 됩니다. 그러면 우리는 Flexbox를 컨테이너 혹은 상위 뷰에서 어떤 위치로 배치할지에 대해 알아보겠다고 짐작할 수 있겠습니다! 사용법 아래와 같이 위치를 잡기 위해서는 2가지가 있습니다. 상대적 위치로 지정하던지 아니면 절대적 위치로 지정하던지! 우리는 줄곧 이전 포스팅에서 대부분 상대적 위치를 통해 각 요소들을 잡았습니다. 그런데 이번 핵심은 절대적 위치입니다. 우선적으로 position 메서드를 사용합니다. view.flex.position(.relati..
-
FlexLayout (3)Library 2022. 5. 11. 13:23
안녕하세요. 그린입니다🟢 이번 포스팅에서는 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..
-
FlexLayout (2)Library 2022. 5. 9. 17:43
안녕하세요. 그린입니다🟢 이번 포스팅에서는 지난 포스팅에 이어 FlexLayout 2탄을 부셔보려합니다! 이번 주제로는 많이 욕심내지 않고 천천히 해보자는 의미에서 Flexbox containers properties 부분을 학습해보겠습니다🙋🏻 Flexbox 컨테이너의 사용할 수 있는 속성들을 FlexLayout 리드미를 보면서 독파해보죠! direction() - 개념 단어에서도 유추할 수 있듯이 방향을 의미합니다. 스택뷰로 차곡차곡 쌓을때 어떻게 쌓을지 방향에 대해서 지정해주는것입니다. 총 4가지 방향이 있습니다. column(행, 위->아래). columnReverse(행, 아래->위), row(열, 좌->우), rowReverse(열, 우->좌) 공식문서에서 위와 같이 쉽게 그림으로 설명을 해주네..