[React Native] Chat GPT로 개발하기 - 4일차

2023. 8. 20. 17:34·React Native/JavaScript
반응형

React Native에서 View 아래 버튼의 높이가 꽉차는데 내가 원하는 높이로 설정하려면 어떤 방법을 사용해야해?

당연하지만 height을 설정하면 문제가 없다고 한다. 

하지만 당연히 height은 50으로 값을 넣어줬는데 내 화면의 버튼은 전체 화면을 가득 채웠다. 

flex 속성을 주면 꽉차게 설정되는데 방법이 없을까?

왜 그럴까 고민을 하다가 flex라는 속성에 의심을 하기 시작했다. 

flex는 부모 컴포넌트 기준으로 화면을 채운다고 했는데 이녀석을 내가 Button에게 1을 줬다 

 

역시나 답변으로 flex 속성을 넣어서 그렇다고 한다. 

 

내가 flex에 1을 준 이유는 flexDirection과 align-item을 주기 위해서였는데 flex 값을 주지 않아도 

기본 display가 flex이기 때문에 바로바로 사용할 수 있었다. 

 

나는.... flex에 값을 줘야 flex 관련 속성을 사용할 수 있는줄....

Navigation에서 Header의 라벨이 name으로 설정되어 있는데 이걸 다른걸로 바꿀 수 있어?

React Native에서는 라우터에서 헤더를 지원해주는데 헤더의 텍스트가 경로로 되어있어서

상당하게 이쁘지 않았다. 

 

이것을 이쁘게 하기 위해서 수정이 가능한지 물어봤는데 options에서 변경이 가능하다는 답변을 받았다. 

React Native에서 폰트를 설정하려면 어떤 방법을 사용해야해?

 

헤더를 수정하고 보니 너무 못생겼었다. 

물론 디자인 자체가 못생기긴 했지만 그래도 이건 심했다.... 그래서 폰트를 설정하기로 했다. 

 

React Native에서는 Link 태그와 같은 것을 사용할 수 없으니 어떤식으로 가지고 오는지 궁금했다. 

그런데 생각보다 꽤 복잡한 과정이 있었는데 Google Fonts를 자동으로 가지고 오는 방법이 있다면 그게 더 

좋다고 생각하고 추가로 질문했다. 

구글 폰트에서의 link 등의 방법으로는 불가능해?

바로 가능하다는 답변을 받았고 라이브러리가 있다는 것을 알았다. 

그래서 나는 근본인 noto sans를 가지고 오기로 했다. 

fontFamily "Noto Sans KR" is not a system font and has not been loaded through Font.loadAsync. 이런 오류가 나는데?

폰트를 가지고 올 때 오류가 나서 확인해보니 expo에서는 폰트를 가지고 오는 방법이 따로 있었다....

 

근데 이 방법이 너무 최악이였다. 

폰트를 가지고 올 때 하나씩만 불러올 수 있는 것이다. 예를들어 Noto Sans Kr이 100, 300, 400, 500, 700, 900을 

사용한다면 이걸 한번에 호출해서 font-weight로 변경해줄 수 없는 것이다.

weight 700일때 bold를 자동으로 불러오고싶어

혹시 질문의 디테일 문제가 아닐까 싶어서 다른 방식으로 물어봤지만 결국 하나씩 호출하는 방법을 사용하라는 

답변을 받았다....

 

이건 어쩔 수 없이 불편함을 감수하고 작업을 진행하기로 했다. 

route의 헤더에는 폰트를 적용할 수 없어?

마지막으로 헤더에도 폰트를 적용하기 위해서 라우터 헤더에 적용시키는 방법을 물어봤다. 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'React Native > JavaScript' 카테고리의 다른 글

[React Native] Chat GPT로 개발하기 - 6일차  (0) 2023.08.27
[React Native] Chat GPT로 개발하기 - 5일차  (0) 2023.08.26
[React Native] Chat GPT로 개발하기 - 3일차  (0) 2023.08.19
[React Native] Chat GPT로 개발하기 - 2일차  (0) 2023.08.08
[React Native] Chat GPT로 개발하기 - 1일차  (0) 2023.07.12
'React Native/JavaScript' 카테고리의 다른 글
  • [React Native] Chat GPT로 개발하기 - 6일차
  • [React Native] Chat GPT로 개발하기 - 5일차
  • [React Native] Chat GPT로 개발하기 - 3일차
  • [React Native] Chat GPT로 개발하기 - 2일차
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    Docker
    자바스크립트
    리얼클래스
    영어독학
    타일러영어
    바질
    CSS
    ReactNative
    덤프
    타입스크립트
    영어회화
    next.js
    바질 키우기
    식물
    redux
    Babel
    네트워크
    Node.js
    javascript
    CCNA
    다이소
    리액트
    네이버 부스트캠프
    typescript
    리얼학습일기
    webpack
    알고리즘
    프로그래머스
    react
    ChatGPT
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[React Native] Chat GPT로 개발하기 - 4일차
상단으로

티스토리툴바