이전에 동아리에서 진행하던 프로젝트를 다시 리펙토링하는 시간을 갖기로 했다.

전에는 3주라는 짧은 시간동안 모두 구현을 해야 했기 때문에 코드가 탄탄하지 않았고, 뿐만 아니라 난생 처음 써보는 SwiftUi와 혼용해야 했기에 코드를 다시 뜯어볼 필요가 있었다.

SwiftUI를 사용해야 했던 이유는, screenTime API를 사용해야 했기 때문이다.

당시에는 Github에서 누군가 사용해둔 screenTime API를 참고해서 개발을 진행했었는데, 공부할 시간조차 없다고 느껴졌기에 제대로 이해하지 못한채 프로젝트에 반영해버렸다.

이번에는 다시 더 탄탄하게 만드는만큼, 제대로 공부하고, screenTime API 마스터가 돼야 겠다.

오늘은 screenTime API를 프로젝트에 반영하기에 앞서, 해당 API에는 무엇이 있는지, 어떤 기능이 있는지, 어떻게 사용하는지 등을 공부하고 정리하고자 한다.

https://developer.apple.com/videos/play/wwdc2021/10123/

위 공식문서를 참고하였다.

ScreenTime API란?

자꾸 공식문서에서 강조하는 부분이 있었다. 

바로 맞춤형 부모 통제 기능을 지원한다는 것이었는데, 해당 내용을 강조하고 있다.

이 API는 크게 3가지로 나뉜다.

1. DeviceActivity

2. FamilyControls

3. ManagedSettings

차근차근 하나씩 공부해보자 !

1. DeviceActivity란?

https://developer.apple.com/documentation/DeviceActivity

이 Framework는 말 그대로, 기기 활동을 모니터링하기 위함이다.

이 프레임워크는 다음과 같은 기능을 제공한다.

1. 사용자의 앱 및 웹사이트 활동을 모니터링할 수 있도록 하고,

2. 프라이버시를 보호하는 방법을 제공한다.

구체적인 상황을 예로 들어보면,

사용자가 잠자리에 들어야하는 시간 동안 기기 활동을 모니터링하도록 취침 시간을 설정할 수 있다.

즉, 더 확장해보면, 활동 일정이 시작되거나 끝나기 전에, 혹은 활동이 미리 정의된 한계에 도달할 때 경고 혹은 알림을 받을 수 있다.

이는 계속 사용 시간과 활동을 모니터링하여 사용자가 특정 한계에 도달했을 때를 인지할 수 있다는 것이다.

내가 구현해야 하는 기능 중 하나인, 특정 앱을 특정 시간 사용했을 때 사용자가 이를 인지하게 하는 기능을 구현하기 위해서는 해당 framework의 기능이 무조건적으로 필요하다 !

2. FamilyControls란?

이 framework는 말 그대로, 처음에 계속 강조했던 부모의 통제 권한을 위한 것이다.

이 부분은 내가 진행하는 프로젝트에서 사용하지 않을 것 같지만, 자꾸 강조하니 짧게나마 정리를 해봐야겠다.

근데 지난 개발에서는 이 framework도 사용했던 것 같은데, screenTime을 설정하려면 1차적으로 필요한 framework인지 잘 모르겠다.

추후 직접 구현하다보면 알게 되겠지?

Family Sharing group

이 framework는 부모가 자녀의 앱 사용을 통제하기 위함이 목적이다.

이를 위해서는, 부모의 통제 권한 할 수 있는 승인이 필요한데 이를 위해서는 자녀과 같은 가족 공유 그룹에 속해있어야 한다.

즉, 자녀와 부모가 같은 가족 공유 그룹(Family Sharing group)에 속해 있어야 부모가 자녀의 앱 사용을 통제할 수 있다는 것이다.

이러한 승인 과정은, 시스템에서 자녀의 기기에 인증 sheet를 표시하고, 부모나 보호자가 이에 대한 권한을 승인 또는 거부할 수 있다.

그리고 그 결과를 앱의 AuthorizationCenter로 전달한다.

AuthorizationCenter

이 framework에서 AuthorizationCenter는 꽤나 중요한 역할을 한다.

부모가 권한을 승인 또는 거부할 수 있고, 사용자(즉, 자녀)의 승인 또한 필요한데 이 권한 결과 또한 AuthorizationCenter로 전송한다.

즉, 정리하면 쉽게 사용자를 부모와 자녀로 나눠보자.

이 때, 같은 가족 공유 그룹에 속한 부모와 자녀는 각각 권한에 대한 승인이 필요하다.

부모과 자녀가 권한을 승인 또는 거부했는지에 대한 응답 결과가 AuthorizationCenter로 모두 전송되어 처리된다는 것이다.

주요 기능

이 framework의 주요 기능은 다음과 같다.

1. 부모나 보호자로부터 인증된 자녀(사용자)가 부모 통제 설정을 우회할 수 있는 행동을 하지 못하도록 방지한다.

2. 기기에 부모나 보호자가 인증한 통제 앱이 하나 이상 있을 경우, 사용자는 iCloud에서 로그아웃 할 수 없다.

즉, 자녀는 부모 통제 아래 있는 앱을 삭제할 수 없으며, 통제를 벗어날 수 없다는 것이다.

자녀들은 정말 싫어할만한 framework이지만, 부모님들은 상당히 좋아하실.. 그런 framework이다.

3. Manage Settings

Managed Settings는 사용자가 자신의 기기에서 특정 설정 및 기능에 대한 접근을 제한할 수 있는 프라이버시 보호 방식을 제공한다.

사용자의 허가를 받으면, 다음과 같은 것들을 할 수 있다.

1. 미디어 콘텐츠 표시 제한

2. 앱 구매 제한

3. 암호 설정을 잠그고, 다른 기기 동작을 구성할 수 있다.

처음 배포를 준비해보는 나는,,,

디버깅 모드와 릴리즈 모드가 따로 있다는 것을 몰랐다.

순탄하게 test flight까지 등록하고, 설레는 마음으로 앱을 설치해 실행해봤는데

웬걸,,,

가장 중요한 탭바가 화면에 보이지 않는다.

아ㅏ... 어쩌지..

배포 경험이 있는 친구에게 물어봤다.

🤯 : 테플에 등록했는데 개발할때랑 다르면 어떡해?

😏 : 뭘 어떡해 다시 수정해야지

🙁 : (아오) 어떻게 그걸 재현하는데,,

🤔 : release 모드로 빌드하는거 있을걸? flutter에서는 flutter run —release하면 되던데 너네도 있을걸?

이렇게 할게 된 release 모드 빌드..

어떻게 하냐면, xcode의 상단에 있는 Product 에서 Scheme > Edit Scheme을 하고, 

Build Configuration을 Debug -> Release로 바꿔주면 된다 !

내 경우, 이렇게 해도 여전히 탭바가 안보였지만,,

이건 무슨 문제인지 더 찾아봐야 할 듯 하다.

어쨌든 배포된 버전으로 빌드하고 싶다면, 이렇게 Build Configuration을 바꿔주면 된다 !

여러 개발자가 하나의 저장소에 작업 할 때, 보다 효과적으로 협업하기 위해 git branch 에 대한 규칙을 정하고 저장소를 잘 활용하기 위한 workflow 를 정의하는 것을 바로 git branch 전략이라고 한다.

개발을 할 때, 추가된 기능이나 수정사항이 서로 영향을 주지 않고, 독립적으로 동시에 진행할 수 있도록 한다. 또한, 각 브랜치가 특정 작업을 진행하고, 필요한 경우 해당 작업 단위의 Rollback이 가능하기에 프로젝트 관리의 유연성을 향상시킬 수 있다.

이러한 전략은 원하는 버전 단위로 관리할 수 있도록 하여 프로젝트의 관리와 배포의 안정성을 높여준다.
Branch 전략은 다음과 같은 3가지가 있다.
1️⃣ Git flow
2️⃣ Github Flow
3️⃣ Gitlab flow

1️⃣ Git flow

브랜치 종류

1. master: 제품 출시 버전을 관리하는 메인 브랜치
2. develop: 다음 출시 버전을 위해 개발하는 브랜치
3. feature: 새로운 기능을 개발하는 브랜치
4. release: 다음 출시 버전을 준비하는 브랜치
5. hotfix: 출시된 제품의 버그를 고치기 위한 브랜치

Git Flow를 활용한 개발 진행 흐름

1. 신규 기능 개발은 develop 브랜치를 기준으로 한 feature 브랜치를 따서 작업
2. 작업이 완료된 feature 브랜치는 develop 브랜치로 병합.
   • PR을 통해 리뷰 후 병합하는 방식
3. 배포를 위한 준비는 다음 출시 버전을 위해 개발중인 develop 브랜치에서 release 브랜치를 따서 한다.
   • 만약, 해당 과정에서 버그가 발견된다면, release 브랜치에서 바로 반영
4. 테스트 후, 일정 주기로 master 브랜치로 병합하여 제품 출시
5. 배포 이후, release 브랜치에서 발견되지 못한 새로운 버그는 main 브랜치에서 hotfix 브랜치를 판 후, hotfix 브랜치에서 바로 고친 후 main으로 병합
6. hotfix 브랜치에서 고치고, main 브랜치에 병합 되었다면, 이를 develop 브랜치에도 병합

특징

• release와 hotfix 브랜치를 통해 명확한 배포 절차를 갖추고 있다.
• 다양한 종류의 브랜치를 사용한다.
• 복잡한 프로젝트나 대규모 팀에서 사용하기 적합하다.
• 복잡성과 Control을 가지고 있어 특정 기능이나 수정을 빠르게 배포해야 할 경우 등에서 유연성이 떨어짐.

2️⃣ Github Flow

브랜치 종류

• master : base가 되는 브랜치
• feature : master에 기능을 추가하기 위한 새로운 브랜치

Github Flow를 활용한 개발 진행 흐름

1. master 브랜치는 배포를 위한 소스코드를 관리하는 브랜치.
2. 만약, 신규 기능 개발이 필요하다면, master 브랜치로부터 feature 브랜치로 새로 따서 작업을 진행한다.
3. Task가 완료되면, Pull Request를 생성하여 Review를 요청하고, PR은 feature → master 브랜치이다.
4. 리뷰 완료 후, 피드백이 모두 반영되었다면, 해당 feature 브랜치를 master 브랜치로 병합한다.

특징

• 단순하며 지속적인 배포를 강조하며, master 브랜치에서 배포를 수행한다.
• 단순하며 빠른 개발 및 배포를 위해 사용된다.
• 테스트와 검증 절차를 거치지 않고 바로 master 브랜치로 Merge 되므로 위험성이 있다.

3️⃣ Gitlab flow

복잡한 Git Flow와 너무 간단한 Github Flow의 절충안

브랜치 종류

• master : 안정적인 코드가 저장되는 브랜치로 base가 되는 브랜치.
  • 전체적인 테스트 진행이 완료되어 기능에 대한 보장이 있다면, production 브랜치로 머지.
  • 만약 staging 단계가 필요하다면, pre-production 브랜치로 머지.
• feature : 각 기능이 개발되는 브랜치.
  • master 브랜치에서 파생되고 PR을 통해 다시 병합된다.
• Production : 테스트가 끝난 기능의 배포를 위한 브랜치
• Pre-Production : 배포 전에 제품을 테스트 (QA, 품질검사) 하는 브랜치
  • 테스트가 정상적으로 완료되면, production 과 master 에 각각 PR(Pull Request)을 보낸다.

Gitlab Flow를 활용한 개발 진행 흐름

• 기능 개발이 필요한 경우, master 브랜치에서 feature 브랜치를 생성한다.
• feature 브랜치에서 기능 개발 완료 후, PR을 통해
  • 기능에 대한 검증 및 보장이 있다면 production 브랜치로 머지한다.
  • 기능에 대한 검증 및 보장이 필요하다면, pre-production 브랜치로 머지한다.
• pre-production 브랜치에서 테스트가 완료 되었다면, production과 master에 PR을 통해 병합한다.

특징

• 간단하고 직관적인 플로우를 제공하여 개발 프로세스를 이해하기 쉽게 만든다.
• GitLab은 내장된 CI/CD 파이프라인을 제공하므로 빌드, 테스트, 배포 등을 자동화할 수 있다.
  • 이를 통해 안정적인 배포와 빠른 피드백을 얻을 수 있습니다.
• 비교적 간단한 프로세스를 제공하기 때문에, 대규모 프로젝트에서는 협업과 관리가 어려울 수 있다.
• 특히 지속적인 배포가 강조되는 환경에서 효과적이다.

🖥️  CPU Scheduling

시스템의 CPU 사용 효율을 극대화하기 위해 다중 프로그래밍과 멀티태스킹 기술을 사용하는 것

Resources (CPU포함)는 process들 사이에서 공유된다.

🖥️ CPU-IO Burst Cycle

프로세스가 실행되는 동안 CPU 사용(bursts)과 입출력(I/O) 대기 시간 사이를 번갈아 가며 반복하는 현상

Types of processes

• I/O bound process
  • 입력(input)과 출력(output) 작업에 더 많은 시간을 소비하는 프로세스
• CPU-bound process
  • 계산이나 처리 과정에서 대부분의 시간을 소비하는 프로세스

🖥️ CPU Scheduler

CPU Scheduler는 ready queue에서 process를 선택하고, CPU core를 할당한다.

When Scheduling Occurs?

1. running에서 waiting state으로 switch 될 때 (Nonpreemtive)
2. running에서 ready state으로 switch 될 때 (Preemtive)
3. wating에서 ready로 switch 될 때 (Preemtive)
4. 종료될 때 (Nonpreemtive)

Non-preemptive vs Preemptive

- Non-preemptive scheduling

• 아무도 interrupt할 수 없다.
• running → waiting / terminate 될 때마다 발생한다.
• Running process는 interrupted 가 아니다.

- Preemptive scheduling

• 1,2,3,4에서 발생할 수 있다.
• processing이 실행 중일 때 scheduling이 발생한다.
  • interrupt, process with higher priority
• HW의 지원과 shared data handling이 필요하다.
• 선점형 스케줄링이 여러 프로세스 간에 데이터를 공유할 때 경쟁 상태(레이스 컨디션)를 발생시킬 수 있다.

🖥️ Dispatcher

CPU를 현재 실행 중인 프로세스에서 다음에 실행할 프로세스로 넘겨주는 운영 체제의 모듈이다.

• Switching Context
  • CPU가 현재 실행 중인 프로세스(P0)의 상태(예: 레지스터 값, 프로그램 카운터 등)를 저장하고, 다음 프로세스(P1)의 이전 상태를 복원합니다.
• 유저 모드로 전환(Switching to User Mode)
  • 프로세스가 사용자 모드에서 실행될 수 있도록 CPU의 모드를 변경합니다.
• 적절한 위치로 점프(Jumping to the Proper Location)
  • 프로그램이 중단된 부분부터 계속 실행될 수 있도록 프로그램 카운터를 해당 위치로 설정합니다.

Dispatch Latency (지연)

한 프로세스(P0)를 중단하고 다른 프로세스(P1)가 실행을 시작하는 데 걸리는 시간을 의미한다.

🖥️ Scheduling Criteria

• CPU Utilization(CPU 이용률) : CPU가 얼마나 부지런히 일하는가. / 높을수록 좋은거임 (단위 : %)
• Throughput(처리율) : 시간당 몇개의 작업을 처리하는가. / 높을수록 좋은거임 (단위 : job/sec)
• Turnaround time(반환시간) : 작업이 메인메모리로 끝내고 나올때까지 걸리는 시간. / 짧을수록 좋은거임 (단위 : sec)
• Waiting time(대기시간) : CPU에서 서비스를 받기 위해 ReadyQueue에서 기다리는 시간. / 짧을수록 좋지 (단위 : sec)
• Response time(응답시간) : 컴퓨터와 대화하는 시스템에서 중요함. (요새는 다 맞긴함) / 짧을수록 좋음 (단위 : sec)

이제 곧 파드의 3기 iOS파트가 시시시시작이다.

세미나를 위해 OT 자료를 다시 살펴보던 중, 문득 누군가 이런 질문을 하면 어쩌지 하는 생각이 들었다.

Main이랑 Lauch 중 어디에서 해야돼요?

둘의 차이는 뭐죠?

.

.

정확하게 알려줘야 하기에 찾아보았다.

멀티 스레드를 원활하게 지원하기 위해 LauchStoryboard는 Android의 splash화면 같은 화면이었다.

그러니까, LauchStoryboard에 스플래시 화면을 넣어주면 된다는 것 !

.

.

Launch storyboard

Main storyboard

이렇게 각각을 지정해주었다.

그리고 빌드를 하면, 아마 Launch storyboard만 보여질 것이다.

이건 AppDelegate에서 Launch storyboard가 보여질 시간을 지정해주면 된다.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    sleep(1)
    return true
}

이런식으로 sleep(1)을 추가해주면, 1초 뒤 Main 화면이 보이는 것을 확인할 수 있다.

두 번째 파트장을 하다 보니, 눈에 보이지 않던 것들이 하나씩 보여지기 시작한다.

.

.

아직 부족함이 많은 내가 파트장이라니,,

더 열심히 할게요 여러분..

.

.

끝

졸업생 선배님과 진행하는 스터디 중, 이제 디자인 시스템을 적용할 시점이 되었다.

누가 디자인 시스템을 적용할 것인지 역할 분배를 하는데, 아무도 나서지 않았고,

나는 이제 동아리 일정도 어느정도 끝나서 시간적 여유가 비교적 있었기에 내가 하겠다고 했다.

디자인 시스템. 내가 해왔던 방식대로라면 그렇게 오래걸리지 않기 때문이다.

하지만, 스터디 장 선배님은 다른 방식으로 추천해주셨다.

swift gem? 뭐라고 하셨는데, 잘 기억이 안난다.

그러다가 오늘, 슬랙 DM으로 깃허브 링크를 하나 보내주셨다.

한시간 반정도 소요하여 한번 해보라고 하셨다.

뭔가 도전 과제를 받은 것 같아서 살짝 설렜다.

지금부터 공부 시-작 !!

https://github.com/mac-cain13/R.swift

이 패키지는 자동 완성으로 이미지, 폰트, 색상 등을 쉽게 사용할 수 있는 패키지인 것 같다.

공식 문서 예시를 가져오면,

지금까지 사용했던 방식이 다음과 같다면,

let icon = UIImage(named: "settings-icon")
let font = UIFont(name: "San Francisco", size: 42)
let color = UIColor(named: "indicator highlight")
let viewController = CustomViewController(nibName: "CustomView", bundle: nil)
let string = String(format: NSLocalizedString("welcome.withName", comment: ""), locale: NSLocale.current, "Arthur Dent")

해당 패키지를 사용하면 이렇게 쓸 수 있다.

let icon = R.image.settingsIcon()
let font = R.font.sanFrancisco(size: 42)
let color = R.color.indicatorHighlight()
let viewController = CustomViewController(nib: R.nib.customView)
let string = R.string.localizable.welcomeWithName("Arthur Dent")

이 패키지는 Mathijs Kadijk라는 분이 2016년에 발표했다고 한다.

그리고 이런 타입들을 지원한다고 한다.

• Images
• Fonts
• Resource files
• Colors
• Localized strings
• Storyboards
• Segues
• Nibs
• Reusable cells

자 그럼 이제 사용 방법을 정리해보자!

설치하기

1. 먼저 xcode에서 Package Dependencies 탭에 들어가 +를 클릭한다.

그리고, github.com/mac-cain13/R.swift (이 링크 아님!! https://github.com/mac-cain13/R.swift.git <- 이게 맞아요 !!)

링크를 추가해준다.

https://github.com/mac-cain13/R.swift.git

오잉 근데 안보인다. 흠..

바로 스터디장님한테 물어봤다.

이런 주소가 잘못 된 것이었따..... 이런 바보.............

https://github.com/mac-cain13/R.swift.git 링크를 추가해주자 !!

add packages를 눌러 패키지를 추가해준다.

2. 다음으로 타깃-> general을 선택한 뒤, Frameworks, Libraries, and Embeded Content 섹션에서 + 버튼을 눌러 RswiftLibrary를 추가해주라고 한다.

근데 package를 추가하니 이미 있었다 !

3. 타깃을 선택하고, "Build Phases" 탭에서 "Run Build Tool Plug-ins"를 선택한 뒤 + 버튼을 클릭한다.

RswiftGenerateInternalResources 를 추가해준다.

설치 끝!

이제 build를 하면, trust 할 것인지 창이 뜨는데, trust 하겠다고 하면 된다 !!

import 해보면 잘 되는 것을 확인할 수 있다 !

build도 잘 된다 ~!!!

R.swift 사용하기

이렇게 하면 프로젝트 내의 모든 Resource들은 R.~~~로 호출해 사용할 수 있다.

그 이유는, R.generated.swift가 해당 프로젝트의 Resources를 코드처럼 사용하기 때문이다.

react로 만든 프론트를 배포하기 위해 netlify를 가입하고, 깃허브로 프로젝트를 연동하였다.

하지만, 자꾸 알 수 없는 에러들이 뜨는 것이었다.

나는 react를 잘 알지 못하기 때문에, 뭘 해야하는지 알지 못했다.

그래서 내가 겪었던 시행착오들을 정리해보려 한다.

🐻  build 폴더 생성하기

npm run build

해당 코드를 실행하면 자동으로 build 파일이 생성된다.

🐻  Failed during stage "Reading and parsing configuration files": When resolving config: Base directory does not exist: /opt/build/repo/velog_front 에러 해결하기

해당 에러는 나의 실수로 발생한 에러였다.

깃허브 레파지토리를 연동해서 배포하였는데, 그렇게 하면 깃허브에 있는 폴더명을 적어줘야 하는데, 나는 내가 원하는 이름을 적고야 말았다....

이렇게 내 레파지토리에는 client와 server가 있는데, 나는 Client만 배포하고 싶으므로 설정할 때 해당 이름을 적어줘야 한다.

이렇게 Base directory에 깃에 있는 폴더명을 적어줘야 한다는 것 !!

🐻  Manifest: Line: 1, column: 1, Syntax error. 에러 해결하기

netlify로 deploy를 계속 시도했으나, deploy는 성공해도 빈 화면이 자꾸 떴다.

fn + F12를 눌러 개발자 도구의 콘솔창을 확인하니 다음과 같은 두 개의 에러가 떴다.

Manifest: Line: 1, column: 1, Syntax error.

이를 해결하기 위해서는, build 폴더의 index.html 코드를 수정해주면 된다.

# 기존 코드
<link rel="manifest" href="/velog/manifest.json" />

# 수정 코드
<link rel="/manifest" href="/velog/manifest.json" /> #manifest 앞에 / 붙이기

# 기존 코드
<link rel="icon" href="/velog/favicon.ico" />

# 수정 코드
<link rel="icon" href="./velog/favicon.ico" /> # 앞에 . 붙이기

# 수정 전
<link href="/velog/static/css/main.cfa5924d.css" rel="stylesheet" />

# 수정 후
<link href="./velog/static/css/main.cfa5924d.css" rel="stylesheet" /> # 앞에 . 붙이기

🐻  Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR 에러 해결하기

/%PUBLIC URL%/favicon.ico:1

이 에러를 해결하기 위해서는 app.js에서 router에 basename을 지정해주면 된다.

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Router basename={process.env.PUBLIC_URL}/> // basename 추가
    </ThemeProvider>
  );
}

이렇게 basename을 추가해주면 해결 된다 !

🖥️  ThemeProvider ?

지정된 디자인 시스템을 모든 코드에서 사용하기 위해서는 어떻게 해야할까 !?

그때 사용하는 것이 ThemeProvider이다.

React 컴포넌트에서 테마에 대한 정보를 제공하는 역할이라고 한다. 이를 사용하면 하위 컴포넌트에서 공통 theme을 사용할 수 있다.

색상값은 props를 통해 전달한다.

🖥️  어떻게 사용할까?

1. theme 파일을 만들고, 해당 파일에 색상을 지정한다.

다음은 내가 지정한 theme 색상이다. 

// styles/theme.js

const theme = {
  colors: {
    background: "#121212",
    text: "#ececec",
    primary: "#63e6be",
    primary2: "#62E6BE",
    white1: "#F1F3F5",
    white: "#FFFFFF",
    unSelected: "#ACACAC",
    secondBlack: "#1E1E1E",
    divider: "#2A2A2A"
  },
};

export default theme;

2. import 하기

그리고 해당 파일을 사용할 수 있도록 상단에 import 해주면 된다.

import { ThemeProvider } from "styled-components";
import theme from "../../styles/theme";

3. App.js에 사용하기

import theme from "./styles/theme";
import Router from "./router/Router";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Router />
    </ThemeProvider>
  );
}

export default App;

이렇게 생성한 객체를 ThemeProvider의 props로 넣어주면 된다 !!

4. 실제 코드에서 사용하기

background-color: ${theme.colors.background};

이렇게 하면, theme 파일에 있는 색상들을 다른 파일에서도 사용할 수 있다 !!

didSet을 어쩌다 만나게 됐냐면,

내가 참여하고 있는 iOS 스터디에서 맡은 파트를 구현하다 만나게 되었다.

내가 개발해야 하는 부분은 다음과 같다.

1. 화살표 버튼을 눌러 날짜를 바꾼다.
2. 날짜가 바뀔 때마다 data filter의 기준 날짜를 선택된 날짜로 바꿔준다.
3. 바뀐 filter의 날짜에 따라 이에 맞게 filtering 된 데이터들을 보여준다.

이때 데이터를 넘기고, 화면을 다시 그리는 과정에서 생각난 것은 delegate 밖에 없었다.

하지만 데이터를 넘겨도, 화면이 다시 그려지지는 않았다.

그러다 알게 된 것이 didSet이다.

didSet이란

간단하게 이야기하면, 프로퍼티의 값이 새로 설정된 후 호출되는 코드이다.

즉, 값이 바뀌고 이에 대해 화면을 다시 그려줘야 하는 나에게는 꼭 필요한 부분이었다.

didSet을 설정하면, 값이 바뀔 때마다 자동으로 이 부분이 호출된다고 한다.

어떻게 사용하냐면

var dateSend: Date = Date() {
    didSet {
        updateUI(for: dateSend)
    }
}

이렇게, 프로토콜로 받은 dateSend의 값이 바뀔 때마다 실행돼야 하는 화면이 바뀌는 updateUI 함수를 호출해준다.

사실 나중에는 reload함수를 써서 그냥 collectionView의 cell을 업데이트하는 방식을 택하게 돼서 이 didSet은 사용하지 않았지만, 이런 친구도 있구나 ~~ 하는 중요한 사실을 배우게 되었다.

이전에 react에서 제공하는 dropdown 라이브러리를 사용하여 커스텀 한 적이 있다.

하지만 내가 이번에 만들어야 하는 드롭다운은 해당 라이브러리를 커스텀해서는 할 수 없었다.

약 20분정도 해보고 안되니 다른 방법을 찾아보기 시작했다.

내가 하고 싶은 건, 아이콘을 눌렀을 때 드롭박스가 나오는 것이었는데 이러한 라이브러리를 찾아봤으나, 구독을 하거나 돈을 내야 사용할 수 있는 부분이었다.

고민 끝에 그냥 만들기로 했다.

대략적인 생각은 다음과 같다.

1. 아이콘 버튼을 생성한다.
2. 버튼을 클릭 했을 때 dropdown을 보여준다.
3. dropdown 컨테이너 안에 각 list에 라우터를 연결해 원하는 페이지로 이동시킨다.

1. 아이콘 버튼 생성하기

이부분은 완전한 ui 영역이기에 그냥 내가 사용한 아이콘 버튼 코드를 넣어두겠다.

<ProfileButton
          onClick={toggleDropdown}
          style={{ backgroundColor: "transparent" }}
        >
         {/*  */}
          <AccountCircleIcon
            sx={{
              fontSize: "30px",
              color: "white",
              paddingTop: "5px",
              paddingLeft: "20px",
              paddingRight: "80px",
            }}
          />
</ProfileButton>

const ProfileButton = styled.button`
  text-align: center;
  background-color: ${theme.colors.background};
  color: ${theme.colors.white1};
  border-color: transparent;
  width: 35px;
  height: 35px;
  margin-right: 130px;
`;

2. 버튼 클릭 시 dropdown 보여주기

2-1. 상태 관리

이를 하기 위해서는 상태관리를 할 수 있는 useEffect가 필요하다.

버튼이 눌렸는지, 안눌렸는지에 따라 다른 화면 상태를 보여줘야 하기 때문이다.

const [isDropdownOpen, setIsDropdownOpen] = useState(false);

이를 위해 먼저 false로 초기화 된 isDropdownOpen 이라는 상태 변수를 생성하였다.

이 변수는 dropdown이 열려 있는지, 닫혀 있는지를 나타낸다. 예상했듯, false는 닫힌 상태이고, true는 열린 상태이다.

다음으로 setIsDropdownOpen이라는 함수를 연결했는데, 이 함수를 통해 isDropdownOpen의 값을 변경할 수 있다.

const ref = useRef(null);

useRef는 나도 아직 공부를 더 해봐야 하겠지만, DOM에 직접 연결할 수 있도록 해준다고 한다. DOM에 접근해서 무엇을 얻을 수 있는지 궁금했다. 찾아보니, 어떤 입력 필드에 자동으로 포커스를 맞추거나, 어떤 요소의 크기 혹은 위치를 알아내야 할 때 사용할 수 있다.

나는 버튼을 다시 클릭하거나, 외부 바탕을 클릭하면 드롭박스가 닫히게 하고 싶었다. 

이 ref를 사용한 자세한 코드는 2-2가 될 이벤트 리스너 부분에서 더 다룰 예정이다.

const toggleDropdown = () => {
  setIsDropdownOpen(!isDropdownOpen);
};

이 코드는 함수의 dropDown이 열려 있으면 닫고, 닫혀있으면 열겠다는 의미이다.

이 함수는 아이콘을 클릭했을 때 실행해야 한다.

2-2. 이벤트 리스너

다음으로 이벤트 리스너를 추가해준다.

앞서 살짝 언급했듯이, 드롭박스 외부의 영역을 클릭하면 드롭박스가 닫히게 하고 싶기 때문이다.

useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsDropdownOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);

정리하면, 무언가를 클릭했을 때 dropDown 외부의 것인지를 확인한다. 만약 외부의 것이라면 

ref.current.contains(event.target) 는 false가 된다.

그래서 외부라면, dropDown을 닫게 된다.

3. 드롭다운 만들고 사용하기

<DropdownContainer ref={ref}>
	{/* 아이콘 버튼 */}
        <ProfileButton
          onClick={toggleDropdown}
          style={{ backgroundColor: "transparent" }}
        >
        {/* 여기에 사용할 아이콘을 넣어준다. */}
          <AccountCircleIcon
            sx={{
              fontSize: "30px",
              color: "white",
              paddingTop: "5px",
              paddingLeft: "20px",
              paddingRight: "80px",
            }}
          />
        </ProfileButton>
        
        {/* 드롭박스가 열려 있을 때 StyledDropdown 보여주기 */}
        {isDropdownOpen && (
          <StyledDropdown>
            <ul style={{display: "flex", flexDirection: "column"}}>
              <DropdownTextStyle href="/myPage">내 벨로그</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">임시 글</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">읽기 목록</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">설정</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">로그아웃</DropdownTextStyle>
            </ul>
          </StyledDropdown>
        )}
</DropdownContainer>

이렇게 하면, 내가 원하는 드롭다운 박스를 직접 만들어 사용할 수 있다 !!

결과

-> 프로필 아이콘 선택했을 때

-> 드롭다운에 있는 메뉴 호버 시