내배캠 TIL 2023.01.03

 

로컬 브랜치에 원격 브랜치 연결하기

 git branch --set-upstream-to=origin/<branch> seon

 

onSubmitEditing  

 

폰에서 QR 찍어서 실행하면 

이런 디버깅 창이 자동으로 뜨고 콘솔 찍어서 내용을 확인 할 수 있다.

 

uuid가 react-native에서 안 받아와져서 어제 속상했는데, 라이브 코딩하면서 조원분이 

react에서 바로 import 해올 수 있다고 하셨다. 코드 공유해준대로 아래와 같이 이용하니까 uuid가 적용되었다! 

import { v4 } from "uuid";

 

라이브 코딩에서 new year 카드를 조회해왔고,  react-router-dom과 같은 역할을 하는 navigation으로 새페이지로 자동 이동한 후 카드를 조회하는 기능을 구현하는 것을 봤다. 

 

혼자 navigation 기능을 연습해볼 예정이다.

navigation 라이브러리는 바로 받는게 아니라 더 큰 패키지를 다운받고 그 안에 있는 걸 또 따로 다운받아야하는 것 같았다. 

 

navigation 설치 순서

npx expo install react-native-screens react-native-safe-area-context

npm install @react-navigation/native

 

 

 

어려운 문제부터 풀려고 하니까 걍 포기하게 되는 것 같아서 아주 아주 쉬운 문제부터 매일 풀기로 결심!

function solution(array, n) {
  var answer = 0;
  for (a of array) {
    if (a === n) {
      answer += 1;
    }
  }
  return answer;
}

 

 

투두 예시에 있는 아이콘 쓰고 싶어서 구글링.

@expo/vector-icons@13.0.0

 

@expo/vector-icons

This library is installed by default on the template project using npx create-expo-app 

처음 세팅 다운받을 때 같이 받아지는 라이브러리라고 한다.

 

expo 페이지에 있는 설명

https://docs.expo.dev/guides/icons/

 

아이콘 종류나와있는 링크

https://icons.expo.fyi/

 

사용예시

import Ionicons from '@expo/vector-icons/Ionicons';

export default function App() {
  return (
    <View style={styles.container}>
      <Ionicons name="md-checkmark-circle" size={32} color="green" />
    </View>
  );
}

 

버튼으로 만들어서 쓰기

import { AntDesign } from "@expo/vector-icons";
import { Feather } from "@expo/vector-icons";

     <TouchableOpacity>
              <AntDesign name="checksquare" size={24} color="black" />
            </TouchableOpacity>
            <TouchableOpacity>
              <AntDesign name="delete" size={24} color="black" />
            </TouchableOpacity>
            <TouchableOpacity>
              <Feather name="edit" size={24} color="black" />
            </TouchableOpacity>

 

오늘 처음으로 position absolute와 relative을 이용해서 css를 적용해보았다.

https://creamilk88.tistory.com/197

[CSS] CSS Position (relative, absolute) 한 방에 정리!

/* position: relative => element가 원래 본인 위치 기준으로 자리를 잡음 */

/* position : absolute => element가 부모 요소인 parent를 기준으로 위치가 결정된다. */

  content: {
    maxWidth: 250,
    position: "absolute",
    left: 10,
    top: 10,
  },

 

react native에서는 margin 0px 5px 10px 5px 이런식으로 못 써주고 하나하나 써주거나

marginVertical을 이용해 위 아래 같이

marginHorizontal을 이용해 좌 우 같이 적용할 수 있다.

 

border

borderWidth를 제일 먼저 설정하고

solid가 기본스타일이다. 

https://dlee0129.tistory.com/26

[React Native] borderStyle

 

취소선 넣는 속성

textDecorationLine: 'line-through'