티스토리

내맘대로 개발일지

검색하기

블로그 홈

내맘대로 개발일지

8735.tistory.com/m

Jeong Hyeon Development Blog

구독자: 0

방명록 방문하기

주요 글 목록

[RN] Cannot remove child at index X from parent ViewGroup 📱테스트 환경"react": "18.3.1","react-dom": "^18.3.1","react-native": "0.76.1"FlatList 를 사용한뒤로 navigation 을 사용할때마다저런 에러가 뜨는데 처음에는 관련있는 에러인지도 몰랐는데UI 업데이트 되면서 충돌에러가 발생하는 것이라고 한다.해결방법은 간단한데 item[rowKey]?.toString() || Math.random().toString() } // 고유 key renderItem={({item}) => ( {renderRow(item)} )} />removeClippedSubviews={false}이거 한줄 추가해주면 해결된다.해당 줄을 추가하면 U.. 공감수 0 댓글수 0 2025. 2. 18.
[RN] React-Native-Select IOS Bug 📱테스트 환경"react": "18.3.1","react-dom": "^18.3.1","react-native": "0.76.1","@react-native-picker/picker": "^2.7.7","react-native-picker-select": "^9.2.0", Android 나 Web 에서는 잘 되는게 Ios 에서만 이상하게눌러도 반응이 없었다.ChatGPT 나 스택오버플로우 깃 이슈 뭐 안본데가 없고 ..안해본게 없었는데 ..나와같은 이슈가 없어서버전도 다운그레이드 해보고 .. 삭제했다 다시깔아보고 ..다 의미없는 짓이였다 ..해결방법은 의외로 간단했는데 setValue && setValue(v)} items={items} placeholder={{label: place.. 공감수 0 댓글수 0 2025. 2. 17.
[RN] The process did launch, but has since exited or crashed. Simulator device failed to launch .Domain: FBSOpenApplicationServiceErrorDomainCode: 3Failure Reason: The process did launch, but has since exited or crashed.User Info: { BSErrorCodeDescription = ProcessExited; DVTErrorCreationDateKey = "2025-02-07 01:38:23 +0000"; IDERunOperationFailingWorker = IDELaunchiPhoneSimulatorLauncher; NSLocalizedFailure = "The request to open failed."; .. 공감수 0 댓글수 0 2025. 2. 7.
[NEXTJS] ANTD SyntaxError: Unexpected token 'export' 📱테스트 환경"next": "15.1.3","react": "^19.0.0","react-dom": "^19.0.0",해당 에러만 잡고 잔다는게 .. 벌써 새벽 2시 36분 ..ChahGPT 도 자꾸 거짓말만 하고 해결못해서 진짜너무 피곤하고 화나는 상황에 열심히 구글링을 통해역시 공식홈페이지만한게 없다 징짜 .. NextJs 14.0.3 issue · Issue #46053 · ant-design/ant-designReproduction link https://ibb.co/tHKtCc7 Steps to reproduce just update nextjs to latest version and you will see there's an issue with antd config provider What .. 공감수 0 댓글수 0 2025. 1. 1.
[React] Antd DatePicker 한글 패치 하는 방법 📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"Antd DatePicker 를 사용하면 영어로 나온다.이를 위해서 locale 을 한글로 바꿔주는 작업을 해야하는데문서에 나와있는대로 바꾸면 반쪽짜리가 되는 이슈가 있을 것 이다.import {ConfigProvider} from "antd";import ko_KR from "antd/lib/locale/ko_KR"; 이 뿐만 아니라 dayjs locale 도 한글로 바꿔줘야한다.다른 블로그나 다른 곳에서 보면 moment 를 쓰라는 곳도 있지만왠만하면 dayjs 를 사용할 수 있도록 하자.이유는 여기서 보면 된다. [React] Moment 대신 Day.js📱테스트 환경"react": "18.3.0","react-.. 공감수 1 댓글수 0 2024. 12. 20.
[React] Drag&Drop 을 위한 React-complex-tree 📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"드래그 앤 드랍 기능을 만들기 위해서여러 라이브러리를 살펴봤지만 폴더구조까지 가진 라이브러리가딱히 보이지도않았고 맘에 드는게 없었다.그러다가 react-complex-tree 를 딱 봤는데 react-complex-treeUnopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop. Latest version: 2.4.6, last published: a month ago. Start using react-complex-tree in your project by running `npm i react-complex-tree`. There are 2.. 공감수 0 댓글수 0 2024. 12. 19.
[Javascript] 숫자에 쉼표(,) 쉽게 찍는 방법 📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"숫자에 쉼표(,) 를 표기하는 방법에 가장 먼저 떠오르는 것은replice 를 이용한 정규식 사용 방법일텐데 ( 내가 그랬다 )찾아보니까 Intl.NumberFormat 이라는 함수를 사용하면 손쉽게표시할 수 있다는 꿀팁을 전달들었다.Intl 은 자바스크립트에서 기본으로 제공하는 함수로 다음과 같이 사용할 수 있다.Intl.NumberFormat('ko-KR').format(Number(text))Number 타입이 와야해서 숫자면 상관없다.나는 string 으로 넘어와서 형변환을 통해 사용했다.'ko-KR' 은 해당 지역 숫자 표기 지원 방식으로 'en-US' 등을 사용할 수 있다. 공감수 0 댓글수 0 2024. 12. 11.
[React] JSX.Element 곧 사용할 수 없게 될 심볼이 사용되었습니다 📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"props 로 Element 를 넘길때가 있어서 기존에 사용하던JSX.Element 를 타입으로 줬다.내 코드는 다음과 같다.export const CardHeader = ({ label, info, onClick = () => { }, buttonText, buttonWidth, .. 공감수 0 댓글수 0 2024. 11. 28.
[React] xlsx-js-style 📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"React 에서 엑셀을 다운받는 기능을 추가하려고 한다.처음에는 xlsx 를 이용했는데 넘 못생겨서 스타일을 추가하려고 하니xlsx-js-style 라이브러리를 이용하면 된다고 해서 사용했다.예제만 따라해도 쉽게 사용할 수 있어서 금방 적용할 수 있었다.내 코드는 다음과 같다.import * as XLSX from "xlsx-js-style";export const excelDownLoad = (data: any) => { const worksheet = XLSX.utils.json_to_sheet(data); const headerStyle = { font: {bold: true, color: {.. 공감수 1 댓글수 1 2024. 11. 26.
[React] Styled-Compoent 📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"나는 React 에서 Styled-Components 를 사용하는데전부 커스텀가능하게 만들고 사용한다.예를 들어서export const Flex = styled.div.` display: flex; align-items: ${(props) => props.alignItems || "center"}; justify-content: ${(props) => props.justifyContent || "center"}; gap: ${(props) => (props.gap ? `${pixelToRem(props.gap)}` : 0)}; flex-direction: ${(props) => props.fle.. 공감수 3 댓글수 1 2024. 11. 15.
[React] Moment 대신 Day.js 📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"이번에 Antd RangePicker 연결하면서 Dayjs 을 사용하는 것을보고오랜만에 잊고있었던 Day.js 가 생각나면서 흔히 사용하는 Moment 대신 사용하는이유를 다시한번 상기하는 시간을 가지게 되면 좋을 것 같아 기록하게 되었다.Moment.js와 Day.js는 모두 날짜와 시간 작업을 위한 라이브러리이다.두 라이브러리 모두 시간 형식 지정, 날짜 조작, 타임존 지원 등의 기능을 제공한다.MomentDay.js날짜 형식 지정 및 변환Moment.js와 비슷한 API 제공날짜 간 차이 계산불변성 (immutable data structure) 지원날짜 조작 (더하기, 빼기 등)빠르고 가벼운 성능다양한 로케일 지원.. 공감수 1 댓글수 0 2024. 11. 14.
[RN] Make sure you are using @react-native/babel-preset when building your JavaScript code. 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"와 해당 경고 때문에 진짜 정신나가는줄 알았다.ChatGPT 도 몰라 .. 스택오버플로우도 없어 ..다른 블로그에서도 찾아볼 방법이 없어 .. (NOBRIDGE) WARN Codegen didn't run for DebuggingOverlay. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code. (NOBRIDGE) WARN Codegen didn't run for SafeAreaView. This will be an error in the futu.. 공감수 0 댓글수 0 2024. 11. 13.
[RN] .env dotenv 사용하기 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React Native 에서 env 를 사용하러면 설정해야 할 값들이 좀 있어서까먹지 않기위해 작성한다.바로 레츠꼬yarn add react-native-dotenv// ts용yarn add --dev @types/react-native-dotenv필요한 모듈 설치해주고bable.config.js 로 가서plugins: [ ... [ 'module:react-native-dotenv', { moduleName: "@env", path: ".env", safe: false, // 파일에 지정되지 않은 환경 변수가 있는 경우, 오류 없이 통과하도록 설정 .. 공감수 0 댓글수 0 2024. 11. 12.
[React] reactRender is not a function 📱테스트 환경"react": "19.0.0-rc-02c0e824-20241028","react-dom": "19.0.0-rc-02c0e824-20241028","next": "15.0.2"이번에 React 가 19로 업데이트 되면서 바로 최신버전을 사용하려고했고 Antd 를 사용하여 스타일을 적용할 생각이였다.근데 React 가 19로 업데이트되면서 render 방식이 변경되었는데아직 최신 Antd 에서는 해당 반영이 안됐고편법으로 dynamic 를 사용해서 쓰려고 했는데도 당연히 안됐다.해당 방법을 수정할 방법이 있다면 좋겠지만일단 Antd 에서 업데이트가 될때까지는 어렵지 않을까 생각한다.나는 그래서 React 버전을 18.3.1 버전으로 다운그레이드 진행했다.그러니 에러는 고쳐졌지만 왠만하면다운그.. 공감수 0 댓글수 0 2024. 11. 11.
[NEXTJS] Google Analytics 연결 📱테스트 환경"react": "19.0.0-rc-02c0e824-20241028","react-dom": "19.0.0-rc-02c0e824-20241028","next": "15.0.2"사실 애널리틱스는 필수느낌으로 가고있는 것 같다.유저 리텐션이나 유입환경 등 파악하기 위해서는 필수이기 때문이다.예전에는 설정하기 되게 좀 까다로웠던 같은데쉽게 설정하는 방법이 있다고 하여 기록하려고 한다.import Script from 'next/script';export default function GoogleAnalytics({ gaId }: { gaId: string }) { return ( );}/lib/GoogleAnaly.. 공감수 2 댓글수 2 2024. 11. 9.
[NEXTJS] styled-components 적용 📱테스트 환경"react": "19.0.0-rc-02c0e824-20241028","react-dom": "19.0.0-rc-02c0e824-20241028","next": "15.0.2" [NextJS] Syled-components 사용하는 방법📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 개발환경 ( http ) 에서는 문제가 없었는데 배포환경 ( https ) 에서는 한번씩 디자인이 깨졌다. 아니면 새로고침8735.tistory.com작년에 작성한적이있는데 새롭게 적용하려고문서를 좀 찾아보다보니 적용하는 방법이 변경됐었다.버전이 업데이트되면서 사용방식도 변경된것같은데 이에맞춰서최신버전에 맞게.. 공감수 0 댓글수 0 2024. 11. 8.
[NEXTJS] Sentry 연결 📱테스트 환경"react": "19.0.0-rc-02c0e824-20241028","react-dom": "19.0.0-rc-02c0e824-20241028","next": "15.0.2"회사에서 오랜만에 nextjs 를 쓸일이 생겨서하는김에 이것저것 다시 써보기로 하였다 !오늘 작성할 내용은 Sentry 연결하는 부분이다.센트리는 10에 9은 쓴다고 생각할 정도로 무료인데에러를 확인할 수 있다는 점에서 무조건적으로 사용해야한다고 생각할 정도로중요한데 이걸 설정하는 방법을 이번에 포스팅 해보도록 하겠다.yarn add @sentry/nextjs해당 모듈 추가해주고const { withSentryConfig } = require("@sentry/nextjs");const nextConfig = { //.. 공감수 5 댓글수 2 2024. 11. 7.
[RN] Can't show Image in React Native 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"시뮬레이터에서는 이미지가 나오는데 실제 디바이스에서는 이미지가 나오지 않는아주 슬픈 버그가 발생했다.일단 나같은 경우는 s3 에서 이미지를 받아와서버 url 로 변경 후 프론트로 내려주는 방식을 사용하고있었다.보안때문에 s3 주소를 그대로 보여주면 안된다고 들어서 .encodeURI, encodeURIComponentdecodeURI, decodeURIComponent별의 별 방법을 사용해봤지만 시뮬레이터에서는 정상적인게이상하게도 실제 디바이스로만 가면 이미지가 안나왔다 ..챗지피티도 .. 블로그도 .. 스택오버플로우도 .. 어떤것도도움이 되지 않았는데 주소를 유심히 보다보니 http 로 이미지 주소가 나오고 있었다... 공감수 4 댓글수 3 2024. 10. 23.
[RN] 이미지 불러오기 ( 외부, 내부 ) 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"이미지를 호출하는 방식이 2개인데하나는 외부 URL 링크를 통해서 호출하는 방법이고하나는 내부 이미지를 호출 하는 방법이다.나는 이미지를 /assets/img 폴더에 모아놓기 때문에경로는 자기에 맞게 수정하면된다.1. 내부이미지 호출하는 방법이런식으로 source 안에 require 를 이용하여 내부 이미지를 호출한다.2. 외부이미지 호출하는 방법내부이미지 호출방법과 다른 점은 source 안에 중괄호가 하나 더 들어간다는 점과uri 를 통해 이미지를 호출한다는 것이다.이미지를 호출하는 방식이 다르다 보니 한번씩 햇갈릴때가 있는데이번기회에 햇갈리지 않도록 기억해두자 .. 공감수 0 댓글수 0 2024. 10. 21.
[RN] 외부 폰트 적용하기 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"역시 사람의 뇌는 믿을게 안된다 .. 한달전에 한 세팅이 기억이 안나서전에 했던 설정을 다시 살펴보는 지경 .. ㅠ설정하는 방법을 기록하면서 다시한번 새기기 위해서 작성한다.1. 외부 폰트 파일 ( .ttf .otf ) 파일을 다운받는다.2. 다운받은 파일을 /assets/fonts 폴더에 저장한다.3.react-native.config.js 파일을 수정한다. ( 없으면 생성 )module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts'],};4. npx react-native-asset 명령어를 입력해주면 끝난다.5... 공감수 2 댓글수 0 2024. 10. 21.
[RN] 스크린 이동하기 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"Nuxt 에서 사용하던 Router.push() 나React 에서 사용하던 navigate 를 사용하고있었다.간단하게 사용할 순 있는데 자꾸 까먹게되서 설정하는 방법을 기록하려고 한다.const TestCalcScreen = ({navigation}: NavigateProps) => { return (...)}export default TextScreen해당 컴포넌트를 생성할때 호출해주면된다.NavigateProps 타입은 만들어서 사용해주면되는데// types.tsximport {NativeStackScreenProps} from '@react-navigation/native-stack';import {RootS.. 공감수 0 댓글수 0 2024. 10. 14.
[RN] Button 만들기 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React 에서 사용하던 을 사용하려고 보니 당연히 안됐고 ..이게 몇개있는데 사용방법은 다른 글을 확인해보면 좋다. [RN] Input 사용하기📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React 와 React-Native 가 같다고 하니Input 도 당연히 이렇게 쓰려고 하니 당연히 안됐고 ^^ ..React Native 에서 Input 을 사용하는 방법은 다음과 같다.import { T8735.tistory.com [RN] Alert 사용하는 방법📱테스트 환경"react": "18.2.0""react-native": "0.74.2"버튼을 눌렀을 때 API 사용후.. 공감수 0 댓글수 0 2024. 10. 14.
[RN] Input 사용하기 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React 와 React-Native 가 같다고 하니Input 도 당연히 이렇게 쓰려고 하니 당연히 안됐고 ^^ ..React Native 에서 Input 을 사용하는 방법은 다음과 같다.import { TextInput } from 'react-native'; setYear(v)}/>특이점은 Input 의 type 처럼keyboardType 을 통해 키보드 타입을 선택할 수 있다.나머지는 React 와 동일하다. 공감수 0 댓글수 0 2024. 10. 14.
[RN] Alert 사용하는 방법 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"버튼을 눌렀을 때 API 사용후에 '소중한 한표 감사합니다❤️' 창을 띄워주고 싶었는데React 나 다른 JS 에서 alert('소중한 한표 감사합니다❤️') 이렇게 썼으니까 ..어차피 RN 도 React 기반이니까 똑같거니 했더니 역시 안됐다 ^^React Native 에서 Alert 를 사용하는 방법은 다음과같다.import { Alert } from 'react-native';Alert.alert('소중한 한표 감사합니다❤️')이렇게 아주 간단하게 사용할 수 있다.더 자세한 사용방법은 공식문서에서 확인해볼 수 있는데확인누르고 콜백받아서 처리를 하거나,타이틀이나 텍스트도 정해줄 수 있다. Alert · React .. 공감수 0 댓글수 0 2024. 10. 14.
[Kotlin] WebView 보이기 전 검정화면 안보이게 하는 방법 📱테스트 환경Medium Phoen API 35 ( Android Simulator )테스트 기기를 다른 분 빌려줘서 오랜만에 시뮬레이터를 썼다 ㅎ아무튼 유지보수 할 일이 생겨서 코드를 보는데 마지막 커밋이 3년전 크 ~진짜 손대기 싫었지만 이젠 더이상 미룰 수 없다 .. 라서유지보수를 진행하는데 먼저 targetSdkVersion 을 34 로 올려달라고 하셔서( 원래는 21 이였다 ㅎ )올리려고 보니 ~ 에러가 굉장해 엄청나 ~아무튼 열심히 에러를 고치고 보니 WebView 가 호출되기 전 검정화면이 보이게 됐다.처음엔 스플래시화면 오류인가 싶었지만 웹뷰 호출전 에러라는걸 확인했고사용자가 보기에는 놀랄만한 요소이기 때문에해당배경을 투명하게 적용해주도록 해서 흰색배경에 로딩바가 돌아갈 수 있도록 했다.. 공감수 1 댓글수 0 2024. 9. 25.
[RN] React Native Admob 설치 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"광고를 붙여야 돈을 벌 수 있으니 광고를 붙여보려고 한다.근데 Android 는 좀해봤어도 IOS 개발은 안해봐서 설정에 좀 애먹다보니해당 설정하는 내용을 기록하려고 한다!Podfile 에pod 'Google-Mobile-Ads-SDK'해당 내용 추가해당 내용은target 'ProjectName' do안에 넣어주면 된다.그다음 Xcode 에서File > Add Package Dependencies... 에서https://github.com/googleads/swift-package-manager-google-mobile-ads.git추가해주면 끝!면 좋겠지만 .. 진짜 프로젝트 생성할때마다 에러를 겪어서 해당 방법을 .. 공감수 2 댓글수 2 2024. 9. 24.
[Android] Key 분실 시 해결 방법 PC 를 변경하면서 키도 같이 잃어버렸다 ㅎ저장해놓고 잃어버리면안되는데 참 멍청하게 바로 잃어버려서 ..업로드를 하려고 하니 당연히 에러가 발생했다.android studio Android App Bundle이 잘못된 키로 서명되었습니다. 제대로 된 서명 키로 App Bundle에 서명한 다음 다시 시도해 보세요.Build > Generate Signed App Bundle/App... > Android App Bundle > Create new...를 통해서 키를 새롭게 만들어주고keytool -export -alias -keystore -rfc -file .pem입력해주면 .pem 파일이 생성되면 준비는 끝났다.Google Play Console 로 이동 후 설정 > 앱 서명 > 업로드 키 재설정.. 공감수 1 댓글수 0 2024. 9. 9.
[RN] IOS Simulator Error 📱테스트 환경"react": "18.2.0""react-native": "0.74.2"최근 이제 React Native 로 IOS 플랫폼 개발도 하다보니 맥에서 개발을 시작했는데나는 IOS 개발이 이번이 첨이라 참 .. 어려웠는데[!] Failed to load 'glog' podspec: [!] Invalid `glog.podspec` file: undefined method `[]' for nil.이 에러가 참 날 정신나가게 만들었다 ㅎpod install 을 진행할때마다 해당 에러가 발생하면서 Podfile.lock 파일이 생기지도 않았고xCode 시뮬레이터도 계속 에러만 뱉어내니 너무 답답했는데원인이 코드에 있지않아 너무 슬펐는데 xCode 의 경로를 차지 못해서 발생한 에러였다.sudo xco.. 공감수 3 댓글수 1 2024. 9. 9.
[RN] could not move temporary workspace 에러 React Native Error : java.io.UncheckedIOException: Could not move temporary workspaceWhat went wrong: java.io.UncheckedIOException: Could not move temporary workspace (C:\Users\Sreya\Desktop\sreya\love-knot\android.gradle\8.6\dependencies-accessors\stackoverflow.com아니 무슨 프로젝트를 생성할때마다 에러가 발생해 ..답답해서 이것저것 찾아보고있었는데 여기서 알려준 버전 다운그레이드가 가장 효과적이였다.IntelliJ 에러라는말도 있고 하는거보면 나도 WebStorm 사용중이라 그런가 싶긴하다.아무튼.. 공감수 0 댓글수 0 2024. 7. 31.
[React] Styled-components 사용 왜 ? 나는 지금까지 React 개발을 하면서 스타일은 항상 Styled-components 를 사용해왔다.이유는 딱히 없었다. React 처음할때 사용한 css 가 저거였을 뿐.그이후로도 쭉 React 관련 프로젝트를 할때마다 사용했고 익숙하니까 속도도 나왔다.근데 타의로 최근 scss 를 사용하게 되었는데 익숙함에 오는 거부감인지 왠지 자꾸 단점만 찾게되고다른사람들이 바보같아보였다. 근데 나는 저게 왜 좋은지도 모르고 쓰는건데이번기회에 어떤점이 좋은건지. 왜 쓰는건지 알고 사용하고더 좋은게 있다면 바꿀 수 있도록 하기위해 Styled-components 의 정리를 하려고 한다.npm install styled-componentsimport styled from 'styled-components'const .. 공감수 0 댓글수 0 2024. 7. 26.

문의안내

티스토리
로그인
고객센터

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