TIL_221103 ✅☑️ Miniproject

정윤숙·2022년 11월 3일
0

TIL

목록 보기
4/192

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


📒 오늘의 공부

1. Mini Project - 메인 페이지 DB연결

  • 어젯밤에 CSS문제인 것 같아 일단 마무리했는데 계속 생각이 났다.
    • 밤 늦게 잠도 안 오고 계속 생각하느라 겨우 잠들었는데 심지어 꿈에서까지 코딩했네ㅎ 오늘 아침도 어제처럼 새벽 일찍 눈이 떠졌는데 눈 뜨자마자 또 문제 어떻게 해결 할지 계속 생각하다 갑자기 id 선택자 위치가 잘못된 것 같다는 생각이 들어서 코드 수정해봤더니 내가 연결한 DB에서 온 댓글이 CSS가 잘 적용돼서 방명록 댓글창 밑에 잘 달렸다!!!!!!

문제 해결 과정에서 내가 얻은 것

메인 페이지를 만든 팀원이 id 선택자 위치를 잘못 설정했는데 내가 쓴 append 함수가 방명록 박스 밑에 댓글을 붙이는 거니까 댓글이 붙는 위치를 내가 한 번 더 확인했어야 했다! 막상 해결하고 보니 너무너무너무 간단한 문제였지만 그 과정에서 많은 걸 얻은 것 같다.

  • 튜터님에게 도움 요청해서 같이 고민해 본 것
    • 이게 문제일까, 저게 문제일까 코드를 보면서 얘기나누고 console창에서 내가 몰랐던 select element in page 기능을 써 보기도 하고 Network, styles 창도 꼼꼼하게 보는 연습도 해 봤다
  • 계속 고민해서 결국 문제를 해결 한 경험
    • 이전엔 문제가 생겨도 대부분 금방 해결했는데 이렇게 밤 늦게 고민하고 꿈도 꾸고 새벽에 눈 떠서 바로 책상 앞에 앉아 코드를 친 적은 처음이다. 내 머릿속이 문제해결, 코드로 아주 꽉 찬 느낌..!
  • 코드를 볼 때 항상 의미를 생각하기
    • append 함수가 id 셀렉터 밑에 temp_html로 선언한 내용을 붙인다는 걸 먼저 떠올렸다면 바로 경로를 하나하나 찾아 금방 문제를 해결할 수 있었을 것 같다!
  • 팀원들과 경험 공유하기
    • 메인 페이지를 만든 팀원도 잘 몰라서 id 선택자를 잘못된 곳에 넣은 거니까 내가 문제 해결한 걸 설명하고 공유하는 순간이 좋았다

2. 개인 페이지 최종 수정

  • 메인 페이지 내 카드에 링크를 걸어 내 개인 페이지로 이동하게 하려고 메인 페이지 폴더, templates, static에 파일들 잘 넣었는데 내 카드를 누르면 계속 파일을 찾을 수 없다고 나와서 결국 git hub로 페이지 만들어서 링크를 걸었다.
  • 내 개인페이지에는 누르면 메인 페이지로 이동하는 버튼을 만들어 메인 페이지 링크를 걸었다. app.py가 실행되고 있을 때만 잘 작동해서 도메인을 만드느냐 마느냐 했지만 일단 시연 영상 찍거나 발표할 때는 app.py를 실행 시켜놓으면 되니까 넘어가기로 함.
    이것도 다음에 내가 꼭 해봐야지

3. 이건 내가 시간 안에 해결하지 못한다고 말하기

  • 방명록에 쓸 수 있는 닉네임과 댓글의 글자 수를 제한할 수 있냐고 해서 바로 찾아보고 maxlength로 해결! 정해진 글자 수까지만 써진다.
    • 나는 여기서 제한된 글자수를 초과하면 글자 수가 제한되어 있다는 창이 뜨거나 아니면 커서를 닉네임, 댓글 창에 갖다 대면 작은 텍스트 창이 뜨게 하기 등을 구현하고 싶었다. 근데 더 공부해야 하고 당장 내일이 발표라 나도 내 개인페이지 발표, 좋아하는 함수 발표 할 준비를 해야해서 그냥 max-length까지만 했고 다른 건 그 동안 공부를 더 해서 다음에 같은 팀이 된다면 보여주겠다고 했다ㅎ

4. Git!!!

  • 협업을 하는데 다들 깃을 잘 몰라서 레파지토리에 파일 업로드하는 식으로 하다보니 누구 코드를 다시 복사해서 입력하고 취합하고 큰 파일은 또 압축해서 보내고ㅎ
    • 팀원들이랑 너무 git으로 커밋 푸시하며 편하게 하고 싶어서 나도 막 찾아보고 하다가 clone으로 가져오는 것 팀원들한테 알려주고 팀장님 통해서 속성으로 gitbash 이용해서 내가 팀원들을 초대한 레파지토리에 다들 각자 수정한 파일을 올릴 수 있게 됐다! 거의 최종본을 만든 다음에 한 거지만 그래도 이제라도 알았으니 다행!!
    • 더 공부해서 git 자유자재로 써 봐야지!! 담임쌤이랑 면담할 때 알게 된 source tree도 써 보면서 git이랑 친해져 봐야겠다!

☑️

공부를 더 해서 구현하고 싶은 것들

  • 방명록 댓글창에 수정, 삭제 기능달기
  • 댓글 수 제한 하고 경고창이나 hover로 텍스트창만 뜨게 하기(확인 누를 필요 없는)
  • 개인 페이지에서 버튼 누르면 보석 팝콘처럼 터지기
  • 다른 팀원들 페이지 그대로 내가 만들어보기
    (내가 코드 짜보고 팀원들 코드를 보며 코드리뷰같은 걸 할 수 있을 것 같음)
  • 오른쪽 아래 사진 3개 하나씩 누르면 가운데 사진 있는 곳이나 배경 전체에 사진이 보이게 하기
profile
프론트엔드 개발자

0개의 댓글