티스토리

홍벨로퍼스

검색하기

블로그 홈

홍벨로퍼스

kevins-world.tistory.com/m

머릿속을 정리하는 도서관

구독자: 1

방명록 방문하기

주요 글 목록

[TDS 핥아보기 #1] Toss 버튼(타이틀 - 화살표) 안녕하세요 홍벨로퍼입니다! 오랜만에 인사드리는것 같네요! 오랜만에 돌아온만큼 재미있는 프로젝트를 진행해보려고 합니다! 개인적으로 토스앱을 정말 사랑하고 그만큼 많이 애용하고있는데요 😘 그래서 토스앱에서 사용하고있는 TDS를 직접 최대한 카피해서 만들어보고 공유하고자 합니다! 그래서 오늘은 토스의 버튼 디자인 시스템을 같이 관찰해보고 분석한뒤, React-Native로 재사용할수있는 컴포넌트를 만들어봅시다! 앱 살펴보기 토스 앱에는 화살표와 함께 동작하는 버튼이 있습니다. 이 버튼은 누르게되면 살짝 작아졌다가 다시 튕겨져 나오는 행동을 보이고있는데요 예전부터 이 통통 튀는 UI를 만들어서 재사용해보고 싶다는생각이 들었었습니다! 토스 앱 분석 개발에 앞서 먼저 UI를 분석을 해봅시다! 먼저 해당 컴포넌트의 .. 공감수 0 댓글수 0 2024. 2. 3.
[바인드킷의 기록 #5] 바인드킷 1차 프리뷰 안녕하세요! 저는 바인드킷을 개발하고 있는 Kevin입니다. 🧑🏼‍💻 오늘은 바인드킷의 1차 프리뷰를 함께 소개해드릴려고 합니다. 바인드킷은 현재 0.0.28 버전을 지나고 있는 아직까지는 작은 프로덕트입니다 😘 가벼운 마음으로 읽어주시면 감사하겠습니다! 🥹 그럼~ 바인드킷의 템플릿 웹사이트를 한번 볼까요! 현재 템플릿 사이트에서는 텍스트, 이미지, 토글, 버튼정도를 제공하고있고 각 섹션별로 2~4개의 테마를 가지고 있습니다. 각 테마별로 옵션이 상이하게 설정되어 있고 색상이나 글자, 폰트크기 이미지 등 여러 가지 옵션들이 있습니다. 템플릿 사이트에서는 페이지를 삭제하거나 저장할 수 있고 버튼의 내비게이션 액션을 통해 다른 페이지로 이동할 수 있는 옵션도 현재는 제공하고 있습니다. 그렇다면 이렇게 저장된.. 공감수 2 댓글수 0 2023. 8. 22.
[바인드킷의 기록 #4] 한 발 전진하기 어제 오펜하이머 영화를 봤는데, 다 보고 나와서 느낀점은 복잡한 감정의 고리들과 수많은 사람들과의 고리가 영화의 마지막에선 한번에 정리되고 해소되는 느낌을 받으면서 개인적으로도 굉장히 힐링이 되는 영화였던거같다. 바인드킷이 가지고가야하는 수많은 프로덕트들과 프로덕트들 사이의 관계가 나를 매우 어지럽히고있었는데. 해당 영화가 많은 관계와 고리들을 정리하는 모습을 보여주며 도움이 되었던것 같다. 바인드킷을 항상 고민하면서도 바인드킷 스스로 유기적으로 성장할수있는 프로덕트를 만들고싶었는데 이는 커뮤니티나 사람들이 모이는 플랫폼 같은 곳에서 자주 발생하는 현상이다. 소프트웨어는 단지 프로그래밍 되어있는데로 움직일 뿐이지만, 프로덕트 속에서 생산되는 사람들의 의견과 대립, 옹호와 비판사이에서 탄생하는 데이터 세포.. 공감수 0 댓글수 0 2023. 8. 17.
[바인드킷의 기록 #3] 한발짝 더 물러서서 보기 지난 포스팅에서는 설문조사에 필요성을 깨닫는 중요한 여행을 했었다. 설문지에 대한 레퍼런스를 찾아보고, 여러 가지 단톡방에서 돌아다니는 설문들을 참여하고 분석하면서 다시 또 깨달은 게 한 가지가 있는데 설문을 작성할 때 내가 구체화하려는 방향에 대한 조사로써 설문을 이용할 수 있다는 것이었다 이 말인즉슨 내가 구체적인 방향성도 없이 마냥 노코드툴을 개발하고 싶다는 일념으로 방향도 없이 헤딩한 거나 다름없다 그래서 어떻게 하면 방향을 잡을 수 있을지 고민해 본 결과 내 프로덕트가 다른 프로덕트와 차별점이 있어야 생존가능하다는 결론이 나왔고 차별점 포인트들을 얻은 뒤, 시장에서 해당 차별점이 받아들여지는가를 조사하는 게 순서라고 생각하게 되었다. 해서, 나는 먼저 시장조사를 시작했고 생각 외로 꽤 많은 노코.. 공감수 0 댓글수 0 2023. 8. 11.
[바인드킷의 기록 #2] 바인드킷이 얼마나 가치가있을까? 첫 글을 쓴 이후로 일주일이라는 시간이 지났다. 그동안 바인드킷을 여러모습으로 살펴보고 객관적인 관점에서, 소비자 입장의 관점에서 또는 개발을하는, 세일즈를 하는, 운영하는 입장에서 어떤것들이 필요할지 다각화해서 볼 필요가있다고 생각했고, 오만상 아이패드에 낙서해가며(때로는 그냥 줄만 죽죽긋기도하며) 머리를 쥐어짜내면서 생각해보았는데, 어떤 관점으로 보더라도 내가 만들고싶은 프로덕트들은 넘쳐났고 아직 한참멀었다고 생각이드는것이었다. 검은 블랙홀로 빨려들어가듯이, 새로운 제품이나 서비스를 만드는 행동 + 완벽주의자가 만나면 그 두가지가 만난 생각들은 한 50년뒤의 기업으로 타임워프하는것 같다. 나는 왜 벌써 CS를 생각하고있고 나는 왜 벌써 랜딩페이지를 생각하고있고 왜 벌써 빌드 자동화를 생각하고있었는지 .. 공감수 2 댓글수 3 2023. 8. 9.
뒤로가기 버튼 클릭시 앱이 크래시 나는경우(iOS EXC_BAD_ACCESS) react-native-gesture-handler를 사용해야하는 경우가 생겨서 react-native-reanimated를 추가했는데 빌드후 이전에는 나타나지 않았던 react-navigation의 stack뒤로가기 클릭시 앱이 꺼져버리는 버그가 생겼다. 이 버그는 Android에는 나타나지않았고, iOS에서만 나타나는 버그였고 패키지를 하나씩 지우고 깔면서 Reanimated에 문제가 있다는걸 알게되었다. 해당 문제는 react-native-reanimated의 3.4.1버전의 문제였고, 현재 제일 안정된 버전인 3.3.0으로 버전을 수정하니 해결되었다. 3.3.0 -> 3.4.0으로 넘어가면서 엄청 많은 패치가있었는데 해당 패치로 현재 깃헙에도 이슈가 많이 생겼다. react-native-reani.. 공감수 0 댓글수 0 2023. 8. 6.
react-native-track-player 세팅하기 #1 React Native Track Player(RNTP)를 이용하여 백그라운드 모드에서도 음악을 재생할 수 있는 음악플레이어 앱을 만들려고 합니다! 이 글은 세팅과정에 관련한 부분만을 다루고있습니다! RNTP는 EventListner함수들을 통해서 앱내부 및 외부에서 이벤트를 전달받아 관련한 기능들을 수행하는 형태로 되어있습니다. 해서 ReactNative의 최상층이라고 할 수 있는 index.js에서 RNTP를 위한 서비스를 등록하고 시작하여야 합니다. TrackPlayer를 불러온 다음 registerPlaybackService를 통해서 재생 시 실행할 서비스파일을 등록해 줍니다. 플랫폼 세팅으로는 iOS의 경우 Xcode를 켜서 백그라운드모드를 추가해 주고 거기서 Audio, AirPlay, and.. 공감수 0 댓글수 0 2023. 8. 2.
Firebase Storage CORS 설정 방법 파이어베이스 스토리지에 저장된 이미지를 fetch로 불러와서 File타입으로 활용해야할 일이 있었는데, 처음에 요청을 하니 CORS문제로 데이터가 날아오지않았다. 해당 문제를 해결해 보려고한다. 먼저 CORS문제를 해결하려면 GCP에서 해당하는 프로젝트로 들어간다음 storage대시보드로 들어간다. 그다음 CORS를 해제할 버킷 세부정보로 들어간다음 상단 위에 콘솔을 클릭하여 연다 콘솔창을 열면 하단에 까만 화면이 뜨면서 입력할수있게 될것이다! 이제 해당 창에서 다음 명령어를 입력하여 CORS설정 파일을 만든다. echo '[{"origin": ["*"],"responseHeader": ["Content-Type"],"method": ["GET", "HEAD"],"maxAgeSeconds": 3600}].. 공감수 0 댓글수 0 2023. 8. 1.
[바인드킷의 기록 #1] 바인드킷을 다시 시작하며.. 바인드킷은 2023.04월쯤 시작되었다. 팀원 3명이서 진행을 했고, 빨리 프로덕트를 게시하고 피드백을 받지는 취지였으나, 사용하는 사람이 적었고, 피드백을 받을만큼의 기능도 많이 없었기 때문에 결국 판단을 내리기로는 "좀 더 많은 기능이 필요하다." 를 결론으로 내리고 기능을 더 추가하기위해 미뤄두었던 기능들을 살펴보게되었는데, 그 과정에서 아직도 해결하지못한 고민을 얻게되었다... 이 고민은 모듈화와 템플릿화 사이에서의 강도조율에 관한 고민이었는데 우리들은 노코드(No-Code)툴을 정의하기로 "반드시 코드를 입력하면 안되며 일반사람도 설명서만 읽으면 사용할 수 있게 해야한다" 라는 원칙이있었고, 이 때문에 모듈화와 템플릿사이에서 결론이 나지않는 지루한 회의를 계속해야만했다. 장장 2개월간 논의를 했.. 공감수 1 댓글수 1 2023. 8. 1.
0.71+ Flatlist 의 listKey 삭제 리액트네이티브 버전 0.71+ 에서는 Flatlist의 listKey가 제거되었습니다. https://github.com/facebook/react-native/blob/main/CHANGELOG.md#removed GitHub - facebook/react-native: A framework for building native applications using React A framework for building native applications using React - GitHub - facebook/react-native: A framework for building native applications using React github.com listKey는 Flatlist를 한 페이지에 여러번.. 공감수 0 댓글수 0 2023. 5. 10.
안드로이드 배포시 com.google.android.gms.permission.AD_ID 권한 확인 오류 안드로이드 배포시(내부, 프로덕션 포함) 갑자기 com.google.android.gms.permission.AD_ID 권한 오류가 발생하였다. 광고권한을 앱 내부에서 사용하고있으니 Manifest를 확인해보라고 하더라 하지만 Admob을 사용하지는 않았었고 Analytics때문에 해당 오류가 발생하였었다. 그래서 Play Console에서 앱 콘텐츠 > 광고 ID 에서 "앱에서 광고를 사용하나요?" 질문에 "예" 로 표기해주시고 하단에 목적으로는 애널리틱스를 선택해주면 완료! 공감수 0 댓글수 0 2023. 5. 9.
Android 11(API 수준 30)에서 Android 12(API 수준 31)로 이전 평소처럼 안드로이드 빌드를 프로덕션으로 올리는 중이었는데, 번들을 올리니까 아래와 같은 오류가 나타났다 Android 11(API 수준 30)에서 Android 12(API 수준 31)로 이전해야합니다. 처음엔 굉장히 당황했는데 내가 아직 안드로이드를 30수준에서 사용하고있어서 그랬다. 일단 android/build.gradle에서 compileSdkVersion과 targetSdkVersion을 31로 변경하자. 이후 android/app/src/main/AndroidManifest.xml로 들어간다음 activity를 사용하고있는곳에 아래와 같은 코드를 추가하자 android:exported="false" 단 activity안에 intent-filter를 사용하고있다면 true로 설정해야한다. and.. 공감수 0 댓글수 0 2022. 11. 25.
React-Native Android mergeDebugNativeLibs 빌드 이슈 해결 안드로이드 빌드시 'mergeDebugNativeLibs' 해당 이슈가 발생하며 빌드가 되지않는 현상이 일어나고있습니다. 해당 버그를 고치기 위해 React-Native 팀은 Hotfix를 배포하였으며 해당 사항은 아래 버전을 사용하시는 개발자님들에게 해당되는 사항입니다(0.63.x ~ 0.70.x). 0.70.x -> 0.70.5 0.69.x -> 0.69.7 0.68.x -> 0.68.5 0.67.x -> 0.67.5 0.66.x -> 0.66.5 0.65.x -> 0.65.3 0.64.x -> 0.64.4 0.63.x -> 0.63.5 반드시 업데이트가 필요하며 안드로이드 빌드를 clean 한 이후 다시 빌드를 실행해 주시면됩니다. cd android && ./gradlew clean < 0.63 .. 공감수 0 댓글수 0 2022. 11. 15.
Podfile Signing 오류 해결방법 Xcode 14로 업데이트 이후 Pod마다 개발팀을 설정해달라는 오류가 뜨고있습니다. 해당 오류가 발생하고있는데 Podfile에 다음을 추가해주면됩니다. installer.pods_project.targets.each do |target| if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle" target.build_configurations.each do |config| config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO' end end end 해당 코드는 각 Pod에 CODE SIGN을 필수로 지정하지 않게 하여 해당 오류를 피할 수 있습니다. 공감수 0 댓글수 0 2022. 9. 22.
Xcode14 버전 및 빌드넘버 오류 해결 Xcode14 로 업데이트 이후 많은 변화가있어 상당히 애를 먹고있는 상황입니다.. 최근 새로 앱을 만들고 업데이트 한뒤 TestFlight를 올리려고하다 버전정보와 빌드넘버가 적용되지않는 상황이생겼고, 이를 해결하여서 공유해봅니다. Xcode내부에서 사용하는 빌드번호 변수와 버전 변수를 활용하여 info.plist를 수정하면됩니다. iOS16이 공개되고 많은 변경사항이 생기고있습니다. 개발자분들 모두 화이팅입니다! 공감수 1 댓글수 2 2022. 9. 22.
[CSS] Hex 로 Opacity 나타내기 일반적으로 색상을 css에서 사용할때 #F4F4F4 이런식으로 사용을 하게되는데요 뒤에 두자리를 더 붙여서 opacity값 까지 나타낼수있습니다 :) 아래는 5%단위의 Hex값입니다 100% — FF 95% — F2 90% — E6 85% — D9 80% — CC 75% — BF 70% — B3 65% — A6 60% — 99 55% — 8C 50% — 80 45% — 73 40% — 66 35% — 59 30% — 4D 25% — 40 20% — 33 15% — 26 10% — 1A 5% — 0D 0% — 00 공감수 1 댓글수 0 2021. 10. 12.
[ReactNative] React Native Typescript 세팅하기 React-Native 에서 타입스크립트로 프로젝트를 만드는 방법을 설명해보겠습니다! npx react-native init yourappname --template react-native-template-typescript 먼저 npx 를 통해서 react-native 의 최신버전을 받아오고, yourappname 자리에 여러분의 프로젝트 이름을 적어주세요! 뒤에 --template 부분에서는 어떤 템플릿을 적용할지 적는 부분인데, react-native-template-typescript를 작성하고 엔터! 😁 Github 주소 : https://github.com/react-native-community/react-native-template-typescript GitHub - react-native.. 공감수 1 댓글수 0 2021. 9. 26.
[Firebase Hosting] crbug/1173575 이슈 몇일전 잘 되고 있던 호스팅 사이트에 접속을 했더니 진입이 안되길래 와이파이문젠가 하고 갸우뚱했는데 다른사이트들은 접속이 다 잘되는것.. 그래서 기다려보니 콘솔에 crbug/1173575 라는 메세지를 남긴채 timeout되더라 그래서 나는 리액트패키지를 자동화 빌드해서 호스팅하고있었기때문에 파이프라인을 점검하게되었고, 파이프라인은 정상적으로 돌아갔고 배포자동화에도 문제가없는것으로 나타났다 non-JS module deprecated 라고 되어있어서 빌드가 잘못된건지 생각했는데 로컬에서 돌리고해도 다 잘돌아갔고 로컬에서 빌드해서 firebase emulator:start --only hosting 했는데 잘만 돌아가더라.. 혹시나해서 firebase hosting status Dashboard에도 들어가.. 공감수 1 댓글수 0 2021. 9. 25.
[React Navigation] navigate할때 Dynamic한 params의 타입 세팅해주기 안녕하세요 😊 케빈입니다 🙏 제가 요즘 Typescript + ReactNative를 사용해서 개인적으로 앱을 만들고있는데요 useNavigation을 Typescript와 사용하면서 dynamic하게 변하는 param들을 screen에 맞게 type을 세팅해주고자할때 어떻게 해야할지 고민하고 적용한 사례를 공유하고자 합니다 👏 먼저 Typescript 쓰기전 코드를 공유하겠습니다 import { useNavigation } from '@react-navigation/native'; import React, { useCallback } from 'react'; import SliderBanner from '../components/SliderBanner'; const SliderBannerContaine.. 공감수 1 댓글수 1 2021. 9. 25.
[React Navigation] useNavigation에 Typescript 적용하기 🌸 React Navigation에 Typescript를 쓰기시작하면서 이전에 JSX에서 쓰던 그냥 일반 String타입이 아닌 navigation용으로 타입을 따로 재 정의해주어야한다! 이전 JSX에서는 import React, { useCallback } from 'react'; import { useNavigation } from '@react-navigation/native'; const HomeContainer = () => { const navigation = useNavigation(); const __onPressed = useCallback(() => { //이벤트 페이지로 이동하면서 어떤 이벤트를 보여줄지 알려주기 navigation.navigate('event', {key : 'ASD9f.. 공감수 3 댓글수 2 2021. 9. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.