전체 글150 🥈 리액트 심화 개념 1. useEffect: 컴포넌트의 라이프사이클 제어useEffect()는 컴포넌트가 렌더링된 이후에 실행되는 코드를 작성할 때 사용합니다.ex) API 호출, 이벤트 등록, 타이머 설정 등✅ 의존성 배열이란?useEffect(() => { // effect 내부 코드}, [의존성]);이 배열에 있는 값이 변할 때마다 useEffect 내부 코드가 실행됩니다.🧠 상황별 정리1. [] (빈 배열)useEffect(() => { console.log('✅ 마운트될 때만 실행'); return () => { console.log('🧹 언마운트될 때 정리'); };}, []);컴포넌트가 처음 렌더링될 때 한 번만 실행배열 안에 아무 의존성도 없으므로, 이후 업데이트 시 실행되지 않음return은.. 2025. 6. 20. 🥇 리액트 기본기 (반드시 알아야 할 핵심) 1. JSXJSX는 JavaScript XML의 약자로, JavaScript 안에 HTML을 작성할 수 있는 문법입니다.JSX 덕분에 UI 구조를 선언형으로 표현할 수 있어, 코드의 가독성이 좋아집니다.const name = '개발자';return Hello, {name}!;위 코드는 문자열 변수 name을 HTML 구조 내에서 바로 사용할 수 있게 해줍니다.2. 컴포넌트컴포넌트는 UI의 독립적인 단위입니다. 리액트는 컴포넌트를 조립해서 화면을 구성합니다.보통 함수형으로 작성되며, 각 컴포넌트는 자신만의 props와 state를 가질 수 있습니다.function Welcome(props) { return Hello, {props.name};}이처럼 함수 하나가 하나의 화면 조각(UI)를 구성합니다.3... 2025. 6. 20. Query vs Mutation Query vs Mutation 2025. 6. 20. 코드 푸쉬 https://github.com/microsoft/react-native-code-push GitHub - microsoft/react-native-code-push: React Native module for CodePushReact Native module for CodePush. Contribute to microsoft/react-native-code-push development by creating an account on GitHub.github.com https://github.com/Soomgo-Mobile/react-native-code-push GitHub - Soomgo-Mobile/react-native-code-push: Seamless transition from AppCen.. 2025. 6. 20. React Native IOS 기본 명령어 캐시 정리 및 의존성 정리watchman watch-del-allrm -rf node_modulesrm -rf ios/Podsrm -rf ios/Podfile.lockrm -rf ~/Library/Developer/Xcode/DerivedDatanpm cache clean --forcenpm installcd iospod install --repo-updatecd .. ✅ 4. Xcode에서 다시 열기open ios/CheongjeongEarth.xcworkspace 2. 의존성 재설치rm -rf ios/Pods ios/Podfile.lockcd iospod install --repo-updatecd .. cd ios && pod install && cd ..cd ios && rm -rf Pods P.. 2025. 6. 17. 애니메이션과 useNativeDriver useNativeDriver: true, 2025. 6. 5. KeyboardAvoidingView + ScrollView VS keyboardAwareScrollView 차이 ㄷㅈㄷ 2025. 6. 5. Mac에서 React Native CLI로 개발 환경 구축하기 React Native 프로젝트를 React Native CLI 방식으로 세팅하면서 겪은 문제들과 해결 과정을 정리합니다.Expo가 아닌 Native 기반 프로젝트(ios/android 디렉토리 포함)가 필요할 때 사용합니다.✅ 1. React Native CLI 프로젝트 생성 전 기본 확인Node 버전 확인node -v # v20.19.2 (권장: 18.x ~ 20.x)✅ 2. 예전 react-native-cli 삭제 (필수)react-native-cli는 더 이상 사용하지 않습니다. 남아있으면 충돌이 발생합니다.npm uninstall -g react-native-cli sudo rm -rf /usr/local/lib/node_modules/react-native-cli ✅ 3. React Nativ.. 2025. 5. 30. MVI는 왜 Compose 환경에서 피해야 할까? 최근 안드로이드 개발에서는 Jetpack Compose를 기반으로 한 선언형 UI가 급속히 보급되고 있고, 동시에 MVI(Model-View-Intent) 아키텍처도 많이 회자되고 있습니다. 하지만 MVI는 Compose 환경에서는 오히려 안티패턴에 가까울 수 있다는 점에서 제가 이해 한 것으로 작성하게 되었습니다.MVI라는 이름 자체의 어색함MVI는 원래 Elm이라는 함수형 언어의 아키텍처에서 유래했습니다. 이를 React 진영에서 Redux라는 상태 관리 라이브러리를 통해 가져왔고, 여기서 increment/decrement 예시가 유명해졌습니다.이 패턴이 이후 Jetpack Compose의 예시 코드에도 그대로 전파되면서, 많은 사람들이 이를 "정석"처럼 받아들이게 되었죠. 하지만 실제로는 "MV*.. 2025. 3. 25. Redux 개념 정리 (Android 개발자 관점에서 이해해보자!) React Native나 React를 공부하다 보면 종종 등장하는 개념이 바로 Redux다. 처음 봤을 땐 생소할 수 있지만, Android 개발자 입장에서 접근하면 훨씬 쉽게 이해할 수 있다. 이 글에서는 Redux의 개념부터 구조, 그리고 Android의 MVVM 패턴과 비교하며 설명해보겠다.✅ Redux란?Redux는 앱의 상태(state)를 중앙에서 예측 가능하게 관리하는 라이브러리다.컴포넌트마다 useState를 쓰다 보면 상태가 꼬이고 공유가 어려워진다. Redux는 이를 해결하기 위해 모든 상태를 하나의 중앙 저장소(Store)에 모으고, 상태 변경도 명확한 흐름을 통해서만 가능하도록 만든 구조다.🔧 Redux 기본 구성 요소Redux는 다음과 같은 4가지 핵심 개념으로 구성된다.구성 요소.. 2025. 3. 12. Compose UI 컴포넌트 설계 Compose UI 컴포넌트 설계의 중요성안드로이드 Compose UI 설계는 단순히 화면을 구성하는 것을 넘어 재사용성과 테스트 용이성을 높이고, 잦은 변경 사항에도 유연하게 대처할 수 있는 구조를 만드는 것이 핵심입니다. 컴포넌트를 화면 단위로 설계하는 것과 의미 있는 단위로 분리하는 것 사이에는 큰 차이가 있습니다. 후자의 방식은 유지보수성과 코드의 가독성을 크게 향상시킵니다.Google의 Compose API 가이드라인에 따르면, 하나의 컴포넌트는 단일 문제를 해결하는 데 초점을 맞춰야 하며, 이를 통해 간결하고 사용하기 쉬운 API 설계를 지원할 수 있습니다. 또한, 선언형 UI의 대표 주자인 React의 설계 원칙과 선언적 컴포넌트 구조에서 배울 점이 많습니다. Compose는 React에 비.. 2024. 12. 13. XML 에서 Copose로 전환하면 좋은 이유 1. UI와 로직의 통합기존의 XML 방식은 UI와 로직을 분리되었을때의 문제점은 다음과 같습니다.1-1. 데이터 바인딩의 실행 순서 문제XML에서 DataBinding을 활용하여 UI와 데이터를 연결하는 경우, XML이 먼저 실행되고 로직이 나중에 실행됩니다. 이로 인해 다음과 같은 문제가 발생합니다.초기 상태 비정상: UI 컴포넌트가 초기 상태를 올바르게 반영하지 못하거나, 데이터가 준비되기 전에 XML이 렌더링되어 잘못된 값을 표시할 수 있습니다.복잡한 상태 관리: XML의 뷰 상태와 로직의 데이터 상태를 일치시키기 위해 추가적인 코드가 필요합니다.1-2. 레이아웃 측정의 제약XML에서 커스텀 뷰를 만들거나 동적으로 뷰의 크기를 변경해야 하는 경우, onMeasure와 같은 메서드에서 크기를 측정하.. 2024. 12. 13. Android Test - 3. Instrumented Test 안드로이드 프레임워크가 연관되는 모듈은 jvm 위에서는 실행할 수가 없다. 따라서 테스트를 에뮬레이터나 실기기 위에서 수행해야 되는데 이것을 인스트루먼티드 유닛 테스트라고 합니다 여기서는 예제로 메인 액티비티를 생성한 다음에 그 라이프사이클 상태를 확인하는 인스트루먼티드 테스트를 해보겠습니다 우선은 테스트에 필요한 Dependency를 추가해줍니다 androidTestImplementation "androidx.test:core:1.5.0" androidTestImplementation "androidx.test.ext:trush:1.5.0" androidTestImplementation "androidx.test:rules:1.5.0" 다음은 MainActivity 클래스로부터 테스트를 작성해 보겠습니.. 2024. 3. 31. Android Test - 2. Local Test Build.Gradle 아래와 같이 기본으로 아래와 같이 Testing에 관련된 라이브러리가 추가 되어 있다. 이 testImplement와 androidTestImplementation 키워드를 볼 수 있다. jvm 만으로 수행할 수 있는 로컬 단위 테스트에 사용되는 Dependency 는 testImplement 이고 안드로이드 에뮬레이터나 실기기를 필요로 하는 계측 단위 테스트에 사용되는 Dependency는 androidTestImplementation 이다. 그러므로 이 기본 프로젝트에는 로컬 테스트용으로 JUnit4가 추가되고 계층 테스트용으로 JUnit Extension 그리고 Espresso가 추가되는 것 이다. 여기에 Assertion을 더 읽기 용이하게 해주는 Truth와 테스트를 크기.. 2024. 3. 31. Android Test - 1. Basic 이번 글은 TestCode 도입에 앞서 지식에 대해서 정의하려고 한다. The History of Software Testing에서는 소프트웨어 테스팅이 1822년 찰스 베비지의 차분 엔진 제작과 함께 시작되었다고 하고 Bug라는 단어는 토마스 에디슨이 1878년 동료에게 보내는 편지에서 처음 사용된 것으로 알려져 있다. 따라서 테스트 방법론에서는 서로 대립하는 수많은 주장이 긴 시간동안 개발되어져 왔다. 테스트 유형이 피라미드 구조를 가져야 한다는 사람도 있고 아이스크림 콘 형태를 가져야한다는 사람도 있다. 또 테스트 커버리지는 100%를 목표해야 한다는 사람도 있고 혹은 100%를 목표하는 것은 무의미한 일이라고 말하기도 한다. 또 테스트를 먼저할지 구현이 먼저되어야 하는지에 대한 의견이 분분하다. .. 2024. 3. 31. 이전 1 2 3 4 ··· 10 다음
