ram2 🚗

이제 곧 파드의 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은 사용하지 않았지만, 이런 친구도 있구나 ~~ 하는 중요한 사실을 배우게 되었다.