Programing

[RN] 인생이 지루하다면 react-native upgrade (0.66.3 -> 0.72.5)

* 업그레이드 방법에 대해 깊게 다루고 있지 않습니다. 업그레이드를 고민 중이거나 낮은 rn 버전을 사용하는 분들께 도움이 되었으면 해서 작성하는 회고글입니다. Histroy 회사에서 사용하던 rn 버전은 0.66.3이다. 오래된 버전으로 인한 이슈가 잔잔하게 있었지만 먼저 해야 할 일들을 쳐내는라 급한 불만 끄면서 업그레이드를 미루고 있었는데 이제는 정말 올려야 할 것 같아 업그레이드하기로 결심했다. '이제는 정말 올려야'했던 이유는 이렇다. xcode 이슈 특정 xcode 버전에서 버그를 발생시키는 코드들이 존재한다. 예를 들어 rn 0.69.0 이하 버전에 xcode 14.3 이상 버전을 사용한다면 yoga.cpp에서 에러가 발생한다. 유사한 이슈가 몇 개 더 존재하지만 보통 xcode에서 코드 한..

[RN] Node 업그레이드 후 빌드 오류 (error:0308010C:digital)

History 기존에 사용하던 node 버전은 v16.16.0 인데 꽤 지난 버전이기도 하고 협업과정에 node 버전 차이가 문제가 되기도 해 이번 기회에 업그레이드하기로 했다. node 버전관리는 nvm을 사용하고 있기 때문에 lts 버전을 다운로드하여 버전을 바꿔주었다. nvm install --lts 설치가 끝난 후 사용할 node 버전을 바꿔주고 별다른 이유가 없다면 default 버전도 변경해준다. nvm use --lts nvm alias default v18.17.1// 여기는 --lts 옵션이 듣질 않으니 직접 버전을 입력해줘야 한다,,, // 변경사항 확인 nvm ls node -v node 버전을 올리는 것까지는 문제없으나 metro를 실행하면 이런 에러를 받는다. Failed to c..

[RN] 플로팅 버튼 아래로 스크롤 할 때만 나오게 구현(feat. reanimated)

How to 간단하게 Y값 조절로 버튼을 화면 아래 숨겨뒀다가 아래로 스크롤할 때만 나오게 하면 된다. 화면 상단에 헤더, 카테고리 버튼 등이 이미 있을 때 하단 버튼까지 만들어두기엔 스크린이 좁게 느껴져서 유저가 스크롤을 올릴 때는 버튼을 숨기고 싶었다. 자세히 보기 reanimated를 사용해서 ScrollView와 하단 버튼을 만들었다. '자세히 보기' 버튼의 경우 translateY값을 한참 높게 줘서 스크린 하단을 넘겨버리면 버튼을 숨길 수 있다. 스크롤을 내렸다는 게 감지되면 translateY의 값을 0으로 줘서 제위치로 돌아오게 하면 버튼이 아래에서 위로 올라오게 될 것이다. const translateY = useSharedValue(1000); const actionBarStyle = ..

[Next] POST로 url 요청시 request body 받아 사용하기(feat.405 error)

결제시스템을 구현 중인데 url을 POST로 요청해서 Request Data를 사용해야 하는 경우가 생겼다. Nextjs를 사용중이므로 getServerSideProps을 이용해 body를 받아보도록 하자 pages/api Nextjs의 규칙으로 pages/ 루트의 api 폴더에 index.js를 생성해 POST 요청시 어떻게 처리 할 지 만들 수 있다. 지금은 request body를 받아옴은 물론 후가공이 필요하기 때문에 이 방식으로 진행하지는 않았다. export default async function handler(req, res) { await bodyParser.json()(req, res, async () => { const requestBody = req.body; if (req.meth..

[RN] reanimated로 flipCard 만들기

Layout export default function FlipCard() { const { width } = useWindowDimensions(); const cardLayout = useMemo(() => { return { position: 'absolute', backfaceVisibility: 'hidden', alignItems: 'center', justifyContent: 'center', width: width - 48, height: 300, borderWidth: 2, borderRadius: 16, borderColor: '#eee', }; }, []); return } View 두개를 absolute로 겹친 후 interpolate를 사용해 서로 반대로 회전 시키면 된다. 이 ..

[RN] zsh에서 gradle 에 맞는 Java 버전변경 ( version 62 )

version 62 error gradle 공식문서에는 gradle 버전에 적합한 java 버전에 대해 설명해주고 있다. (https://docs.gradle.org/current/userguide/compatibility.html) 진행 중인 프로젝트의 gradle 버전이 6.9인데, 작업 중인 맥의 java 버전은 18이라 android 빌드시 에러가 발생한다. unsupported class file major version 62 권장사항에 따르면 java 15 쯤 다운 받아 해결해 볼 수 있었지만 에러 해결 중 gradle은 java11 버전이 안정적이라 해서 설치해 봤다. Java 11 install https://www.oracle.com/kr/java/technologies/downloads..

[RN] android 빌드 실패 No connected devices

FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: No connected devices! yarn으로 metro 서버를 켜고 안드로이드 시뮬레이터를 켜려 하면 위 메세지를 뱉으며 빌드 실패한다. 해결한 방법 1. 디바이스 연결 확인 adb devices 프로젝트 폴더에서 터미널에 입력하면 연결된 안드로이드 디바이스를 확인할 수 있다. 위 사진처럼 List of devices attached 다음 라인에 디바이스 이름이 나오지 않는다면 연결된 기기가 없는 것이다. 2. 디바이스..

[Git] alias를 이용해 깃 명령어를 단축어로 사용

git log --graph --all --oneline 위 명령어처럼 길어진 git 명령어는 Alias를 이용해 짧은 단축어로 불러 쓸 수 있다. Alias 등록 git config --global alias.graph 'log --graph --all --oneline' git config --global alias. 다음에 지정하고 싶은 단축어를 넣고 '' 안에 실행할 명령을 적으면 된다. (한 단어라면 따옴표 없이 가능하다) 따라서 위 명령을 터미널에 입력하고 난 후에는 git graph 이렇게만 입력해도 git log --graph --all --oneline와 동일하게 동작한다. 다른 단축어 설정 git 공식문서에서 참조한 단축어와 개인적으로 사용중인 단축어는 아래와 같다. git config..