타이머 개발 12일차, 13일차

12일차(2022.07.05)

 

 

express로 서버 만들기를 해보려 했는데, 아무리 해도 안되다가 찾은 원인이 리액트로 만들 때 package.json 파일에 저걸 다르게 적어둔 것이었다. 어쩐지 '/' 경로로 라우팅이 안되더라.. 

참고한 영상 : 

https://www.youtube.com/watch?v=QBXWZPy1Zfs&t=83s 

 

 그거 해결하고, Vercel로 올려놓는 것까지만 하고 끝난 날이었다. 웹에 연결시키기 시작한 김에 axios로 L10P 스크램블을 추가해볼까 했는데, async를 써야 했던 점까지는 깨달았지만 알 수 없게 뭔가 안돼서 일단 나중으로 넘겼다.

 

 

13일차(2022.07.06)

운

 스크램블에서 꼭 하고 넘어가야 할 것을 처리하기로 했다. 바로 현재 보여지는 스크램블을 별도의 변수에 저장해서 별도의 state로 관리하는.. useState로 변수 하나 관리하고, 기록을 재거나 리로드를 했을 때마다 setNowScr을 사용해서 저장된 스크램블이 바뀌게 했다. 그걸 화면에도 보여주고, 나중에 db에 기록 올릴 때도 가져다 쓰면 되게 되었다.

 다만 그렇게만 하면, 처음 로딩했을 때는 nowScr에 아직 알고리즘이 새 스크램블을 생성해 넣지 못했음에도 nowScr의 내용을 화면에 표시해야 하는 상황이 되어 새로고침을 하면 스크램블이 빈 스트링으로 보이게 되었다. 그래서 useEffect로 처음 마운트될 때도 setNowScr이 작동되게 했다.

 

 

 이렇게 해놓으니 L10P 스크램블 가져오기도 일사천리로 진행됐다. async만 잘 고려해서 해주니 잘 작동됨. 저 라이브러리 사용법도 배워오면 33연습할 때 쓰는 어떤 스크램블이든 만들 수 있을 듯..?

 

 

---

MongooseError : Query was already excuted

await UserModel.findById(id, (err, updatedId)=> {
            updatedId.id = newId;
            updatedId.save();
        })

await빼버려서 해결.

https://stackoverflow.com/questions/70654429/mongooseerror-query-was-already-executed 

MongooseError: Query was already executed:

이거 참고함

 

---

위에 await 빼면 해결될 줄 알았는데, 그래도 이런 게 막 뜨던..

https://stackoverflow.com/questions/65114035/err-insufficient-resources-errors-on-axios-get-request-in-react

ERR_INSUFFICIENT_RESOURCES errors on Axios GET request In React

useEffect에 조건 안달아도 되나..? 하는 생각을 했던 것 같긴 한데 진짜 필요했던 것이었음

 

---

로딩바 만들기

https://analogcoding.tistory.com/178

react 에서 loading 표시하기 (progressbar , spinner)

플러터의 FutureBuilder같은 게 있나 했는데, 그냥 axios.get 하기 전에 셀프로 로딩 표식을 띄워주면 되던..

---

레포 폴더 다른 걸로 바꾸면서.. 

https://donggu1105.tistory.com/104

[Git] ! [rejected] master -> master (fetch first) 에러 해결

 

+레포 지울 땐 

git remote remove origin

++레포에 처음 올릴 땐,

 

git init
git remote add origin https://github.com/Rouxist/cubat
git add .
git commit -m 'msg'
git push origin master

이 순서로. git init 안해서 헤맸다

---

npm i -g vercel 하다보니 아래와 같은 문제가 생기던..

https://github.com/lumiamitie/TIL/blob/master/js/environment/npm_global_install_permission.md

GitHub - lumiamitie/TIL: Today I Learned

 

+vercel에 올리기 : 

위와 같이 설치 후 

$vercel

해서 진행.

existing project 물어보는 건 기존에 vercel에 프로젝트 만들어놨냐는 얘기니까 y!!

근데 마지막에 에러가 남

 

 

---

https://www.youtube.com/watch?v=fTIWf1PpBl8 

requirelogin 배워야 할 듯

 

---

route에 대한 걸 따로 파일를 분리했는데, db에 crud 중 create에 문제가 생김

 

Error: Session validation failed: eventType: Path `eventType` is required., title: Path `title` is required., createdDate: Path `createdDate` is required.

 

const router = express.Router();

router.use(express.json()); //추가

저거 한 줄 추가해서 해결

---

7/28

네비게이션 바의 항목을 누르면 멈춰버리는 문제가 생겼는데, onAuthStateChanged를 useEffect 안에서 굴리니 해결됨..

useEffect(() => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        setIsUserSignedIn(true);
        console.log('로그인 됨')
      } else {
        setIsUserSignedIn(false);
        console.log('로그인 안됨')
      }
    });
  }, []);

유튜브로 google signin 어떻게들 하는지 다양하게 찾아보면서 그 중 하나로 성공

---

auth의 데이터는 string || null || undefined 형태라 그냥 string 형식의 변수에 집어넣지 못하길래..

let name = user.displayName as string;
setDisplayName(name);

---

heroku에 올리니까 로그인이 안됐는데, 

https://stackoverflow.com/questions/57963994/firebase-auth-not-working-after-deploying-to-heroku-still-works-in-dev-at-local

firebase auth not working after deploying to heroku. Still works in dev at localhost:4200

cubat.herokuapp.com 을 firebase>Authentication>Settings>Authorized Domains에 넣어줘야했음.

---

08.01

Array 목록들 보여줄 때 스크롤이 아래로 내려가있게 하기

 

https://stackoverflow.com/questions/18614301/keep-overflow-div-scrolled-to-bottom-unless-user-scrolls-up

Keep overflow div scrolled to bottom unless user scrolls up

flex-direction : column-reverse를 사용하는 방법이었다. 다만 예시처럼 들어가는 내용 자체가 뒤집혀야 하기에 

axios.get('/api-session')
.then(res => setSessions(res.data.reverse()))
.catch(err => console.log(err));

가져온 데이터를 반대로 넣어버린 후, 그렇게 하니까 원하는대로 되기는 하는데 그랬더니 index+1로 처리한 인덱싱은 반대로 끝번호가 위로 가길래 그것만 해결해줌.

 

08.02 

위 내용이 필요 없어짐.

const scrollRef = useRef<HTMLInputElement>(null);

const scrollToBottom = () => {
  if (scrollRef.current) { // scrollRef가 null이 아닌 경우로 한정시키기.
    scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }
};

useEffect(() => {
  scrollToBottom();
}, [sessionLength]);

스크롤다운 자동화

이미 session이 업데이트될 때마다 기록 보여주는 곳을 업데이트시키고 있으니 그걸로 useEffect()를 하나 더 사용하려 했는데, 막상 써보니 그건 상시 업데이트되고 있길래 스크롤이 올라가지질 않아서 새로 하나를 만들어버림