728x90
반응형

프론트엔드 앱 35

styled-component에서 Style Extend 안될 때

✔️ 필요성 styled-components를 적용한 컴포넌트를 만들어놓고, 그 컴포넌트를 다시 가지고 올 때 일부 CSS를 수정하고 싶을 때가 있다. 그리고 그 때 styled(component) 이렇게 해서 쓰는 것을 보통 Extend styled-component라고 이야기한다. 그런데 Extend Style이 안 먹을 때가 있다. 새로 적용하는 CSS style을 어떤 컴포넌트에다가 써야할 지 모르는 경우에 보통 그러하다 import React from "react"; import styled from "@emotion/styled"; const Outside = styled.div` `; const Inside = styled.div` `; interface Props { children: Re..

styled-components에서 & 활용해서 CSS 분기 깔끔하게 하기

✔️ 필요성 버튼 컴포넌트를 만들 때 사이즈나 컬러에 따라서 CSS 분기를 깔끔하게 해주고 싶을 때가 있다. 이 때는 className과 &를 활용해서 코드를 아주 깔끔하게 만들어줄 수 있다! ✔️ 예시 import styled from "@emotion/styled"; const Container = styled.button` display: inline-block; flex: none; width: 100%; max-width: 100%; background: transparent; appearance: none; cursor: pointer; text-align: center; text-decoration: none; font-weight: 600; color: ${(props) => props.t..

styled-components에서 classNames 사용해서 props에 따른 CSS 깔끔하게 사용하기

✔️ 필요성 classNames는 true/false boolean 값을 통해서 특정 스타일링을 할 지 말지 쉽게 분기하도록 도와주는 라이브러리이다. 컴포넌트의 props가 Active일때랑 Active가 아닐 때 보기 쉽게 CSS를 정리해보자 ✔️ Props를 사용할 때 isActive의 값에 따라서 ? : 삼항연산자를 활용해서 다른 CSS를 줄 수도 있는데, 정확하게 isActive일 때 어떤 효과들이 들어갔는지 한 눈에 확인하기가 어렵다는 단점이 있다 const TabAnchor = styled.button` color: ${({ theme, isActive }) => isActive ? theme.colors.white : "#333333"}; background-color: ${({ theme,..

상단 Navigation Header 뒤로가기 깔끔하게 만들기

✔️ 필요성 react-native 의 상단에서 뒤로가기 버튼을 깔끔하게 만들고 싶다면 어떻게 할 수 있을까? 필자는 styled-components를 활용하여 개발하였다 ✔️ 문제 해결 HeaderLeftGoBack이라는 컴포넌트를 만들어둔 다음에 Screen에서 쓰이는 곳마다 공통적으로 사용하자. 뒤로가기 꺽쇄 모양은 원하는 아이콘으로 얼마든지 활용가능하다. hitSlop값을 적당히 줘서 사용자가 적당히 아이콘 근처를 눌러도 뒤로가기를 클릭할 수 있도록 설정해주었다. import React from 'react'; import styled from 'styled-components/native'; import Icon from 'react-native-vector-icons/Ionicons'; con..

MS AppCenter 세상 간단한 배포 Code Push

✔️ 필요성 react-native로 앱 개발을 할 때 MS Azure의 appCenter를 활용하면 CICD를 잘 구축할 수 있다. 이 때 매번 UI를 조금씩 수정할 때마다 새로 Deploy를 하고 build를 하고 모든 사람들이 새로 앱을 다운받아야 하는 것이 다소 귀찮다. CodePush는 모바일 앱 업데이트를 사용자의 장치에 직접 배포 할 수 있는 App Center 클라우드 서비스입니다. pod-install을 하지 않아도 되는 정도의 UI는 code-push 로 배포하고 앱을 2번 정도 껐다가 켜면 업데이트가 반영된다. https://docs.microsoft.com/en-us/appcenter/distribution/codepush/ Use CodePush to update your app ..

글자 길이가 넘칠 때 말줄임표(...)로 줄이기

✔️ 필요성 글자 길이가 해당 Container의 길이보다 길면 말줄임표(...)로 줄이고 싶을 때가 있다 ✔️ 방법 (1) 직접 truncate 함수를 짜서 길이를 몇으로 할 것인지 정해준다 // 글자 후반부를 자르고 ..으로 대체 export const truncate = (word: string, n: number) => { if (word.length < n + 1) return word; return word.substr(0, n).concat('..'); }; ✔️ 방법 (2) 방법(1)보다 방법(2)가 더 선진 방법이다. CSS에서 max-width를 지정해준다음에 컴포넌트 props에서 numberOfLines를 1로 지정해주면 된다! import React from 'react'; imp..

iOS 시뮬레이터 디바이스 변경하기

✔️ 필요성 iOS 시뮬레이터로 개발하다보면 디바이스를 변경하면서 각 디바이스에서 어떻게 보여질 지 확인해야하는 상황이 자주 생깁니다. 제 iOS 시뮬레이터에서는 기본 디바이스가 iPhone 12로 되어있는데요. 보다 작은 화면인 iPhone 13 mini에서 UI를 확인해보고 싶습니다. ✔️ 문제 해결 //기존 npm run ios //수정 npm run ios --simulator="iPhone 13 mini" ✔️ 참고 iOS 디바이스 이름을 참고하세요~ npx react-native run-ios --simulator="iPhone 8" npx react-native run-ios --simulator="iPhone 8 Plus" npx react-native run-ios --simulator=..

[에러해결] Failed to delete storage directory

✔️ 에러 React Native로 개발하면서 iOS 시뮬레이터로 확인하는데 다음과 같은 warning이 등장했다 Failed to delete storage directory ✔️ 문제 해결 문제는 AsyncStorage에서 clear() 메서드에서 이슈가 있었다. 먼저 기존코드는 단순히 AsyncStorage.clear() 를 활용해서 클리어했는데 이 부분을 아래와 같이 바꿔주면 해결된다! import AsyncStorage from '@react-native-async-storage/async-storage'; const KEY = 'key'; const Storage = { async get() { const data = await AsyncStorage.getItem(KEY); if (!data..

iOS 시뮬레이터 위경도 설정하기

✔️ 필요성 iOS 시뮬레이터를 통해서 개발할 때 시뮬레이터는 위치(위경도)를 자동으로 잡는 것이 아니다. 내가 특정 값으로 설정해줘야한다. 나같은 경우는 맨처음에 경도(longitude)가 음수값으로 나와있어서 한국인으로써 놀랐다. ✔️ 문제 해결 iOS 시뮬레이터 메뉴 > Features > Location > Custom Location을 클릭 내가 원하는 위경도 값을 직접 입력한 다음에 OK를 누르면 끝

728x90
반응형