좌충우돌 anecdote

스택 프레임 (stack frame) 메모리의 스택 영역은 함수의 호출과 관계되는 지역 변수와 매개변수가 저장되는 영역이다. 스택 영역은 함수의 호출과 동시에 할당되며, 함수의 호출이 완료되면 소멸한다. 함수가 호출되면 스택에는 복귀 주소(호출이 끝난 뒤 돌아갈 반환 주소값), 매개 변수, 함수에서 선언된 지역 변수 등이 저장된다. 이렇게 스택 영역에 차례대로 저장되는 함수의 호출 정보를 스택 프레임(stack frame)이라고 한다. -> 스택 프레임 덕분에 함수 호출이 끝난 뒤에, 해당 함수가 호출되기 이전 상태로 돌아갈 수 있게 된다. function DFS(L) { if (L === 0) return; else { DFS(L-1); console.log(L); } } 해당 코드에서 L이 3이라면 ..

문제 Given a string s, find the length of the longest substring without repeating characters. 문자열이 지정된 경우 반복 문자 없이 가장 긴 부분 문자열의 길이를 찾아라. 풀이법 1. 겹치치 않는 문자열을 저장한다. a2. a에서 s[i]와 겹치는 게 있는지 확인한다. - 겹치는 게 있다면 a에서 s[i] 인덱스를 기준으로 slice 한다. - 겹치는 게 없다면 a에 s[i]를 추가한다. 3. 가장 긴 문자열 기준이므로 문자열 길이를 저장한다. 코드 var lengthOfLongestSubstring = function (s) { let substr = ''; // 겹치치 않는 문자열 저장 let count = 0; for (let i..

?: 앱 크기가 최적화랑 상관이 있나요? 🧚‍♀️: Yessss! 앱 크기가 작아야 하는 이유 용량 때문에 18.7% 사람들이 앱을 제거한다. 개발자는 항상 번들 크기와 앱 용량을 줄이는 데 주의를 기울여야 한다. WHAT? 코드의 전체 크기에 영향을 미치는 가장 큰 요소 중 하나는 라이브러리이다. 여러 라이브러리를 비효율적으로 사용하고, 원하는 디자인을 위한 커스텀 폰트를 넣다보면 앱의 크기가 커져 앱 속도가 저하됨. native 앱과 달리 react-native 에서는 1. 메모리에 로드해야 하는 javascript bundle이 포함되어 있음. 2. 로드 후 javascript vm에 의해 구문이 분석되고 실행됨. 번들에 사용되지 않는 코드를 제거해주는 tree shaking 조차 native와 달..

요즘 rn 앱 내에서의 ui re-rendering을 막으면서 최적화를 위해 힘쓰고 있다. 여러 방법들을 공부하면서 기록하고자 한다. 📚 프로파일링 하며 시도했던 방법들은 추후에 더 기록할 예정이다 🔥 1. 과도한 커스텀 hook 사용 방지 첫 번째로 우리 앱에는 hook이 정말 많았다. 종속성이 변경되면서 필요하지 않는 화면까지 re-rendering 되는 상황이었다. 최적화를 해보자 - 과도한 hook 사용을 방지하고 필요한 화면. 즉, 해당 컴포넌트 안에서만 hook을 사용하는 방식이다. 예를 들어 하나의 화면 안에 2가지 컴포넌트로 분리되어 있다고 치자. 기존에는 presentational and container 패턴을 사용하면서 1과 2 화면에서 필요한 정보들을 모두 1+2 화면에서 갖고 있었..

문제 그룹 단어란 단어에 존재하는 모든 문자에 대해서, 각 문자가 연속해서 나타나는 경우만을 말한다. 예를 들면, ccazzzzbb는 c, a, z, b가 모두 연속해서 나타나고, kin도 k, i, n이 연속해서 나타나기 때문에 그룹 단어이지만, aabbbccb는 b가 떨어져서 나타나기 때문에 그룹 단어가 아니다. 단어 N개를 입력으로 받아 그룹 단어의 개수를 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 단어의 개수 N이 들어온다. N은 100보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에 단어가 들어온다. 단어는 알파벳 소문자로만 되어있고 중복되지 않으며, 길이는 최대 100이다. 출력 첫째 줄에 그룹 단어의 개수를 출력한다. 문제 풀이 하나의 문자열 배열이 그룹인지 아닌지 판단해야 한다...

문제 상황 react-native-draggable-flatlist 라이브러리를 사용하는데 해당 데이터가 모두 잘 넘어옴에도 불구하고, renderItem에서 item을 사용하려고 하면 모든 아이템이 렌더되지 않는 상황이 발생했다. ex) the FlatList does not render all 100 items on initial load. 해결 과정 하나하나 디버깅을 해보자. item을 찍어봤을 때 처음에는 반 정도 렌더링이 되고, 드래그를 하니 나머지 아이템이 렌더링 되는 상황을 목격했다. 음, 이건 해당 라이브러리 문제라고 생각해서 해당 라이브러리 이슈를 살펴보았다. 역시 나랑 똑같은 문제를 겪고 있는 사람이 있었다. 해당 이슈: https://github.com/computerjazz/reac..

며칠 전 xCode를 14.1로 업데이트했는데, error Could not get the simulator list from Xcode. Please open Xcode and try running project directly from there to resolve the remaining issues. Error: Command failed: xcrun simctl list --json devices xcrun: error: unable to find utility "simctl", not a developer tool or in PATH 에러가 났다. 원인 xCode 신규버전을 설치하고 나서 command line tool이 초기화되지 않아서 생기는 문제 2가지 해결법 1. Xcode - Pref..

앱을 launch 하자마자 error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`. 에러가 발생했음. 에뮬레이터가 없다는 에러인데, 안드로이드 스튜디오에 들어가보면 에뮬이 잘 동작되고 있음. 따라서 앱도 안켜짐. 확인해보자. $ react-native doctor sdk 경로 문제인 것을 확인 터미널에서 zshrc 파일을 편집해준다. $ vi ~/.zshrc 위와 같이 파일을 열고 아래의 안드로이드 관련 부분 코드를 적어준다. export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_SDK_ROOT/emul..

앱을 유지보수하는 데 가장 많이 도움되는 것은 디자인 패턴인 것 같다. 처음 만들 때 제대로 잡아놔야 유지보수가 쉽고, 다른 사람도 보기 편-안하다. 오늘은 React에 어떤 디자인 패턴이 있는지 알아보고, 스스로 어떻게 쓰고 있는지 얘기해보고자 한다. React 디자인 패턴 1️⃣ Presentational and Container Component Pattern 가장 유명한 패턴이기도 하고, 이제는 구식에 가까운(?) 아무튼 나는 잘 쓰고 있는 패턴이다. Presentaitional 컴포넌트는 화면에 보여지는 것 (즉, UI) 부분만 담당하는 컴포넌트이다. 데이터는 항상 Container 단에서 받아서, 사용자에게 보여질 것만 presenter 단에서 처리한다. Container 컴포넌트는 동작과 데..

현재 상황 Screen에서 Modal로 이동할 때 해당 데이터 값을 넘겨줘야 하는 상황 이때 사용되는 state는 총 2개로 1. 모달을 열어주는 state 2. 데이터 값을 받는 state 이런 상황에서 값을 넘겨주는 방식은 2가지가 있다. 1. props로 전달 2. DeviceEventEmitter 사용 첫 번째 방식은 모달이 mount 됐을 때 상태 값을 2개를 관리해줘야해서 번거로운 반면, 두 번째 방식은 항상 모달이 listen중이니 2개의 state 관리가 필요 없고, 값을 전달 받을 수 있다. Screen import { DeviceEventEmitter } from 'react-native'; DeviceEventEmitter.emit('aaaa', data); // 넘기는 data Mo..