알면 도움되는 기능들. 스타일 상속 / vscode 이모지 단축키 / .toLocaleString() 을 android 환경에서도 사용하기

 

 

vscode 이모지를 불러와 사용해보자.(단축키)

 

VScode에서 이모지 작성하기

단축키는 ctrl+command+space

vscode 단축키 창

여러가지 이모지를 찾아 쓸 수 있다. 

 

CSS 스타일은 상속받아 재사용할 수 있다. 

 

const Wrapper = styled.View`
  flex-direction: row;
  height: 100%;
  width: 90%;
  margin: 0 auto;
  justify-content: space-around;
  align-items: center;
`;

// Wrapper의 모든 css를 가지며 flex-direction은 재정의한다.
const Wrapper_col = styled(Wrapper)`
  flex-direction: column;
`;

styled( 스타일 컴포넌트 이름) 으로 선언함으로써 모든 css 속성을 동일하게 가지게 된다. 단순히 복붙하는 것을 안하는 것 뿐만아니라 의미적으로도 연결되어 가독성을 높여주는 것 같다. 

또한 확장 및 재정의도 가능하니 일거양득!

 

.toLocaleString() 을 android 환경에서도 사용하기

 

RN 환경에서 .toLocaleString() 이 원하는 것처럼 동작하지 않을 때 android native code를 약간 수정해주면 아래 예제와 같은 결과를 얻을 수 있었다. 

//** original,  in android
new Date("2021-10-12").toLocaleDateString("ko")
// 10/12/2021

//** 코드 수정 후 in android
new Date("2021-10-12").toLocaleDateString("ko")
// 2021. 12. 10

 

수정방법: 

 android/app/build.gradle file 에서 아래 코드를 대체(수정한다)

 

def jscFlavor = 'org.webkit:android-jsc:+' //remove this 

//and 

def jscFlavor = 'org.webkit:android-jsc-intl:+' // add this

"react": "18.0.0",

"react-native": "0.69.6",

출처 : https://stackoverflow.com/questions/51399551/why-isnt-tolocaledatestring-working-in-react-native-android/51400372

Why isn't toLocaleDateString working in react-native (Android)?

 

styled-components 로 생성한 css 코드들에 색을 입혀보자. (Syntax highlighting and IntelliSense for styled-components.)

단색이었던 css 에 알아보기 쉽도록 색이 입혀졌다.

vscode-styled-components

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components.

vscode-styled-components - Visual Studio Marketplace

여기서 다운로드 받거나 vscode Extentions 의 market place 에서 검색하면 다운로드 받을 수 있다.