내배캠 TIL 2022.01.05

리액트 심화강의

내일 부터 프로젝트인데... ㅠㅠ

터미널에서 부터 리액트 앱 시작하기

 

code 하면  vscode 들어가지는거 다운받을 때 자동으로 설정되어있었는지 된다.

code . 하면 해당 폴더를 불러오면서 vsCode 켜진닷!

 

deprecated

소프트웨어에서, 어떤 기능이 아직까지 사용되고는 있지만, 신기능이 나왔기 때문에 조만간 사라지게 될 상태를 말한다.

extra reducer 쓰면 맨날 이거 뜨면서 builder? 를 쓰라고 나오던데 extra reducer가 곧 사라진다는 말씀?

http://egloos.zum.com/nemonein/v/5320574

 

npx create-expo-app rn-day2

code .

eas update:configure

(바로 expo에 자동 eas 프로젝트 만들어주는 명령어!)  페이지에 들어가보니 rn-day2 프로젝트가 잘 만들어져 있다.

eas update

 

expo 로딩 화면 이미지랑 메뉴에 뜨는 이미지 변경

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

 

모던 자바스크립트 튜토리얼

 

속성과 프로퍼티

https://ko.javascript.info/dom-attributes-and-properties

속성과 프로퍼티

문서 수정하기

https://ko.javascript.info/modifying-document

 

 

피그마로 템플릿 수정해서 파일을 export 하고 사진이미지를 바꿔 넣었다.  로딩화면에는 잘 적용이 됐는데, 메뉴 화면 아이콘은 안 바꼈다. 

 

npm 라이브러리 명령어 넣을 때 --save를 붙이면 dependencies에 들어간다

 

AsyncStorage를 이용해서 state 저장하기

https://react-native-async-storage.github.io/async-storage/docs/usage

npm install @react-native-async-storage/async-storage

import AsyncStorage from "@react-native-async-storage/async-storage";

const saveCat = async (cat) => {
    setCategory(cat);
    await AsyncStorage.setItem("category", cat);
  };

  // 처음 렌더링 되자마자는 실행이 안되게 하기
  // todos.length 0 일 때 === 빈 배열일 때 실행 안되게 조건 넣기
  // 튜터님은 조건문 하고 중괄호 없이 바로 실행할 내용 넣음
  useEffect(() => {
    //현재의 최신  todos를 AsyncStorage에 저장
    const saveTodos = async () => {
      await AsyncStorage.setItem("todos", JSON.stringify(todos));
      //자바스크립트 값을 JSON 문자열로 변환히고 배열을 저장
    };

    if (todos.length > 0) saveTodos();
  }, [todos]);

  useEffect(() => {
    const getData = async () => {
      const resp_todos = await AsyncStorage.getItem("todos"); // todos 배열
      const resp_cat = await AsyncStorage.getItem("category");
      setTodos(JSON.parse(resp_todos));
      setCategory(resp_cat);
    };
    getData();
  }, []);

 

로그인 안 해도 파이어베이스의 파이어 스토어 쓸 수 있게 설정해주기

 

아래의 동그라미 친 부분이 false이면 로그인해야 쓸 수 있고, true이면 로그인 안 해도 쓸 수 있는 것 같다.

 

저번에 바닐라 자바스크립트로 파이어베이스 쓸 때는 CDN에서 복사해서 script 태그 안에 넣어줬는데

이번에는 npm으로 라이브러리 다운 받아준다.