map() 메서드는 원본 배열의 각 요소를 변환하여 새로운 배열을 생성합니다. 이때, 원본 배열의 요소가 객체인 경우, map() 메서드로 생성된 새로운 배열의 각 요소는 원본 배열의 객체를 참조하게 됩니다. 따라서 새로운 배열의 객체를 수정하면 원본 배열의 해당 객체도 영향을 받습니다. const originalArray = [{ id: 1, value: 'a' }, { id: 2, value: 'b' }];const newArray = originalArray.map(item => item);// 새로운 배열의 첫 번째 객체 수정newArray[0].value = 'z';console.log(originalArray[0].value); // 출력: 'z' 위 코드에서 originalArray와 new..
https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-herehttps://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture 새로운 아키텍처 - 새로운 네이티브 모듈 => 네이티브 인터페이스에 직접 접근 가능한 네이티브 모듈, 네이티브 컴포넌트 지원 - 새로운 렌더러 - 이벤트 루프 => 웹과 더 유사하게 작동, - 브릿지 제거reactnative.directory새로운 피처 (리액트 18 완벽 지원, 동시성 피처, useLayoutEffect) - Transitions (Urgent updates, Transition updates) - Automtic Batching => conc..
Reusing Logic with Custom Hooks커스텀 훅으로 로직 재사용하기https://youtu.be/y78eaFcoh0g?list=PLjQV3hketAJkh6BEl0n4PDS_2fBd0cS9v https://react-ko.dev/learn/reusing-logic-with-custom-hooks https://react.dev/learn/reusing-logic-with-custom-hooks https://ko.react.dev/learn/reusing-logic-with-custom-hooks
create-expo 명령어 https://docs.expo.dev/more/create-expo/ Ex. 52beta 순수 expo 앱 (2024년 10월 30일 기준 최신 버전 sync with RN 0.76)yarn create expo-app --template default@betayarn create expo-app --template bare-minimum@beta https://reactnative.dev/docs/getting-started-without-a-framework여전히 expo framework 없이 react-native cli 를 사용해서 프로젝트를 생성하고 싶다면 다음과 같이 사용 npx @react-native-community/cli@latest init RN76Sa..
Weed cutting 과 Remove empty sentences, Focus on key message. 모두가 이해할 수 있고 모두에게 무해한가? 단순히 정보를 전달하는 것을 넘어 사용자의 감정에 공감했는가? 특정 행동을 강요하거나 공포감을 주고 있지 않은가? https://toss.tech/article/8-writing-principles-of-toss https://velog.io/@my_raeya/posts
LeetCode에서 제공하는 문제의 각 토픽들은 알고리즘과 자료구조의 핵심적인 영역을 다룹니다. 이 토픽들이 알고리즘과 자료구조의 전체를 대표한다고 할 수는 없지만, 대부분의 중요한 개념과 기술들을 포함하고 있습니다. 아래는 각 토픽이 의미하는 바를 간략히 설명한 것입니다.주요 알고리즘 및 자료구조 토픽 설명Array (배열): 데이터를 선형으로 나열한 자료구조로, 접근 및 수정이 O(1)인 자료구조입니다.String (문자열): 문자로 이루어진 시퀀스 처리 문제를 다룹니다. 주로 문자열 검색, 패턴 매칭, 변환 등의 문제들이 포함됩니다.Hash Table (해시 테이블): 데이터를 키-값 쌍으로 저장하는 자료구조로, 평균적으로 O(1) 시간에 검색, 삽입, 삭제가 가능합니다.Dynamic Program..
자료형으로서의 타입 -변수에 저장할 수 있는 값의 종류는 프로그래밍 언어마다 다르다. 최신 ECMAScript 표준을 따르는 자바스크립트는 7가지 데이터 타입 (자료형)을 정의한다.undefined, null, Boolean, String, Symbol, Numeric (Number/BigInt), Object 타입을 확인하는 방법타입스크립트에서 typeof, instanceof 그리고 타입 단언을 사용해서 타입을 확인할 수 있다.typeof 는 연산하기 전에 피연산자의 데이터 타입을 나타내는 문자열을 반환한다.typeof 연산자가 반환하는 값은 자바스크립트 7가지 기본 데이터 타입(Boolean, null, undefined, Number, BigInt, String, Symbol) 과Function ..
react-query 즉 Tan Query 를 통해 서버 상태를 선언적으로 관리하여 많은 문제 해결을 할 수 있습니다. 아래와 같은 시나리오를 가정해보죠. 현재는 리덕스 툴킷을 사용하여 프론트 측의 전역 상태에 스키마를 정의하고 정규화를 수행하면서 채팅앱을 구현하였습니다.로그인한 내가 있고 나는 프로필 이미지와 성별, 닉네임, 이미지들, 게시물들, 등등의 정보를 가집니다.일대일 채팅방은 채팅방 아이디, 마지막 메시지 타입, 마지막 메시지 내용, 채팅방 참여자 두명의 정보, 읽지 않은 갯수 등의 정보를 가집니다.채팅 메시지는 아이디와 타입, 내용, 보낸사람 아이디, 보낸사람 닉네임, 받는사람 아이디, 받는사람 닉네임, 채팅방 아이디 등의 정보를 가집니다.게시물은 아이디, 제목, 이미지, 작성자, 좋아요 ..
react-query 는 서버 리소스 기준으로 fetching 하고 상태관리 하는 라이브러리라고 보면 되겠죠? 간단하게 사용할 때는 유용할 거 같긴한데 redux, thunk 조합 보다 유연성은 떨어질 거 같은데 또 redux-persist 같은거 사용도 안 될 거 같고, 두개를 동시에도 많이 사용하시나요?저는 개인적으로 그냥 올라운드라 커버 가능한 redux, thunk 조합을 사용하는게 일관되고 유연성이 있어서 더 좋아보이긴 하는데요.. 그럼 redux, thunk 기본 조합에 캐싱? 그런 기능 필요시 그에 맞게 추가해야겠죠? react-query 는 그냥 그 자체만으로 따로 취급해야 하는거겠죠? redux, thunk 방식에 react-query 를 연동한다던가 하는 그런 성격의 것은 아닌거죠?만약..
리액트 props 의 형태에 관한 질문 리액트에서 props 형태는 props 에 a , b, c , d 라는 프로퍼티가 있을 때 가령 b 를 배열, c 를 객체, d 를 깊이가 2 나 3인 객체 라고 하면 d 와 같은 형태는 사용하지 않는게 좋나요? 아니면 2중 3중 깊이의 객체나 배열도 그냥 불변성으로 항상 새로운 걸 만들어 넣는다는 개념으로 사용해도 될까요? 왠만하면 1깊이의 객체까지 한정해서 사용하고 불가피하게 필요할 경우에만 2중 3중 깊이의 객체를 사용할까요? 서버에서 받은 리스트 데이터를 넘겨줄 경우 하위 컴포넌트로 리스트 아이템 컴포넌트가 있을 때 리스트 데이터가 항상 새로운 불변의 객체니깐 하위인 리스트 아이템은 항상 리렌더링 되겠죠? 루프를 돌면서 map 같이 그려주는 경우 key 를 ..
타입스크립트에서 구조적 타이핑으로 인해 유니온 타입의 논리가 조금 이상한데 이유가 뭘까요? 다음 예시를 보면 오류를 내지 않고 있어요. 그래서 유사한 구조의 타입들을 구분하기 위해서는 Discriminated Unions 를 사용하라고 하는데요. 애초에 유니온을 만들때 부터 정확한 논리구조로 만들 수는 없는 것이었을까요? 구조적 타이핑, 덕 타아핑의 한계로 인해 어쩔 수 없는 것인가요? 다음의 예시에서 data 는 a, b, c, d 속성을 모두 가지고 있음에도 에러를 내지 않는다. type A = { a: string; b: string;}type B = { a: string; b: string; c: number;}type C = { a: string; b: string; d: () =..
서버 클라 데이터 주고 받기에 대한 타이핑으로 생각하면 스위프트나 코틀린 같은데도 그거 파싱하는거 머리 아픈데 타입스크립트는 생각해보니 그런게 처리가 유연하겠네요.any 로 다루다가 결국은 서버 클라 측에서 스펙을 완전히 정리한다면 모두 타입으로 구현한다고는 본거 같긴한데 그러고 보니 string 덩어리 키 값들이 있을수 있으니 그런거 축약해서 쭉 넣어줄 수 있으니 그런측면에서 고급기능이라 볼 수 있겠네요. 타입스크립트(TypeScript)의 독특한 타이핑 기능들이 자바(Java), 스위프트(Swift) 같은 정적 타입 언어들과 비교할 때 복잡하게 느껴질 수 있지만, 이는 동적 언어인 자바스크립트(JavaScript)의 특성과 그 사용 사례에 맞게 설계된 것입니다. 이러한 기능들이 도입된 이유와 그 ..
sehyunny (sehyun hwang) / 작성글 - velog A different way to think about TypeScript (rob.directory) "타입스크립트의 타입 시스템은 타입에 대해 동작하는 순수 함수형 언어로 생각할 수 있습니다"라는 말은, 타입스크립트의 타입 시스템이 일종의 함수형 프로그래밍 언어처럼 작동한다는 것을 의미합니다. 이를 이해하기 위해서는 먼저 순수 함수형 언어가 무엇인지 알아야 합니다.순수 함수형 언어란?순수 함수형 언어는 함수형 프로그래밍 패러다임을 따르는 언어로, 다음과 같은 특징이 있습니다:순수 함수: 동일한 입력에 대해 항상 동일한 출력을 반환하며, 함수 외부의 상태를 변경하지 않는 함수입니다. 즉, 부작용이 없습니다.불변성: 데이터는 한 번 정..
0.73 Hermes를 사용한 디버깅 개선, 안정적인 심볼릭 링크(symlink) 지원, 안드로이드 14 지원 및 새로운 실험적 기능을 추가합니다. 기존 디버깅 기능을 폐지하고, 새 아키텍처의 브릿지리스 모드(Bridgeless Mode)를 출시. 주요사항 디버깅 개선 Metro에서의 안정적인 심볼릭 링크 지원 안드로이드에서의 코틀린 템플릿 안드로이드 14 지원 새 아키텍처 업데이트 폐지된 디버깅 기능 디버깅 개선: Hermes에서의 콘솔 로그 기록: console.log() 로그가 이제 백그라운드에서 캡처됩니다. 앱 초기 로드 로그 관찰이 더 쉬워졌습니다. Flipper, Chrome DevTools 및 새로운 실험적 디버거와 호환됩니다. 업데이트된 디버깅 문서: 최신 정보로 새롭게 단장된 문서. 지원..
https://reactnative.dev/docs/animations#tracking-gestures https://m.blog.naver.com/armigar/221930494683 Animated.Value 를 useRef 사용하여 변수로 잡고 Animated.timing, Animated.spring ... 와 같은 것으로 값을 변경하여 해당 Animated.View 와 같은 것의 style 에 셋팅한 Animated.Value 값을 변화시켜 애니메이션을 통해 움직이게 할 수 있다. 그리고 또한 Animated.View 같은 것은 사용자 제스쳐에도 움직이는데 그것의 이벤트에 Animated.Value 를 셋팅해주면 또한 트래킹이 가능하다. 그래서 스크롤 뷰 페이저 같은걸 구현.
yarn add @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native 설치시 이슈 1. The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or sp..
스트라이프로 결제를 받고 (글로벌 PG 사임) - 수수료가 5% 에 건당 50센트라는 말이... https://stripe.com/ 페이오니어로 대금 지급을 받는다. 스트라이프 결제 대금을 해외 계좌로 받아야 하기 때문 https://www1.payoneer.com/ko/ 페이팔은 가끔 사기 방지를 위해 대금지급이 잘 안될 경우가 있다. 페들이라는 PG 사도 있다. https://www.paddle.com/ 이커머스: 판매가 - (물건가 + 배송비 + 결제 대행 수수료 + 마케팅 + 대금지급 수수료) 앱비지니스: 판매가 - 애플 수수료 메인 업종 하나와 전자상거래 만 있으면 된다. 매출규모가 커지면 업종을 추가해야 하는게 맞는데 꼭 업종이 있어야만 매출을 만들수 있는것 만은 아니어서 => 금액이 크거나 ..
https://bbiguduk.gitbook.io/swift/language-guide-1/protocols#protocol-composition
여기서 some 이 opaque type var body: some View {} 배열을 업캐스팅해서 각 아이템들을 다르게 보여주어야 할 경우 1. 각각을 명시적으로 클린하게 단순 pure 하게 만들고 Any 타입으로 해서 루프를 할 것인가, 2. opaque type 으로 some 상위 로 해서 여러타입의 하위들이 리턴되도록 루프를 할 것인가. 우선은 1 번이 깔끔하고 편하고 좋아보인다. https://bbiguduk.gitbook.io/swift/language-guide-1/opaque-types
목적: SwiftUI 에서 TextInput 이 있는 Alert 를 띄워주기 위함. 결론: 기본적으로 아직까지는 SwiftUI 에서 커스텀 팝업을 만들려면 아래 링크에 소개된 방법 외에는 어려워보인다. 하지만 목적에 언급된 TextInput 이 있는 Alert 의 경우는 다음과 같이 하면 된다. struct ContentView: View { @State private var presentAlert = false @State private var username: String = "" @State private var password: String = "" var body: some View { Button("Show Alert") { presentAlert = true } .alert("Login", ..