[Mission/#4-Rochelle] 3일차 미션

Rochelle0922 commented 19 hours ago

안녕하세요 몽쉘입니다! 2일차 미션에서 스토리보드에게 한방 먹고 스토리보드와 내외 중인 이 상황에서 3일차 미션을 위해 스토리보트를 삭제 세팅하였습니다.

StoryBoard 삭제 세팅

프로젝트에서 Storyboard를 사용하지 않기 때문에 Main Storyboard를 삭제해줍니다. -> Move to Trash
Project TARGETS 설정 ➡️ RochelleDevLapApp 파일 클릭 ➡️ 상단 Build Settings 선택 ➡️ filter에 "main" 검색 ➡️ UIKit Main Storyboard File Base Name 삭제
Info.plist 수정 ➡️ Info 클릭 ➡️ Scene Configuration (쉐브론 클릭) ➡️ Application Session Role (쉐브론 클릭) ➡️ Item 0 (쉐브론 클릭) ➡️ Storyboard Name 삭제

SceneDelegate 코드 작성 가장 첫 화면인 Main Storyboard를 삭제했기 때문에, 첫 ViewController를 코드로써 직접 지정 필요


func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

guard let windowScene = (scene as? UIWindowScene) else { return }

window = UIWindow(windowScene: windowScene)
window?.rootViewController = ViewController()
window?.makeKeyAndVisible()

}



세팅 완료 후 잘 구현되는지 확인차 BackgroundColor를 Blue로 변경한 상태입니다. 이상

gorgeouseowoo commented 12 hours ago

저는 단순히 코드만 삭제했는데, 스토리보드 삭제를 위해서는 추가적인 과정이 필요했군요! 저도 적용해볼께요 !!!!

shippingpark commented 12 hours ago

미션으로 넣을까 말까 고민했던 부분인데 수행하셨군요!! (따봉)

미션으로 넣지 않은 이유는, 스토리보드를 지우지 않고도 코드로 화면을 구성할 수 있기 때문입니다! 이 부분은 월요일 날 다 같이 다룹시당!! 최고!! (참고로 스토리보드 지우는 방법은 저도 늘... 헷갈리는 과정입니다 ㅎ ㅎ )

Rochelle0922 commented 10 hours ago

코드로 지출을 입력하는 ContainerView 그리기(TextField, Button 추가)

두어시간만에 돌아온 몽쉘입니다. 현재 상황을 공유하면 지출을 입력하는 View, TextField, Button을 그린 상태입니다.

🔸뷰를 만들기 위해 생각하고 찾아본 부분

1. UIKit에서 UI 요소를 만들고 화면에 나타내는 기본적인 흐름 이해 먼저 메모리에 객체를 생성한 후, 그것을 화면에 추가하여 사용자가 볼 수 있도록 코드를 설정해줘야 한다는 사실을 알게 되었습니다.

➡️실제 사용한 메모리에 객체 생성 코드

  // UI 요소 정의
  let containerView = UIView()
  let textField = UITextField()
  let button = UIButton(type: .system)

➡️실제 사용한 뷰에 추가하는 코드

view.addSubview(containerView)
containerView.addSubview(textField)
containerView.addSubview(button)

2. AutoLayout 고려 사실 오토레이아웃까지 고려해야 하나 싶어서 값을 직접 입력했는데 소들이 블로그를 보고 생각이 바껴서 오토레이아웃 고려를 하게 되었습니다. (블로그 주소 : https://babbab2.tistory.com/133)

🍩몽쉘의 생각 흐름 ➡️ 블로그 보기 전 다 값으로 기입했음 ➡️ 시뮬레이터로 확인하려고 디바이스를 누르다가 잘못 눌러 아이패드 시뮬레이터를 켜게 됌 ➡️ 아이패드로 보니 너무 작게 들어가 있는게 너무 이상하고 웃겼음 ➡️ 이거 다이나믹 뭐시기 하는거 들어본 거 같은데 찾아볼까? 하다가 소들이 블로그를 보게 됌 ➡️ 블로그를 읽으니 아 스토리보드로 할 때 간격을 조정해줬는데 왜 코드로 칠 때는 그 생각을 못했지? 하며 마음을 고쳐먹음 ➡️ 결국 오토레이아웃을 고려했다는 행복한 이야기

➡️실제 사용한 오토레이아웃 코드 중

   containerView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
      containerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
      containerView.centerYAnchor.constraint(equalTo: view.topAnchor, constant: 150),
      containerView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.9),
      containerView.heightAnchor.constraint(equalToConstant: 50)

3. 클로저? 나는 모르겠고~ 클로저를 사용해서 UI 요소를 설정하는 방식은 객체 생성과 속성 설정을 한 번에 처리할 수 있는 방법이 있다는 사실을 알았습니다. 이렇게 하면 코드가 더 간결하고, 가독성이 높아지며, 유지보수도 쉬워진다고 하더라구요? 한 번 해볼까 했는데 클로저로 쓰니까 간결해보이기는 하던데... $0 막 이렇게 쓰니까 저도 못 알아보는 이슈가,,,,ㅎㅎ

그래서 저는 UI 요소를 생성한 후에 속성을 따로 설정하는 방법을 택하기로 했습니다!(함수 방식) 이렇게 구분되어 있는게 코린이인 저는 보기가 수월하더라구요.

➡️실제 사용한 함수 방식 코드

  button.setTitle("지출", for: .normal)
    button.setTitleColor(.black, for: .normal)
    button.backgroundColor = .white
    button.layer.cornerRadius = 15

이제 대망의 TableView하러 가보겠습니다! 모두모두 화이팅

shippingpark commented 10 hours ago

^___^ 생각의 흐름을 너무 잘 알겠어요!! 마치 옆에서 지켜 본 기분!!! 넘 멋져요!!
아이패드로 시뮬레이터를 켜 본 게 신의 한 수... 오토레이아웃을 써야겠다고 생각한 일련의 흐름이 와닿숩니다!

그리고 아래와 같은 코드는 흥미로웠습니다!!

containerView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.9),

좌우 패딩을 잡아준 것이 아니라, 전체 화면 대비 비율을 잡아준 점이 그렇습니다! 앞으로도 비율 형태로 화면을 잡아야 한다면 해당 방식을 따라야겠군요ㅎㅎ

하지만 일반적으로는 좌우 패딩을 잡는 경우가 많은 것 같아요! 피그마에 제시된 디자인은 대부분 화면 가로 길이 대비 비율을 고려하여 제작되지 않고 좌우 간격을 고려한 형태가 많으니까요 ㅎㅎ

Rochelle0922 commented 10 hours ago

오! 그러고 보니 그렇네요!!! 단순히 아이패드처럼 화면이 커지면 제가 입력했던 가로 길이가 길어져야한다는 생각에 비율을 떠올리게 된 거 였는데...(비율 코드를 치고 나 좀 잘한 듯 생각도 함,,,머쓱타드) 디자인 할 때 좌우 간격을 고려해놓고 웃긴 생각을 했군요!!!! 다음 PR에 이 부분도 수정해서 올리겠습니다!!

감사합니다 보농👍🏻

gorgeouseowoo commented 9 hours ago

몽셸!!!!!!!!!!!!!

덕분에 저도 버튼에 multiplier에 적용해서 이쁜 버튼을 만들었어요🩵 아이패드로 실행해 보니 버튼이 엄청 길게 나오더라구요ㅋㅋㅋ 몽셸 you are the best

변경 전

왼쪽으로 부터 128 떨어지도록 설정

Simulator Screenshot - iPad Pro 11-inch (M4) - 2024-11-02 at 04 00 30

몽셸 PR 글을 읽은 후

전체 너비의 0.15 해당하는 크기로 설정

Simulator Screenshot - iPad Pro 11-inch (M4) - 2024-11-02 at 04 03 43

Rochelle0922 commented 7 hours ago

[Feat]TableView, Cell 생성 및 AutoLayout 변경

🔸드디어 TableView 생성

TableView 설정

🍩 몽쉘의 생각 흐름

➡️ 일단 어제 숙제로 dataSource의 존재와 셀을 재사용하는 처리가 필요하다는 사실을 인지하고 검색과 GPT에게 물어물어 코드 작성 ➡️ 이후 지출버튼을 눌렀을 때 셀에 표시가 되는 부분에 대한 예외처리를 생각함

숫자가 입력될 때 NumberFormatter.decimal를 활용해서 처리해야 함
이건 좀 의문인데 지금 상태는 숫자가 아무리 커져도 에러가 나지 않음 / 럭키비키라고 생각했지만 더 많이 적으면 ...으로 처리되니 나중에 글자수 제한이 필요할 듯

빈배열일 때 "정확히 숫자를 입력해주세요" 처리 필요함
숫자가 아니라 문자일 때도 "정확히 숫자를 입력해주세요" 처리 필요함 ➡️ 여기서 일단 빈배열이면 먼저 처리 ➡️ 빈배열이 아니라면 숫자인지 문자인지 파악 후 숫자면 숫자 출력, 아니라면 "정확히 숫자를 입력해주세요" 처리가 몽쉘의 의도 ➡️ 조건이 3개인데 if/else로 할라니 도통 뭔지 모르겠어서 GPT에게 도움 요청 ➡️ GPT가 guard문을 알려줌 -> 조건에 부합하지 않는다면 빠르게 종료시키는게 빈배열일 때 강제종료 하는게 좋아보여 guard 복사함 ➡️ 빈배열이 아닐 때 숫자인지 문자인지 파악하는 부분 처리 고민하던 중 다시 GPT에게 도움 요청 ➡️ Double(expenseText.replacingOccurrences(of: ",", with: "")): 이 코드는 입력값에서 쉼표를 제거하고, 이를 Double로 변환해서 확인하고 if let formattedNumber = formatter.string(from: NSNumber(value: number)): 입력값이 유효한 숫자일 경우, NumberFormatter를 사용하여 숫자를 포맷팅하고, 배열에 추가 else { expenses.append("정확한 숫자를 입력해주세요") }: 만약 입력값이 숫자로 변환되지 않는 경우, "정확히 숫자를 입력해주세요"처리의 순서를 알려줌

😭 어떤 처리가 필요한 지는 어제 숙제로 인해 머릿 속에 그려지는데 코드 구현이 어려워 GPT와 함께 적어보았습니다....

🔸 AutoLayout 변경

비율이 아닌 좌우 패딩값으로 변경하였습니다.(보노의 피드백)

➡️ 변경 전

containerView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.9),

➡️ 변경 후

containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 25),
containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -25),

🔸이후 작업 방향

현재 상태 TableView 생성 후 지출 버튼을 눌렀을 때 셀이 쌓이는 부분 구현 완료, 이후 처리할 예외사항도 처리 완료! 앞으로 해야할 일 셀 커스텀과 셀이 밑에서부터 위로 쌓이는 기능 구현 필요 -> 이오가 오늘 말한 공간을 위로 올리는 작업을 해볼 예정입니다.

anjiniii commented 1 hour ago

오 다들 아이패드 화면을 고려해 각 요소를 비율로 만들었군용,, 저도 늘 피그마 화면에서 양 옆 여백을 주로 고정하는 경우가 많아서 대부분 고정된 값을 두었던 것 같아요.

어라 그런데 다시 변경했군요 ㅋㅋㅋㅋㅋㅋㅋ 티나의 PR에 잠깐 언급했는데, 이 부분은 개발자와 디자이너가 함께 고민하고 고려해야할 부분 같아 보입니당

shippingpark / Cookies-DevLab