[React Native/RN/Android/IOS] SafeAreaView란? 개념 정리, 노치 상단바 제외(리액트 네이티브)
React Native/RN 를 이용하여 개발을 하다보면 IOS 에서의 노치가 있어서 View가 노치에 가려지는 상황이 발생합니다. 예전의 IOS와 달리 비교적 최근부터는 노치가 생겼기 때문에 이런 현상이 발생합니다. 상단바 제외(리액트 네이티브)하여 원하는 컨텐츠가 잘 보이게 해야되는 니즈가 있을 때는 어떻게 해야할까요? SafeAreaView 를 사용하는 경우에는 이런 현상을 방지할 수 있습니다. SafeAreaView 는 무엇일까요?
SafeAreaView의 목적은 장치의 안전 영역 경계 내에서 콘텐츠를 렌더링하는 것입니다. 현재 iOS 버전 11 이상이 설치된 iOS 기기에만 적용됩니다.
Saf...
[Git] 원하는 branch commit 값으로 강제 force pull(반영/변경) 하는 방법 _ merge 오류, 덮어쓰기
1. Problem
Git 을 사용하다 보면 현재 branch 의 commit 내용이 아닌 다른 branch commit 의 이력을 모두 받아오고 싶은 경우가 있습니다. master 의 내용으로 덮어 쓰거나, 여러 작업을 하다 보니 현재 Branch 가 origin 과 달라서 merge 할 수 없고 충돌나는 케이스 등 여러가지 경우가 있을 것입니다. 이럴 때에는, 강제(force)로 pull 해줘야 합니다. 어떻게 해야 원하는 commit 으로 덮어쓰기(overwrite)를 할 수 있을까요?
2. Solution
아래의 명령어를 수행하기 전에 먼저 $ git fetch 을 수행해서 Origin 의 데이터를 가...
[React Native/RN] 기기 화면 해상도/사이즈 얻는 방법, Dimensions.get('window')와 Dimensions.get('screen')의 차이점
1. Problem
React Native/RN(리액트 네이티브) 에서 개발을 진행하다 보면 기기 화면 사이즈를 얻어야 하는 경우가 생깁니다. 모바일 기기의 해상도를 얻기 위해서 어떤 방법을 사용해야 할까요? React Native/RN(리액트 네이티브) 에서 제공하는 API 로 손쉽게 해당 값을 얻어올 수 있습니다.
2. Solution
Dimensions.get() 를 사용하면 화면 사이즈/해상도를 얻어올 수 있습니다. get의 값으로 ‘window’ 와 ‘screen’ 이 들어갈 수 있는데요.
// StatusBar를 제외한 영역의 사이즈 on Android
Dimensions.get('window')...
[React Native/RN] 리액트 네이티브에서 수정한 내용(코드)이 반영(적용) 안되는 문제 해결하기 _ cache clean
1. Problem
React Native/RN(리액트 네이티브) 에서 개발을 진행하다 보면 수정한 코드가 잘 반영되지 않는 경우가 있습니다. 수정한 내용(코드)이 반영(적용)되게 하기 위해서 이런 저런 방법을 찾아보다가 간단한 해결책을 찾아보았습니다. 모든 케이스에 이 명령어가 동작하지는 않겠지만, 아래의 해결 방법을 확인해보시면 도움이 되실 수 있을 것 같습니다!
2. Solution
모든 케이스에 적용되지는 않지만 cache clean 으로 문제를 해겷할 수 있는 경우가 꽤 있는 것 같습니다. 해결책은 자신이 사용하고 있는 환경에서 아래의 명령어를 입력하여 cache clean 을 한 후에 확인해보는 것...
[Javascript] string to json, json to string (string을 object로, 객체를 문자열로 변환하는 방법)
자바스크립트(Javascript)를 사용하다보면 String 을 Json 으로, Json 을 String 으로 변환하고 싶을 때가 있습니다. JSON Text(String)를 Object로 변환하거나, Object를 JSON Text(String)으로 변경하려면 어떤 방법을 사용해야 할까요? 우리는 간단하게 함수를 사용하여 손쉽게 해결할 수 있습니다.
string to json
JSON.parse()
string 을 json 으로 변환하기 위해서는 JSON.parse() 를 사용해야합니다. 아래와 같이 string 형식의 json 을 넣어주면 json 으로 잘 변환해줍니다.
const obj = '{"na...
[React Native(RN)/Android] How can i App build Android Simulator or Real Device Change?
1. Problem
$ react-native run-android
or
$ yarn nx run-android mobile
or
$ npx react-native run-android
If you proceed with the mobile build with the above command, you can only check the basic simulator. If i want to change to android simulator or real device phone. How can I change the simulator?
2. Solution
First, you can confirm your si...
[Docusaurus doc/blog] Swizzling(스위즐링)으로 원하는 대로 도큐사우르스 커스터마이징하기(꾸미기)
1. 도큐사우르스의 스위즐링(Swizzling)이란?
도큐사우르스에서 제공해주는 기본적인 컴포넌트나 테마 이외에, 사용자가 원하는 컴포넌트에 값을 추가로 넣거나 컴포넌트를 수정하고 싶은 경우가 있을 것입니다. 사이드바에 원하는 것을 넣거나, 페이지네이션을 구성하거나, 다양한 종류의 커스터미이징을 하고 싶은 경우가 많을 것 같은데요.
이것을 하기 위해서는 도큐사우루스의 핵심 개념인 스위즐링(Swizzling)에 대해 다룰 겁니다. 이를 통하여 유저가 원하는 커스터마이징을 할 수 있습니다.스위즐링(Swizzling)은 테마 컴포넌트를 유저가 작성하여 변경할 수 있으며, 아래의 두 가지 패턴으로 제공됩니다.
...
[Spring Boot] QueryDSL _ Attempt to recreate a file for type 빌드 에러 해결 방법
Attempt to recreate a file for type QAClass.java
Attempt to recreate a file for type QBClass.java
Attempt to recreate a file for type QCClass.java
Spring Boot 프로젝트를 수행하다가 Attempt to recreate a file for type 에러를 보게 되었습니다. 위 문제는 query dsl에서 생성 해주는 Q Object(객체) 관련된 문제입니다. 해당 에러가 발생하는 경우는 Q Object(객체)를 생성해야 하는데 이미 폴더나 객체가 생성되어 있어서 발생합니다. 새로운 파일을 생...
[Docusaurus SEO] 도큐사우르스 블로그/사이트 구글 검색 엔진 Search console에서 노출되지 않을 때 _ trailingSlash이란? 개념과 설정
Facebook 이 만든 Docusaurus 는 손쉽게 Doc/Blog를 만들 수 있다는 장점이 있습니다. 하지만 그냥 Google Search Console 에 등록하면 검색되지 않는 문제가 발생했습니다. 이러한 문제는 왜 발생할까요?
trailingSlash 관련 설명은 링크를 클릭하면 자세히 볼 수 있습니다.
undefined (default) : URL을 그대로 유지하고 합니다. /docs/myDoc.md 파일은 /docs/myDoc/index.html파일로 생성됩니다.
true : URL/링크에 트레일링 슬래시를 추가합니다. /docs/myDoc.md 파일은 /docs/myDoc/index...
[MongoDB aggregation pipeline] collection에서 날짜(Date)로 기간 조회/쿼리하는 방법
몽고 DB 에서 현재 사용 중인 콜렉션에서 Date 를 사용하는 경우가 있습니다. 이 때, 몽고 DB 에서 Date 로 특정 기간 동안의 조회를 하는 방법은 무엇일까요? 아래와 같은 조건이라고 가정해보겠습니다.
dateTime key 에 Date 값이 들어있다.
2023-02-01 부터 2023-02-02 까지의 데이터를 조회
아래와 같이 find 함수 내에 $gte, $lte 를 사용하고 원하는 날짜를 new Date 나 ISODate 내부에 넣어주면 됩니다.
db.mycollection.find({
"dateTime" : {
"$gte" : new Date("2023-02-01T00:...
864 post articles, 87 pages.