lifeyun24의 등록된 링크

키자드에 등록된 총 299개의 포스트를 확인하실 수 있습니다.

Naver Blog

[RN] RN 에서 GC가 작동하는 시점 및 메모리 누수 이유

React Native를 쓰다 보면, 앱이 점점 느려지고 때로는 강제 종료되는 현상을 겪은 적 있으시죠? 이럴 때 대부분의 원인은 "메모리 누수(Memory Leak)"이고, 그 중심에는 우리가 흔히 잊고 지내는 GC(Garbage Collection)이 있습니다. GC(Garbage Collection)는 더 이상 사용되지 않는 메모리를 자동으로 해제하는 기능입니다. JavaScript(React Native 포함)에서는 메모리를 직접 해제할 수 없기 때문에, 사용하지 않는 객체를 감지해서 런타임이 대신 정리해주는 것이죠. - GC 는 무엇인가 React Native에서 메모리 누수가 발생하는 패턴들 - setInterval, setTimeout 클린업 누락 useEffect(() => { const id = setInterval(() => { console.log(" 안전하게 실행"); }, 1000); return () => clearInterval(id); // 반드시 정리

원문보기 내부링크
Naver Blog

[RN] ReactQuery staleTime, cacheTime, gcTime 정리

React Query를 튜닝하려면 이 세 가지 개념을 정확히 이해하는 게 핵심입니다. React Query는 쿼리 데이터를 다음 3가지 상태 중 하나로 분류합니다: 상태 의미 fresh "신선한 데이터" → 네트워크 요청 없이 그대로 사용 가능 ️ stale "오래됐지만 쓸 수 있는 캐시" → 백그라운드에서 refetch 가능 inactive 캐시만 남아 있고 화면에 사용되지 않는 상태 → gcTime 이후 삭제됨 staleTime은 무엇인가? staleTime은 데이터를 fresh 상태로 유지하는 시간을 의미합니다. useQuery(['todos'], fetchTodos, { staleTime: 5000, // 5초 동안 fresh }); 위 코드의 의미는: 데이터를 받아오면 → 5초 동안은 fresh 상태 이 5초 동안은 다시 조회되더라도 서버 요청이 발생하지 않음 5초가 지나면 → stale 상태가 되고, 화면에 다시 마운트될 경우 자동으로 refetch 시도 가능 시간 흐

원문보기 내부링크
Naver Blog

[RN] React Native 프로젝트에서 CocoaPods 버전 충돌 정리 및 해결법

React Native iOS 프로젝트를 운영하면서 Podfile.lock에 기록되는 CocoaPods 버전과 실제 설치된 버전이 달라지는 문제가 발생했습니다. 겉보기에는 문제가 없어 보이지만, 협업과 CI/CD 환경에서는 혼선을 유발할 수 있습니다. 이 글에서는 해당 문제가 왜 발생했는지, 어떻게 해결했는지를 정리합니다. 문제 현상 bundle exec pod --version을 실행하면 1.16.2가 출력됨 그러나 Podfile.lock 파일에는 COCOAPODS: 1.15.2로 기록되어 있음 cd ios && pod install --repo-update로 설치하면 다시 1.15.2로 되돌아감 이러한 버전 불일치로 인해 Podfile.lock이 팀원 간에 계속 변경되고, Git 충돌도 자주 발생했습니다. 원인 분석 CocoaPods 버전 기록 방식 Podfile.lock의 COCOAPODS: 항목은 pod install이 실행될 때 사용된 CocoaPods 버전을 기록합니다.

원문보기 내부링크
Naver Blog

[개발 지식] 프로젝트 단에서 eslint 룰 동기화 하기

만약에 에디터의 cmd+shift+p로 user setting json에서 "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, 를 추가하지 않으면, 프로젝트에 설치되어 있는 eslint 룰이 적용 안될 수 있다. 따라서 개개인에게 세팅을 요구하기 보다는, 프로젝트의 .vscode/settings.json 에서 위 코드를 추가하면 더 일관성을 유지할 수 있다.

원문보기 내부링크
Naver Blog

[개발 지식] 타입스크립트 컴파일 타임과 런타임의 차이

// 1. 런타임 값에 의존하는 타입 예시 const fruits = ['apple', 'banana', 'orange'] as const; type Fruit = typeof fruits[number]; // 'apple' | 'banana' | 'orange' // 런타임에서 값이 변경되면 타입이 업데이트되지 않음 fruits.push('grape'); // 런타임에서 값이 변경됨 // 하지만 타입스크립트는 여전히 'apple' | 'banana' | 'orange'로 인식 // 2. 런타임 값에 의존하지 않는 타입 예시 type Fruit = 'apple' | 'banana' | 'orange' | 'grape'; const fruits: Fruit[] = ['apple', 'banana', 'orange']; // 런타임에서 값이 변경되어도 타입은 안정적 fruits.push('grape'); // 타입 체크가 안정적 // 3. 컴파일 타임 vs 런타임 예시 // 컴파일 타임

원문보기 내부링크
Naver Blog

[RN] 레이아웃 전환을 자연스럽게 - LayoutAnimation 활용기

모바일 앱을 개발하다 보면 컴포넌트의 상태에 따라 레이아웃이 바뀌는 경우가 많습니다. 예를 들어, 토글 버튼을 눌렀을 때 상세 정보가 펼쳐지거나, 특정 버튼이 조건에 따라 사라지는 상황이죠. 그런데 이런 변화가 '툭' 하고 일어난다면 사용자 입장에선 꽤 어색하게 느껴질 수 있습니다. React Native는 이런 문제를 해결할 수 있는 간단하면서도 강력한 애니메이션 API를 제공합니다. 바로 LayoutAnimation입니다. 왜 LayoutAnimation인가? 기존의 Animated나 reanimated를 이용하면 세밀한 애니메이션 제어가 가능하지만, 간단한 레이아웃 변화에 매번 값을 상태로 관리하고 애니메이션을 넣는 건 오히려 과할 수 있습니다. LayoutAnimation은 이런 경우에 레이아웃 자체의 변화에 애니메이션을 자동으로 적용해 줍니다. 한 줄만 추가하면, 크기 변화, 위치 이동, 컴포넌트 등장/삭제가 자연스럽게 전환됩니다. 기본 사용법 import { LayoutA

원문보기 내부링크
Naver Blog

[RN] React Query useMutation에서 mutate() 콜백 실행 순서 정리

React Query useMutation에서 mutate() 콜백 실행 순서 React Query에서 데이터를 서버에 전송할 때 useMutation 훅을 사용합니다. 이 훅은 내부에 onSuccess, onError 등의 콜백을 등록할 수 있지만, mutate() 함수 호출 시에도 별도로 콜백을 넘길 수 있습니다. 그렇다면 다음과 같은 코드에서 콜백은 어떤 순서로 실행될까요? const mutation = useMutation({ mutationFn: apiCall, onSuccess: () => { console.log(' useMutation onSuccess') }, }) mutation.mutate(data, { onSuccess: () => { console.log(' mutate onSuccess') }, }) 실행 순서 mutate(..., { onSuccess })로 넘긴 콜백이 먼저 실행됩니다. 이후 useMutation({...}) 내부에 정의된 onSucces

원문보기 내부링크
Naver Blog

[RN] Android 15(SDK 35) Edge-to-Edge 비활성화 대응 가이드

개요 Android 15(SDK 35)부터 Edge-to-Edge 디스플레이가 기본적으로 활성화되면서, 기존 React Native 앱에서 UI 레이아웃 문제가 발생할 수 있습니다. 특히 상태바나 네비게이션 바 영역에 콘텐츠가 겹치는 현상이 나타날 수 있어, 이를 해결하기 위한 임시 대응 방법을 소개합니다. 문제 상황 영향 범위: Android 15(API Level 35) 이상 증상: 앱 콘텐츠가 시스템 UI(상태바, 네비게이션 바) 영역과 겹침 원인: Android 15부터 Edge-to-Edge 디스플레이가 기본 활성화 해결 방법 1. Gradle 의존성 추가 android/app/build.gradle 파일에 필요한 의존성을 추가합니다: dependencies { // 기존 의존성들... // Edge-to-Edge 비활성화를 위해 추가 implementation 'androidx.core:core-ktx:1.12.0' implementation 'androidx.appcom

원문보기 내부링크
Naver Blog

[RN] 앱으로 딥링크 주소 보내는 법

npx uri-scheme open [앱scheme주소]://search\?query=커피 --ios uri-scheme open 을 사용합니다.

원문보기 내부링크
Naver Blog

[RN] react-query 디버깅하기

import { DevToolsBubble } from 'react-native-react-query-devtools' // 개발모드 {__DEV__ && <DevToolsBubble />} https://github.com/LovesWorking/react-native-react-query-devtools GitHub - LovesWorking/react-native-react-query-devtools: React Query Dev Tools for React Native React Query Dev Tools for React Native. Contribute to LovesWorking/react-native-react-query-devtools development by creating an account on GitHub. github.com QueryClientProvider 안에서 사용해야 합니다.

원문보기 내부링크
Naver Blog

[개발 꿀팁] 개발 생산성을 대폭 향상시키는 Raycast

혹시 개발 중에 이런 행동을 하시는 분: 프로젝트 A에서 작업을 하다 API 프로젝트 B를 작업할 필요가 생겼다. 먼저 A를 이동시키고, vscode를 켠 뒤, 프로젝트 B를 vscode에서 오픈한다. 위 과정을 하루 이틀만 하면 그만이지만, 개발을 직업으로 삼고 있는 사람한테는 큰나큰 시간 손실입니다. 생산성을 높이기 위해 소개할 오늘의 툴은 Raycast입니다. 먼저 사이드로 이동하여 download for mac을 진행합니다. 다양한 기능을 지원합니다. Raycast의 기본 단축키는 option+space로 설정되어 있습니다. 맥에 기본으로 내장되어 있는 spotlight의 단축키 command+space로 사용하고 싶으면 설정->키보드->키보드 단축키->spotlight에서 설정을 바꿔줍니다. 개발자로서 제일 많이 사용될 기능은 Create Quicklink입니다. 이렇게 퀵링크를 사전에 지정 해놓으면 해당 프로젝트를 단숨에 열 수 있습니다. Cursor도 사용 가능.

원문보기 내부링크
Naver Blog

[Redis] redis-server 사용 중인 프로세스 제거하기

redis-server는 메모리 내 데이터 구조 저장소로서, 빠른 데이터 접근이 필요할 때 사용됩니다. 주로 캐싱, 세션 관리, 실시간 데이터 분석, 메시지 브로커 등의 용도로 사용됩니다. redis-server 및 node 를 함께 사용하는 이유는 데이터 캐싱, 세션 관리, 실시간 기능, 작업 큐 등이 있습니다. redis-server redis-server 를 사용합니다. Warning: Could not create server TCP listening socket *:6379: bind: Address already in use Failed listening on port 6379 (tcp), aborting. Redis 서버가 기본 포트인 6379를 사용하려 했으나, 이미 해당 포트가 사용 중이어서 충돌이 발생했습니다. 따라서 Redis 서버가 실행되지 않았습니다. lsof -i:6379 lsof 명령어를 사용하여 포트 6379를 사용 중인 프로세스를 확인했습니다. 결과로

원문보기 내부링크
Naver Blog

[개발 지식] ngrok 로 외부에서 로컬 개발 서버로 접근하기

위워크, 패스트파이브와 같은 공동 작업 공간에서 제공하는 네트워크에서는 특정 포트에 대한 접근을 제한하거나 방화벽 규칙을 설정하여 보안을 강화하는 경우가 많습니다. 이로 인해 로컬 개발 서버에 외부에서 접근하기 어려울 수 있습니다. 이러한 문제는 특히 모바일 기기나 외부 네트워크에서 로컬 서버에 접근하려고 할 때 발생할 수 있습니다. 특히, React Native같은 경우는 더더욱 그렇습니다. 로컬에서 Metro 서버를 띄워야 하는데 iOS 기종에서는 api 접근이 안되는 상황이 발생할 수도 있죠. 먼저 ngrok 를 컴퓨터에 커맨드로 세팅합니다. 만약 접근하고자 하는 localhost가 4399 일 경우, ngrok http 4399 를 터미널에서 실행하면, Forwarding https://5d3b-54-63-17-187.ngrok-free.app -> http://localhost:4399 같은 포워딩이 뜨는데 여기서 앞에 있는 주소를 localhost 대신해서 사용하면 됩니다

원문보기 내부링크
Naver Blog

[VSCode] 미사용 값 import 문에서 제거하는 법

프로젝트 루트 경로 아래에 .vscode 폴더 생성, 아래에 파일 settings.json 에 추가해줍니다. "editor.codeActionsOnSave": { "source.organizeImports": "explicit" } vscode / cursor 마찬가지 입니다. 이렇게 설정하면 저장 시 사용 안되는 값을 import 문에서 자동 제거하여, 빌드 시 발생하는 에러 등을 사전에 예방 할 수 있습니다.

원문보기 내부링크
Naver Blog

[개발 지식] 다중 포트 포워딩 방법

기존의 ngrok 을 사용하면 하나의 동시에 하나의 포트만 포워딩 할 수 있기에 VSCODE 에서 기본적으로 제공하는 기능을 사용하면된다. extension 없이 포트 번호만 입력하면 자동으로 생성해준다. 표시 여부도 private or public 으로 변경가능.

원문보기 내부링크
Naver Blog

[Cursor] import 제안 단축키 Cmd+I가 막혔을 때 해결법 (Trigger Suggest)

코드를 작성하다 보면 자주 이렇게 추천 항목들을 바로 띄워줄 필요가 있다. 다만 cursor 사용 시, 지난달 업데이트에서 cmd+i 옵션을 강제로 LLM 모델로 질문하는 것으로 지정하여, 기존의 옵션이 막혀버렸다. cursor settings에서는 초기에 수정 옵션을 제공했으나, 최근에는 그냥 cmd + i를 강제로 점유했다. 어이가 없는 상황이지만 cursor의 편리함도 포기하기 어렵기에, 기존 vscode의 설정을 바꿔주도록 한다. 2. trigger suggest의 옵션을 원하는 숏컷으로 바꿔준다.

원문보기 내부링크
Naver Blog

[개발 회고] ngrok free plan 주소 응답 못 받는 이슈

https://ngrok.com/docs/pricing-limits/ Pricing and Limits | ngrok documentation Learn about the pricing, limits, and licensing model for the paid ngrok for production plans. ngrok.com ngrok의 free plan 을 사용 중이라면 해당 limit 표를 참고하는 게 좋다. 필자는 외부 서버 -> 내부 서버의 ngrok의 포트포워딩한 주소로 호출을 요청했는데 요청이 계속 안 들어와서 외부 서비스의 문제인가 싶었지만 postman으로 내부 서버로 직접 요청을 보내보니 아래와 같은 에러가 찍혔다. 테스트를 많이 한 탓에 월 사용량을 초과한 것이었다.

원문보기 내부링크
Naver Blog

[RN] patch-package ? yarn patch!

https://www.npmjs.com/package/patch-package patch-package Fix broken node modules with no fuss. Latest version: 8.0.0, last published: 2 years ago. Start using patch-package in your project by running `npm i patch-package`. There are 1089 other projects in the npm registry using patch-package. www.npmjs.com 패키지를 입맛대로 수정할 수 있는 유명한 'patch-package' 다만 필자는 yarn 4.1 을 사용 중이기에, patch-package 사용이 불가하다. 다만 yarn 에서는 이미 해당 기능을 내장해서 제공해주고 있다. 따라서 바로 yarn patch package-name package-name 안에 맘에 안드는 코드가 있어서 수정

원문보기 내부링크
Naver Blog

[개발 회고] 커밋, 푸시 전 검사. husky 설치

https://typicode.github.io/husky/ Husky Ultra-fast modern native git hooks Husky enhances your commits and more woof! Automatically lint your commit messages , code , and run tests upon committing or pushing. Get started here . Features Just 2 kB ( gzipped ) with no dependencies Fastest due to being lightweight (runs in ~1ms ) Uses... typicode.github.io husky 를 설치하면 pre-commit, pre-push 시 쉘 명령어를 실행할 수 있다. 또한 package.json 의 scripts에 "postinstall": "husky install" 추가를 해주면, 다른 개발자들이 협업할 때 yarn ins

원문보기 내부링크
Naver Blog

[RN] react-navigation Static에서 Dynamic로 롤백을 한 이유

현재 react-navigation 7.x 기준 문서는 Static 방식을 default로 보여주고 있다. // In App.js in a new project import * as React from 'react'; import { View, Text } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> </View> ); } const RootStack = createNativeStackNavigator(

원문보기 내부링크
Naver Blog

[RN] eslint-plugin-filenames 도입 과정 및 설정

react native에서 번들링 사이즈를 줄이기 위하여 ts-prune 기능으로 deadcode를 발견하고 정리하고 있었다. 작업 완료 후, 필자가 추가로 직접 확인하는 과정에서 분명 export를 해서 다른 곳에서 import를 하고 있지 않으면 deadcode 검사에서 나와야 할 텐데, deadcode로 잡히지 않아서 의문이 들었다. // MyTestCode.tsx const MyTestCode = () => { ... } export default MyTestCode 필자의 업무 환경에서는 위와 같은 화살표 함수형 React 컴포넌트를 사용하고 있다. 그리고 기존 작업자의 실수로 아래와 같이 코드가 작성이 되어있었다. // MyTestCode.tsx const MyCode = () => { ... } export default MyCode 이렇게 되어도 작동에는 문제가 없다. 다만 다른 곳에서 import 할 때는 파일명을 기준으로 하기에 import MyTestCode fr

원문보기 내부링크
Naver Blog

[RN] CodePush Setting 2023 (iOS/Android)

yarn global add appcenter-cli 프로젝트에서 appcenter login 하면 로그인 웹 화면이 브라우저에서 열립니다. 로그인 / signUp 하면 받은 Authentication 코드-> 프로젝트의 Access code에 넣습니다. https://github.com/microsoft/react-native-code-push GitHub - microsoft/react-native-code-push: React Native module for CodePush React Native module for CodePush. Contribute to microsoft/react-native-code-push development by creating an account on GitHub. github.com yarn add react-native-code-push 라이브러리 설치 Android Add new app 해서 android 전용 프로젝트를 appcenter에

원문보기 내부링크
Naver Blog

[RN] Fastlane Setting 2023

iOS / Andriod 개발자를 위해 스크린샷을 생성하거나, 인증서를 관리, 앱 배포 등을 자동화 해주는 툴입니다. 먼저 bundler 설치를 해줍니다. Bundler는 Ruby 언어를 위한 의존성 관리 도구로, 주로 Ruby 프로젝트에서 사용됩니다. https://docs.fastlane.tools/ fastlane docs lane :beta do increment_build_number build_app upload_to_testflight end lane :release do capture_screenshots build_app upload_to_app_store # Upload the screenshots and the binary to iTunes slack # Let your team-mates know the new version is live end You just defined 2 different lanes, one fo... docs.fastlane.tools

원문보기 내부링크
Naver Blog

[RN] CI / CD Setting 2023 (Github Actions)

우선 기본적인 개념부터 보겠습니다. 지속적 통합 (Continuous Integration, CI): 이 개념은 개발자들이 코드 변경사항을 주기적으로 중앙 레포지토리에 병합(merge)하는 것을 의미합니다. 주요 목표는 버그를 빠르게 발견하고 해결하며, 소프트웨어 품질을 유지하는 것입니다. 자동화된 테스트를 통해 새로운 코드 변경사항이 기존 코드와 잘 통합되는지 확인합니다. 지속적 배포 (Continuous Deployment): 모든 코드 변경사항이 테스트를 거쳐 자동으로 프로덕션 환경에 배포되는 과정입니다. 이는 개발자가 코드를 변경할 때마다, 이 변경사항이 자동으로 사용자에게 도달한다는 것을 의미합니다. 특정 컴포넌트를 테스트 하기 위에 VideoModal.test.tsx 이란 파일을 아래에 만들어줍니다. yarn add jest yarn add @types/jest 없을 시 설치. VideoModal 을 테스트 하기 위해 VideoModal 에서 넘겨 받는 prop 들을 te

원문보기 내부링크
Naver Blog

[개발 꿀팁] 맥에서 순정 터미널 대신 iTerms2를 사용하는 이유

회사에서 상사분에게 강력 추천 받은 iTerms2, 너무나도 강추하길래 설치해서 사용해보니 그 원인을 알았다. 1.분할 창/탭 및 창 관리: iTerm2는 여러 터미널 세션을 한 화면에 동시에 보여주는 분할 창 기능을 제공합니다. 또한 여러 탭과 창을 쉽게 관리할 수 있어, 작업 영역을 깔끔하게 유지할 수 있습니다. 2. 사용자 정의 가능한 단축키: 사용자가 자주 사용하는 명령어나 기능에 대해 단축키를 설정할 수 있어, 작업 효율성을 높일 수 있습니다. 3 .테마 및 사용자 인터페이스 맞춤 설정: 다양한 테마와 색상, 폰트 설정을 통해 사용자의 취향에 맞게 터미널의 외관을 맞춤 설정할 수 있습니다. 4. 통합된 마우스 지원: iTerm2는 마우스를 사용하여 텍스트를 선택하거나 창을 조작하는 것을 지원합니다. 5. ****자동 완성****: 자주 사용하는 명령어나 파일 이름 등을 자동으로 완성해주는 기능을 제공합니다. 6. 세션 복구: iTerm2는 시스템 재시작 후에도 이전의 세션을

원문보기 내부링크
Naver Blog

[nvm] nvm으로 맥북에서 node 버전 변경하기

일단 기본적으로 homebrew가 설치되어 있어야 합니다. nvm 설치 nvm은 node version manager로, 다양한 버전의 노드를 사용할 수 있게 해준다. brew가 설치되었다면, nvm을 설치할 수 있다. brew install nvm 터미널에 위와같은 명령어로 nvm을 설치할 수 있다. nvm -v 또한, 위와 같은 명령어로 nvm이 설치되었는지 확인한다. 설치가 되었다면, nvm의 버전이 출력된다. (버전이 보통 출력되지 않는다) 버전이 출력되지 않는다면, nvm 환경변수 설정이 필요하다. * 폴더 생성 mkdir ~/.nvm * 환경변수 설정 vi ~/.zshrc * 다음의 텍스트를 붙여넣는다. export PATH="$PATH:$HOME/.rvm/bin" export PATH="$PATH:/opt/homebrew/bin" # NVM export NVM_DIR="$HOME/.nvm" [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/

원문보기 내부링크
Naver Blog

[RN] TS 4.0 기준으로 에러 처리 방법 변경

TypeScript에서 `catch (error)` 구문을 사용하는 경우, TypeScript 4.0 이전 버전에서는 `error` 객체가 자동으로 `any` 타입으로 간주됩니다. 이는 타입 검사를 회피하는 것이기 때문에, 코드 내에서 `error` 객체의 속성에 접근할 때 타입 안전성이 보장되지 않습니다. TypeScript 4.0 이상에서는 `error` 객체를 `unknown` 타입으로 처리하는 것이 권장됩니다. 이는 코드의 타입 안전성을 높이는 방법입니다. `unknown` 타입을 사용하면, 개발자가 `error` 객체를 사용하기 전에 해당 객체의 타입을 명시적으로 검사하도록 강제합니다. 이를 통해 런타임 에러의 위험을 줄이고, 코드의 타입 안전성을 높일 수 있습니다. 그러나, 직접적으로 `error` 객체의 타입을 `unknown`으로 지정하지 않고, 단순히 `catch (error)`를 사용하는 것도 가능합니다. 이 경우, TypeScript 설정에 따라 `error` 객

원문보기 내부링크
Naver Blog

[RN] 웹뷰 디버깅하는법

<Webview ... webviewProps={{ webviewDebuggingEnabled: true }} /> webviewDebuggingEnabled 가 필요하다.

원문보기 내부링크
Naver Blog

[RN] 디버깅 툴 최신버전

https://reactnative.dev/docs/next/debugging?js-debugger=new-debugger Debugging Basics · React Native Accessing the Dev Menu reactnative.dev The React Native team is working on a new JavaScript debugger experience, intended to replace Flipper, with a preview available as of React Native 0.73. The new debugger can be enabled via React Native CLI. This will also enable j to debug. npx react-native start --experimental-debugger **** 사용 결과 console.log 에서 문자열 사이의 \n 을 인식 못한체로 뒷부분 문자가 없이 출력되는 현상이 발견됐다.

원문보기 내부링크
Naver Blog

[RN] 메모리 이슈 Out Of Memory 관측하는법

에러 트레킹 도구에서 Out Of Memory 이슈가 접수되었습니다. 발생 OS 는 iOS 이며, 우선 이는 Xcode를 활용하여 관측할 수 있습니다. Xcode의 Instruments 사용: iOS 앱 개발 환경인 Xcode 내의 Instruments 도구를 사용하여 앱의 메모리 사용량을 모니터링할 수 있습니다. Instruments는 앱의 성능 분석을 위한 강력한 도구로, 메모리 누수, CPU 사용량 등 다양한 측정치를 제공합니다. Xcode를 열고, 상단 메뉴에서 'Xcode' > 'Open Developer Tool' > 'Instruments'를 선택합니다. 'Leak' 또는 'Allocations' 도구를 선택하여 앱을 실행하고 메모리 사용량을 모니터링합니다. 그럼 Allocations 프로파일러를 사용하여 측정한 앱의 메모리 사용 상황을 보겠습니다. 데이터의 각 항목 정의 Category: 메모리 사용의 분류를 나타냅니다. 여기서는 "All Heap & Anonymous

원문보기 내부링크
Naver Blog

[Web] view-source 란?

웹 브라우저에서 어떤 웹 페이지의 소스 코드를 직접 보고 싶을 때, URL 앞에 `view-source:`를 추가하는 방법을 사용할 수 있습니다. 이를 통해 브라우저는 해당 웹 페이지를 렌더링하는 대신, 웹 페이지의 HTML, CSS, JavaScript 등의 원본 코드를 텍스트 형태로 보여줍니다. 이 방식은 대부분의 주요 웹 브라우저에서 지원되며, 웹 페이지가 어떻게 구성되어 있는지를 학습하거나 문제를 진단하는 데 도움이 됩니다. 예를 들어 view-source:https://www.google.com/ 아래로 쭉 내려서 // Google Inc. 부분을 보면 </script><div>... 부터 해당 페이지의 소스코드가 보이기 시작합니다. 계정 정보 표시, 페이지 로딩 최적화, 사용자 상호작용 개선 등의 내용이 보입니다.

원문보기 내부링크
Naver Blog

[NextJS] /app 아래의 page.tsx 와 layout.tsx 의 차이점

우선 라이브러리인 React 와 다르게 NextJS 는 프레임워크입니다. 즉, NextJS 에서는 프레임워크가 지정하는 룰을 따라야합니다. 각 파일은 url경로의 역할을하며, 파일 아래의 page.tsx 와 layout.tsx 를 중점적으로 살펴보겠습니다. page.tsx - 용도: 각각의 `page.tsx` 파일은 Next.js 프로젝트 내의 독립적인 웹 페이지를 정의합니다. - 위치: `pages` 디렉토리 또는 Next.js 13 이상의 `/app` 디렉토리 내에 위치할 수 있으며, URL 경로와 직접적으로 연결됩니다. - 필수성: 각 페이지 경로에는 해당 페이지를 정의하는 `page.tsx` 파일이 필수적으로 존재해야 합니다. layout.tsx - 용도: `layout.tsx` 파일은 하나 이상의 페이지에 공통적으로 적용될 레이아웃을 정의합니다. 이는 헤더, 푸터, 사이드바와 같은 반복되는 UI 요소를 포함할 수 있습니다. - 위치: 주로 `components` 디렉토리 또

원문보기 내부링크
Naver Blog

[SwiftUI] Extension Version 이 부모앱과 다르다는 경고(ITMS-90473).

https://mrgamza.tistory.com/627 iOS. xcode로 빌드할때 ITMS-90473 해결. Extension Version 자동 맞추기 앱스토어에 익스텐션을 포함하여서 개발을 할 경우에 버전을 Main Project와 동일하게 맞추어야 합니다. 물론 버전이 다르게 올라가도 큰 문제는 없습니다. 단지 올라간 앱의 버전과 지금의 버전이 달라서 약간의 경고성 메일이 옵니다. ITMS-90473: CFBundleVersion Mismatch - The CFBundleVersion value '1' of extension 'TestApp.app/PlugIns/NotificationServiceExtension.appex' does not match the CFBundleVe... mrgamza.tistory.com 경고의 내용은 부모앱 버전 (예1.1) 과 extension의 버전 (예1.0) 과 다르다고 빌드 시 경고를 주는 것이다. 다만 눈을 씻고 찾아봐도 exte

원문보기 내부링크
Naver Blog

[iOS] AppStore 개인 앱 출시 (최애의 아이돌)

오늘은 필자가 출시한 iOS 개인 앱에 대하여 설명해 드리겠습니다. (구글 스토어에는 없습니다) Previous image Next image 콘서트에서 본인의 메시지를 전달하고 싶을 때 필요한 LED 전광판 앱, 다른 앱들의 광고, 복잡한 사용법, 에러 등이 있어 본인만의 앱을 만들어보기로 했습니다. 앱에 대한 간단한 설명(사용자 편): 좌상단의 i 버튼으로 각 필드의 사용법을 볼 수 있습니다. 우상단의 토글 버튼으로 다크/ 라이트 모드 전환 가능합니다. 이모지를 누르면 텍스트 필드에 빠르게 추가할 수 있습니다. 색상 버튼을 하나 선택하면 단색, 두 개 선택하면 색상이 교차되어 표시됩니다. 배민 폰트를 사용할 수 있습니다.(미선택 시 아이폰 기본 폰트 적용) 폰트 크기, 스크롤 스피드를 설정할 수 있습니다. 스크롤 중 멈춤 버튼을 눌러 스크롤링을 일시 정지할 수 있습니다. 앱에 대한 간단한 설명(개발자 편): Swift, UIKit 을 사용하여 개발. instructions 라이브

원문보기 내부링크
Naver Blog

[iOS] AppStore 개인 앱 출시 (오늘의 장보기)

오늘은 필자가 출시한 iOS 개인 앱에 대하여 설명해 드리겠습니다. (구글 스토어에는 없습니다) Previous image Next image 장보기 리스트를 기록하고 싶은데 메모장에 한 줄로 적기에는 체크하기 불편하고, 또 일반 To Do list에 적으면 직관성이 떨어져서 오직 장 보기만을 위한 앱을 개발했습니다. 앱에 대한 간단한 설명(사용자 편): 메인 화면 하단 + 버튼을 눌러서 카테고리 선택 화면으로 이동합니다. 카테고리를 선택하여 원하는 품목을 추가합니다. 메인 화면에서 추가된 리스트를 체크, 삭제, 정렬을 할 수 있습니다. 위젯을 추가하여 더 직관적으로 리스트를 볼 수 있습니다. 앱에 대한 간단한 설명(개발자 편): Swift, SwiftUI 을 사용하여 개발. Onboarding 화면 개발 유저가 카테고리에서 리스트를 생성, 각 리스트는 메인 리스트로 통합되며, 정렬, 삭제 및 완료 체크 기능 구현. UserDefaults를 사용한 데이터 로컬 저장 기능 구현, 앱

원문보기 내부링크
Naver Blog

[Swift] 자주 사용하는 기술들

정수의 자릿수 합 import Foundation func solution(_ x:Int) -> Int { let a = String(x) let addNum = a.reduce(0) { $0 + Int(String($1))! } print(type(of: addNum)) // Int return addNum } solution(10) 범위 내의 모든 수를 순회하며 더하기 / 배열내의 모든 수 더하기 func solution(_ a:Int, _ b:Int) -> Int64 { let start = min(a, b) let end = max(a, b) return Int64((start...end).reduce(0, +)) } // 예시 사용 print(solution(3, 5)) // 출력: 12 print(solution(3, 3)) // 출력: 3 // 배열 func solution(_ numbers: [Int]) -> Int { let totalNumbers = Set(0...

원문보기 내부링크
Naver Blog

[RN] 협업 시 자주 발생하는 파일 대소문자 git에 반영 안되는 문제 해결

만약 팀원A가 파일 대소문자를 color.ts -> Color.ts 로 변경했다고 가정한다. 그러면 git이 인식을 못한다. (mac 환경 기준) 상당히 골때리는 일이다. 왜냐하면 import 하는 부분에서는 Color.ts로 import하는 것으로 변경&반영 되어서, 팀원B가 프로젝트를 run 하려고 하면, Import 는 Color고 파일은 color.ts여서 에러가 터진다. 만약 이런 부분이 많고 작업 환경이 많으면 상당히 복잡한 과정이다. 여기서 해결법은 git config core.ignorecase false 반드시 해당 프로젝트에서 이 커멘드를 실행해야 한다. 그러면 프로젝트의 .git / config 파일이 ignorecase가 true에서 => ignorecase = false 로 바뀐다. 이때부터 git이 파일대소문자 변경을 인식하기 시작한다. Color과 똑같은 color.ts라는 파일을 만들어 push하는 구조였다. 따라서 협업 시 처음부터 파일명, 함수명 대소

원문보기 내부링크
Naver Blog

[RN] iOS/ AOS 패키지명 변경

iOS signing -> bundle identifier 변경 AOS android / app / src / main / java / .../MainActivity.java 파일의 최상단 검색창에서 전체 변경 * firebase와의 연동을 생각해서 tony-yun 같이 중간에 - 은 안된다.

원문보기 내부링크
Naver Blog

[RN] Firebase 등록되지 않은 이메일 에러 코드를 반환하지 않는 이유

사용자가 비밀번호를 잊었을 때 Firebase에서는 비밀번호 재설정 이메일을 보내는 로직을 제공한다. AuthContext에 구현된 함수는 다음과 같다. const sendPasswordResetEmail = (email, onSuccess, onError) => { auth() .sendPasswordResetEmail(email) .then(response => { console.log('비밀번호 재설정 이메일 전송 완료.', response); if (onSuccess) { onSuccess(response); } }) .catch(error => { console.log('비밀번호 재설정 이메일 전송 오류:', error); if (onError) { onError(error); } }); }; 시험 삼아 [email protected]이라는 email 값으로 요청을 보냈다. (무작위) 어째서 인지. then에서 성공 확인이 떴다. 로직대로라면 등록되지 않은 이메일

원문보기 내부링크
Naver Blog

[RN] Firebase 유저 정보 refresh 관련 함수 비교

export const AuthContext = createContext(); const AuthProvider = ({children}) => { const [currentUser, setCurrentUser] = useState(null); useEffect(() => { const subscriber = auth().onAuthStateChanged(setCurrentUser); return subscriber; // unsubscribe on unmount }, []); //... const refreshUser1 = () => { if (currentUser) { currentUser.reload(); } }; const refreshUser2 = () => { const user = auth().currentUser; if (user) { user.reload().then(() => { setCurrentUser(auth().currentUser); }); } }; 유저가

원문보기 내부링크
Naver Blog

[RN] Firebase realtime database 권한 설정 관련

기본 사용법: https://rnfirebase.io/database/usage#reading-data Realtime Database | React Native Firebase Installation and getting started with Realtime Database. rnfirebase.io 파베를 사용하여 database 접근 시도 시 에러 메시지 [database/permission-denied] Client doesn't have permission to access the desired data는 클라이언트가 Firebase Realtime Database에 접근할 수 있는 권한이 없음을 의미합니다. 따라서 해결 방법 두가지가 있는데, Firebase Console 사용 Firebase 콘솔로 이동하여 프로젝트를 선택합니다. 왼쪽 메뉴에서 'Realtime Database'를 선택합니다. 'Rules' 탭을 클릭하여 현재의 보안 규칙을 볼 수 있습니다. 보안 규칙

원문보기 내부링크
Naver Blog

[개발 지식] 서버/클라이언트 사이드 렌더링 및 ReactNative의 렌더링 방식

그동안 RN으로 앱 개발을 하면서 한 번도 이런 문제를 만나본 적이 없다. RN은 서버사이드 렌더링일까, 클라이언트 사이드 렌더링일까? 서버 사이드 렌더링 (SSR) 이 방법에서는 모든 페이지의 렌더링이 서버에서 이루어집니다. 사용자가 웹 페이지에 접근할 때, 서버는 완전히 렌더링 된 페이지를 사용자의 브라우저로 전송합니다. 이 방식의 장점은 초기 로딩 시간이 빠르고 검색 엔진 최적화(SEO)에 유리하다는 것입니다. 하지만, 사용자의 요청마다 서버에서 페이지를 새로 렌더링 해야 하기 때문에 서버 부하가 늘어날 수 있습니다. 클라이언트 사이드 렌더링 (CSR) 이 방식에서는 초기 로딩 시 서버에서 HTML, CSS, JavaScript 등의 자원을 로드한 후, 이후의 모든 렌더링은 클라이언트 측(브라우저)에서 이루어집니다. 사용자의 상호작용에 따라 필요한 데이터만 서버로부터 받아와 동적으로 페이지를 갱신합니다. 이 방식의 장점은 서버 부하 감소와 사용자 경험이 부드럽다는 것입니다. 하

원문보기 내부링크
Naver Blog

[개발 지식] ReactNative의 디자인 패턴

React Native는 iOS의 MVVM(Model-View-ViewModel)과 같은 특정 코드 디자인 패턴을 강제하거나 기본으로 제공하지 않습니다. 대신, React Native는 React의 디자인 패턴과 철학을 기반으로 합니다. React의 주요 개념은 다음과 같습니다: 컴포넌트 기반 아키텍처: React Native는 UI를 독립적이고 재사용 가능한 컴포넌트로 나눕니다. 각 컴포넌트는 자체적인 상태와 생명주기를 가지며, 복잡한 UI를 구성하는 데 사용됩니다. (재사용 가능한 컴포넌트 분리) 단방향 데이터 흐름 (Props and State): React Native에서는 데이터가 주로 상위 컴포넌트에서 하위 컴포넌트로 전달되는 'props'와 내부 상태를 관리하는 'state'를 사용하여 단방향 데이터 흐름을 유지합니다. (prop으로 데이터 전달) 함수형 프로그래밍과 선언적 UI: React Native는 함수형 프로그래밍 패러다임을 채택하고 있으며, UI를 선언적으로

원문보기 내부링크
Naver Blog

[개발 지식] ReactNative 로그인 방식 및 JWT (JSON Web Tokens)의 데이터 플로우

JWT (JSON Web Tokens) 기반 인증: 사용자가 로그인할 때 서버는 JWT를 생성하여 클라이언트에 전달합니다. 클라이언트는 이 토큰을 저장하고 이후의 요청에 토큰을 첨부하여 인증을 수행합니다. OAuth 및 소셜 로그인: Google, Facebook, Twitter 등과 같은 소셜 미디어 계정을 사용하여 로그인합니다. 이 방식은 OAuth 프로토콜을 사용하며, 사용자는 별도의 계정 생성 없이 소셜 미디어 계정을 통해 앱에 액세스할 수 있습니다. 전통적인 사용자 이름/비밀번호 기반 인증: 가장 기본적인 형태의 인증 방법으로, 사용자는 사용자 이름과 비밀번호를 입력하여 로그인합니다. (혹은 이메일/비번) 생체 인증 (Biometric Authentication): 지문, 안면 인식 등의 생체 인증 방식을 사용합니다. React Native에서는 이를 위한 라이브러리(예: React Native Fingerprint Scanner)를 통해 구현할 수 있습니다. SMS 또는

원문보기 내부링크
Naver Blog

[SwiftUI] View 확장하는 방법 3가지 (예시 코드)

View 확장 1: View 확장 2: import SwiftUI // MARK: - 1️ public struct WriteBtnViewModifier: ViewModifier { let action: () -> Void public init(action: @escaping () -> Void) { self.action = action } public func body(content: Content) -> some View { ZStack { content VStack { Spacer() HStack { Spacer() Button( action: action, label: { Image("writeBtn") } ) } } .padding(.trailing, 20) .padding(.bottom, 50) } } } // 사용법: // 원하는 View에 ZStack을 지우고 버튼을 지운다. // 남은 VStack에 .modifier(WriteBtnViewModifier(action:

원문보기 내부링크
Naver Blog

[SwiftUI] LaunchScreen 추가 방법 2종 소개

방법1. LaunchScreen 파일 추가 1.Remove Launch Screen (UILaunchScreen) key from project Info.plist. This will opt out from configuring a launch screen using Info.plist. 2.Create a new Launch screen file. Choose File > New > File. Under User Interface, select Launch Screen, and click Next. Give the launch screen file a name. I named it "LaunchScreen" in this case. 3. 혹은 info.plist에서 추가 방법2. SwiftUI에서 제공하는 방법 info.plist 주의: Background color가 타 블로그에서 white으로 되어있기에, string으로 white하면 흰색이 적용되는줄 알았다. 다만 다크모드에

원문보기 내부링크
Naver Blog

[iOS] 앱스토어 앱 배포 방법

https://hsdev.tistory.com/entry/iOS-%EC%95%B1-%EB%B0%B0%ED%8F%AC-1-1-CSR-Certificate-Signing-Request-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EC%84%9C%EB%AA%85-%EC%9A%94%EC%B2%AD-%EB%B0%9C%EA%B8%89%EB%B0%9B%EA%B8%B0 [iOS 앱 배포] 1-1. CSR (Certificate Signing Request : 인증서 서명 요청) 발급받기 애플 개발자 멤버십을 구매한 후 앱을 배포하기 위해 필요한 첫번째 단계입니다. CSR (Certificate Signing Request : 인증서 서명 요청) 발급받기 1. LaunchPad 에서 '키체인 접근' 을 찾아 들어간다. 2. 바탕화면에서 키체인 화면을 띄우고 상단에 있는 메뉴를 통해 '키체인 접근>인증서 지원>인증 기관에서 인증서 요청...' 으로 들어간다. [다음 단계 바로가기] [iOS 앱

원문보기 내부링크
Naver Blog

[Swift] func solution(_ arr:[Int]) 중 _ (언더스코어)는 뭔가요?

Swift에서 함수 정의 시 `_` (언더스코어)를 매개변수 이름 앞에 사용하는 것은 해당 매개변수의 외부 이름을 생략하겠다는 의미입니다. Swift는 기본적으로 함수를 호출할 때 각 매개변수의 외부 이름을 명시해야 합니다. 그러나 때때로 이를 생략하고 싶을 수 있으며, 이 때 `_`를 사용합니다. 예를 들어, `func solution(_ arr: [Int])`에서 `_`는 함수를 호출할 때 `arr`라는 매개변수 이름을 생략할 수 있게 해줍니다. 즉, 함수를 호출할 때 `solution(arr)` 대신 `solution([1, 2, 3])`와 같이 매개변수 이름 없이 직접 배열을 전달할 수 있습니다. 이것은 코드를 더 간결하고 읽기 쉽게 만들 수 있는 Swift의 특징 중 하나입니다. 함수에 외부 이름을 사용하는 경우와 비교하여 보겠습니다: - 외부 이름을 사용하는 경우: `func solution(arr: [Int])` - 호출: `solution(arr: [1, 2, 3])`

원문보기 내부링크
Naver Blog

[Swift] 배열 평균 구하기, array.reduce() 사용법

정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. func solution(_ arr:[Int]) -> Double { let total = arr.reduce(0, { $0 + $1 }) return Double(total) / Double(arr.count) } https://blog.naver.com/lifeyun24/223265939319 [Swift] func solution(_ arr:[Int]) 중 _ (언더스코어)는 뭔가요? Swift에서 함수 정의 시 `_` (언더스코어)를 매개변수 이름 앞에 사용하는 것은 해당 매개변수... blog.naver.com Swift의 `reduce` 메서드는 배열의 모든 요소를 결합하여 단일 값으로 축약하는 데 사용됩니다. 이 메서드는 매우 강력하며, 다양한 방식으로 활용될 수 있습니다. 아래는 `reduce`의 일반적인 사용 예시들입니다: 1. **합계 계산**: 배열의 모든 요소의 합을

원문보기 내부링크
Naver Blog

[SwiftUI] 위젯 기능 설정 관련

오늘은 필자의 SwiftUI 앱에서 위젯 기능을 추가해봤습니다. 참고 블로그는 https://matdongsane.tistory.com/149?category=1040154 SwiftUI) WidgetKit을 사용해서 Widget을 만들기(4) - 앱에서 위젯으로 데이터 보내기 app Group 앱에서 위젯으로 데이터를 보내줘야할 경우가 당연하게 생긴다. (그냥 하드코딩 하고싶지는 않자나?) 다음과 같은 방법을 통해서 데이터를 보내줄수 있다. 1. App Group 추가해주기 우리의 메인 앱의 Target으로 가게 되면 거기에서 Signing & Capabilityies에서 all 왼쪽에 있는 + Capability를 누르면 appGroups를 추가할수 있다. 해당 방법을 통해서 위젯과 앱 둘다 appgroups를 추가 하고 동일한 groupId로 설정해준다. app Groups란? 동일한 팀이 개발한 앱 사이의 공유 컨테... matdongsane.tistory.com 이며, 주의

원문보기 내부링크
Naver Blog

[SwiftUI] @Binding 값 init 하는 방법

부모뷰: struct MemoView: View { @EnvironmentObject private var pathModel: PathModel @EnvironmentObject private var memoListViewModel: MemoListViewModel @StateObject var memoViewModel: MemoViewModel @State var isCreateMode: Bool = true var body: some View { ZStack { VStack { CustomNavigationBar( leftBtnAction: { pathModel.paths.removeLast() }, rightBtnAction: { if isCreateMode { memoListViewModel.addMemo(memoViewModel.memo) } else { memoListViewModel.updateMemo(memoViewModel.memo) } pathModel.paths.

원문보기 내부링크
Naver Blog

[NextJs] 에러 SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED

현재 시간 (작성)기준 app router 로 프로젝트 @latest 생성 시 15.0.2 버전이 설치된다. 이는 recoil (0.7.7) stable 버전과 충돌이 생기며, next 버전을 14대로 낮추면 해결된다. 에러 내용에서 명확한 해결안을 제시 하지 않기 때문에, 이슈를 해결하는데 꽤 애를 먹는다.

원문보기 내부링크
Naver Blog

[Swift] 문자열에 따옴표 나오게 하기

Text("\"매일 아침 5시 운동하자!\"") 앞뒤로 \" \"를 넣으면 된다. 그러면 앱에서는 "매일 아침 5시 운동하자!"로 표시된다. 따옴표 쌍따옴표 다 가능하다.

원문보기 내부링크
Naver Blog

[Swift] (배열) .firstIndex(of: ) 와 .firstIndex(where: )의 차이에 관한 깊은 분석

.firstIndex(of: ) var students = ["Ben", "Ivy", "Jordell", "Maxime"] if let i = students.firstIndex(of: "Maxime") { students[i] = "Max" } print(students) // Prints "["Ben", "Ivy", "Jordell", "Max"]" 이 코드는 Swift 프로그래밍 언어로 작성되었습니다. 각 줄을 차례로 살펴보겠습니다: 1. `var students = ["Ben", "Ivy", "Jordell", "Maxime"]` 이 줄은 `students`라는 이름의 변수를 선언하고, 그것을 문자열의 배열로 초기화합니다. 배열에는 네 명의 학생 이름이 문자열 형태로 들어 있습니다. 2. `if let i = students.firstIndex(of: "Maxime") {` 이 줄은 `if let` 구문을 사용하여 옵셔널 바인딩을 수행합니다. `students.firstInd

원문보기 내부링크
Naver Blog

[Swift] (배열) todos.removeAll { todo in removeTodos.contains(todo) } 에서 todo(임시 이름) 은 무엇인가

Swift에서 클로저는 종종 익명 함수의 역할을 합니다. 즉, 함수의 본문만 있고 이름이 없는 함수입니다. 클로저 내부에서 사용하는 매개변수는 클로저를 정의할 때 바로 선언할 수 있습니다. 이 때, 매개변수 이름은 개발자가 임의로 지정할 수 있으며, 특정 형식의 데이터를 반복적으로 처리할 때 사용됩니다. todos: Todo 타입의 인스턴스들을 담고 있는 배열입니다. removeTodos: 역시 Todo 타입의 인스턴스들을 담고 있는 또 다른 배열이며, 여기에 포함된 todo들을 todos 배열에서 제거하려고 합니다. func removeBtnTapped() { todos.removeAll { todo in removeTodos.contains(todo) } removeTodos.removeAll() isEditTodoMode = false } `todos.removeAll { todo in ... }`에서 `todo`는 배열 `todos`의 각 요소를 나타내는 임시 이름입니다. 클

원문보기 내부링크
Naver Blog

[SwiftUI] private struct 는?

SwiftUI에서 `private` 키워드는 접근 제어자(access modifier) 중 하나로 사용되며, 이를 통해 해당 구조체, 클래스, 함수, 변수 등의 범위를 제한합니다. `private`로 선언된 항목은 오직 그것이 정의된 소스 파일 내에서만 접근 가능하고, 해당 파일 바깥에서는 접근할 수 없습니다. 예를 들어, `MemoListView` 파일 안에 정의된 `TitleView` 구조체 앞에 `private`가 붙어 있는 것은 이 `TitleView`가 `MemoListView` 소스 파일 내부에서만 사용되기 위해 설계되었음을 의미합니다. 다른 파일에서는 이 `TitleView`에 접근할 수 없습니다. private struct TitleView: View { @EnvironmentObject private var memoListViewModel: MemoListViewModel var body: some View { ... } } SwiftUI 뷰를 `private`으로

원문보기 내부링크
Naver Blog

[SwiftUI] @State 의 사용 경우와 property wrapper를 사용하지 않는 경우 분석

@State `@State`는 SwiftUI에서 뷰가 변경 가능한 데이터를 관리하기 위해 사용하는 프로퍼티 래퍼입니다. SwiftUI에서 뷰의 로컬 상태를 관리하기 위한 기본적인 도구 중 하나로, `@State`로 선언된 상태가 변경될 때, 해당 뷰는 자동으로 업데이트되어 변경된 정보를 반영하게 됩니다. 제공된 `TodoCellView` 예제에서 `@State` 사용 이유를 살펴보겠습니다: @State private var isRemoveSelected: Bool 여기서 `isRemoveSelected`는 `TodoCellView` 내의 "삭제" 버튼이 선택되었는지 여부를 추적하는 불리언 값입니다. 이 상태는 `TodoCellView` 인스턴스 각각에 로컬로 존재합니다. 사용자가 편집 모드에서 할 일 항목을 삭제용으로 표시하고자 할 때, 버튼의 액션 클로저에서 이 상태를 토글할 수 있습니다: Button(action: { isRemoveSelected.toggle() todoList

원문보기 내부링크
Naver Blog

[SwiftUI] @State 를 init 하는 방법

Swift에서 @State 프로퍼티 래퍼를 사용할 때는 일반적인 프로퍼티처럼 초기화를 직접 수행할 수 없습니다. 대신, @State 프로퍼티에 초기값을 할당하기 위해서는 SwiftUI에서 제공하는 특별한 초기화 구문을 사용해야 합니다. 이를 위해 State 구조체의 initialValue 인자를 받는 생성자를 사용해야 합니다. private struct MemoCellView: View { @EnvironmentObject private var pathModel: PathModel @EnvironmentObject private var memoListViewModel: MemoListViewModel @State private var isRemoveSelected: Bool private var memo: Memo fileprivate init( isRemoveSelected: Bool = false, memo: Memo) { self.isRemoveSelected = isRemov

원문보기 내부링크
Naver Blog

[SwiftUI] ZStack에 .alert를 사용하는 이유 및 isPresented에 $바인딩 값을 사용하는 이유

struct TodoListView: View { @EnvironmentObject private var pathModel: PathModel @EnvironmentObject private var todoListViewModel : TodoListViewModel var body: some View { ZStack { VStack { ... } } .alert("To do list \(todoListViewModel.removeTodosCount)를 삭제하시겠습니까?", isPresented: $todoListViewModel.isDisplayRemoveTodoAlert ){ Button("삭제", role: .destructive){ todoListViewModel.removeBtnTapped() } Button("취소", role: .cancel) {} } } } viewModel.swift func navigationRightBtnTapped() { if isEditTodoM

원문보기 내부링크
Naver Blog

[SwiftUI] CustomNavigation에서 .append() 및 removeLast()로 이동하기

`removeLast()` 함수는 Swift의 배열(Array) 타입에서 사용되며, 배열의 마지막 요소를 제거합니다. 배열이 비어있지 않다면, 가장 마지막에 있는 요소를 배열에서 제거하고 그 값을 반환합니다. 만약 배열이 비어 있을 때 이 함수를 호출하면 런타임 에러가 발생합니다. // PathType.swift import Foundation enum PathType: Hashable { case homeView case todoView case memoView(isCreateMode: Bool, memo: Memo?) } ///////// // Path.swift import Foundation class PathModel: ObservableObject { @Published var paths: [PathType] init(paths: [PathType] = []) { self.paths = paths } } var body: some View { ZStack { VStack

원문보기 내부링크
Naver Blog

[VSCode] 강력 추천 Extensions(확장) 모음

오늘은 VSCode 사용 중 지금까지 현업에서 많은 시간을 절약해 줬던 확장들을 소개해 본다. Color Highlight RGB 색상 코드를 사용하면 어떤 색상이 사용되는지 직관적으로 보인다. 2. Prettier, ESLint 필수 of 필수. 수동으로 코드를 정렬할 걸 생각하면 너무 끔찍하다. 3. vscode-styled-components 프론트엔드 개발자 및 styled-components를 사용하는 회사라면 필수. 실수 방지와 엄청난 시간 절약 효과를 볼 수 있다. 4. GitLens — Git supercharged 코드 안에서 git 했던 코드 이력, branch 상황들이 직관적으로 확인이 가능하다. 5. ENV, GRAPHQL 등 각 파일에 필요한 extensions .env 같은 파일은 처음 작성할 때 '왜 모든 코드가 흰 색인 거지? 작동 안 하고 있는 건가?' 등 의심이 든다. 그 이유는 vscode에서 default로 인식을 안 하고 있기 때문에 따로 확장을

원문보기 내부링크
Naver Blog

[RN] 10줄 코드가 1초 만에 완성? React Native Snippet extension 소개

오늘은 ReactNative에 관련된 아주 흥미로운 확장을 소개해 본다. 제공해 주는 Snippets들을 한 번 본다. 스니펫은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다. Snippet 이란? -위키백과 어떤가, rnc만 쳤는데 좌측에 예제가 뜨면서 미리 보기를 할 수 있다. 그럼 Enter를 눌러본다. 순간 전부 나타나면서 동시에 class 명은 편집 가능하도록 커서가 묶여있다. 본인이 원하는 이름으로 변경하면 바로 사용 가능. layout 부분을 styled components나 다른 걸 사용하는 사람은 필요 없는 기능일 수 있지만 ReactNative의 StyleSheet을 사용하는 사람한테는 엄청난 시간 절약이다. 하지만 imr, ime는 공통으로 사용하니 이렇게라도 몇 초를 단축하면 코딩하는 손맛이 살아나서 효율이 높아진다

원문보기 내부링크
Naver Blog

[개발 지식] npm, yarn 은 무엇이며 이 둘의 차이점은?

이 카테고리의 첫 번째 글은 npm, yarn을 다뤄봅니다. npm vs yarn npm (노드 패키지 매니저/Node Package Manager) NPM(Node Package Manager)은 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자입니다. 전 세계적으로 가장 많은 이들이 사용하고 있는 패키지 관리 툴이죠. 이러한 관리 툴을 이용하여 Node.js로 만들어진 모듈을 웹에서 받아서 쉽게 설치하고 관리해 주는 프로그램으로 개발자 입장에서는 단 몇 줄의 command로 기존 공개된 모듈들을 설치하고 활용할 수 있습니다. Node Package Manager (Java에서 maven과 비슷한 역할을 한다고 볼 수 있습니다.) 또한 그렇게 설치된 모듈들이 업데이트되었는지를 체크해 주는 등 JavaScript로 진행하는 프로젝트를 굉장히 편하게 진행할 수 있도록 도움을 줍니다. command-line client인 npm과 온라인 데이터베이스인 npm

원문보기 내부링크
Naver Blog

[RN] 중요한 정보는 원격 저장소에 올리지 말자, .env 파일 사용법 (feat. gitignore)

나의 중요한 정보, 예를 들어 ip 주소 및 port 번호, API_KEY 번호 등. 개인 프로젝트를 진행 중이라면 타인과 공유하면 안 되는 정보들이 있습니다. 오늘 사용할 라이브러리는 react-native-dotenv입니다. https://www.npmjs.com/package/react-native-dotenv react-native-dotenv Load environment variables using import statements.. Latest version: 3.3.1, last published: 8 months ago. Start using react-native-dotenv in your project by running `npm i react-native-dotenv`. There are 50 other projects in the npm registry using react-native-dotenv. www.npmjs.com 먼저 package.json 과 동

원문보기 내부링크
Naver Blog

[Linux] sed 명령어로 원하는 정보 추출

SED는 Stream Editor의 약자로 sed라는 명령어로 원본 텍스트 파일을 편집하는 유용한 명령어입니다. 리눅스의 editor라 하면 vi 편집기가 대표적인데, vi 편집기로 편집할 때는 vi filename의 명령을 이용해서 파일을 열고난 이후에 각종 vi 명령어를 통해서 이리저리 움직여 추가, 삭제, 변경 등의 편집을 하게 됩니다. 1. sed와 vi가 다른 점은 sed는 명령어 형태로 편집이 되며 vi처럼 실시간 편집이 아닙니다. 2. 원본을 건드리지 않고 편집하기 때문에 작업이 완료되었어도 기본적으로 원본에는 전혀 영향이 없다는 점입니다.(단, sed 옵션에서 -i 옵션을 지정한다면 원본을 바꾸게 됩니다.) //sed_test_file.txt name phone birth sex score reakwon 010-1234-1234 1981-01-01 M 100 sim 010-4321-4321 1999-09-09 F 88 nara 010-1010-2020 1993-12-1

원문보기 내부링크
Naver Blog

[Mac] 맥 개발 필수 오픈소스 패키지 관리 툴 Homebrew

homebrew는 macOS를 탑재한 맥북, 아이맥 등에서 사용되는 오픈소스 패키지 관리 툴입니다. 애플의 macOS 운영체제에서 소프트웨어의 설치를 쉽게 할 수 있도록 도와주는 도구입니다. https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh Homebrew는 전용 디렉터리에 패키지를 설치하고 /usr/local 위치로 심볼릭 링크를 연결합니다. 컴퓨팅에서 심볼릭 링크 또는 기호화된 링크는 절대 경로 또는 상대 경로의 형태로 된 다른 파일이나 디렉터리에 대한 참조를 포함하고 있는 특별한 종류의 파일이다. -심볼릭 링크 $ cd /usr/local $ find Cellar Cellar/wget/1.16.1 Cellar/wget/1.16.1/bin/wget Cellar/wget/1.16.1/share/man/man1/wget.1 $ ls -l bin bin/wget -> ..

원문보기 내부링크
Naver Blog

[개발 지식] 우리는 왜 TypeScript를 사용해야 하는가?

2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. 정말 말 그대로 "Type"스크립트입니다. 타입스크립트는 자바스크립트의 슈퍼 셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다. -위키백과 타입스크립트 Javascript는 최대한 오류를 안 뱉게 설계되었습니다. 따라서 개발 중에 이런 상황이 발생할 수 있습니다: 코드상에서 보기에 오류는 없지만, 오작동한다. 그러면 어디서 문제가 났는지 또 타고 들어가야 되죠. TypeScript는 엄격한 타입 규정과 문법으로 이런 문제들을 원천 차단한다고 보면 되겠습니다. 그런데 브라우저는 JS만을 인식하는데 어떻게 TS를 적용하나? babel이 그 문제를 해결해줍니다. JS, TS

원문보기 내부링크
Naver Blog

[TS] ReactNative에 타입스크립트 적용하기

https://blog.naver.com/lifeyun24/222853217474 [TypeScript] 우리는 왜 타입스크립트를 사용해야 하는가? 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정... blog.naver.com 앞서 왜 타입스크립트를 사용해야 하는지 알아보았으니 이제 React Native에서 적용을 해 보도록 하겠습니다. 공식 문서: https://reactnative.dev/docs/typescript Using TypeScript · React Native TypeScript is a language which extends JavaScript by adding type definitions, much like Flow. While React Native is built in Flow, it supports both TypeScript and Flow by default. reactnativ

원문보기 내부링크
Naver Blog

[TS] styled-components/native, theme 문제 해결

styled-components/native import styled from "styled-components/native"; //styled-components/native"에러 시 styled-components에는 IDE에서 편집 환경을 지원하고 TypeScript 프로젝트에 유형을 제공할 수 있는 커뮤니티 구성의 TypeScript 정의가 DefinedTyped에 있습니다. 설치하려면 다음을 실행: # React Native npm install --save-dev @types/styled-components @types/styled-components-react-native React Native만 해당: tsconfig가 types을 할당하는 경우 거기에 "styled-components-react-native"를 추가해야 합니다. 예를 들어: "types": ["jest", "styled-components-react-native"], //types 가 존재하는 경우

원문보기 내부링크
Naver Blog

[TS] React Navigation에 타입스크립트 적용

https://reactnavigation.org/docs/typescript/#type-checking-screens Type checking with TypeScript | React Navigation React Navigation is written with TypeScript and exports type definitions for TypeScript projects. reactnavigation.org React + Typescript 조합으로 개발을 하면서 자주 사용하는 타입 중 하나가 FC 이다. FC 는 FunctionComponent 타입의 줄임말로 리액트에서 함수형 컴포넌트의 타입을 선언할 때 사용할 수 있게 React 에서 제공 중인 타입이다. import type { NativeStackScreenProps } from '@react-navigation/native-stack'; type RootStackParamList = { Home: undefined;

원문보기 내부링크
Naver Blog

[IT 정보] 프론트엔드의 역사와 미래에 대한 고찰

프론트엔드 개발자는 프론트엔드, 백엔드의 완전한 분리 구조를 지향하는 업무 스타일의 개발 방식으로 프론트단의 비즈니스 로직과 사용자 영역의 개발을 담당하는 사람이다. 지금처럼 이렇게 선명하게 프론트엔드와 백엔드가 세분화된 배경에 대해서 웹의 역사 중에서 프론트엔드를 중심으로 알아보겠습니다. 더불어 앞으로의 프론트엔드는 어떻게 될지 한번 생각해 보도록 하겠습니다. Web 1.0 1. 1990, 문서를 공유하기 위해서 웹이 만들어졌다. 가상의 공간에서 텍스트에 새로운 문서에 대한 링크가 입혀진 개념의 하이퍼텍스트가 태어났습니다. HTML의 첫 글자인 H가 바로 이 Hypertext이죠. 웹은 인터넷을 통해서 이 하이퍼텍스트라는 문서를 모든 사람이 쉽게 만들고 또 공유하기 위해 태어났습니다. 이제 누구나 쉽게 HTML(Hypertext Markup Language)을 이용하여 이 하이퍼텍스트를 쉽게 만들 수 있었고 HTTP(Hypertext Transfer Protocol)를 통해서 누구

원문보기 내부링크
Naver Blog

[Git] git log 확인 및 commit 지우기

1. Git log를 직관적으로 확인하는 방법 :: git log --branches --graph --decorate --oneline 여러 가지 옵션을 사용해 확인 가능하다. 빨간색 글자 (ex. origin/master) :: remote 영역 :: 내가 remote에 push 한 지점 초록색 글자 (ex. master) :: local 영역 :: 해당 branch의 최신 commit HEAD :: 현재 작업 중인 branch :: ex) develop branch에서 log를 확인했을 때 2. commit을 지우고 싶다면? 예를 들어, develop branch에서 "AWS 라이브러리 추가" commit을 지운다고 가정해 보자. 우선 git reset --hard ac6f43e을 입력하면 'AWS 라이브러리 추가'의 직전 commit인 '초기 세팅 수정' commit으로 이동한다. 여기서부터 commit을 새로 쌓아올리면 'AWS 라이브러리 추가' commit은 삭제된다. G

원문보기 내부링크
Naver Blog

[Git] 서버에서 git 원격 저장소 생성 방법

github가 아닌 특정 서버에 git 원격 저장소를 생성하는 법을 해본다. root 권한으로 linux 서버에 접근 예) 원하는 폴더에 진입해서 새로운 git repository 용 폴더 생성 mkdir myApp.git (폴더 지우기는 rm -rf 파일명) cd myApp.git 로 방금 생성한 파일에 들어가서 git init --bare '--bare' 는 내부가 아닌 해당 폴더 자체를 git init 시킨다. ls -al 로 해당 디렉토리의 권한 확인, root root으로 되어있음. chown -R git:git /경로/myApp.git/ 로 권한 변경 workspace 에서 폴더에서 git init 실행 git remote add origin [git 주소](ssh://[email protected]:22/경로/myApp.git) git remote -v 를 통해 연결됐는지 확인 그다음 로컬 파일에서 git add . git commit -m "comment" git p

원문보기 내부링크
Naver Blog

[정규표현식] 정규 표현식으로 데이터 정제하기

후방 탐색 (?<=) 후방 탐색 (이 뒤로~탐색) 전방 탐색 (?= ) 전방 탐색 (이 앞 내용~탐색) 1. 날짜 변환:(?<=,[0-9]{4}-[0-9]{2}-[0-9]{2}) => (space 한 번) 해석: “,”부터 시작하는 숫자 4개 뒤에, “-” 뒤에, 숫자 2개 뒤에, “-“뒤에, 숫자 두 개 뒤에. (이러면 전체 날짜가 선택됨.) 2. 단위 cm에서 m로 변환: 두 자릿수 수위에 대한: (?<=,)(?=[0-9]{2}\n) => 0. 해석: \n은 줄 바꿈이어서 마지막 숫자만 선택됨 세 자릿수 데이터에 대한: (?<=,[0-9]{1})(?=[0-9]{2}\n) => . 만약 중간 값을 선택하고 싶을 경우: (후방 탐색)[값](전방 탐색) 이런 형태로 접근하면 된다. [값]: [0-9]{4} 이렇게 사용. (예시)

원문보기 내부링크
Naver Blog

[VSCode] 유용한 vscode 단축키 for mac

+ ↓↑ (줄 들고 이동) ↓↑ (줄 아래로 복사) + ↓↑ (파일 끝으로 이동) click (수동 단어 동시 선택) L (같은 단어 전체 동시 선택) D (객별, 같은 단어 전체 동시 선택) I (선택한 영역의 뒤에 동시 선택) drag (드래그대로 영역 동시 선택) + + K (한 줄 전체 지우기) p (js 파일 검색) Enter (바로 아랫줄로 커서이동) B (집중모드) undo + Z redo + Shift + Z

원문보기 내부링크
Naver Blog

[IT 시사] 애플 페이 국내 도입의 미래 전망은?

도대체 아이폰 유저는 언제까지 카드를 꺼내서 결제를 해야 하는 불편함을 참아야 할까. 몇 년 전부터 한 번씩 나오다가 뜬구름처럼 사라지는 애플의 결제 서비스 애플 페이의 한국 진출 소식은 어느새 희망고문이 되었다. 이번엔 애플이 현대카드와 손잡고 애플 페이를 도입한다는 소문이 돌았다. 그러나 현대카드 측은 사실무근이라며 강하게 부인했다. 애플 페이는 어째서 한국 진출이 어려운 것일까? 근본적인 원인은 몇 가지 있다. 삼성페이와 비교를 하자면, 삼성페이는 마그네틱 보안 전송(MST)을, 애플 페이는 근거리 무선통신 기술(NFC)을 활용한다. 두 기술은 전혀 다른 방식으로 구현된다. MST는 마그네틱 신용카드 정보를 무선으로 전송해 결제하는 방식을 말한다. 마그네틱 카드 리더기의 경우 카드를 긁을 때 발생하는 자기장 변화를 감지하는 원리이기 때문에 외부에서 전자석으로 자기장을 발생시켜주면 카드가 없어도 정보를 전달할 수 있다. 이를 이용한 지불 방식이 삼성페이와 LG페이이다. - 마그네

원문보기 내부링크
Naver Blog

[Android] ReactNative 안드로이드 APK(AAB) 파일 생성하기

오늘은 마켓 배포 혹은 내부 apk 테스트를 위한 ReactNative 안드로이드 APK(AAB) 파일 생성하기를 진행해 보겠습니다. key store 생성 다음 명령을 사용 하여 터미널 에서 keytool 을 사용하여 만들 수 있습니다. keytool -genkey -v -keystore your_key_name.keystore -alias your_key_alias -keyalg RSA -keysize 2048 -validity 10000 //여기서 your_key_name과 your_key_alias을 원하는 이름으로 작성을 해줍니다. //your_key_alias 은 나중에 앱에 서명 할 때 사용할 이름으로 따로 기록해두시는게 좋습니다. //또 해당 키는 보안성이 좋아야 하기때문에 기본값 1024 대신 탈취하기 보다 어려운 2048로 변경합니다. 이는 Android 용 React Native 실행 바이너리를 생성하는 데 사용되는 key store file 인 Java 생성 서

원문보기 내부링크
Naver Blog

[Mac] 맥에서 기본 터미널로 SSH 연결하는 법

https://blog.naver.com/lifeyun24/222686365340 [Mac] 맥에서 PuTTy 설치하는 법 오늘은 맥에서 PuTTy를 설치하는 법을 알아보겠다. 1. 먼저 앱스토어에 들어가서 Xcode를 다운로드한다... blog.naver.com Windows 환경에서는 Putty 라는 아주 보편화된 SSH Client Tool이 있다. 물론 Putty 는 Mac 용도 제공되어서 위 링크는 필자가 과거에 정리했던 Mac에서 PuTTy 설치법 포스트이다. 하지만 돌이켜보면 왜 좋은 기본 터미널을 놔두고 설치법도 복잡한 PuTTy를 사용했나 싶다. 따라서 오늘은 Mac 기본 터미널에서 ssh 접속법을 정리해 본다. Mac OS X는 UNIX 기반의 운영체제로서 OpenSSH SSH Client와 SSH Server를 기본적으로 포함하고 있다. 명령어를 통한 연결 (추천) ssh [서버 사용자ID]@[서버HostName or IP] -p [Port 번호] //추가할 옵션

원문보기 내부링크
Naver Blog

[MySQL] DB에 대량의 데이터 insert 하기 (load data infile) +에러 해결

bulk insert, 대량의 데이터 넣기. mysql에서는 'LOAD DATA INFILE'이라고 불린다. 먼저 mysql workbench에서 import wizard로 데이터를 넣는 법과 비교해 본다. MySQL 장점 단점 import wizard 원하는 데이터를 DB column에 끼워 맞춰서 넣을 수 있다. 느린 insert 속도 load data infile 빠른 insert 속도 준비된 데이터 형태 '그대로' DB에 들어간다. import wizard는 mysql workbench 사용법일 뿐 별다른 기술은 없고(아주 쉬움), 또 다른 블로그 찾으면 금방 나오니 여기서 다루지는 않겠다. LOAD DATA INFILE 1. 먼저 mysql 이 설치된 서버에 로그인한다. ssh [email protected] -p 22 2. 서버에서 mysql DB로 들어가준다. (Database client- MySQL monitor 진입) mysql -u username(or

원문보기 내부링크
Naver Blog

[Android Studio][Error] Could not connect to development server.

Android Studio에서 React Native project/ android를 열어준다. logcat을 보기 위해 device에서 빌드 시 Could not connect to development server. 문구와 함께 안드로이드 디바이스에서 Local Server를 못 잡는 경우 $ adb devices List of devices attached 디바이스명 device $ adb -s 디바이스명 reverse tcp:8081 tcp:8081 위 명령어를 통해 디바이스에 React Native 서버의 포트를 연결시켜준다. 빌드 성공.

원문보기 내부링크
Naver Blog

[RN][Error] cli.init is not a function

npx react-native init myApp TypeError: cli.init is not a function 에러가 발생한다. 그 결과 생성되는 파일은 이것뿐. 뭔가 파일이 많이 없어도 없다. 0.69버전의 에러로 보인다. 해결 1. npx react-native init ProjectName --version 0.68.2 특정 버전을 지정하여 생성. 성공. and then upgrade to v 0.69 later. 해결 2. npm uninstall -g react-native-cli npm install -g react-native-cli npx react-native init AwesomeProject 2022-10-14 추가 내용 (해결): https://blog.naver.com/lifeyun24/222900530144 [RN] TypeError: cli.init is not a function (해결 2탄) npx react-native init myApp -

원문보기 내부링크
Naver Blog

[RN] React Native 디렉터리 구조 견해

처음부터 프로젝트를 진행하는 게 아니면 대부분 타인의 프로젝트를 리팩 토핑 해야 한다. 그동안 '이 정도면 괜찮고 유지 보수에 용이한 구조다'라고 느꼈던 디렉터리를 끄적여본다. 디렉터리 구조에 대한 정답은 없다. component: UI를 표현하는 곳. 보통 screens에서 사용되는 함수가 여기로 분리된다. screens : 앱의 화면 단위 컴포넌트. navigation에 따라서 유저에게 직접적으로 보이는 화면들. navigation : 화면 전환과 관련된 컴포넌트. 가장 뼈대가 되는 Root.tsx 같은 navigator 파일이 들어간다. api : 통신과 관련된 데이터. (중요 정보는. env) assets/fonts or images, color : assets 아래에 이미 지나 폰트 등 폴더를 추가로 만든다. theme : 테마 컬러나 mixin 등 앱 전체적으로 사용할 수 있는 데이터. utils/constants: 앱 전체적으로 사용 가능한 간단한 상수/ 컬러 등. 이외

원문보기 내부링크
Naver Blog

[Mac] M1맥북 zsh: command not found: python 해결 (+Linux 커맨드)

에러 내용: brew install python or brew install python3 했음에도 불구하고 python --version 가 zsh: command not found: python 이는 환경 변수에 python이 설치된 경로가 설정되지 않아서 환경 변수를 지정해 주면 됩니다. which python3 which 명령을 사용하면 현재 사용하고 있는 명령어 실행 파일(또는 링크)의 위치를 알 수 있다. vim ~/.zshrc vim 이란 간단히 말해 텍스트 에디터이다. 기존 터미널 환경의 vi라는 에디터에서 기능 개선 및 확장이 되었고, 그래서 이름이 "vi + improvement = vim"이다. alias python="which python3의 경로" alias 별명='명령어 정의' :q를 누른 후 엔터를 누르면 vi 편집기가 종료됩니다. :q!는 변경된 내용이 있더라도 저장하지 않고 무조건 종료 :wq는 변경된 내용을 저장하고 종료합니다. source ~/.z

원문보기 내부링크
Naver Blog

[PyTorch] cuda out of memory 에러 관련

CUDA는 엔비디아가 개발해오고 있으며 이 아키텍처를 사용하려면 엔비디아 GPU와 특별한 스트림 처리 드라이버가 필요하다 -위키백과 cuda out of memory는 사용하는 메모리 보다 더 많은 메모리를 할당하면서 발생하는 에러입니다. 메모리를 줄이려면 배치를 줄이거나 이것도 안되면 네트워크 크기를 줄여야 합니다. 대표 해결법: 1. batch size 줄이기 https://github.com/flairNLP/flair/issues/685#issuecomment-524605238 RuntimeError: CUDA out of memory. Tried to allocate 20.00 MiB (GPU 0; 15.90 GiB total capacity; 14.66 GiB already allocated; .... · Issue #685 · flairNLP/flair Getting CUDA out of memory errors for following: ------------------

원문보기 내부링크
Naver Blog

[정규표현식] txt 형식의 데이터를 csv 형식으로 바꿔보자 (string to datetime)

현재 이런 형태의 txt 파일을 받았다고 가정합니다. 이를 DB에 insert 하기 위해 먼저 csv 파일 형식으로 변화할 필요가 있습니다. 본격적으로 시작하기 전 이번에 사용할 기술 스택: 공백 선택: \s : space, tab, blank : 하나만 있는 경우 \s+ : 하나 이상 space, tab 있는 경우 \s{0,3} : 없거나 3개 이하인 경우 문자열의 시작과 끝: 시작 ^ 끝 $ 그 외 내용은 필자의 블로그 중 “정규표현식” 카테고리에 정리되어 있습니다. 확장자를. csv로 변경 후 vscode로 파일을 열어줍니다. command + f 및 정규표현식 버튼을 눌러 작업에 들어갑니다. 1. 쌍 따옴표 지우기 " 결과: 2. 데이터 사이에 콤마 넣기 (?<=^[0-9]{7})\s , 결과: 콤마 넣기 2: (?<=[0-9]{12})\s , 결과: 이제 드디어 기본적인 csv 형태를 갖췄습니다. 이제 날짜를 datetime 형식으로 분리해 보겠습니다. 3.datetime

원문보기 내부링크
Naver Blog

[개발 지식] 컴퓨터와 프로그래밍 언어의 상관관계 (+기본 동작 원리)

본 글은 개발자가 되기 위해서 알아야 할 기초적인 컴퓨터 동작 원리에 대해서 다뤄보고자 한다. 컴퓨터의 두뇌, CPU CPU는 Central Processing Unit의 약자로써, ‘중앙 처리 장치’라고 불린다. 사람으로 따지면 ‘머리’에 해당하는 녀석이다. ‘컴퓨터 프로그램의 명령어를 해석하여 실행하는 것’이 주 업무다. 가령, 외부에서 정보를 입력하고, 기억하고, 연산하고, 외부로 출력하는 일 들이다. CPU는 단독적으로는 동작하지 않는다. 컴퓨터 내부의 여러 부품과 데이터를 교환하면서 컴퓨터 전체의 동작을 제어한다. 인텔 Intel 에서 i5라는 CPU 가 있다. 모델명은 M520 이며 끝 쪽에는 2.4 GHz라는 숫자가 보인다. CPU는 기본적으로 한 순간에 하나의 연산만을 할 수 있다. 2.4 GHz의 의미는 1초에 24억 번의 연산이 가능하다는 뜻 이다. 그렇기 때문에, 사람에게는 한 순간에 여러 일을 하는 것처럼 느껴진다. 숫자가 높을수록, 같은 시간에 할 수 있는 일

원문보기 내부링크
Naver Blog

[Mac] M1맥북에 커맨드로 MySQL 설치하기

MySQL 설치 brew install mysql 설치 후에 이렇게 추가 진행 커맨드가 뜨는데 하나하나 진행해 보겠습니다. root 비번 설정: mysql_secure_installation 여기서 비번을 설정하니 바로 에러: Error: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 해결: brew services restart mysql 1. 다시 mysql_secure_installation 실행, VALIDATE PASSWORD 설정으로 넘어온다. LOW Length >= 8 MEDIUM Length >= 8, numeric, mixed case, and special characters STRONG Length >= 8, numeric, mixed case, special characters and dictionary 2. 이어서 비번 강도 설정: 0,1,2중 하나 입력. 비번 설정 완료 후

원문보기 내부링크
Naver Blog

[개발 지식] 데이터베이스와 Spreadsheet(Excel)의 차이점

아무리 컴맹인 문과생일지라도 spreadsheet(예: Microsoft Excel)은 무조건 다뤄봤을 겁니다. 그러면 spreadsheet와 database는 무엇이 다르고 어떤 차이가 있는지 한 번 보겠습니다. Spreadsheet는? 스프레드시트(spreadsheet) 또는 표 계산은 표 형식으로 데이터의 조직, 분석, 저장을 가능케 하는 상호작용 컴퓨터 애플리케이션이다. 즉, 경리, 회계 등의 계산을 위해 사용되는 표 형식의 계산 용지나, 계산 용지를 컴퓨터에서 사용할 수 있게 구현한 표 계산 프로그램을 의미한다. 데이터베이스란? DB의 정의 데이터베이스는 구조화된 정보 또는 데이터의 조직화된 모음으로써 일반적으로 컴퓨터 시스템에 전자적으로 저장됩니다. 데이터베이스는 일반적으로 데이터베이스 관리 시스템(DBMS)에 의해 제어됩니다. 연결된 애플리케이션과 함께 데이터와 DBMS를 하나로 묶어 데이터베이스 시스템이라고 하며 단축하여 데이터베이스라고도 합니다. 오늘날 운영되고 있는

원문보기 내부링크
Naver Blog

[MySQL] Schema, Table 터미널에서 생성

DATABASE에서 기본적인 Schema, Table를 생성해 보겠습니다. GUI인 mysql workbench에서 생성하면 편하지만 오늘은 터미널에서 쿼리로 생성하겠습니다. 컴퓨터 과학에서 데이터베이스 스키마는 데이터베이스에서 자료의 구조, 자료의 표현 방법, 자료 간의 관계를 형식 언어로 정의한 구조이다. schema란? schema 생성, 삭제 #생성 CREATE DATABASE mydatabase; #삭제 DROP DATABASE mydatabase; 2. schema 조회 SHOW DATABASES; information_schema, mysql, performance_schema, sys 이 4개는 default로 생성된 schema이며, 방금 필자가 생성한 mydatabase도 위에 같이 조회된 것을 볼 수 있다. 3. schema 사용 USE mydatabase; 4. Table 생성 #Topic이라는 테이블을 생성 mysql> CREATE TABLE topic( ->

원문보기 내부링크
Naver Blog

[Oracle] dtype, 연산자 등 SQL 기본

1. datum 단수, data 복수, database(데이터 집합) 1) DBMS 2) RDBMS(Relational DBMS) 관계형 ... (relation = table) 모든 데이터를 테이블의 형태로 만들고 관리 2. RDBMS = Oracle, MySQL, MS-SQL, MariaDB, PostgreSQL... 각 회사마다 표준 이외의 추가 기능이 있는데 공통으로 나오는 표준 SQL 기능만 출제. Oracle로 진행. 3. SQL - Structured Query Language S- 테이블로 정형화된 데이터, 구조화 됐다=>테이블 Q- 질의 , 컴퓨터에게 L- 언어 Oracle tool -> sql developer Oracle은 1컴퓨터에 하나만 설치 가능 ============ 기본 인프라는 SQL DB 여서 보안 강함, NoSQL(MONGO DB) 보안이 약해서 잘 사용 안 함. 1. DCL(Data Control Language), 데이터 제어어 데이터베이스를 제

원문보기 내부링크
Naver Blog

[Oracle] 쿼리에 자주 사용하는 functions

6개의 절 순서는 바꾸면 안됨. select [필수] from [필수] where [선택] group by [선택] having [선택] order by [선택] 각 절은 한 쿼리에 한 번만 사용 가능. 모든 SQL은 순서가 1번 부터 시작, 0번이 아님. (즉 컬럼이 5줄이면 1~5번 순서다) --like 연산자와 와일드 카드 like: 문자열 중에서 일치하는 정보를 찾을 때 사용 와일드 카드: 특별한 의미를 가지는 문자 %: 없거나, 하나 이상의 어떤 문자가 와도 상관없다 _: 하나의 문자가 나옴을 의미 ex) S_ -> S1, S2,SH 이런 형식이 나옴 -- order by 정렬 방법 진행 방향: 왼쪽에서 오른쪽, 위에서 아래로 (일반적인) 오름차순 정렬: 갈수록 값이 커지도록 정렬, asc(ascending) 내림차순 정렬: 갈수록 값이 작아지도록 정렬, desc(descending) order by 절에는: 필드명, 컬럼의 순서 번호, alias를 사용하여 정렬 가능. -

원문보기 내부링크
Naver Blog

[Android][Error] failed to read PNG signature: file does not start with PNG signature.

어제는 테스트를 위해 apk를 아래 필자가 정리한 방법으로 추출하던 도중 에러가 발생했다. https://blog.naver.com/lifeyun24/222855355793 [Android] ReactNative 안드로이드 APK(AAB) 파일 생성하기 오늘은 마켓 배포 혹은 내부 apk 테스트를 위한 ReactNative 안드로이드 APK(AAB) 파일 생성하기를... blog.naver.com 에러의 내용은 대충 이렇다: """ failed to read PNG signature: file does not start with PNG signature. ... AAPT: error: failed to read PNG signature: file does not start with PNG signature. """ 확실히 프로젝트에서 로컬 png를 읽고 있었고 전혀 문제없었지만 갑자기 문제가 터진 상황이라 많이 당황스러웠다. 원인 원인은 이미지 형식이 PNG가 아닌데 파일의 확장자가

원문보기 내부링크
Naver Blog

[RN] React Native App Icon 설정 방법 (iOS & Android) 2023.12 업데이트

오늘은 react native 프로젝트에 앱 아이콘을 적용시켜보는 방법을 정리해 보겠다. 먼저 당연히 본인의 앱 아이콘 사진이 있어야 하며, 사이즈는 1024 * 1024여야 한다. iOS App Icon Generator https://appicon.co/ App Icon Generator Generate icons and images for mobile apps, android and iOS. No need to upload or download. Works on your browser appicon.co 1024*1024 아이콘을 드래그해서 넣으면 iPhone, iPad, Watch, Mac, Android까지 추출해 준다. 아이콘이 생성되었으면 Xcode를 열어준다. 프로젝트 / Images.xcassets에 방금 생성된 아이콘 중에서 알맞은 사이즈 형식을 각자 끼워 넣으면 된다. 예전에는 Assets.xcAssets 파일 전체를 drag n drop 하면 알아서 넣어줬던 것

원문보기 내부링크
Naver Blog

[Oracle] group by, having, insert, update, delete 등

SQL select 절 기본 select/ from/ where/ group by/ having /order by 순서는 지켜야 한다. select, from 은 필수 절이며 select를 하기 위해 없어서는 안 된다. where, group by, having, order by는 선택 절이다, 다만 순서가 바뀌면 안 된다. 예를 들어 where order by group by 이러면 안 된다. *** 기본적으로 테이블에서 필드의 순서는 의미가 없음, 데이터 순서도 의미가 없음. 또한 데이터의 기본 단위가 1column, 1row이기 때문에 한 칸을 말하는 것도 큰 의미가 없음. ** 테이블에서 Primary key는 not null이며 unique 해야 한다. 조건 함수 - coalesce, decode, case - 1) coalesce: coalesce(column1, column2, ...) 합치다, 함수 안에 인수 중에서 null이 아닌 첫 번째 값을 반환하는 함수 - 2)

원문보기 내부링크
Naver Blog

[RN] 파일 절대 경로 설정하기 (babel-plugin-module-resolver)

파일을 불러올때는 상대 경로와 절대 경로라는 개념을 사용한다. 상대 경로란 쉬운 개념이다. ./는 현재 디렉터리부터 시작해서 찾는 거고 ../는 현재 디럭터리에서 상위 폴더로 이동하는 거다. 절대 경로는 현재 어디에 있든, 무조건 root혹은 지정한 폴더부터 찾는 것이다. 처음 절대 경로를 설정하지 않으면 상대 경로를 이용하여 개발을 진행하다가 나중에 폴더를 바꾸고 옮기고 하다 보면... 상대 경로로 했을 때는 유지 보수하기 꽤 힘들다. 어디서는 ../를 ../../로 바꾸고 또 어디서는 줄이고. 이제 이런 막노동은 그만. babel-plugin-module-resolver라는 라이브러리와 함께 절대 경로로 설정을 해본다. (import from에서뿐만이 아닌 사진 경로를 불러올 때도 사용 가능하다.) @babel/preset-react npm install --save-dev @babel/preset-react yarn add @babel/preset-react --dev babe

원문보기 내부링크
Naver Blog

[MySQL] Query log 확인 및 추적하는 방법

우선 mysql이 설치된 서버에 진입합니다. 서버에서 mysql -uroot -p 들어가고 show variables like 'general%'; 해당 명령어는 Query 입력창에 실행하며 아래 그림과 같이 general_log에 value 값이 OFF로 되어있다면 ON으로 변경 해야 log가 쌓이게 되며, 해당 log 위치는 general_log_file의 value 값에 존재하는 위치에 쌓이게 됩니다. set global general_log=on; 다시 확인할 경우 아래 그림과 같이 general_log에 value 값이 ON으로 변경된 것을 확인할 수 있습니다. 이제 다시 서버에서 vi /var/lib/mysql/NewExchangeCo.log로 들어가면 아래처럼 로그를 볼 수 있습니다.

원문보기 내부링크
Naver Blog

[MySQL] 특정 row의 데이터를 받아오는 방법

만약 한 테이블에 데이터가 시간 순서대로 계속 쌓이고 있다고 가정한다. 그러면 거기서 최상위 데이터는 order by time desc limit 1 하면 가져올 수 있다. 다만 만약에 '최신 시간 그 아래, 특정 n 번째 데이터'를 받아오고 싶다~ 하면 어떻게 할까. 필자가 진행하면서 터득한 몇 가지 방법을 제시해 본다. 참고로 현재 데이터의 time 은 yyyymmddhhmiss 이렇게 string으로 쌓이고 있다. 서브 쿼리 사용법 이 방법으로 두 번째 row의 time을 가져오기에는 편하다. SELECT time FROM schema.table_name WHERE time<(SELECT time FROM schema.table_name ORDER BY time DESC LIMIT 1) ORDER BY time DESC LIMIT 1; 하지만 3번째, 4번째.. 늘어남에 따라 서브 쿼리 서브 쿼리를 계속 넣어야 하는 대참사가 발생하기에 추천하지는 않는다. 서브 쿼리, 근데 ma

원문보기 내부링크
Naver Blog

[JS] 부모-자식 컴포넌트 간 데이터 전송

우선 아래처럼 한 파일 안에 api, 함수 등 모든 코드가 있는 상황을 보면 정리하고 싶은 마음이 드는 게 당연하다. before, after를 비교하면서 코드가 얼마나 깔끔해졌는지 비교해 본다. //before (onefile.js) export const onefile = ({ navigation: { navigate } }) => { const [originImg_0, setOriginImg_0] = useState(null); const [stillCut_0, setStillCut_0] = useState(null); const [recordDate_0, setRecordDate_0] = useState(""); const GetStillCut_0 = () => { axios.post("http://path/stillcut_0").then((res) => { if (res?.data) { setStillCut_0(`http://path/static/detected/0/${re

원문보기 내부링크
Naver Blog

[JS] axios의 작성 형태 2종

오늘은 API 통신의 메인 라이브러리인 axios의 몇 가지 형태에 대해 정리해 본다. 사용하고자 하는 api와 목적은 같으나, 단지 형태가 다를 뿐이다. 1. 함수 안에 함수를 만드는 형태, 그리고 .then을 사용 안 한다. const data = async () => { const res = await axios.post("http://path/apiName"); if (res?.data) { setStillCut_0(`http://path/detected/0/${res?.data?.[0]?.path}`); setOriginImg_0(`http://path/origin/0/${res?.data?.[0]?.path}`); } }; 2. new Promise((resolve)=>( )) 형태, 마지막에는 resolve( )로 완성한다. .post뒤에 .then을 사용한다. const date = async () => new Promise((resolve) => { axios.pos

원문보기 내부링크
Naver Blog

[JS] axios 멀티 리퀘스트 보내기 (axios.all, axios.spread)

하나의 컴포넌트에서 멀티 리퀘스트를 보내기 위해 처음에는 함수 두 개를 사용했다. 그러다 보니 유지 보수도 힘들어지고 가독성도 안 좋아졌다. 어떻게 한 곳에서 api들을 모아놓을 수 없을까? 해답은 axios.all 과 axios.spread를 사용하면 된다. axios.all에서 값이 배열 형태로 들어가기 때문에 axios.spread에서는 인자 순서를 잘 지켜줘야 된다. 마지막으로 해당 인자에 맞는 값으로 호출을 하면 끝. 아래 코드로 보면 이해하기 쉬울 것이다. export const GetDateImg_0 = ({ setStillCut_0, setOriginImg_0, setRecordDate_0, }) => { const data = async () => new Promise((resolve) => { axios .all([ axios.post("http://path/apiName_0"), axios.post("http://path/apiName_1"), ]) .then(

원문보기 내부링크
1 2 3