Posts

Showing posts with the label react-native

스트링 디코드 문제에서 망하고, 43분 후 복수에 성공한 이야기 (feat. 중첩 괄호도 처리함)

## 🔧 배경 얼마 전 기술 면접을 보다가 `decodeString` 문제를 받았습니다. 알고리즘 공부는 주로 BFS, DFS 쪽만 하던 터라, 문자열 파싱 문제에서 완전히 발목 잡혔습니다. 거기다 라이브 코딩. 제한 시간 30분. 당연히… 못 풀었죠. 멘탈까지 디코딩당한 날이었습니다. --- ## 🔥 복수의 시작 면접이 끝난 뒤에도 이 문제는 계속 머릿속을 맴돌았습니다. “내가 이걸 못 풀었다고? 진짜?” 그 순간부터 **마음속의 디버거**가 켜졌고, 라이브 코딩에서 시도했던 방식에서 출발해 다시 파기 시작했습니다. 스택도 쓰지 않았습니다. 재귀도 쓰지 않았습니다. 그냥 제 방식대로, 끈질기게 문자열을 조작하면서 풀었습니다. **걸린 시간: 추가 43분.** --- ## 🧠 접근 방식 요약 - `[`와 `]`를 찾는다. 가장 안쪽 괄호부터 시작. - 그 안의 문자열을 꺼내고, 반복 횟수를 계산한다. - 원래 문자열 배열을 `splice`로 조작해서 새로운 문자열을 삽입한다. - 그리고… **처음부터 다시 돌린다.** - 이걸 괄호가 다 없어질 때까지 반복한다. 사실상 **재귀를 흉내 내는 루프 기반 수동 파서**입니다. --- ## ✅ 최종 코드 (with 주석) ```javascript /** * @param {string} s * @return {string} */ var decodeString = function(s) { const strArr = s.split(''); let startIndex = -1; let endIndex = -1; for(let i = 0; i = 0 && endIndex >= 0 && endIndex > startIndex){ const addedStr = strArr.slice(startIndex + 1, endIndex).join(''); ...

스티키 헤더 여러개 만들기 (Multiple sticky header)

# 스티키 헤더 여러개 만들기 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...

Modularization of react NativeModules

써드파티 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...

카카오 내비 리엑트 네이티브 모듈 만들기 ft.코틀린

사용자를 카카오 내비로 이동시키는 기능이 최근 카카오네비 딥링크가 막혀서 더이상 사용하지 못하는 이슈가 있었습니다. 카카오 SDK 를 포팅한 React Native 모듈이 있는지 찾아보았으나 대부분은 Out-Dated 된 모듈들이어서 새로 만들기로 하였습니다. A~Z 까지 모든것을 설명하려는 것은 이 포스팅의 목적이 아니고, 개인적으로 조금 헤매었던 부분을 정리하고자 합니다. ### create react native module React Native 공식 문서에도 나와있듯 모듈을 쉽게 만들기 위해 이미 보일러 플레이트가 완성되어있는 코드를 베이스로 삼아 만들어 줍니다. ``` npx create-react-native-library@latest react-native-awesome-module ``` ### react module 에서 app context 사용 방법 SDK 문서에 따르면 사용자 기기에 카카오내비 앱의 설치 유무를 확인하기 위해서 아래와 같은 코드를 사용할 수 있습니다. ``` if (NaviClient.instance.isKakaoNaviInstalled(context)) { Log.i(TAG, "카카오내비 앱으로 길 안내 가능") } else { Log.i(TAG, "카카오내비 미설치") } ``` 하지만 안드로이드 네이티브가 아닌 우리는 리엑트 네이티브의 모듈을 가져와서 context 로 넣어주어야 하고 이는 네이티브 모듈에서 아래와 같이 잡아올 수 있습니다. ``` class KakaoNaviModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) { private var context: Context = reactContext.getApplicationContext() ``` ### modul...

Transform react-native AppDelegate.mm to AppDelegate.swift

Image
  Delete AppDelegate.h, AppDelegate.mm, main.m Make AppDelegate.swift & bridging-header Thankfully most of codes is wraped in RCTAppDelegate after RN0.71. So, as you can see, we should transform few codes from objective c to swift like below There is a you can’t just copy and paste. self.moduleName must be your ‘Project Name’ After making your own AppDelegate.swift and bridging-header, try to run using ‘npx react-native run-ios’ or ‘yarn ios’ wthatever you want. Then you can see this error.   In left, Project navigator displays, click your project > Build Settings > search ‘active com’ You can find Active Compilation Conditions. Add ‘DEBUG’ in Debug. It makes preprocessor recognize DEBUG flag. Run your application again after adding DEBUG flag. If you won’t use new architecture, this is it. To run this app suing new architecture, run the following in ios directory. bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install If you run after pod install, ...

Popular posts from this blog

Operating System Concept

Transform react-native AppDelegate.mm to AppDelegate.swift

Operating System Concepts 9th