iOYES iOYES

안녕하세요. 그린입니다🟢 이번 포스팅에서는 드디어 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..

안녕하세요. 그린입니다🟢 이번 포스팅에서는 지난 포스팅에 이어 FlexLayout 2탄을 부셔보려합니다! 이번 주제로는 많이 욕심내지 않고 천천히 해보자는 의미에서 Flexbox containers properties 부분을 학습해보겠습니다🙋🏻 Flexbox 컨테이너의 사용할 수 있는 속성들을 FlexLayout 리드미를 보면서 독파해보죠! direction() - 개념 단어에서도 유추할 수 있듯이 방향을 의미합니다. 스택뷰로 차곡차곡 쌓을때 어떻게 쌓을지 방향에 대해서 지정해주는것입니다. 총 4가지 방향이 있습니다. column(행, 위->아래). columnReverse(행, 아래->위), row(열, 좌->우), rowReverse(열, 우->좌) 공식문서에서 위와 같이 쉽게 그림으로 설명을 해주네..

안녕하세요. 그린입니다🟢 이번 포스팅에서는 FlexLayout에 대해 학습해보려합니다! 이 주제는 어느정도 범위가 커서 조금 나눠서 해보려해요! 이번 포스팅에서는 어떤건지 소개와 왜 사용되는지 서론같은 느낌 그리고 나아가 기초적으로는 어떻게 사용되는지 해보겠습니다🙌 뷰 드로잉 방식으로 어떤걸 채택하시나요? 새로 앱을 만들때 뷰를 어떻게 그릴지에 대한 고민은 항상 있습니다. SwiftUI를 쓸지 UIKit으로 사용할지 뭐 그런 당연한 고민..? 저는 기준을 미니멈 타겟이 어떻게 되느냐를 우선적으로 기준을 삼습니다. SwiftUI를 써보면서 굉장히 선언형으로 직관적이여서 쓰기 편하고 추후 동료가 팔로업 하기에도 거의 러닝커브없이 이해하기 좋았어요. 다만 제가 판단하기로는 SwiftUI를 정말 무리없이 원하는..