커뮤니티프로젝트-비동기, Promise

TODO:

1) CSS

- 반응형: 화면크기 줄어들면 오른쪽 컬럼 밑으로 내려감->해결할 것

- 오른쪽 컬럼 로그인 했을 때 

- CSS고치기: LINK 파랑색글, 밑줄 없애기, 오른쪽 컬럼 아이콘 크기 조정, HOT게시판 조정

 

2) 백엔드

- 글쓰기 작성완료 했을 때, FIREBASE에 DATA저장시키기

 

3) 프론트엔드

- 작성된 글 눌렀을 때, 상세페이지로 

- 글 작성하기 눌렀을 때 EDITOR 화면 

 

TODAY:

- 반응형: 화면크기 줄어들면 오른쪽 컬럼 밑으로 내려감->해결할 것

- 오른쪽 컬럼 로그인 했을 때 

 

1. 화면크기 줄어들면 오른쪽 컬럼 밑으로 내려가는 문제는 오른쪽 컬럼 아이콘의 크기를 조정했더니 해결되었다. 

아이콘 때문에 오른쪽 컬럼의 크기나 위치에 문제가 있었던 것 같다. 

 

2. 오른쪽 컬럼 로그인 했을 때, 이름과 프로필 사진이 나오는 기능을 구현했다.

로그인 했을 때 displayName과 profileURL이 null이여서 초기값을 설정해주었다.

 

1) displayName은 이메일의 @ 앞부분을 초기값으로 설정하였다.

if (user.displayName === null) {
              updateProfile(user, {
                displayName: user.email.split("@")[0],
              });
            }

2) profileURL을 설정하는데에 시간을 많이 썼다.

우선, 샘플 이미지를 firebase storage에 저장해두었다. 초기이미지를 계속 같은 이미지로 사용하기 때문에 firebase에 넣어두고 반복적으로 사용해야 한다고 생각했다.

  const sampleProfilePhoto = getDownloadURL(
    ref(storageService, "sample.jpg")
  );
  
  //중략 
  
  if (user.photoURL === null) {
        updateProfile(user, {
          photoURL: sampleProfilePhoto,
        });
      }

 

겪었던 두가지 오류 

(1) ~~[object promise]

(2) promise{<pending>}

우선 첫번째 오류를 보고, url을 전달해야하는데, 잘못된 값을 전달하고 있구나, 주소를 어떻게 전달할 수 있을까를 고민했고

두번째 오류는 promise, pending 두 용어를 몰라서 구글링으로 해결했다.

 

참고:

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94

자바스크립트 Promise 쉽게 이해하기

 

결론적으로 promise는 비동기처리를 위한 객체이고 주로 서버에서 받아온 데이터를 보여줄 때 사용한다. firebase storage에서 받아온 데이터를 다운받는 것이기 때문에 promise객체로 이루어져 있는 것 같다.

pending이 나온 것은 promise가 처리중이라는 의미이다. 

pending이 처리중이라는 것을 알고, 처리하는데에 시간이 걸리고 기다려주어야 할 것 같아서 async, await를 사용했다.

또한 promise가 처리 완료되고 이행중이면 then을 이용해서 처리 결과 값을 받을 수 있다.

const getSampleProfilePhoto =() => {await getDownloadURL(ref(storageService, "sample.jpg"))
      .then((response) => {
        setSampleProfilePhoto(response);
      })}

결과값을 sampleProfilePhoto로 저장했다.

 

(3) 비동기문제

user.photoURL에 sampleProfilePhoto를 저장했지만 확인해보니 null값으로 나왔다.

비동기처리로 인한 오류라고 생각하여 다음과 같이 코드를 짰다.

  const getSampleProfilePhoto = async () => {
    await getDownloadURL(ref(storageService, "sample.jpg"))
      .then((response) => {
        setSampleProfilePhoto(response);
      })
      //sampleProfilePhoto을 결과값으로 변경한 후, userDb 설정
      .then(() => {
        onAuthStateChanged(authService, (user) => {
          if (user) {
          // displayName, photoURL이 null인 경우의 처리를 setUserDb보다 먼저 처리
            if (user.displayName === null) {
              updateProfile(user, {
                displayName: user.email.split("@")[0],
              });
            }
            if (user.photoURL === null) {
              updateProfile(user, {
                photoURL: sampleProfilePhoto,
              });
            }
            setUserDb({
              uid: user.uid,
              displayName: user.displayName,
              photoURL: user.photoURL,
            });
          }
        });
      });
  };

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

 

---

추가 할 일: 1) 양컬럼에 float, overflow:hidden test

2) 프로필설정

3) 로그인 했을 때 오른쪽 컬럼 활성화

 

TODO:

1) CSS

- 반응형: 화면크기 줄어들면 오른쪽 컬럼 밑으로 내려감->해결할 것

- 오른쪽 컬럼 로그인 했을 때 

- CSS고치기: LINK 파랑색글, 밑줄 없애기, 오른쪽 컬럼 아이콘 크기 조정, HOT게시판 조정

+ 양컬럼에 float, overflow:hidden test

2) 백엔드

- 글쓰기 작성완료 했을 때, FIREBASE에 DATA저장시키기

+ 프로필설정

3) 프론트엔드

- 작성된 글 눌렀을 때, 상세페이지로 

- 글 작성하기 눌렀을 때 EDITOR 화면 

+ 로그인 했을 때 오른쪽 컬럼 활성화