Image with src "http://localhost:3000/logo-light.svg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

문제상황

<a
    href="www.naver.com"
    target="_blank"
    className="w-[102px] h-[19.41px] ml-[24px]"
>
    <Image
        src="/logo-light.svg"
        alt="light Logo"
        width={102}
        height={19.41}
    />
</a>

이런 저런 해결방법들이 있었는데, 위의 상황에서는 문제가 소숫점이었다 아래 깃헙 댓글을 참고!

https://github.com/vercel/next.js/issues/40762#issuecomment-1473139712

1. babel-plugin-module-resolver install
2. babel.config.js 수정 / tsconfig.json 수정
3. yarn start --reset-cache 로 꼭 시작해주기

1. babel-plugin-module-resolver 설치

babel-plugin-module-resolver npm 문서

npm install --save-dev babel-plugin-module-resolver

or

yarn add --dev babel-plugin-module-resolver

2. babel.config.js 수정

rn 프로젝트라면 root에 있는 babel.config.js에 코드를 추가해줍니다.

BEFORE

module.exports = {
  presets: ['module:@react-native/babel-preset'],
};

AFTER

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '~': './src',
          '@components': './src/components',
          '@screens': './src/screens',
          '@assets': './src/assets',
          '@query': './src/query',
        },
      },
    ],
  ],
};

3. tsconfig.json 수정

tsconfig.json의 compilerOptions에 절대경로 세팅과 관련된 내용을 추가해줍니다.

{
  ...
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "~/*": ["./*"],
      "*": ["./*"],
      "@components/*": ["components/*"],
      "@screens/*": ["screens/*"],
      "@assets/*": ["assets/*"],
      "@oages/*": ["pages/*"]
      ...
    }
  }
  ...
}

4. yarn start --reset-cache

프로젝트 설정이 바뀌는 것이기 때문에 cache를 리셋해주도록하자. 그렇지않았다간, 이해되지않는 에러와 마주하게 될것이다.

yarn start --reset-cache

그러나 라이브버리 관리가 일년전에 멈춰져있고, nextjs 최근 버전을 지원하지 않는듯했다. 그렇기 때문에 다른 서버리스 배포 로직을 제공하는 서비스가 필요했고, sst를 선택했다.

https://docs.sst.dev/start/nextjs

나의 경우는 정말 간단하게 sst를 붙였는데, nodejs16 npm7 이상이 필요하고, aws자격증명이 로컬적으로 세팅이 되어있었기 때문이다. aws에 대해서는 멍청이 이기 때문에, 자격세팅 하라고 하면 조금 슬플수도..

1. sst 초기화

npx create-sst@latest

기존 프로젝트에 sst를 초기화 해서 세팅해주고 sst.config.js가 만들어지면 배포 로직의 추가 설정을 하면 된다.

2. 로컬에서 개발환경 시작하기

package.json을 보면 "dev": "sst bind next dev" 라고 script가 바뀌어있을 것이다. 이는 'Lambda 함수 내에서 실행 중인 것처럼 작동할 수 있습니다.' 라고 한다. 로컬에서 프로젝트를 실행하려면 sst를 로컬에서 실행해주고 nextjs 프로젝트를 평소처럼 키면 된다.

# Start SST locally
npx sst dev
# Start Next.js locally
yarn dev

3. 배포하기

다른 설정없이 일단 sst가 잘 작동되는지 살펴보자. 둘 중 하나의 명령어를 사용하면, 배포가 될 것이다.

npx sst dev
npx sst dev --stage prod

만약 안된다면, sst remove 명령어로 관련 리소스를 모두 제거 하자. 그리고 초기화도 다시 한번 더 해보고 배포를 해보면 잘 된다(나의 경우엔?) https://docs.sst.dev/packages/sst#sst-remove

npx sst remove 
npx sst remove --stage prod

npx create-sst@latest

반갑습니다! 도디입니다. 터미널에서 code 명령어를 이용해서 vscode를 실행하는 방법에 대해 알아볼겁니다 🤗

시작!!!

본인이 열고 싶은 프로젝트로 루트를 이동해서 아래 명령어를 치면 되는데요.

code .

이곳에 온 여러분은 아래와 같은 메시지와 작동이 하지 않는 상황일 겁니다.

vscode command palette 열기

vscode를 열고, 커맨드 팔렛트에서 쉽게 설정을 할 수 있는데, command + shift + p 혹은 comand + p 에 >를 직접 작성해서 커맨드 팔랫트를 열고

shell Command: Install 'code' command in PATH를 선택해서 인스톨해주면 끝입니다.

쏘이지~

• EACCES: permission denied, unlink 'usr/local/bin/code' 위 에러 메시지가 나타날 때, https://jemerald.tistory.com/97 이 블로그 글을 참고하길

2022 잘들 보내셨나요!!!!!!!!!!! 시간이 왜 이리 빨리 지나가는지, 저의 RN개발자로서, 직장인으로써, 개발자로써의 회고를 남겨보려합니다! 회고를 하려 하니, 연말에 휘몰아쳤던 일들 밖에 생각나지 않네요! 내년에는 6개월 주기로 쓰면 더 괜찮으려나?🙄🙄🙄

5년차의 번아웃 그리고 워케이션

입사부터 5년이 넘어갔습니다. 성장한게 맞는지 의심이 들기 시작했습니다. 웹개발과 앱개발에 대해서 항상 갈림길에 있는 듯 했고, 잘 작동하는 앱이지만 좋은 코드인지 피드백이 필요했고, 혼자하는 클라이언트 개발은 지칠 수 밖에 없는 환경이었습니다.

별 생각이 없었습니다! 다들 오는 번아웃이라고 생각했고, 시간이 지나면 해결이 될거라 생각했는데 결국 터져버려서 PO분께 휴식이 절대적으로 필요하다고 의견을 드렸고, 무작정 쉬는게 필요한게 아니라 잠깐 돌아보는 시간이 필요하다. 좋은 개발자들에게 피드백을 얻고 싶고, 회사코드를 리팩토링 하고 싶다. 한달의 시간을 주셨으면 한다.

오히려 PO분은 그냥 일주일 이주일 푹 쉬고 오시는게 어떠냐 하셨는데, 전 저도 회사코드도 발전시켜오고 싶다. 라고 했습니다. 저에게 가장 큰 행복과 재미는 성취감 임을 알아차렸기 때문이죠. 이게 참 양날의 검인데, 일에 치여 지친 사람이 행복을 얻는 곳이 일이면 정말 모순이죠.. 그렇게 한달의 워케이션을 다녀왔습니다. 다들 도디가 어디 제주도 좋은 숙소에 박혀서 개발이라도 할까? 생각했지만, 주변 개발자에게 찾아가서 조언을 많이 구하러 다니는 시간이었습니다. 좋은 구조도 도움받고 이런저런 영향을 많이 받았습니다. 정말 고마우신 분이죠...

더 조언을 주신 다는 분들이 계셨는데 다 못찾아뵌게 아쉬울 뿐입니다. 한달이 그리 긴 시간은 아니었습니다. 사실 회사에서 배려해주셔서 주신 워케이션은, 워케이션이라기 보다 리팩토링에 몰입해서 회사 업무를 보는데 사용했습니다. 이건 제 선택이니까 절대 후회하지 않습니다.

지금도 그때의 리팩토링 코드로 더 행복한 코딩을 하고 있으니깐요. 저희 동료분께서 도디의 리팩토링이 도움이 된다는 말을 가끔 하시는데, 그럴때마다 진짜 감동받습니다. 다시 한번 헤드라잇 개발자 큐브에게 감사의 말을 드립니다...🥰

React Native와 네이티브 갈림길?

저희 회사의 앱 개발은 꽤나 긴 시간동안 저 혼자 했고, 시니어의 RN개발자를 뽑고자 했지만 무리무리 였습니다. (현재는 좋은 RN동료분을 뽑았다는..)
그래서 android는 네이티브 개발로 전환을 했었습니다. 그리고 현재는 ios aos 모두 RN으로 코딩을 하고 있습니다. 좋은 시행착오를 얻었고, 몇년간은 RN으로 정착하기로 동료분들끼리 약속을 했습니다. 회사와 동료들은 쉽지 않은 선택을 두번이나 했지만 RN이랑 더 친해지는 방향이 되었습니다. react native 이렇게 내 인생에 깊게 들어오게 될줄 몰랐는데 말입니다.

개발자들과의 제주도 개발여행?

위의 워케이션 기간이 오기 전, 여자개발자 셋이서 제주도 여행을 갔습니다ㅋㅋㅋ 지금 생각해도 너무 행복해서 웃음이 나네요ㅋㅋㅋ vue.js 개발자와 서버개발자 그리고 rn개발자 셋이서 갔습니다. 숙소는 지인분의 공간을 잠깐 빌려서 돈을 아낄수 있었던 여행입니다. 돈도 적게 안버는 셋이 돈 아끼겠다고 새벽 비행기를 그렇게 타고 다녀서ㅋㅋㅋㅋㅋㅋ 너무 힘들었어요

동생들은 반차를 써서 매일 아침마다 제주도 스타벅스로 출근도장 찍으면서 개발을 했습니다ㅋㅋㅋㅋㅋ 이 카페 저 카페 다니면서 개발하고 다녔습니다ㅋㅋㅋㅋ정말 행복하지 않을수 없습니다... 날씨도 좋고(춥고) 맛있는것도 쉬지않고 먹으니 최고였습니다. 코딩에 분리불안이 있는 저를 이해해주는 여행친구들은 이친구들이 전부이지 않을까 싶을 정도로 나름 개발을 많이 한 여행이었습니다ㅋㅋㅋㅋ

숙소에 벌레가 나올때마다 우리 동생들.. 너무 힘들어해서 저도 벌레 무서워하는데 괜히 제가 벌레 다 잡고 그랬습니다... 그래도 마지막날 왕 바퀴벌레 세마리는 너무 힘들었다는...

좋아하는 일을 하면서 이걸 이해해주는 업계동료들과 여행을 갈수 있는건 큰 행운이고 행복이었습니다.🌴 가서 귤 타투도 한건 안비밀!

동료의 등장?

드디어 올해 헤드라잇 rn 개발자가 한명 더 추가 되었습니다. 무려 ios 개발자였던 큐브라는 친구인데요. 정말 어썸한 친구예요. 섬세하고 다정하고 강력한 개발능력을 지닌 친구입니다. 저는 개발 이외의 디자인과 기획쪽에 흥미가 있다면 이 친구는 데이터에 예민하게 반응하는 친구입니다. 친구라고 하는 이유는 입사하기 전에 진짜 친구였기 때문입니다 ㅋㅋㅋㅋㅋㅋ 예전에 개발 동아리 같이 하던 친구였는데 입사를 고민한다길래, 괜히 제가 입사에 방해가 될까봐 입사 절차를 덜덜 떨면서 지켜만 봣던.. 아주 같이 일하고 싶던 친구 였는데 같이 일하게 되었어요ㅋㅋㅋ 인연이 참 대단한거 같다는,,

완전 새로운 파트를 개발하는데도, 차분하게 업무를 마무리지을 줄 아는, 책임감도 있고 체력도 있고, 일단 지친 티를 잘 내지 않는 성숙한 사회생활을 하는 동료입니다.

너무 든든한 동료가 연말쯔음 입사를 해서, 벌써 합이 많이 맞는 동료입니다. 헤드라잇의 2023이 너무 기대되는 부분입니다.

개발자도디 패스트캠퍼스 강의를 찍다?

...말도 안돼..!

저에게 패스트캠퍼스에서 강의를 찍을 수 있는 기회가 왔습니다. react native animation에 대해 강의를 찍게 되었는데요.. 지금은 촬영은 마친 상태이고, 코드를 정리해야되는 상태입니다. 오픈은 아직 멀었(?)구요!

찍으면서 인강을 찍는 모든 분들을 존경존중하게 되더라구요... 아무나 찍는게 아닌..! 처음에 담당자 분과 미팅을 했고 저를 좋게 봐주신거 같았어요. 블로그에 하나하나 정리해서 올리는 점에 대해, 미팅에서 어필했던 점에 대해....

그래서 결국 찍게 되었습니다. 제 목소리가 워낙 졸린 편이라 다들 잘 들어주실지 모르겠습니다. ㅎr,,,,사실 요즘 24시간이 떨립니다. 오픈하고 1년간은 떨릴거같아욬ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

진짜 쉽지 않더라구요. 회사랑 병행한다는게 쉽지 않았고, 회사에서도 응원해줬다는게 회사의 대인배스러운 점이 아닌가 회사에 말하기도 쉽지 않은데, 큰 에너지가 드는 일이니 만큼, 회사에 말하고 하는게 좋다고 생각했고 일단 회사홍보도 조금 되지않을까 해서 시작하게 됐네요. 다들 잘 들어주셨음하고, 오픈하고 나서가 시작인거같기도 해요. 다들 질문 많이 주시는거같아서 그 점도 많이 걱정이네요. 걱정만 가득한 연말입니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ그래도 작년보다는 단단한 개발자로 성장하게 된거같아서 제 자신이 든든합니다.

다들 어떻게 저보다는 열심히 사시는 개발자 많을거라 생각해요!!! 그렇든 그렇지 않든 다들 너무 멋지고 쉬엄쉬엄 하시고 내년 목표 행복하게 세우시고 행복하게 이뤄가시길 바랍니다. 2023 복 많이 받으시고 허리랑 등펴시고 배에 힘주시고 목에 힘빼고 턱내리고 건강챙기시고요!!!!!!!! (올해 디스크로 두번은 아팠던...!) 우리 오래오래 개발일 해요 🤗🤗🤗

오늘은 react native 뿐 아니라, ios 개발에서도 쓰임새 있는 하나의 코드를 prod, dev앱으로 나눠볼겁니다. 두 앱으로 나누는 이유는 서버api를 테스트 하기 위함이 중점적인 이유이며, 뭐가 되었든 QA 테스트를 목적으로 나뉘어져있습니다.

1. 하나의 코드를 두 앱으로 나눠서 관리를 해야하며
2. 앱을 테스트 하는데, 구분하기에 무리가 없게 app icon을 각자 설정해줄 예정입니다.

헤드라잇 앱에서 직접 사용하고 있는 방법이며, rn에서 좋은 코드인지는 모르겠으나 설정도 심플하고 해서 너무 만족스러운 작업이었습니다.

이런식으로 Build Configuration을 가져갈 거구요. 모르시는 분들을 위해 말하자면, ios의 기본 Build Configuration은 debug, staging, relase가 있고 Build Configuration에 따라 되는 기능이 있어 각각의 특징에 대해 가볍게는 알고 있으셔야 합니다. 보통 achive를 해서 빌드앱을 만들잖아요? 그건 release 상태로 배포를 하는 겁니다.

그리고 개발환경에서 debug Build Configuration을 쓰는건 상당히 중요합니다.

이유는 저희 debug모드 써야하잖아요..? 디버거 같이 연결해서 써야하잖아요???

그러면 무조건 개발환경의 Build Configuration은 debug로 하셔야 합니다. 그리고 dev배포앱은 staging, prod배포앱은 release로 설정해줄겁니다. 보통 그렇게 하그든요! 설정하는 법은 아래에서 안내 드리겠습니다.

앞으로 할 작업의 목차는 이러합니다.

1. prod/dev 각각 bundle identifier 설정
2. dev scheme 생성
3. prod/dev 각각 개발/빌드 Build Configuration 설정
4. 앱 아이콘 나누기
5. signing이 잘 들어가 있는지 확인

1. prod/dev 각각 bundle identifier 설정

project.xcworkspace open > project target 들어가서 > Signing & Capabilities 들어가면 이런 뷰가 보입니다. 건들지 않는한, 우리에겐 Debug, Release, Staging Build Configuration이 있는데요. 중요한건 Bundle Identifier의 값을 다르게 설정해주는 겁니다. 예시로

Release : com.dody.projectiOS Debug and Staging: com.dody.projectiOS.dev

이런식으로 적어주는 겁니다.

이렇게 하면 클라이언트에서 지금이 어떤 환경인지 읽을 수 있습니다. 클라이언트에서 어떤 상태인지 파악하는 것.

import DeviceInfo from 'react-native-device-info';
const bundleId = DeviceInfo.getBundleId();

그것이 prod dev 서버 api를 테스트할 수 있다는 것의 아주 중요한 포인트 입니다.

2. dev scheme 생성

이번에는 dev 환경에 알맞은 scheme을 설정해보겠습니다. dev 환경에 맞는 scheme을 만들어놓으면, 매번 고칠 필요 없이 이곳만 옮겨 다니면 prod와 dev를 옮겨 다니는 것과 같습니다.

저희가 하는 작업이 개발의 편의성을 위해서 하는 작업인만큼, 꼭 있어야 하겠죠? 만들어봅시다.

product > Scheme > New Scheme... 안으로 들어가

본인의 프로젝트를 Target으로 하고, 저는 prod 앱이 oheadline_client로 되어있기 때문에 dev앱은 oheadline_client_dev라고 했습니다.

이제 상단에서 oheadline_client(prod앱)과 oheadline_client_dev(dev앱)을 쉽게 넘나들 수 있는 길이 생겨버린 것입니다!

3. prod/dev 각각 개발/빌드 Build Configuration 설정

이제 각 환경에 맞는 Build Configuration을 설정해줍시다. 예를들어 oheadline_client에서 배포는 release로 해야하고, 개발때는 debug로 해줘야겠죠!

Edit Scheme... 에 들어가서 수정해주면 되는데,

dev앱

보이는 Build Configuration은 Debug로 해주고, Achive부분의 Build Configuration만 Staging으로 하면 됩니다. 그게 저희가 초반에 그렸던 마스터플랜의 내용이니깐요~!

prod앱

dev앱과 마찬가지로 보이는 Build Configuration은 Debug로 해주고, Achive부분의 Build Configuration만 Release로 하면 됩니다.

4. 앱 아이콘 나누기

앱아이콘 두는 곳에서 dev를 붙인 아이콘번들을 준비해주시고 Build Settings > Asset Catalog Complier - Options > Primary App Icon Set Name에 각각 맞게 넣어주시면 앱 아이콘들이 나눠져서 들어가게 됩니다~!

5. signing 오류 없나 체크하기

마지막으로 읽고 있는 독자분께서 중요하게 체크하셔야 하는 부분, 번들 아이디가 바뀌었기 때문에, 그에 상응하는 profile을 준비해놓으셔야 하고 그쪽에서 오류가 없는지 살펴보시고 체크해주셔야 합니다.

그럼 여기까지. 오늘도 쏘이지!

도하! 오늘은 아주 유우명한 아이콘 라이브러리 react-native-vector-icons 를 사용해볼겁니다. install이 터미널 한줄로 되지 않아서 블로그 글을 써 봅니다! 하나씩 따라와보세요.

아이콘 벡터 모음

https://oblador.github.io/react-native-vector-icons/

깃헙

https://github.com/oblador/react-native-vector-icons

라이브러리 설치

npm install --save react-native-vector-icons

Xcode에 폰트 추가하기

xcode에 폴더를 만들어서, 거기에 파일을 좀 추가해줘야합니다. 왜??? 싶지만 따라와주세요! 안하면 안되니께~!

프로젝트에 new group을 생성해야합니다.

대충 그룹 이름은 Fonts라고 하구요.

proejct > node_modules > react-native-vector-icons > Fonts 안에 있는 .ttf 파일을, 위에 만들어놓은 폴더에 모두 넣어줍니다.

폰트가 잘 들어갔네요. 다음 단계로 갑시다!

info.plist에 폰트 추가하기

벡터 이미지들은 폰트라고 할 수 있는데요. info.plist에 아래 파일들을 추가합니다.

<key>UIAppFonts</key>
<array>
      <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>Zocial.ttf</string>
    <string>Fontisto.ttf</string>
</array>

root 위치에 react-native.config.js 파일을 추가해서 아래 내용 넣어주기

module.exports = {
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null,
      },
    },
  },
};

!! 그 다음 꼭 node_modules과 pods친구들이 꼬일 가능성이 있기 때문에, 패키지 재설치 꼭 하시길 바랍니다.

코드 사용 예시

import React from 'react';
import Icon from 'react-native-vector-icons/AntDesign';

export default function Components() {
  return (
    <Icon name="home" size={30} color="#900" />
  );
}

쏘이지

command + d

하면 아래와 같이 디버깅 모드가 열린다.

근데 자꾸 안열리는 거임. 이유는 알겠답말입니다. ios scheme이 release 상태로 배포가 되면 디버그모드가 안열리는데 말입니다. cli로는 스킴을 바꾸는게 어려웠는데, 아래와 같은 설정을 하면 react native cli로 빌드한 앱도 디버깅 모드가 실행됩니다.

command-line에서 빌드할때 어떤 모드를 사용하겠냐는 건데, 저희는 지금 achive 할때 cli를 쓰지 않으니 이걸로 우선 해결!!!

다음에 언젠가 cli를 이용해 배포 자동화가 된다면, 이걸 쓰지 못하게 될까 고민이 되는 부분이 있지만,

그건 그때의 고민!

도바! 오늘도 쏘이지!

해당 위치 폴더 열기

open .

node 8081 서버 다 죽여버리기

kill -9 $(lsof -i TCP:8081 | grep LISTEN | awk '{print $2}')

리액트네이티브 라이브러리 삭제 후 재설치하기

추후 .bash_profile에 shell command로 등록해서 단축어로 만들 예정

rm -rf node_modules && rm yarn.lock && yarn && cd ios && rm -rf Pods && rm Podfile.lock && pod install && ..

오늘은 Achive 하고 나서 성공, 실패 알람을 소리로 들을 수 있는 기능을 켜보도록 할 텐데요. m1으로 빌드하는 저에게는 별로 필요없을지 모르지만, 해보자구요!

xcode > command + , > Behaviors 에서 성공과 실패에 따라 Play Sound를 지정해주면 됩니다.

살펴보면 더 많은 경우의 수에 알람을 설정해줄 수 있으니 확인해보시라구요.

그럼! 도빠~

문제는 아래와 같다.분명

To reload the app press "r"
To open developer menu press "d"

여기까지는 잘 나오는데, 몇초 있다가 아래의 문제의 코드가 난다는 것이다.

근데 정말 웃긴에 m1 관련된 오류에 대한 글이 정말 많고 다들 진절머리가 난듯하다 ㅋㅋㅋㅋㅋㅋㅋ 관련된 문서를 쉽게 찾았고, 일단 node 서버들을 모두 삭제 했다. 삭제하는 블로그은 링크를 참고하자.

그래도 안되길래 아래의 깃헙 문서를 보니 다들 쉽게 했다. https://github.com/facebook/watchman/issues/923

1. 이거 하고

Target > Build Settings > Architectures > Excluded Architectures 부분에 아래 코드를 추가하고

/usr/local/Homebrew/bin

2. 이거 하기

이걸 터미널 명령어로 작성하면 된다더라.

brew install watchman

그러고 yarn start는 잘 작동했다는 후문이....

쏘이지~!

yarn start 할 때, 본인이 모르는 노드서버가 켜져있다고 하면 아래의 명령어를 터미널에 치도록,

kill -9 $(lsof -i TCP:8000 | grep LISTEN | awk '{print $2}')

추후, port number 받아서 해당 포트를 가지는 process를 죽이게 변경해보자..

쏘이지

iOS 개발을 하면서 저희가 걱정해야되는 부분 중 하나는 바로 ruby 버전입니다. 루비는 맥북 자체의 루비 버전과 cocoapods의 루비 버전이 충돌이 있을수 있고, 그런 경우 m1에서 pod install이 잘 작동하지 않을 수 있기 때문에 잘 설치해야 합니다. 그 과정이 이 글에 담겨있습니다!!!!

제발 도움이 되길ㅠ

brew 설치

brew를 설치해 오셔야 합니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

위의 코드로 brew를 설치해주시구요. 설치해주시고 터미널을 재시작을 해주시구요. (설치가 안된다면 댓글로 알려주세요)

ruby 3.1.2 설치

여기서 제가 두서에 말씀드린 루비 버전의 중요함이 돋보이는데요, 아래 코드를 터미널에 넣어서 rbenv를 설치해주세요.

brew install rbenv ruby-build

rbenv init

vi ~/.zshrc

로 .zshrc에 들어가 제일 하단에 아래 코드를 넣어줍니다. 넣는 방법을 모르신다면 vim 명령어를 구글링해서 해보시길!

eval "$(rbenv init - zsh)"

설치하는 이유를 다시한번 설명한다면, 맥에는 이미 ruby가 설치가 되어 있는데요, 그리고 ios 라이브러리 매니저인 cocoapods는 ruby를 사용합니다. 일반적으로 cocoapods를 설치하면 맥에 내장 되어있는 system ruby를 사용해서 설치를 하게 되는데, 문제는 m1 chip은 기존의 intel chip과 다르게 작동한다는 점입니다.

m1에서 cocoapods으로 라이브러리를 관리하기가 까다로워 졌기 때문에, rbenv를 사용해 ruby 환경을 관리해서 cocoapods를 설치관리하게 되는겁니다.

만약 rbenv 전에 cocoapods을 먼저 설치했다면 지우고 다시해야 해요~~

우선 ruby 버전 3.1.2 버전을 설치할거구요.

rbenv install 3.1.2

루비의 버전을 확인해보려면 아래 명령어를 쳐줘야 합니다. (꼭 저렇게 생긴 명령어를 적어야 해요, rbenv -v라고 치면 rbenv 라이브러리의 버전을 아는 것 밖에 아니랍니다.)

rbenv versions

아래같은 모습의 결과물이 나오는데요.

왼쪽에 * 이 붙어있는건 지금 사용하고 있는 상태라는걸 나타냅니다. 잘 3.1.2 버전이 사용되고 있네요.

문제 헤쳐나가기

(1)만약 내가 ruby 3.1.2 버전을 사용하지 않는다면 (2) system 쪽에 향해 있다면

각 상황들의 cocoapods를 삭제하고 3.1.2 버전에만 cocoapods를 설치해 주어야 합니다.

아래 코드를 한번에 실행시켜주면 현재 당신의 오류가 나는 환경의 cocoapods가 삭제가 됩니다.

sudo gem uninstall cocoapods\n
sudo gem uninstall cocoapods-core\n
sudo gem uninstall cocoapods-downloader 
sudo gem uninstall cocoapods-deintegrate 
sudo gem uninstall cocoapods-plugins
sudo gem uninstall cocoapods-search
sudo gem uninstall cocoapods-stats\n
sudo gem uninstall cocoapods-trunk\n
sudo gem uninstall cocoapods-try

rbenv global system 라는건, 아까 * 이 향했던 방향을 system 으로 향하게 한다는 뜻입니다. 여기서 또 혹시 설치되어있는 cocoapods를 삭제해줍시다.

rbenv global system

sudo gem uninstall cocoapods\n
sudo gem uninstall cocoapods-core\n
sudo gem uninstall cocoapods-downloader 
sudo gem uninstall cocoapods-deintegrate 
sudo gem uninstall cocoapods-plugins
sudo gem uninstall cocoapods-search
sudo gem uninstall cocoapods-stats\n
sudo gem uninstall cocoapods-trunk\n
sudo gem uninstall cocoapods-try

그러고 다시 ruby 환경을 3.1.2 버전으로 바꿔주고 혹시모르니 cocoapods를 다시 삭제해주고

rbenv global 3.1.2

sudo gem uninstall cocoapods\n
sudo gem uninstall cocoapods-core\n
sudo gem uninstall cocoapods-downloader 
sudo gem uninstall cocoapods-deintegrate 
sudo gem uninstall cocoapods-plugins
sudo gem uninstall cocoapods-search
sudo gem uninstall cocoapods-stats\n
sudo gem uninstall cocoapods-trunk\n
sudo gem uninstall cocoapods-try

아래 코드를 작성해주면 끝입니다.

sudo gem install cocoapods

프로젝트로 이동해서 pod install을 하면 잘 작동할겁니다. 제발 이해가 다들 되셨으면 좋겠어요. 저는 좋은 선생님을 만나 쉽게 작업했지만 분명 어렵게 접근 하는 사람도 있을 테니깐요.

부디 행복한 코딩 하시길! 도바🍊

위와 같은 디버그 메뉴창이 보여야 한다는 말입니다. 근데 계속 command + D 를 눌러도 안될때는 Scheme을 확인해주어야 합니다. 해당 Target의 Edit Scheme을 들어가 보면

Build Configuration이 Release라고 되어있을 수도 있습니다. 이 Release라고 되어있는 빌드조건이 우리의 문제인 디버그모드를 안보이게 합니다.

Debug 모드로 빌드조건을 바꾸고 앱을 빌드 하신다면, 문제는 해결됩니다.

쏘이지

큐브와 커뮤니케이션 하면서 ios에 대해 평소에 궁금했던걸 많이 물어보게 되네요. 이번에는 ios버전을 어디부터 지원을 해줘야하는가 입니다.

Targets > project > General > Deployment Info의 숫자를 보면 알수 있죠?

앱 헤드라잇 ios의 지원버전은 iOS 13 입니다. 뭔가 의도하고 한건아니었습니다만, 일단 현재의 저희 앱에서는 나쁘지 않은 숫자라 들었습니다.

보통은 ios 14정도로 하는 곳도 많다고 하더라구요. 버전이 낮으면, 낮은버전의 os유저들도 따로 대응 해줘야 하기 때문에, 개발자의 리소스들은 중요하잖아요? 개발자 리소스를 아끼기 위해 버전을 높인다고 해요.

근데 그러면 낮은 os 버전의 유저는 버리게 되는 셈이 되어버리는거니깐요. 개발자 리소스 vs 앱 매출을 고려해서 버전을 산정하면 좋습니다.

아래의 이미지를 참고해서 버전을 산정하면 좋은데요, iphone의 경우, ios14 이전 버전의 유저가 4% 정도밖에 안되기 때문에 ios 14를 보통 값이 된다고 합니다.

os 사용현황 바로 살펴보기 : https://developer.apple.com/kr/support/app-store/

저희 헤드라잇은 ios유저가 젊은 층이 더 많기 때문에, 더 올려서 컨트롤 해도 되는 상황입니다. 그래서 추후, 대응 버전을 높이는걸 목표로 합니다.

다른 앱을 개발하시는 분들, 현재 본인들의 앱의 상황을 잘 분석해서 버리는 유저를 최소로 가져가길~!

도디바이~!

[!] The `project_name [Debug]` target overrides the `ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES` build setting defined in `Pods/Target Support Files/Pods-project_name/Pods-project_name.debug.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

[!] The `project_name [Release]` target overrides the `ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES` build setting defined in `Pods/Target Support Files/Pods-project_name/Pods-project_name.release.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

[!] The `project_name [Staging]` target overrides the `ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES` build setting defined in `Pods/Target Support Files/Pods-project_name/Pods-project_name.staging.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

디버깅 해보니 답이 조금 쉽게 나왔다. https://blog.asamaru.net/2017/04/11/target-overrides-the-always-embed-swift-standard-libraries-build-setting/

build setting > Alays Embed Standard Libraries > Yes - $(inherited) 으로 값을 수정하면 잘 pod install 된다.

ios에 위젯을 추가하려다, ios widget extension을 추가하면서, 빌드를 하려다 보니 아래와 같은 Link 오류가 뜨더라!

Undefined symbol: _swift_getTypeByMangledNameInContextInMetadataState
Undefined symbol: _swift_getOpaqueTypeConformance

스택오버플로우를 찾아보니 바로 답이 나왔다. https://stackoverflow.com/questions/64584466/cannot-build-after-adding-ios-widget-to-existing-react-native-project-symbols

새로 추가한 Widget Extension Target의 Build Settings > Search Path > Library Search Paths 값을 수정하니까 잘 빌드가 되더라

- from
"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)"

- to
"$(TOOLCHAIN_DIR)/usr/lib/swift-5.2/$(PLATFORM_NAME)"

error - ./public/img/main/image-ai.png
TypeError: unsupported file type: undefined (file: undefined)

이런 error가 발생하고 있었고, 이미지를 인식을 못하고 있는거같아서, 구글링을 해봤더니 답은 쉽게 나왔다.

https://stackoverflow.com/questions/68008498/nextjs-typeerror-unsupported-file-type-undefined-after-update-to-v-11

// next.config.js 

module.exports = {
  images: {
    disableStaticImages: true
  }
}

next.config.js 파일에 이미지 세팅에 disableStaticImages: true 이거 한줄 추가해주는 것으로 잘 마무리 되었다.

쏘이지~

그래서 이제는 rn이라 한들 ios 시선의 내용의 글을 작성하게 될 듯하다!

헤드라잇은 1.1.9 버전까지만해도 스플래시화면이 다크모드가 적용되지 않고 있었다. 스플래시도 다크모드 이미지를 적용해달라는 유저의 피드백이 있었고, 어렵지 않은 작업이라 빠르게 반영했다. 1.2.0 버전에서는 확인하실 수 있을 것!

Start!

나는 이전에 작성한 블로그 글의 스플래시 적용방법을 이용해서 할것이다. [RN Library 📚] rn 스플래시 스크린 1. react-native-make로 App, Splash 이미지 추출하기 [RN Library 📚] rn 스플래시 스크린 2. react-native-splash-screen

무려 2년 전에 작성한 글이지만 요즘도 들어가서 참고하는 글이기 때문에 충분히 참고하셔도 됨!

순서

0. 위의 링크에서 스플래시 이미지 적용하는 방법을 적용하고 온다.
1. 스플래시 이미지를 준비
2. 프로젝트 루트에서 아래 코드를 실행시켜 스플래시에 맞는 이미지를 추출한다. (project root > ios > [project name] > Images.xcassets 안에 스플래시 이미지가 추출되어 있을 것)

   npx react-native set-splash --path [path-to-image] --resize [contain|cover|center] --background ["background-color"]
   

npx react-native set-splash --path ./src/img/splash_dark.png --resize center --background "#333333"

``` 3. xcode에서 다크모드도 사용할 수있게 확장시키고, 스플래시 이미지 잘 적용시켜주면 끝

xcode 손보기

xcode에서 스플래시 이미지가 있는 폴더로 들어다. 나의 경우는 [project name] > images > SplashImage에 스플래시 이미지가 있는데, 스플래시 이미지를 클릭하면 우측에 Image Set을 조정하면 스플래시에도 다크모드가 가능하다.

Appearances를 'Any, Dark'로 설정하면, 스플래시이미지 영역에 다크모드의 영역이 추가 될 것이다. 그곳에 스플래시 이미지를 넣으면 된다.

쏘이지!