TIL_221123 ✔️🚩Basic_Project

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

---

📒 오늘의 공부

1.프로젝트

---

✅

문제 해결

• 팀원이 profil.js에서 onFileChange 등 이벤트를 만들고 main.js에서도 연결했는데 profil 변경 페이지에서 사진 파일을 누르면 해당 파일이 안 보임.
  • 내가 mypage에서 eidt을 누르면 profile 페이지가 뜨게 #값을 주고 'go live'를 해보라고 하니 프로필 변경화면에서 내 컴퓨터에서 클릭한 파일이 잘 보임!!
  • 아직 수정하기 버튼 부분은 완료가 안 돼서 이미지가 임시 저장된 상태로 보임!

---

• S3 배포
  • 화면 공유로 다 같이 소통하며 진행
  • 가비아 도메인 구입하는 것에서부터 인증 문제로 막힘ㅋㅋㅋㅋ
  • 이후에 금방 잘 만들어짐

---

✔️

• profile.js 같이 만들기
  • 수정 사항 = commit yuns
  • 수정하기 버튼 누르면 사진 storage에 잘 들어가는데 팀원 한 명에게만 프로필 수정 완료 버튼이 뜸
    -> profile 팀원 코드랑 대체 뭐가 다른 건지 코드 비교
    -> 기다리니까 되는데 또 누구는 3번 까지 프로필 사진, 닉네임 바꾸는 것도 여러번 연속으로 해도 "수정 완료" 잘 뜸
    -> 코드 문제는 아닌 것 같아 일단 보류

  ⭐ CSS문제로 노트북, 데스크탑에서 버튼 위치가 달라 밀려서 그랬던 것..

---

✔️

• post.js 같이 만들기
  • 자세한 수정 사항 = commit yunsukprac Branch
  • post.html에 작성하기 버튼에 이벤트 주기
  • main에 window객체로 이벤트 추가
  • post.js에서 이벤트 내용 구성
    -> post 내용에 따라 변수 선언(postpic, category...)
    -> postpic 변수 선언할 때 authservice에서 uid, disPlayName등을 가져오는 것처럼 storage에서 가져와야 하는 것 아닌가 생각했는데 일단 document방식으로 이미지src를 가져오기로 함

✔️

• '작성하기' 눌렀더니 postpic이 너무 길다는 error창이 뜸
  -> 일단 그 상태에서 pull받은 팀원이 작성하기 눌렀는데 오류창 안 뜨고 db에 내용이 모두 잘 들어감!
  -> 사진의 dataURL이 너무 길면 안 들어감!!(오류)
  -> DB에 넣을 때 데이터URL을 일부만 넣어도 되는지?
  -> 아니면 큰 파일을 업로드 하려는 경우 알림창으로
  '몇 MB 이하의 사진만 올려주세요'를 띄워야 하는지?
  -> https://img.ly/blog/how-to-compress-an-image-before-uploading-it-in-javascript/
  -> https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload
  -> 참고해서 js로 사진 줄여서 업로드 혹은
  시간 없으면 알림창 뜨게!

  • category id를 '카테고리 선택'에 줬더니 카테고리는 '운동하기'가 아니라 '카테고리 선택'이라고 저장 됨
    -> 해결 = commit
    -> id값 위치를 잘 설정하자!

  • 포스트 작성하기를 여러번 누르면 DB에 여러번 들어감
    -> 작성하기 버튼 누르면 알림창이 뜨긴 하지만 그 전에 여러번 다다다 누르면 알림창도 누른 만큼 떠서
    -> button에 id값 주고 disabled=true로 비활성화함
    -> 알림창 뜨기 전에 여러번 눌러도 알림창 한 번 뜨고, 포스트도 DB에 한 번 들어감
    -> button이라 튜터님 코드대로 input으로 바꿔야하는 줄 알았는데 아님! 둘 다 됨!

---

✔️

• mypage.js
  • 변경한 프로필, 닉네임이 복불복으로 mypage에 반영이 됨
    -> 알림창 뜨는 것도 여전히 복불복
    -> mainlogin page에서도 안 보이는 경우 있음
    -> 해결!!!!!!!!!! 팀원이 발견함..! css 문제...
    -> 노트북, 데스크탑에서 CSS가 좀 다르게 보임
    -> 만드신 분이 데스크탑에서 만들었는데 노트북인 사람이나 창 크기를 줄이면 프로필 변경 페이지의 사진이 구역을 한참 벗어난다.
    -> 수정하기 버튼도 데스크탑인 사람은 누르면 mypage, loginpage에 잘 반영이 되고 '수정완료'라는 창이 뜨는데 노트북인 사람은 수정하기 버튼의 아래쪽을 눌러야 적용이 됨.
    -> CSS 때문에 밀려서 그런 것 같음..!

✔️

• mypage에 post 불러오기
  -> 안 불러와짐
  -> 튜터님 도움: getPostList함수가 만들어졌는데 호출이 안 됐다고 알려주셨음
  -> mypage.js 함수 밖에 getPostList() 이렇게 넣어서 호출했더니 불러와졌는데 temp_html 형식 중구난방
  -> temp_html을 처음부터 다시 만듦
  -> 자세한 내용 = commit
  -> 날짜는 불러와지는데 post, title 등이 안 불러와짐
  -> collection 안에 있는 이름과 똑같이 해야 할 것 같아서 post, title, nickname 등으로 똑같이 바꾸니 다 잘 불러옴!!
  -> 포스팅 사진도 img size를 수정하니 잘 불러와짐!!
• post를 작성하면 mypage로 가면서 getPostList() 함수로 인해 포스팅된 글들이 보이는데 바로 mypage로 가면 새로고침을 해야 포스팅 글이 보임
  -> router.js 에서 mypage 설정한 부분에 getPostList() 를 추가하니 새로고침 하지 않아도 포스팅 글 바로 보임!!
• mypage에 내가 쓴 글만 불러오게 하고 싶음..!
  -> where절..?

---

✔️

• 로그인 모달 창 구현
  • 유튜브 영상 하나 보고 다 같이 보면서 만들기로 했다.
  • 팀원이 가지고 있는 책을 보면서 주도하며 만들었다.
  • 블로그 페이지를 보며 각자 만들어 보기도 했다.
  • js연결 문제 같은데 계속 안 돼서 튜터님 기다리다가 다른 조 팀원들 만나서 도움 받음.
  • !!!!!!!!!! auth.html의 내용을 index.html에 합치고 나서 js코드를 router.js에 넣어야 하는 거 였다..!
    -> export const handleLocation함수 안에!
    -> 맞다! export가 돼야 쓰지..!

---

🚩

뿌듯함

• 오늘 하루종일 팀원들이랑 화면공유 하면서 같이 코드 짜고 문제 해결하고 문제 해결해 주고 했는데 너무 좋았다.
  • 어제는 내가 js 코드 짠 부분을 보여주면서 코드리뷰를 했는데 아무래도 충분히 이해하는 데 어려움이 있었던 것 같다.
  • 오늘은 첫 줄부터 코드를 고민하며 같이 짜고 하다보니 저절로 코드리뷰가 되고 이해도 더 잘 된다고 해서 좋았다!
  • 내가 속성을 헷갈려서 잘못 입력해도 바로 팀원들이 바로잡아주기도 하고 너무 좋은 시간이었다!
  • 팀원 한 분이 아침에 코드리뷰 하고 이후부터 저녁까지 계속 내가 화면 공유를 하고 코드를 짰다.
  • 다른 팀원도 코드를 계속 쳐봐야 할 것 같아서 남은 js페이지들은 js 안 만들어 본 팀원들이 돌아가며 만들면 좋겠다고 했더니 다들 그러길 바란 것 같았다.