본문 바로가기

💻 프론트엔드19

React Native와 React 컴포넌트 차이 기본적으로 React Native는 React와 비슷하지만 라우팅과 컴포넌트에서 차이가 있습니다 여기서는 컴포넌트 차이에 대해 알아보려고 합니다. React에서는 기본적으로 컴포넌트를 만들 때 시맨틱 태그를 이용하는 반면 React Native에서는 제공되는 컴포넌트들을 사용해야 합니다 아래는 기본적으로 자주 사용하는 컴포넌트들입니다 div = View div와 다르게 View에는 텍스트가 들어갈 수 없습니다 input(type="text") = TextInput button = Button or TouchableOpacity TouchableOpacity가 스타일링이 용이하기 때문에 보통 TouchableOpacity를 사용합니다 span = Text 모든 텍스트들은 Text 컴포넌트 안에 작성되어야 .. 2024. 1. 8.

CSS 애니메이션 성능 개선 ❗️문제 상황 2가지 요구사항을 수행할 때 애니메이션 효과가 매끄럽지 못함 1. 스크롤 위치가 특정 섹션에 도달하면 화면을 고정시키고 카드만 가로로 이동해야 함(left로 위치를 변경했음) 2. 카드가 이동하면 배경의 이미지는 가운데 위치하는 카드의 이미지로 변경되어야 함(background-image를 변경했음) ✅ 해결 미리 배경 이미지를 렌더링 해놓은 상태에서 opacity만 transition을 주고 카드의 위치는 transform의 translateX속성을 사용하여 애니메이션 최적화함 속성을 바꾸는 것만으로 최적화가 가능했던 이유는 무엇일까요? 이유에 대해 설명하기 위해서는 우선 브라우저 렌더링 과정에 대한 이해가 필요합니다. 📌 간략한 브라우저 렌더링 과정 1. HTML과 CSS 등 리소스를 .. 2024. 1. 8.

[React Native] 폰트 설정 이 방법은 버전 0.70이상만 가능한 걸로 알고 있습니다 더 낮은 버전을 사용 중이신 분들은 직접 ios와 안드로이드 폴더에서 설정을 해주셔야 합니다 프로젝트 루트 경로에 react-native.config.js 파일을 만들고 폰트 파일 경로를 입력해주세요 module.exports = { assets: ['./assets/fonts'], }; react-native-asset 라이브러리를 사용하면 자동으로 적용됩니다 npx react-native-asset 혹시라도 ios에서 빌드가 실패한다면 ios/Fonts에 폰트 파일을 넣어주시면 됩니다! 2024. 1. 5.

[React Native] 딥링크 설정하기 React Navigation 공식문서에서 해당 내용을 확인하실 수 있습니다 https://reactnavigation.org/docs/deep-linking/ 안드로이드 android > app > src > main > AndroidManifest.xml activity 안에다가 해당 코드를 넣어줍니다 IOS ios는 2가지를 설정해줘야 합니다 1. ios > 프로젝트 이름 폴더 > AppDelegate.mm 해당 코드를 넣어줍니다 #import - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary *)options { return [RCTLinkingManager application:ap.. 2024. 1. 4.

[React Native] Path alias 설정 방법은 2가지가 있습니다. 1. tsconfig + package.json tsconfig 파일을 설정해주고 path alias를 설정할 모든 폴더에 package.json 파일을 만들어줍니다. 모든 폴더에 package.json 파일을 만들어야 해서 번거롭다는 단점이 있습니다. //tsconfig.json { "extends": "@tsconfig/react-native/tsconfig.json", "compilerOptions": { "baseUrl": "./src", "paths": { "@components/*": ["components/*"], "@hooks/*": ["hooks/*"], "@pages/*": ["pages/*"], "@routes/*": ["routes/*"], "@types/.. 2024. 1. 3.

Vitest & MSW를 사용한 테스트 코드 적용 vite를 사용하면서 jest를 사용하려고 했으나 msw에서 에러가 발생해서 vitest를 사용하기로 결정했습니다. 패키지 설치 우선 필요한 패키지들을 모두 설치해주세요 저 같은 경우는 아래처럼 설치했는데 혹시 제가 빠트린게 있을 수도 있어서 빠진 부분은 확인해서 추가해주세요 yarn add --dev vitest @testing-library/jest-dom @testing-library/react @testing-library/user-event msw jsdom MSW 설정 MSW를 사용하시려는 분들은 우선 공식 문서를 확인해주세요 저는 서비스워커로 데이터 모킹하는 것을 사용하지 않고 테스트를 위해서 msw를 사용하려고 합니다 api 개발이 완료되지 않아서 프론트 개발 중에 mock데이터를 사용하시.. 2023. 12. 29.

이전 1 2 3 4 다음

티스토리툴바