My Boundary As Much As I Experienced

React Navigation이란? (+세팅법)React Navigation은 React Router Dom의 RN버전이다. (웹환경과의 차이가 좀 있긴하다.)세팅법은 공식문서에 보면 나와있다. React Native CLI 기준으로 세팅하고 싶은 분들은 아래 명령어를 치신 뒤npm install @react-navigation/native NavigationContainer를 App.tsx에 import하여 당신의 앱을 두르면 된다.import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';export default function App() { return ( {/* Rest of yo..

ReactComponent를 찾을 수 없다는 에러 해결법예전 사이드 프로젝트 진행 도중 UX디자이너 분이 네비게이션 바를 바꾸셨다.react-icons에 있는 기성 아이콘이 아닌 커스텀 svg아이콘을 쓰게 되어 svgr을 쓰게 됐다.그런데 아래 에러가 뜨는 것이다. Module '"*.svg"' has no exported member 'ReactComponent'.Did you mean to use 'import ReactComponent from "*.svg"' instead?  챗지피티에게 물어본 결과, 헛소리밖에 듣지 못했다.아무래도 SVGR의 최신버전을 쓰면서 뭔가 다른 문법으로 바뀐 것으로 의심되었다.찾아보니 SVGR을 4버전 이상으로 이용할 때 svg를 import하는 방식이 달라졌다. 아래..

🧞‍♂️ 혹여 틀린 부분이 있다면 댓글로 알려주시면 감사드리겠습니다. 퀴즈. 부모가 재렌더되면 자식들은 재렌더될까 안 될까?기본적으로 재렌더 된다. 재렌더를 막기 위해 'useCallback' 혹은 'React.memo'를 쓰게 되는 것이다.부모가 자식한테 prop을 아무것도 안 내려주고 있고 자식은 그저 부모에게 마운트만 되어있다고 치자.부모의 state들은 사실 자식에게 하등 상관없지만 부모의 state가 바뀌어 재렌더되면 자식도 재렌더된다. 컴포넌트 재렌더를 막기위한 대표수단 React.memo이걸 막기 위해 쓰는 것이 React.memo이다. 리액트 컴포넌트를 메모이제이션해놓는 방법 중 하나이다.쉽게 말해 캐싱해두고 변하지 않게 하는 방법이다.아래 예시는 이전에 설명한 것처럼 아무런 prop도 ..

공부하게 된 계기사수님의 코드도 그렇고 지금 듣는 RN강의도 그렇고 핸들러를 만들 때 useCallback을 많이 쓴다. 기존에 내가 알고있던 상식으론 useCallback은 컴포넌트가 재렌더되어도함수들이 재생성 되지 않게 도와주는 훅으로 알고있다. 뭐.. 쓰면 좋겠지. 그러나 웹개발에서 굳이 모든 핸들러에다가 useCallback을 두르진 않는다.렌더가 너무 빈번한게 아니라면 함수를 메모이제이션 해놓는 메모리가 더 손해라고 보기도 하니까. 그런데 왜 React Native 앱개발에선 useCallback을 되게 많이 쓸까?그게 궁금해서 찾아보게 되었다.일단 useCallback을 일반적으로 왜 쓰는지부터 알아보자. useCallback을 쓰는 경우컴포넌트 리렌더링 최적화: 콜백 함수를 useCallb..

공부하게 된 계기타입스크립트에는 constant 관리에 2가지 선택지가 있다. as const와 enum이다.나는 보통 as const를 쓰는 편이었는데 (그냥.. const가 친숙해서 썼었다. enum은 넘 생소해..)회사에선 enum을 쓰더라. 왜 enum을 쓰는지 궁금해서 사수님께 물어보기 전에채찍피티와 오픈채팅방에 as const vs enum에 대해 물어보고 기록한 내용이다. 대강 정리하자면... 보통 자바스크립트에 친숙한 개발자는 enum보단 as const를 선호하는 경향이 크나, 개발팀 리더가 자바 경력이 긴 사람이면 enum으로 통일하는 경우도 있다고 한다. 그리고 enum은 참조되지 않아도 트리쉐이킹의 대상이 되지 않기도 하며, 컴파일 시 즉시실행함수 IIFE로 변환되어 흔적이 남는다고..

unknown 타입이란?타입스크립트에서 unknown 타입은 any 타입보다 좀 더 안전한 대안이다.어떤 타입의 값이든 받을 수 있지만, 실제 어떤 값인지 명확하게 확인한 다음에야 사용할 수 있다. unknown 타입을 사용하는 상황API응답 / 동적 콘텐츠 처리: 외부에서 입력받은 데이터나 다른 라이브러리로부터 오는 컨텐츠를 처리할 때, 해당 데이터의 타입이 불명확하거나 잘 모르겠을 때 unknown을 사용할 수 있다. 이렇게 하면 코드 내에서 추후 해당 값에 대한 타입 검사를 강제하고, 더 안전하게 데이터를 다룰 수 있다.타입 가드 사용 강제: unknown 타입의 변수는 직접적인 연산이나 메소드 호출이 제한된다. 타입 가드(type guards)를 사용하여 이 변수의 실제 타입을 좁혀 나가며 필요한..

타입스크립트에서 인덱스의 타입을 지정할 때 사용하는 두 개념이다.두 개념이 밀접한 관련이 있는 개념이지만 엄밀히 말하면 다르긴 하다.하지만 자주 인덱스 시그니처를 인덱스 타입이라고 부르는 사람도 발생하는 등 조금은 용어 사용이 엄격하지 못한 채로 사용된다. 일단 인덱스 시그니처 먼저 이번 시간에 다뤄보겠다.인덱스 시그니처는 인덱스 타입 정의의 일부로서, 객체가 어떤 형태의 키와 값을 가질 수 있는지를 정의한다.쉽게 말하자면, 인덱스 시그니처는 '객체 형태의 타입'에서 '속성의 키'를 정의할 때 사용되는 문법이다. 인덱스 시그니처 (Index Signature)인덱스 시그니처는 특정 객체가 다양한 키를 가질 수 있고, 각 키의 값이 어떤 타입을 가져야 하는지 명시한다.기본적으로 인덱스 시그니처는 타입을 좀..

1. 제네릭 타입함수에 적용하는 경우:함수, 인터페이스, 클래스, 타입 별칭 등에 제네릭 타입 매개변수를 지정할 때 사용된다. 안에 제네릭 타입 매개변수 (ex: K, V)를 쓰면 된다.타입 매개변수 정리:제네릭 타입 매개변수 (Generic Type Parameters)T, U, V와 같은 대문자 알파벳을 사용하여 타입 매개변수를 나타낸다. 이들은 타입스크립트의 제네릭을 사용하여, 타입을 추상화하고 재사용할 수 있게 한다.구체적 타입 (Concrete Types)string, number, boolean 등의 원시 타입이나 더 복잡한 객체 타입 등을 직접 사용하는 경우다. 이런 경우에는 제네릭 타입 매개변수에 구체적인 타입을 대입하여 특정 타입의 값을 처리하게 된다. 예를 들어, Array은 문자열만을..

타입스크립트에서 & 연산자를 쓰는 경우는 두 가지 있다.그런데 수많은 블로그나 포스트에서 인터섹션 타입이나 인터페이스 결합에 대해 잘못 설명하고 있는 경우가 많다.타입스크립트에서 관련 로직이 한 번 바뀌기라도 했나 의심될 정도다..하여튼 chatGPT도 이를 참조해 틀린 얘기를 많이 한다.계속 불분명한 지식이 돌아다니면서 나를 헷갈리게 해서 이참에 정리해봤다. 1. 인터섹션 타입으로 '객체형이 아닌' 타입들을 조합할 때 (교집합)여타 블로그에서 인터섹션 타입이 합집합이라고만 해서 '그냥 언제나 합집합이구나.' 하면 안 된다.chatGPT도 그걸 참조하는지 합집합이 아닌 경우에도 합집합이라 하는 경우가 있더라..엄밀히 말하자면 intersection이라는 단어 자체가 '교집합'을 의미한다. 예를 들어 아래..

XCode 15.0 까지는 괜찮았는데 15.3 버전부터 나는 에러다.RN 안드로이드 빌드 시 podfile에 FlifferKit을 찾을 수 없대나 뭐래나..그저 조금 옛날에 만들어진 프로젝트 구동하는거 뿐인데도 에러를 3개나 맞았다.RN개발길이 험난해보이는건 왜일까..  해결 방법은 위와 같다.  솔직히 정확히 뭐하는지는 이해못했다. stackOverFlow에서 발견했을 뿐.target.name이 (문제가 되는) Flipper인 경우 예외처리를 해주는 코드라고만 알겠다.pod 파일 자체에 대한 이해도가 부족해서 이런게 있구나만 생각난다. https://medium.com/@darwinchan02/flipper-bug-with-xcode-15-3-94da2b54ac1fhttps://github.com/fa..