ReactNative6 TypeScript 100% 활용하기 목차 - 프롤로그 - 1. 조건부 타입으로 타입 좁혀나가기 - 2. 매핑된 타입으로 깔꼼하게 - 3. 객체를 타입화할때 Record? Index Signature? - 4. 타입 가드 - 5. Redux + TS: configureStore.hooks.ts 프롤로그: 리액트와 타입스크립트의 케미 리액트의 렌더링 과정에서 데이터는 핵심적인 역할을 한다. 리액트의 동작 원리는 모두 데이터의 흐름을 기반으로 한다고 해도 과언이 아니다. 하지만 동적 타입 언어인 자바스크립트에서는 변수의 타입이 실행 시점에 결정되기 때문에, 개발자의 의도와 다르게 타입이 변환되어 예상치 못한 오류가 발생할 수 있다. 예를 들어, 숫자를 예상했지만 문자열이 전달될 경우, 불필요한 타입 변환으로 인한 성능 저하 또는 런타임 오류가 .. 2024. 4. 12. React의 최적화 전략 목차- 프롤로그- 렌더링 최적화 기법- 상태 관리 및 업데이트 최적화- 로딩 성능 최적화프롤로그 지난번에는 리액트를 왜 쓰는지에 대해 브라우저의 렌더링 원리부터 리액트의 특징까지 알아보았다. 이렇게나 잘 만든 라이브러리인데 장점을 최대한 살려 코드를 짜야하지 않을까? 이번에는 최적화를 어떻게 하는지 알아보자! 프로젝트 5개 하고 돌아보는 React를 쓰는 이유목차 - 프롤로그 - SPA - 브라우저의 렌더링 원리 - React의 렌더링 과정 - React의 특징 3가지 - React+TypeScript 프롤로그 나의 2023년은 프로젝트로 가득했다. 7~8개월 동안 vanilla JS, React, React Native를 이용hwanheejung.tistory.com렌더링 최적화 기법#불필요한리렌더.. 2024. 4. 11. [TaskStock] 인증/인가 로직 설계하기 with JWT 프롤로그프로젝트 TaskStock기간 기획, 개발 : 2023.11.7~ 베타테스트 : 2024.2.22~3.14 정식 출시 : 2024.3플랫폼iOS, Android언어FE: TypeScript / BE: JavaScript프레임워크 FE: React Native / BE: Node.js Express라이브러리Redux Toolkit TaskStock은 실제로 사용자를 받을 것을 염두하고 만든 서비스다 보니 보안에 신경을 많이 썼다. 우리가 JWT를 쓰면서 어떤 고민을 거쳐 어떤 로직을 설계했는지 소개해보려고 한다. 로직 설계 과정1. 일반로그인 로직 설계 이메일, 사용자 이름, 비밀번호를 받고 이메일은 unique하다. 토큰에는 유저 id가 포함되고, 개인정보와 관련된 것들은 최대한 토큰에 포함시키지.. 2024. 3. 28. [TaskStock] Atomic Design Pattern 도입기 프롤로그프로젝트 TaskStock기간 기획, 개발 : 2023.11.7~2024.3베타테스트 : 2024.2.22~3.14정식 출시 : 2024.3플랫폼iOS, Android언어FE: TypeScript / BE: JavaScript프레임워크 FE: React Native / BE: Node.js Express라이브러리Redux Toolkit React Native를 3주 만에 학습하고 투입된 피로그래밍 앱개발 프로젝트에선 정말 중구난방으로 컴포넌트를 관리했다. 컴포넌트를 따로 폴더를 만들어 관리해야 한다는 필요성조차 알지 못했던 시절이다. 공개하기 부끄럽지만 피로그래밍 앱의 /components 폴더 안에서 관리되고 있는 컴포넌트들은 성격에 상관없이 한 계층에서 모두 관리되고 있다. 모달, input,.. 2024. 3. 27. [Navigation] Stack vs Native Stack 무엇을 선택해야할까? 우선, 차이가 뭔지 알아보자 1. Stack NavigatorStack Navigator | React Navigation Stack Navigator | React NavigationStack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.reactnavigation.orgnative가 아니라 js로 구현된 것따라서 각 플랫폼의 navigation을 사용하지 않는다native로 구현된 것보다 성능이 안좋을 수 있음JavaScript 구현으로 인해 대규모 애플리케이션 또는 복잡한 전환 효과를 사용할 때 성능 저하가 발생할 수 있음 JavaSc.. 2024. 3. 26. [ReactNative/AOS] Native module RNDatePicker tried to override RNDatePicker. Check the getPackages() method in MainApplication.java ios에서는 잘 되는데 android에서 빌드할 때 이런 오류가 떴다. MainApplication.java 파일에 있는 getPackages() 메서드 내에서 RNDatePicker 모듈이 수동으로 추가되고 있는지 확인. 만약 추가되고 있다면, 그 부분을 주석 처리하거나 제거. 하지만 우리는 수동으로 추가하지 않았다. 뭐가 문젤까.. Native module RNDatePicker tried to override RNDatePicker. Check the getPackages() method in MainApplication.java 여기서 말하길, ReactContextBaseJavaModule을 extend하는 함수 내에서 다음을 추가하라 한다. @Override public boolean canO.. 2024. 3. 26. 이전 1 다음
