TIL_221122 ✔️🍀 Basic_Project

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1.프로젝트

• SPA 구현
  • hash값은 주어지는데 페이지 이동이 안 됨
  • main.js에서 안 쓰는 api import 주석 처리하고 router에서 주석처리 한 부분에 있던 코드 몇 줄만 위로 옮겨 붙여서 하니 메인페이지에서 로그인 버튼 눌렀을 때 로그인 페이지로 잘 넘어감
  • 새로고침 하면 메인으로 와야하는데 그건 안 됨..
    -> 아마 로그인 창에서 닫기 버튼에 #값을 줘서 메인으로 가게 하거나 왼쪽 위에 로고 버튼 누르면 메인으로 가게 만들어야 할 것 같음

✔️

• document.getElementById("root").innerHTML = html;
  -> 여기서 "root"는 main page(index.html)의 body 안의 전체 내용을 감싸는 div의 id값
  -> 메인 페이지에서 포스트 글만 불러오고 싶으면 그 부분에 id값을 주고 document~ 해서 해당 부분에 붙여오면 됨
• 메인에서 포스트를 불러올 때 우리는 index.html이 기본이니까 index.js를 만들어서 포스트가 붙는 형식을 정해야 하는 거 아닌가?
  • 이건 또 post기능이 활성화되고 글 올린 다음에 내용이 보여야 하는 거라 post.js도 먼저 완성이 되어야 함..!
• 차례로 기능이 잘 구현되는지 보기
  • 로그인이 되는지 보기 위해서 auth.js 만들고 auth.html도 조금씩 손 봤음

✔️

• main.js에서 해당 api주석만 조금씩 해제하는데 다시 메인페이지에서 로그인 페이지로 안 넘어가는 오류
  • 강의에서 해당코드를 가져와서 필요한 부분만 주석해제하는 식으로 했는데 다 지우고 차근차근 구현한 페이지부터
    import를 추가하는 식으로 해야겠다.
  • 새로운 창에서 해당 부분 page, css, js만 가져오고 main.js, router.js는 다 비운 다음에 코드 첫줄 부터 다시 작성했다.
• import
  • import코드를 넣었을 때 흐려지는 건 해당 파일에 import한 api가 사용되지 않았기 때문!!

  • ⭐js 똑똑한 것 같다. import가 아니더라도 내가 사용하지 않은 const나 window객체가 있으면 색을 흐리게 하거나 다른 색으로 구분해서 보여준다!

• auth.js 성공!!! 로그인, 회원가입 유효성 검사부터 로그인하면 loginmain페이지로 이동.
• 로그인, 로그아웃 안 했는데 메인 페이지 들어가면 "로그인 / 로그아웃 성공" 메시지 뜨는 거 수정
  • 로그인 하면 hash값에 따라 loginmain, 로그아웃하면 main(index.html)으로 가게 변경

  ⭐ 튜터님 코드 참고 할 때는 항상 빠뜨리는 부분 없는지 잘 보기.

  • 자꾸 코드 1-2줄 코드 빼먹어서 오류 생김
• 팀원들 회원가입, 로그인 다 성공!
• 팀원들에게 코드 설명까지 완료!
• auth.js에 '로그인, 회원가입 화면 토글링 기능'부분이 좀 헷갈렸는데
  if (loginBtn.value === "로그인") 이 부분은 아래 '회원가입, 로그인' 부분을 바꾸려면 html에서 정한 value값이 일치해야 한다는 것. = 전제조건!
  

---

• 산 넘어 산!
  • 소셜로그인이 안 됨!
  • 메인 페이지에 게시물을 불러와야 함
  • 일단 포스트가 먼저..
• router.js에서 유저의 닉네임, 프로필이 loginmain페이지에 뜨게 함.
  • profile 파일 등에서 연결은 제대로 안 됐겠지만 해당 데이터가 없으면 '회원' / '강아지 사진' 이 뜨게 함

✔️

• loginmain 페이지에서 프로필 이미지 통해 post 페이지로 가고 싶은데 누르면 404 error가 뜸(hash=undefined)
  • index.html이 아니라 페이지 내에서 이동하는 거라 좀 다른 것 같음
  • try #1
    -> router에서 특정 페이지 DOM 설정을 해야 하는 것 같다.
    -> post 페이지 넣어봤는데 안 됨
  • try #2
    -> 특정 페이지 DOM 설정도 handleLocation 함수 안에 있고 그 안에
    document.getElementById("root").innerHTML = html;
    이벤트가 있는데 post, mypage html에 id="root" 가 없어서 각 페이지 body부분에 div root 추가
    -> 실패 / 특정 돔 윗부분(if path.length==) 아래 붙여도 실패
  • try #3
    -> auth페이지에서 loginmain 페이지로 간 걸 생각해보면 auth.js내에 window.location.hash = "#loginmain" 함수가 있었음(handleLocation은 없었음)
    -> 지금 loginmain 페이지에서 post로 가려는 거니까 loginmain.js에 저 함수가 있으면 될 것 같음
    -> 하다가 방향을 바꿈
    -> router.js에 export const goToProfile을 참고해서 goToPost 만들고 loginmian.html에 goToPost버튼 넣음
    -> 성공!! 자세한 내용은 commit에..
    -> 팀원들이랑 코드 리뷰까지 완료!

✔️

• login페이지에서 소셜로그인 버튼을 누르면 팝업이 뜨다 멈춤
  - 팀원이 firebase의 key값을 튜터님것으로 했더니 된다해서 내 firebase key 살펴봄
  - measurementId가 나한테만 있어서 주석으로 처리해 봤는데 여전히 안 됨
  - firebase에서 구글, 깃헙 로그인 사용 중지했다가 다시 설정하고 깃헙은 id,pw 새로 받아와서 했는데도 안 됨
  - firebase 프로젝트 다시 만들어서 연결해봄
  -> 새로 만드니 key에 measurementId 없음
  -> 다른 팀원이 해결 해주심!!
  -> firebase - Authentication -
  Settings - 승인된 도메인에 로컬 주소를 도메인 추가해야 함!!!!!!!!!!!!!!!!!!!!!!!!!!!!

post.js 구현

• post창을 보니 카테고리도 나뉘어 있고 태그 입력창이 있는데 태그 입력창에 엔터치면 #가 자동으로 붙는 기능..(like velog) 구현 가넝할까..?
• post.js save_post 이벤트 만들고 조금 하다보니 감이 잡혀서 오늘은 11시 되기 7분 전에 퇴근!!

---

🍀 매니저님 조언

• commit 자주하고 트러블슈팅 자세히 기록해서 포폴에 쓰기
  -> 코드를 어떻게 고쳤는지 캡쳐
  -> commit message: error fixed
• 좋은 commit message 찾아보고 줄바꿈 하면서 좀 더 자세한 commit message로 바꿈!

  ---