개발하는 리트리버

맥과 같은 리눅스 계열의 터미널에서 사용하던 ls, 하지만 윈도우 명령프롬트에서 ls 를 사용하면 원하는 대로 작동하지 않고

" 'ls'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다."

라는 대답뿐이 우리를 기다리고 있다.

윈도우 명령프롬트에서 ls와 같은 기능을 사용하려면 dir 라는 명령어로 사용해야한다. 리눅스와 같은 명령어로  사용하려면 간단히 설정이 필요하다.

doskey {원하는 명령어} = {기존 명령어}

위와 같은 구조의 설정이 필요하다. 윈도우 명령프롬트에서 기존 명령어는 dir 이다. 기존 명령어인 dir을 ls 명령어로 사용하고자 한다면, 

$ doskey ls = dir

해당 명령어를 실행해주고 나서 ls 를 입력하면, 우리가 원하는 대로 가능하다!!!

위와 같은 설정을 이용한다면 ls 가 아니더라도 자기가 원하는 설정을 !? 물론 쉽게 까먹기 마련이니 ls 로 해두자..^^

추가적으로 clear 까지 살펴보자면, 

해당 명령어는 윈도우 프롬트에서는 cls 이다.

$ doskey clear = cls

위 처럼 설정해주면 clear를 통해서 명령 프롬트를 비울 수 있다~!

하지만 아쉽게도... 명령 프롬프트를 종료하고 다시 키면 해당 세팅은 초기화되서.. 다시 설정하거나 해야한다..

집에 있는 윈도우 컴으로도 작업 좀 해보고자 하니..  리눅스계열 짱짱

혼자 React 프레임 워크를 가지고 프로젝트를 하나 만드려고 할때, api에 대해서 고민이 될 수 밖에 없다. 백엔드 부분을 배워서 간단하게 라도 구현해두어야 하나.. 물론 그러면 최고의 멋쟁이지만, 시간이 없다면?

프런트엔드 페이지 작업은 보통 퍼블리싱과 api 연결 단계로 이어진다. 다 그려놓고 api가 나오면 추가적인 작업이 들어가게 된다. 이렇게 두번 일하는게 조금 지쳤다면? 다음의 방법을 한번 시도해보자.

json-server 

json-server는 사용자에게 간단한 데이터베이스와 api 서버를 생성하여 개발하는데 도움을 주는 도구이다. 로컬 환경에서 가짜 백엔드 서버를 만든다고 생각하면 된다. 이를 이용하면 mock데이터를 api 응답값 받은것처럼 구현해둘 수 있다!

빠르게 설치해보자. json-server는 개발과정에서만 필요하고 후에는 필요 없기에 devDependency로 받아주는 센스까지.

$ npm install json-server --dev or -D
or
$ yarn add json-server --dev or -D

가데이터 준비

이제 api를 요청했을 때 받을 값을 추가해두면 된다. 프로젝트 루트 위치에 json파일을 하나 만들어준다. 일반적으로 db.json 으로 이름주어주는 것 같다.

{
  "posts": [
    { "id": 1, "title": "Hello World", "author": "John Doe" },
    { "id": 2, "title": "Another Post", "author": "Jane Doe" }
  ],
  "comments": [
    { "id": 1, "postId": 1, "body": "Nice post!" },
    { "id": 2, "postId": 1, "body": "Thanks for sharing!" }
  ]
}

서버 실행시키기

이제 위 데이터를 기반으로 json 서버를 열어준다. [원하는포트번호]에는 말 그대로 편하게 넣어주면 된다. 그리고 실행해주면 아주 귀여운 친구가 나오면서 해당 서버를 구동해준다.

$  json-server ./db.json --port 원하는포트번호

아래같은 문구가 출력되었다면 성공! 이제 아래 Resource에 해당하는 부분으로 api 요청을 보내면 위에 json에 선언해둔 값을 응답받을 수 있다. 나의 경우 원하는 포트번호로 8000을 사용했다. 

//////////////////////////////////////////////////////////////

[1]  Resources
[1]   http://localhost:8000/posts
[1]   http://localhost:8000/comments
[1] 
[1]   Home
[1]   http://localhost:8000

//////////////////////////////////////////////////////////////

마무리

이렇게 json-server를 이용하여 api 연결로직을 바로 깔끔하게 구현해두고, 나중에 체크정도만 하더라도 많은 시간을 세이브할 수 있지 않을까? 마냥 api를 기다리면서 손빨고 있지 말고 할 수 있는것들을 하쟈!

RN으로 개발해서 iOS 는 safari로 바로 디버깅이 가능하다

혹시나 문제가 있다면 아래와 같은 문제인지 체크해보길 바란다.

https://choq.tistory.com/47 : 검색할 수 있는 응용프로그램 없음....

자 그럼 안드로이드는 어떻게 할까?

크게 2파트로 나눌 수 있겠다.

1. 코드 설정

2. 기기 설정

1. 코드설정

안드로이드는 약간 코드 부분에서 추가가 필요하다.

android/app/src/main/java/co/{projectName} 아래에

MainApplication.java 파일을 찾아서 아래와같이 추가해준다.

1. import 새로 추가

2. onCreate 클래스 내부에 Webview 추가해

// MainApplication.java

import android.webkit.WebView;

...

public void onCreate(){
...
	 WebView.setWebContentsDebuggingEnabled(true);
...
}

2. 기기 설정 (개발자 옵션)

이제 코드 설정은 끝났다.

디버깅을 위해서 안드로이드 폰을 "개발자모드"를 활성화 할 필요가 있다.

안드로이드 기기에서 [설정] 페이지에서 가장 하단에 [개발자 옵션]이 없다면

아직 활성화 되지 않은것이다.

그렇다면 설정 하단부에

[휴대전화정보] -> [소프트웨어 정보]로 들어가서

"빌드번호" 를 여러번 눌러준다.

그러면 개발자 모드 활성화에 대한 알림이 등장한다!

그러고 나면 이제 설정 최하단부에 개발자 옵션이 켜진다.

개발자 옵션에 들어가서 USB디버깅 모드 설정을 ON해주면~ 

모든 준비 끝이다.

3. 디버깅

이제 앱을 안드로이드 기기에서 실행해준다.

$ adb devices

통해서 기기 ID를 체크하고

$ yarn android -deviceId=기기ID

실행해주면 프로젝트가 실행된다. 

후에 크롬을 실행하고 
chrome://inspect/#devices
로 접속하면 

Remote Target 파트에 해당 웹뷰가 표시되어있는걸 확인할 수 있다.

해당 웹뷰를 inspect 클릭하면 

웹개발시 크롬에서 F12눌러서 개발자모드킨것과 같이

콘솔, 요소 등을 확인할 수 있다!

이제? 열코딩만 하면된다.

서론

한국 주식시장이 열려있는 시간에만 작동할 수 있도록 짜둔 함수가 있다.

dayjs를 사용해서 사용한 함수였는데,

어느날 이 함수가 정상작동하지 않는다는 것을 확인했다.

라이브러리 문제인가..? 문제 될만한게 없는데..

바로.. 외국에서 해당 함수를 실행시 원하는 방향으로 실행되지 않았던 것...

dayjs를 사용할때 특정 타임존(timezone)을 지정해두지 않아서

외국 시간을 dayjs가 잡아버려서 

원하는 방향으로 제대로 작동하지 않았던 것... 또륵

해외에서도라... 오케이ㅇ

시간선을 한국에 맞춰줘야겠구만,

Dayjs Timezone(tz) 설정하기

React 기준으로 사용법은 간단하다.

dayjs와 함께 다른 부수적인 것들을 같이 추가해주면 된다.

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

이렇게 import와 extend를 추가해주면

타임존 지정할 준비를 완벽히 끝냈다고 볼 수 있다.

사용은 아래와 같이 하면된다.

dayjs().tz('Asia/Seoul')
dayjs().tz('America/Toronto')

이제 위와같이 선언하면 각자의 시간이 다르게 나온다~!

이를 통해서 현재 시간이나 특정 시간값을 구할 때

어디를 기준으로 할지 지정할 수 있다.

오? 그럼 이제 그냥 무조건 tz 다 붙여야지 ㄹㅇㅋㅋ

라고 하면 스토프~

그냥 클라이언트의 시간이 필요한 함수들도 존재할 수 있으니

조심스럽게 필요한 함수들을 체크해서 바꾸는것을 추천한다. 

아 근데 그럼 dayjs 쓸때마다 tz("....") 속의 내용 붙여서 써줘야 할까?

tz값을 디폴트로 지정할 수도 있다. 

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault("Asia/Seoul") // 디폴트 추가!!

dayjs().tz() // "Asia/Seoul"

이렇게 디폴트 타임존을 설정해두면

tz 사용시에 설정해둔 시간선을 기준으로 값을 가지고 온다~!

* dayjs 사용시의 디폴트 값이 아니라 tz()의 디폴트 값인것에 유의하자!

시간 체크로직에.. 글로벌한 부분도 이제는 신경쓰는

멋쟁이가 되기.

서울 복합문화센터에는

매월 수강할 수 있는 강의들이 많습니다.

헬스부터 필라테스, 그리고 수영까지 말입니다.

주민센터 라는 기본 포지션이 있기에

다른 일반 사설 업체보다는 확실히 가격이 저렴한 편인것 같습니다.

하지만 계속 수강해서 다닌다고 했을 때는

매월 나가야하는 고정 금액으로 잡히기 때문에

이는 쌓이면 절대 작은 금액은 아닙니다.. 

쌓인 티클이 태산...인거죠..또륵

그래서!!!

받을 수 있는 할인들을 잘 받아서 야무지게 결제하는게 좋겠죠?

 한푼한푼 세이브를 위해 할인 정보를 들고왔습니다

https://sports.happysd.or.kr/fmcs/34

문화센터에서 지원하는 할인대상안내 내용이에요!

확인해서 자기가 속한 부분이 있는지 꼬옥 체크해봅시다.

인상깊던 것 중 하나는 복수의 강의 수강 시 10퍼센트 할인이 들어간다는 것!

진행하는 여러가지를 체험해보고 싶고 할때는 꼭 해당 부분 체크해서 결재를 진행해보아요.

이런것도 중하죠.. 출산율이 낮아지는 이 시대에 진짜로 애국하시는 가족분들..!

그런 분들에게는 무려 50퍼센트라는 어마어마한 할인이 들어갑니다.

그 부모님과 자녀분들까지도요!!

진짜.. 이런 복지가 많이 필요하지 않을까요 ㅜㅠ대한민국 살려 ㅠ 

추가로 원래 다자녀라함은 3명 이상의 자녀를 둔 가구를 의미했지만

저출산 현상이 심화되는 요즘 그 기준을 낮추었다고 해요...

물론!!! 유의사항이 있습니다.

해당되는 여러 할인이 같이 들어가지는 않는것과

할인 항목에 따라서 증빙서류등을 가지고 센터에 직접 방문해야만 

할인이 가능한 경우도 있어요.

그러하니 링크하단에 유의사항을 꼭 읽어보시는걸 추천드릴게요.

열심히 운동합니다.

그리고 현명하게 소비합니다.

Sequel Pro를 다운받고

ssh통해서 데이터베이스를 열고자 하였다.

대학교 이후로 db관련 ide를 언제 열어봤던가..

떨리는 맘으로 ssh 관련 정보를 입력하고, 이전에 가지고 있던

key 파일 [~~].gem 파일의 링크를 걸어주었다.

하지만 귀신과 같이 연결 실패, 오랜만에 찾아온 손님에게 문전박대라니..

다행이도 에러 내용을 상세하게 전달해주고 있었다.

전체 에러 내용은  아래와 같다

{나의 key 파일} are too open.

It is required that your private key files are NOT accessible by others.

bad permissions: ognore key : {나의 key 파일}

이는 나의 키 파일의 권한과 관련된 문제때문에 발생된 것이다.

기본적으로 ssh에서 사용할 수 있는 키는

1. 사용자 외 접근 불가

2. 수정 불가

를 만족 시켜야 정상적인 키로 인식되고

문제 없이 기능할 수 있다.

나의 경우 내가 키 파일 내부의 내용을 한번 수정하면서 해당 파일이 

수정가능한 상태로 되었기에 위와 같은 에러가 발생한 것이다..!

gem파일을 직접 수정하지는 않고 text로 확장자 변경했다가 왔다갔다,,,

고로 해당 파일의 권한을 수정해주면 된다.

사용자 외 접근 불가 + 수정 불가 파일로 권한을 바꾸어 주면 된다.

권한 관련된 명령어 chmod 를 사용해 준다.

파일 주소를 쭉 쳐도 되겠지만, 나의 경우

터미널을 키고 해당 파일로 경로 이동후에

아래와 같은 명령어를 실행해 줬다.

$ chmod 400 {나의 key 파일 이름}

그러고 나서 다시 데이터베이스 IDE에서

key값을 이용해서 연결을 시도하면

정상적으로 접근할 수 있다!!!

EZ.피지.

ld: symbol(s) not found for architecture arm64

clang: error: linker command failed with exit code 1 

이전에 Mach - O type을 통해서 잠시 넘어가나 싶었던 에러다.

https://choq.tistory.com/76

하지만 해당 방법은 이 에러는 넘어가도 다음에 또 다른 에러를 발생시켰다.

나의 경우 빌드는 성공했지만 testflight에 업로드 중에

bundle identifier 의 이름을 이상하게 파악하는? 새로운 에러가 나타났다.

No suitable application record were found. Verify your bundle identifier "B" is correct anc that you are signed in with... 

심지어 bundle identifier 는 A 였는데 말이다..

앱 빌드가 아주 야무지게 꼬였다고 밖에는 안보인다..

다른 분들은 이렇게 해결하고 넘어가지 않도록 ..부디..⭐️

그리고 결국.. 해결책을 찾았다..

할렐루랴ㅜㅠ

Xcode →  Build Settings → Search Paths → Library Search Paths 에서

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

를 지우고

$(SDKROOT)/usr/lib/swift

를 새롭게 추가해주는 것이다.

그러면 해당 에러가 더 발생하지 않는다..

확인하자마자 사무실에서

SIU

를 외쳐버릴 뻔 했지만 겨우 참았다. 

(마음 속으로만 했다)

해답을 통해 보자면..

특정 스위프트 버전에 대한 라이브러리를 찾지 못하는 상황이 계속되었고,

SDKROOT을 통해서 sdk에 있는  스위프트 라이브러리를 받아오게끔 수정하니 잘 해결된 것이라고 한다.

m1 관련된 문제인가 그리도 찾아보았지만

뜬금없이 swift 버전 혹은 경로 문제 였다는게 뭔가 살짝 허탈하기도 하고..

이게 진짜 문제 원인 맞는지 아직도 조금 아리송 하다..

하지만 해결했자나

한잔해~

빌드는 성공했지만 testflight 업로드 과정에서 또...

하지만 이번엔 계정관련 문제 인것 같아서 편하면서도..

다시 해결하러..총총.. ios 너무 사랑스러워요 ^오^..

구글 플래이 콘솔에서 알림이왔다.

"앱이 Android 14(API 수준 34) 이상을 타케팅해야 함"

해당 업데이트를 하지 않으면 앱 업데이트를 출시할 수 없게 된다고 한다. 홀리몰리 곽카묠리..

세상에서 모바일 관련 버전 업그레이드가 제일 무서운데 말이다.

빠르게 react-native에 있는 build.gradle 파일을 열어 아래 코드를 수정했다.

{
	compileSdkVersion = 34
	targetSdkVersion = 34
}

그리고 기도메타로 빌드 실행을 돌렸다.

(촤라라라라라라...)

하지만 한 곳에서 빌드가 멈췄다.

processDebugResources..

그리고는 타임아웃이 나면서 아래와 같은 에러가 나왔다.

AAPT2 aapt2-4.1.0-6503028-windows Daemon #0: Unexpected error during link, attempting to stop daemon. This should not happen under normal circumstances, please file an issue if it does...

일반적인 상황에서는 발생하면 안된다는 말까지 붙여 놓으니 이것참.. 그렇게 타겟 sdk 버전 텍스트만 바꾸면 될 줄 알았던 문제에 제동이 걸렸다.

dependecydp gradle의 버전을 수정해보기도 하고 했지만 나의 케이스에는 해당되지 않았나 보다.

그러다가 아래에 참조한 멋쟁이들이 모여있는 stackoverflow를 발견했다. 타겟버전만 바꾸고 compileSdkVersion은 33으로 유지하고 나니까 해당 에러가 없어지고 정상적으로 빌드가 되었다.

{
	compileSdkVersion = 33
	targetSdkVersion = 34
}

다른 해결책인 build:gradle의 버전을 바꾸는 해결책도 진행했지만, 다른 버전과의 호환성때문에 실패했다.

물론 두 값은... 일치하는게 이상적으로 좋다고 한다. 잠재적인 문제의 원인이 될 수 있기 때문이다.

하지만 일단 너무 낮은 react-native 버전때문에 다른 버전들을 다 건드리기 애매해서 해당 방법으로 임시방편을 했다.

다행히 빌드된 앱을 테스트 해도 문제는 발견되지 않았다. (아직까진..)

진짜 모바일 관련 관련해서 버전 문제는

언제나 머리를 어지럽게 한다.SOS

참고 : https://stackoverflow.com/questions/67233807/android-gradle-build-error-aapt2-aapt2-4-1-0-6503028-windows-daemon-0-unexpec

0. 서론

프로젝트 받고 가장 먼저 npm install, yarn 등을 통해 필요한 패키지들을 node_modules파일에 모은다.

보통 문제없이 잘 작동하기 때문에 node_modules파일 안에 있는 내용은 수정할 일이 별로 없다.

근데 만약에 node_modules 내부 코드에 문제가 있으면 어떻게 해야할까?

내가 사용하는 특정 버전에서 다른 모듈과의 호환성 문제가 되거나 하는 상황이 펼쳐진다면 어떻게 해야할까?

버전 사용 이전에 그러한 부분들을 미리 체크하고, 필요하다면 버전을 업그레이드 하는게 제일 최선의 방법일 것이다. 하지만 모든 상황에서 버전 업그레이드가 쉽지는 않다. 내가 접한 것은 react-native와 Xcode 버전간의 문제였다.

react-native의 버전을 최신으로 올려서 문제를 해결해라고들 하지만, 그러기에 react-native 버전이 기존에 너무 낮았기에, 이를 최신버전으로 업그레이드 하는건 배보다 배꼽이 더 커지는? 일이 되어버리는 것이다. 그러다가 찾은 하나의 빛이, node_modules에 있는 react-native에서 특정 파일을 수정하라는 해결책이었다. 특정파일을 수정하고나니 정상적인 빌드가 가능했다.

그런데.. 이를 git에 어찌 반영해야하는가..? node_modules을 앞으로 계속 다 올려...야 하나?? (말도안되는) 이럴때 우리에게 한줄기 빛이 되어주는 것이 바로 patch-package되시겠다.

patch-package는 node_modules 속 커스텀한 상황을 배포상태에서 반영할 수 있게 해준다. 

1. 설치

//package.json

"script" : {
	"postinstall": "patch-package"
},

위에 라인을 추가해주고 $ yarn i patch-package 를 통해서 다운로드 해준다. 그럼 사용할 세팅 준비는 끝이난다.

2. 사용

이제 node_modules  내에서 수정하고 싶은 파일을 수정해준다.

나의 경우 node_modules에 있는 react-native 폴더 안에 있는 특정 코드를 수정했다.

그리고 나서 아래 명령어를 추가해준다. 

$ yarn patch-package react-native(내가 수정한 라이브러리 이름) 

그러고 나면 루트 폴더에 patches라는 폴더가 새로 생기고 해당 폴더 안에 수정한 패키지에 대한 정보가 들어간다!!

이제 yarn 인스톨 시점에 자동으로 node_modules를 덮어쓰게 된다!! 이제 이 폴더를 git에 올려주면 모두가 같은 수정사항을 공유할 수 있게 된다. 올리기 전에 node_modules를 지우고 yarn혹은 npm install을 통해 반영이 잘되는지 한번 더 체크해주는 센스!

4. 결론

패키지 의존 문제가 생기면 해결되기까지 기다리거나 버전 자체를 바꾸는 등의 방법 외에도, 

의존성을 유지하면서 이렇게 직접 수정해서 사용할 수 있다. 좀 더 손쉽게 문제를 타파하는 대안이 될 수 있지 않나 싶다!

역시 Xcode랑 react-native는 친해지기 어렵다!

ld: symbol(s) not found for architecture arm64

clang: error: linker command failed with exit code 1 

행복한 일상을 괴롭혔던 iOS빌드 이야기...

해당 에러가 발생하면서 Archieve Failed가 발생했다.

검색해보니 상당히 많은 경우의 수와

또 그에 따른 많은 해결책들이 난무했다.

진짜 한 10개 넘는 방식의 해결책들을 시도했는데.. (이하생략)

여러 원인과 해결책들이 있는걸로 보아,

여러 상황에서 저 에러가 나오는 것같다..

(고로 에러 전에 무슨 단계였는지를 체크해서 해결 방법을 찾아나서는게..!)

나의 경우 Linking 관련된 명령어 실행 중에

해당 에러가 발생해서 Linking 관련된 해결책들을 찾다가,

Xcode - Build Settings - Linking에서 

'Mach-O Type'을 Static Library로 수정하고 나니

빌드 성공..?!

근데 Mach-O가 뭐지?

Mach-O (Mach Object file format)

Mach-O는 파일 포맷으로

macOS, iOS 운영체제에서 실행 파일, 오브젝트 코드, 공유 라이브러리, 코어 덤프 등을 위한 형식이라고 한다.

줄이면 apple관련 OS에서 동작하는 프로그램을 위한 파일 포맷이라 할 수 있겠다!

오브젝트 파일(.o), 동적파일(.dylib), 정적파일(.a), 번들(.bundle)등이 다 Mach-O인것!!

여기서 Mach-O Type 설정은 타겟에 대해 생성할 바이너리의 유형을 지정한다고 한다.

설정 내용은 아래와 같다. 

• Executable: 운영 체제가 실행할 수 있는 독립 실행형 바이너리.
• Dynamic Library: 런타임에 로드될 수 있는 공유 라이브러리.
• Static Library: 컴파일 시점에 최종 실행 파일에 직접 포함되는 라이브러리.
• Bundle: 다른 실행 파일이나 라이브러리에 의해 런타임에 로드되는 특수한 유형의 동적 라이브러리

나의 경우 Static Library 설정하고 나서

경로 문제로 받아오지 못하는 CoreAudioTypes을 패스하고

빌드시점에 포함된 라이브러리만 가져왔 때문에

빌드 에러가 없어졌던것이다..!

고로.. 근원적인 해결책은 못한거라고 봐야겠나ㅠ

하지만 검색해보니 해당 라이브러리(플랫폼이라고 표현하는)는 이제 기본이라 따로

import 할 필요 없다고도 하는데.. 좀 더 확인해 봐야겠다.