lIlIlIlI

> 깃 브런치 관리 현황 정리 문서 > # 세부 브런치별 기능 및 역할 ## main - 실제 사용자가 사용중인 상태 - Hotfix 가 포함되어있을 수 있음 (Code push 사용) ## dev - feat, fix branch 에서 개발 완료된 기능을 1차적으로 dev branch를 통해 merge해, 상호 파일간 호완 수준 및 빠른 개발 및 실험이 이뤄지는 branch, 각 파일은 기능별, 구조별로 각 개인이 만든 코드이다. - 해당 단계에서는 merge할 경우, merge 이후 충돌 발생여부를 체크해야하며, 충돌 발생시 해결 순서는 다음과 같다. 1. 최신 dev branch 를 pull 한 후 개인의 branch 를 최신 dev 위로 rebase 1. 대부분 1번에서 해결되며 해결되지 않는 상황에서는 2번 이후를 진행 2. 에러 발생 코드 위치 확인 3. 코드 작성일과 작성자 확인 4. 문제에 대한 원인 분석 1. 작성자와 협업이 가능한 경우, - 상호 코드간 충돌이 일어나는지 확인 후 코드 스타일 변경 2. 작성자와 협업이 불가능한 경우, - 작성자의 코드를 현재 작성한 본인 코드에 맞게 수정 - dev branch를 통해 문제가 발생하지 않은경우, release branch 로 merge - release branch merge 조건 1. 상호 호환되는 코드의 개발이 더 이상 진행되고 있지 않은 경우, 2. 목표로한 sprint 기능 및 오류 수정의 단계가 종료된 경우, 3. QA 가 종료된 경우 ## feat - 앱 내 기능 개발이 진행되는 branch - 새로운 기능 추가 혹은 기존의 기능을 수정하는 작업(Business logic 변경)이 진행된다. - 기능 개발이 완료된 feat branch의 경우 진행 순서 - **dev** branch...

1. 서버 측 CORS 1. 원본 요청 정책만 수정하고 응답 헤더 정책을 설정하지 않으면 Access-Control-Allow-Origin 헤더를 리스폰스해주지 않아 브라우저에서 출력하지 않음 2. 클라이언트 측 1. Referrer-Policy - **no-referrer**: `Referer` 헤더 생략 - **no-referrer-when-downgrade**: 프로토콜 보안 수준이 동일하거나 더 높을 때(`HTTP->HTTP`, `HTTP->HTTPS`, `HTTPS->HTTPS`)는 Full URL을, 더 낮을 때(`HTTPS->HTTP`, `HTTPS->File`)는 No data - **origin**: Origin만 전송 - **origin-when-cross-origin**: 동일한 프로토콜 보안 수준에서 same-origin 요청일 때는 Full URL을, cross-origin 요청 및 보안 수준이 낮을 때는 Origin만 전송 - **same-origin**: same-origin일 때는 Full URL을, cross-origin일 때는 생략 - **strict-origin**: 프로토콜 보안 수준이 동일할 때(`HTTP->HTTP`, `HTTPS->HTTPS`)에 한해 Origin만 전송 - **strict-origin-when-cross-origin**: same-origin일 때는 Full URL, cross-origin일 때는 프로토콜 보안 수준이 유지될 때에 한해 Origin만 전송, 보안 수준이 낮아진다면 No data - **unsafe-url**: 무조건 Full URL **(권장되지 않음)** - 클라이언트 사이드에서 Referrer-Policy 를 설정하지 않으면 브라우저 기본 Poli...

react 리렌더링에 큰 영향을 미치는 hook dependency. 예전에는 lint 로 hook dependency 체크해주는 설정이 잘 안되어 힘들었던 기억이 나서 정리해보고자 새로운 리엑트 네이티브 프로젝트를 생성했다. React re-rendering is significantly affected by hook dependencies. In the past, it was challenging for me to configure linting to check hook dependencies, so I created a new React Native project to document settings for managing them. 그런데 아무런 설정 없이도 hook dependency check 가 자동으로 잘 된다...? To my surprise, the hook dependency check works automatically, even without any additional setup. .eslintrc.js 파일을 살펴보니 (예전에는 자동으로 생성이 안되었던 것 같은데) After reviewing the .eslintrc.js file (which didn’t seem to auto-generate in previous versions), I found this configuration: ``` module.exports = { root: true, extends: '@react-native', }; ``` 하여 node_modules/@react-native 를 살펴보니 eslint-config/index.js 에 아래와 같은 설정을 발견 I explored node_modules/@react-native and found the following settings in eslint-config/index.js: ``` plugins: [ 'eslint-comments', ...

# 스티키 헤더 여러개 만들기 ScrollView 에서 제공하는 stickyHeader 를 사용하려면 단순히 [stickyHeaderIndices](https://reactnative.dev/docs/scrollview#stickyheaderindices) 에 스티키 헤더가 될 인덱스를 넣으면 된다. 하지만 인덱스 여러개를 넣게되면 인덱스에 포함되는 행들이 차례로 쌓이는게 아니라 두번 째 행이 위에 붙게되면 원래 붙어있었던 첫번 째 행은 위로 올라가 사라지고 만다. 나는 여러개의 행이 차례로 쌓이는 이른바 multiple sticky header 를 만드는 방법에 대해 내가 고민했던 방법을 정리하고자 한다. There is [stickyHeaderIndices](https://reactnative.dev/docs/scrollview#stickyheaderindices) option in ScrollView if you need simple sticky header. However, i need multiple sticky headers that stack upon each other. Usually when a user scrolls up, the previous sticky header is replaced by the new one. 기본적인 원리는 스크롤 뷰 위에 스티키 헤더를 absolute 로 겹쳐놓고 스크롤의 y 좌표가 해당 헤더 위치를 지나가면 겹쳐놓은 스티키 헤더의 display 를 none 에서 flex 로 변경해주는 것이다. Basic idea is overlapping invisible header over scrollView and when the header moving up touching top of the view, make the invisible header visible. ```js <SafeAreaView> <View> <ScrollView onScroll={handl...

react native 에서 gps 트래킹을 해야한다. 앱이 백그라운드에 있어도 동작하도록 네이티브 모듈을 만드는 것만 해도 많이 안하다보니 까다로운데 gps + 서비스 동작을 해야한다니. 기본으로 돌아가기로 했다. 일단 안드로이드 앱에서 GPS 트래킹하는 코드부터 시도해보았다. ### MainActivity.kt ``` package com.example.gpstracker import android.annotation.SuppressLint import android.content.Context import android.content.pm.PackageManager import android.location.LocationListener import android.location.LocationManager import android.os.Bundle import android.util.Log import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material3.Button import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.core.app.ActivityCompat import com.example.gpstracker.ui.theme.GpsTrackerTheme val T...

써드파티 SDK를 붙이는데 해당 업체에서 npm package 가 아닌 각 OS의 SDK 와 react native 코드를 주면서 앱에 내장하라는 가이드를 받았다. 물론 이를 그냥 앱에 넣을 수는 없어서 package 로 분리하는 작업을 하였다. 이 작업을 하며 겪었던 트러블슈팅을 정리하고자 한다. # Android ## 자바와 코틀린간 패키지 참조 불가 build.gradle (app) 에 하단 설정 추가 ``` apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' ``` ## Could not find com.this.repo. 모듈의 example 프로젝트에서 받고자하는 sdk 라이브러리가 없다는 에러. example 프로젝트의 build.gradle 에 아래 코드를 추가하여 필요한 sdk 를 다운받을 수 있도록 한다. Can’t find module in example project, and I fixed it adding below codes in build.gradle (example) ``` allprojects { repositories{ maven { url 'https://repository.something/‘ } // change this line to download the sdk you aimed } } ``` ## Workspaces can only be enabled in private projects. 모듈을 붙이고자 하는 프로젝트는 프라이빗 프로젝트이기 때문에 npm 에 퍼블리쉬되지 않은 패키지의 경우 package.json 에 "private:true" 를 추가해야 한다. Because my project is “private:true”, If I want to add non-published package, the package should be...