Effects?

외부의 시스템과 동기화 할 필요가 있을 때가 있다.

• 리액트 컴포넌트 기반이 아닌 리액트 상태를 조종할 때
• 서버 연결을 설정할 때
• 컴포넌트가 화면에 나타날 때 통계 로그를 보내야 할 때

Effects는 렌더링 후에 동작할 수 있게 해준다. 그래서 리액트 외부의 시스템과 컴포넌트가 동기화 할 수 있게 해준다.

will learn

• effects가 무엇인가
• 이벤트와 에펙이 어떻게 다른가
• 컴포넌트에 에펙을 선언하는 방법
• 에펙이 필요하지 않을 때 re-running을 피할 수 있는가
• 개발모드에서 왜 에펙이 두번 동작하는가 그리고 어떻게 고치는가

리액트 컴포넌트안의 두가지 타입의 로직

1. Rendering code :

• 컴포넌트의 최상위에서 동작하는 것.
• props, state를 받고 변형하고 스크린에 JSX로 리턴하는 것.
• 렌더링 코드는 순수(pure)해야한다. 수학공식처럼 결과값만 계산해야 한다.

2. Event handlers :

• 계산만 하는게 아닌 컴포넌트안에 함수를 실행하게 하는 것.
• input필드를 업데이트 하거나 물건을 사기위해 HTTP POST를 제출해 요청하거나다른 스크린으로 이동시키는 것.
• 특정한 유저의 동작을 위해 'side effects'를 포함한다.(버튼 클릭이나 타이핑같은)

Effects를 사용하면 특정 이벤트가 아닌 렌더링 자체로 인해 발생하는 부작용을 지정할 수 있습니다.

Effects는 스크린 업데이트 후 커밋이 된 가장 마지막에 실행된다. - 리액트 컴포넌트와 외부의 시스템이 동기화하기 좋은 타이밍이다.

Effect이 필요하지 않을 수도 있다.

• 특정 상태만을 조절하기 위한 상태일때는 에펙이 필요하지 않을 수 있다.

How to write an Effect

1. Declare an Effect. 에펙은 모든 렌더 순간마다 동작한다.
2. Specify the Effect dependencies. 필요한 순간에만 re-run하기위해 특정 dependencies를 사용한다.
3. Add cleanup if needed. 어떤 에펙들은 멈추고 뒤로가고 깨끗이 하는지를 특정지어 주어야 한다.

Step 1 : Declare an Effect

컴포넌트가 렌더될때마다 리액트는 스크린을 업데이트 하고 그 다음 useEffect 내부의 코드를 실행시킵니다. 다시 말해 useEffect는 해당 렌더가 화면에 반영될 때까지 코드 조각이 실행되는 것을 "지연"시킵니다.

useEffect( ( ) => { } )

(JSX가 렌더링 된 후 side effect이 동작 할 수 있도록 useEffect에 기능을 넣어준다.)

Step 2 : Specify the Effect dependencies

외부의 시스템과 동기화 하는간 항상 즉각적이지 않다. 그래서 필요하지 않은 부분은 최소한으로 해서 넘기고 싶을 때 dependencies를 사용한다.

예) 키보드를 누를때마다 챗 서버와 새로 연결하는 것 예) 컴포넌트가 나타날 때 처음에만 페이드인이 동작 해야 하는데 키보드를 누를때마다 컴포넌트의 페이드인 애니메이션이 동작하는 것

• [ ]을 넣어 Effect 동작시 필요 없는 렌더링은 스킵 할 수 있다.
• [ ]안에 여러개의 dependencies를 넣을 수 있다.

(useEffect( ( )=>{ },[ ] )

useEffect(() => { // This runs after every render });

useEffect(() => { // This runs only on mount (when the component appears) }, []);

useEffect(() => { // This runs on mount and also if either a or b have changed since the last render }, [a, b]);

Step 3 : Add cleanup if needed

• 컴포넌트가 유저에게 보일 때만 동작하게 하기
• 콘솔에 두번 log가 찍히는 이유는 컴포넌트가 unmount되어도 연결이 해제되지 않았기 때문이다. => clean up 작업이 필요!

  useEffect(() => {
    const connection = createConnection();
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, []);

console... dev 에서는 세번 보인다 "✅ Connecting..." "❌ Disconnected." "✅ Connecting..."

*product에서는 한번만 보인다. * "✅ Connecting..." (strict 모드를 끄면 dev처럼 보이긴 하는데 추천하진 않는다.)

How to handle the Effect firing twice in development?

1. Controlling non-React widgets : no needed clean up.
2. Subscribing to events : return unSubscribing.
3. Triggering animations : reset to the initial values.
4. Fetching data : If your Effect fetches something, the cleanup function should either abort the fetch or ignore its result.
5. Sending analytics : 어짜피 유저는 볼 수 없기 때문에 기존의 코드를 유지 할 것.

총 결론

1. useEffect가 필요한 부분을 잘 파악해서 사용 할 것.
2. useEffect는 JSX가 렌더링 다음 사이드 이펙이 가능하게 해 줌.

1. 리액트는 자동적으로 DOM을 비교해 렌더링하므로 자주 DOM에 접근해서 조작할 필요가 없다.
2. 하지만 node에 포커스, 스크롤, 사이즈를 재거나 위치를 잴 때 돔에 접근이 필요한데 이 기능이 리액트에 내장되어 있지 않아 DOM노드에 접근하기 위해선 ref가 필요하다.

WILL LEARN

• DOM노드에 어떻게 접근해서 관리할지
• ref가 어떻게 useRef와 연관되어 있는지
• 다른 컴포넌트의 DOM노드에 어떻게 접근할 수 있는지
• 리액트에의해 DOM이 안전하게 수정되는 경우들이 있는지

Getting a ref to the node

1. ref를 연결한다.

   import {useRef} from 'react'
   

const example = () => { const myRef = useREF(null) return(

Accessing another component's DOM nodes

중요! component에 ref로 접근하기

By default React does not let a component access the DOM nodes of other components. Not even for its own children!

수동으로 다른 컴포넌트에 조작하는것은 위험하다! 하나 이상의 children을 참조하기 위해선 그래서 forward를 사용해야 한다.

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

결국 useRef는 DOM노드를 조작하기 위한 것이고 컴포넌트에 접근할 때는 forwardRef를 사용해 ref를 넘겨주어야 한다.

-끗-

깃 허브에 머지까지 마친 코드가 잘못 됐을때 로컬(컴퓨터)에 있는 내용을 원격(깃허브)에 덮어씌우고 싶을 때 쓰는 마법의 주문 입니다.

git push origin main -f

이 주문을 쓰기 전 반드시..! 반드시!!!!!(두번 강조했습니다)

로컬(컴퓨터)에 있는 코드가 잘 동작하는지 5번 이상 확인, 혹은 그 이상 확인하고 덮어쓰세요!

저는 xcode에서 변경된 내용을 그대로 push한 뒤 merge 했는데 이부분에서 엄청난 오류가 생겨 프로젝트를 뒤집어 엎을 지경이었으나 로컬의 마지막 commit에서 구사일생으로 코드를 구할 수 있었습니다. (이전에 깃 클론을 몇번이나 했는지 모르겠읍니다 흐규흑)

그래서 쓴 마법의 주문이오니

f가 달린 주문은 절대 절대 절대 주의해서 사용하세요

이 글을 보신다면 꼭..!! f를 조심하십쇼

p.s. f를 조심해요...!!!(3번 말함)

이상 한달이상 만들고 배포까지 한 프로젝트 날릴뻔한 개발자 올림

2. xcode 무한 로딩해결 pod install 하거나 새로 열 때 무한 로딩에 갇혔다면 icloud에서 실행되고 있진 않은지 체크하길 바란다. icloud연동 해제하고 맥자체에서 여니 꽤 빨라졌다. 이것도 모르고 4시간씩 기다렸다..ㅠㅠ

3. build service could not create build operation unknown error while handling message xcode를 완전히 껐다가 켜보길 바란다.

4. [!] Could not automatically select an Xcode project. Specify one in your Podfile like so:

project 'path/to/Project.xcodeproj'

프로젝트 ios폴더에 xcworkspace가 두개인지 확인해보고 필요 없는 파일은 지우면 된다.

5. build fail build service could not create build operation unknown error while handling message

xcode 열자마자 indexing되기전에 build를 하면 이런 에러가 나온다. 간단하게 xcode를 껐다 다시 켜보자.

Q. 위에 글대로 다 했는데도 로그인이 안된다면?

A1. bundleID 설정이 xcode랑 firebase랑 일치하는지 확인할 것! A2.xcode에 GoogleService-Info.plist넣을 때 xcode안에 프로젝트 폴더 우클릭-Add files to "projectName"으로 넣으면 간단히 해결된다 (드래그 앤 드롭 하지 말고!)

error: < remote address > did not send all necessary objects

무슨짓을 해도 문제가 해결 안되어 강제로 깃허브 연결 삭제하고 다시 repository를 만들었다.

경고 : 잘못하면 지금까지 만든 코드 다 날라가니까 조심히 사용할 것!

1) 깃허브 연결 해제 및 삭제
rm -r -f .git
2) vscode source control에서 public으로 publish

대충 간단한 방법이지만 코드 다 날릴수 있으므로 깃허브에대한 이해도가 어느정도 있다면 사용할 것! (두번 경고했음!!)

#firebase setup_1 how to set up the firebase in react-native with x code

#firebase setup_2 react native with firebase

#issue 1 => google-info.list xcode에 올바르게 적용시키는 방법 add google-info.list in xcode

#issue 2 => 각종 이슈 잘 정리해 주심 issue from firebase setup

#issue 3 => pod 라이브러리 오류

[!] The following Swift pods cannot yet be integrated as static libraries:The Swift pod FirebaseStorage depends upon FirebaseAppCheckInterop, FirebaseAuthInterop, FirebaseCore, FirebaseCoreExtension, and GTMSessionFetcher, which do not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set use_modular_headers! globally in your Podfile, or specify :modular_headers => true for particular dependencies.

set up pod file

위에 나열된 라이브러리들을 pod.file에 추가해 주어야 한다.

pod 'GoogleUtilities', :modular_headers => true
pod 'Firebase', :modular_headers => true
pod 'FirebaseCoreInternal', :modular_headers => true
pod 'FirebaseAppCheckInterop', :modular_headers => true
pod 'FirebaseAuthInterop', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true
pod 'FirebaseCoreExtension', :modular_headers => true
pod 'GTMSessionFetcher', :modular_headers => true

이런식으로!

제일 중요한거..! podfile 내용변경하고 나서 꼭 pod update && pod install 할것!!! ( 대충 이거 안해서 이틀 버림 )

pod intall, pod update 잘 정리된 글

#google login 1 => 공식 문서 github react-native-google-signin/google-signin

#google login 2 => 구글 로그인 코드 google log-in

  const userInfo = auth().currentUser;
  console.log(userInfo?.displayName, userInfo?.email);

auth().currentUser를 통해 User의 정보를 알 수있다.

#googld login 3 => ios에서 구글 로그인 안될 때

Thread 1: "Your app is missing support for the following URL schemes

google sign in crash

#firebase Cloud Storage && Realtime Database

npm install @react-native-firebase/database
npm install @react-native-firebase/storage

#react native image upload with firebase react-native-image-picker 잘 정리된 글

동그라미친 곳을 누른다.

"editor.codeActionsOnSave": {
 "source.organizeImports": true
}

저장하면 끝!

이슈 : Tanstack 쿼리를 사용하는데 페이지를 새로고침하거나 뒤로가기했다 돌아오면 데이터가 불러와지지 않았다.

  const getMate = useQuery(
    {
      queryKey: ["mate"],
      queryFn: () => getMateEditForm(uid),
    },
    { staleTime: 1000 * 6 * 10 }
  );

처음 코드를 보면 mate쿼리키를 이용해 등록된 firebase함수를 불러와줄 때 uid를 넘겨만 주고 쿼리 키로 설정해 주지 않았다.

해결

✅ Query Keys Fetching된 쿼리키들이 동일하지않게 나타난다면 다른 범위의 당신이 사용하고 있는 '변화되는'다른 키들을 포함해야 합니다.

  const getMate = useQuery(
    {
      queryKey: ["mate", uid],
      queryFn: () => getMateEditForm(uid),
    },
    { staleTime: 1000 * 6 * 10 }
  );

쿼리키에 uid(변화되는 내가 사용하는 키)를 넣어주니 다시 동작한다.

그리고 Elements에서는 ** You need to enable JavaScript to run this app.**

구글링을 해 본 결과 자바스크립트를 허용하면 된다고 한다. ✅ Activate JavaScript in your browser

그런데 이미 활성화로 설정이 되어 있었다 😱

무엇이 문제일까?? 지난번 experiment프로젝트도 netlify로 배포했을때 같은 이슈가 있었는데 이번에 확실히 해결해야겠다.

콘솔에서 하나 더 확인할 수 있는 오류로 ** GET net::ERR_NAME_NOT_RESOLVED** 이게 뜨던데

✅ ERR_NAME_NOT_RESOLVED: 6 Proven Methods to Fix It 이 사이트를 참고해 보기로 했다.

• 기술스택
• 개발자로서의 생각 / 포부
• 매일 할일 목록 만들기

4. node.js 강의 듣기
5. 영어 말하기 연습 1시간

후후 오늘은 좀 깨운한데..? 함 마 팍팍 달려보자~

1. 썸네일 크기 맞추기 ✅
2. mutation, invalidate로 실시간 업데이트 ✅
3. 배너 삽입 ✅
4. experiment에 추가하기
5. netlify 업로드 ✅
6. git read.me 작성하기 ✅

DeadLine

• 2/17 오후 1시 30분까지

진행사항

1. 썸네일 크기 맞추면서 배너도 넣고 전체 크기도 조정했다.
2. mutation, invalidateQuery로 실시간 업데이트 완성.
3. netlify, github-read.me 완성

단순히 하이퍼링크만 되는줄 알았는데 doc에 와보니 더 많은 기능들이 있었다. html을 자세하게 공부해야 하는 이유.

도움 감사 🤟

• rel='noopener'를 같이 사용해줘야 한다.
• rel는 relationahip의 약자

1. Major 프로세스

• 그동안 다시배운 JS,리액트 기술로 깔끔하게 리팩토링 한다. ✅
• 불변성의 법칙 꼭 지키기 ✅
• history click하면 정보 보여주기 ✅

2. experiment에 gif/site형식으로 업로드 하기 ✅
3. github read.me 꼼꼼하게 작성하기 ✅

Dead Line

• 2/16 오후 10시까지

Finish Time

2/16 오후 10:22

1. Major 프로세스 완료 :

• 전체적으로 정리가 안된 함수들을 따로 구분해줌
• useState의 개념이 안잡혔을 때 만들었던 프로젝트여서 정리하는데 약간의 시간 소요됨
• 히스토리 기능 구현 완료 (히스토리 섹션에 있는 컬러를 누르면 전체적으로 다시 히스토리 확인 가능)

2. github read.me 완료
3. experiment 완료

진행중인 포트폴리오 목록

• experiment : side프로젝트 모아놓기
• css guide : experiment포폴안에 gif/링크 삽입 ✅
• withwith shoppingmall : experiment 포폴안에 gif/링크 삽입 ✅
• 콩비찌 : 메인 서비스 제작

진행 예정

1. css guide, withwith의 로직을 모두 정리, 끝내기..! (dead line 2/17 fri) ✅
2. experiment에 삽입하기 (dead line 2/18 fri)
3. 콩비찌 마무리하기(dead line 2/22 wed)

제발 하나라도 잘 마무리하기! 맘에 들지 않더라도 마무리하는게 중요하다.

사담

네 뒷동산 갔다가 발목인대가 파열되어 전치 2주진단을 받았습니다^^ (첫 반 깁스) 하루라도 조용할날 없네요 (집에서 조용히 개발공부 하라는 계시)

히히 더글로리 재밌따(과자냠냠)

그렇습니다. 포트폴리오를 두개 제작중입니다. 번뜩이는 아이디어와 실행력 (하지만 오래가지 못하는 지속력) ENFP의 고유한 특징이죠.

하지만 이번엔 각잡고 앉아 제대로 만들어 보려고 합니다.

현재 진행중인 두번째 프로젝트는 반려동물을 자랑하고싶지만 마땅히 자랑할 곳 없는 주인(집사)들을 위한 내새끼 자랑 커뮤니티 콩.비.찌 를 제작중입니다 🐶 (콩이,루비,햄찌)

어느정도 틀을 만들고 중간 리팩토링을 진행하고 있는데 코드가 아까울정도로 겹치는 부분이 있어 수정 과정을 적어보려고 합니다.

무서울정도로 겹치는 두 파일의 커스텀 훅스..! 이번 리팩토링 목표는 재사용성을 높이는 것입니다.

사실 두 커스텀 훅스에서 다른 점은 QueryKey로 사용하고 있는 mate/user의 차이입니다.

왜이렇게 겹치는지를 되짚어보니 실행하려고 하는 기능이 똑같다는 것입니다. 파이어베이스의 데이터베이스에 사용자 정보 업로드 => 가져오기 => mutation의 invalidate를 사용해 데이터 실시간 동기화

그리고 계속 만들다보니 여러모로 많이 사용 할 것 같아 미리 리팩토링해서 재사용성을 높이기로 결정했습니다.

코드를 한줄이라도 압축하는것이 목표

Firebase set

먼저 파이어베이스의 set부분을 살펴보면 받아오는 정보를 저장하는 카테고리 부분만 개선하면 된다. useState를 통해 설정한 info를 각각 넘겨주었다.

넘어오는 info의 정보를 배열화 시켜 includes로 검사해 set부분을 조건문으로 검사하도록 정말 간단히 리팩토링 해주었다.

앞으로 추가되는 set부분을 계속 이어나가주면 될 것 같다.

Firebase get

다음 부분은 정보를 get해오는 부분인데 (생각보다 쉽지 않다.)

단순히 'mypage / user' or 'mypage / mate'의 차이인데 어떻게 하면 필요한 getEditForm()함수를 불러올 수 있을까?

getEditForm부르는 조건 => useQuery의 queryFn으로!

조금 더 생각해보기로 하고 다른 구현사항들을 진행해 보기로 한다.

여담 사실 리팩토링은 코드 다 짠 다음 하려고했는데 스파게티 코드가 보기좋지 않아 일찍 진행했다. 덕분에 더 빠르게 프로젝트 마무리 할 수 있을 것 같다.

이슈 Uncaught TypeError: Cannot convert undefined or null to object

✅ 감사합니다ㅠㅠ

이슈

• 유즈쿼리로 데이터를 불러온 컴포넌트에서 새로고침을 하면 화면이 죽어버림

해결

• 유즈 쿼리로 불러온 데이터는 객체이거나 null인 상태이다. 그래서 각각의 상태를 핸들링해 주어야 한다.

  const contactValues = () => {
    if (contact == null) {
      return {};
    } else {
      return Object.values(contact);
    }
  };

• 유즈쿼리로 불러온 데이터 = contact
• contact가 null인 경우 {} 빈 객체를 리턴해주고 아닌 경우 내용을 배열로 리턴해 주었다.

여담

이제 업로드 하고 배포하자!

✅ Document.write() [Violation] Avoid using document.write(). 다큐멘트에서 스크립트를 쓰지 말라고 한다!! 한참 찾아봤는데

  const {
    isLoading,
    error,
    data: contact,
  } = useQuery(
    {
      queryKey: ["contact"],
      queryFn: viewContact,
    },
    { staleTime: 1000 * 5 * 10 }
  );

  const { user } = useUserContext();

  if (isLoading) return <p>loading...</p>;
  if (error) return <p>error...</p>;

마지막 두 부분이 문제였던것..! 쿼리쓸때 확인용으로 써놨던것이 배포를 막아두고 있더랬다ㅠㅠㅠ 암튼 지우고 나서 배포했더니 성공!

1. 파이어베이스 콘솔에서 authentication탭으로 이동한다.

2. 세팅 탭의 승인된 도메인탭으로 이동한다.

3. 도메인 추가를 눌러준다.

4. 네트리파이에서 생성된 도메인을 추가해준다.

그러면 깔끔하게 성공한다 :)

뮤테이션 사용중 찾은 좋은 글 꼭 읽어보기!!