221121 TIL

배운 점

1. 파일을 어떻게 분리해야 SPA에 맞게 분리하는 건지를 배웠다

지금 우리조가 하는 프로젝트 url로 들어가면 먼저 애니메이션을 따라 밑으로 내려온 후 로그인하는 창이 보인다 즉 로그인을 한 후에 메인화면으로 접속이 가능하다는 얘기이다 그러면 SPA가 아니라 페이지가 여러개가 되니까 MPA아닌가 하는 생각에 갑자기 혼란스러워졌다
SPA로 프로젝트를 진행해야하는데 이러면 처음부터 다시 짜야하나 아니면 구조를 바꿔야하나 별별 생각을 다 하다가 팀원들에게 물어보고 이해가 안 되어서 튜터님께 다같이 찾아갔다
근데 첫 번째로 나올 화면이나 로그인창은 js로 먼저 구동이 되기 때문에 SPA가 맞았다
그러면 router.js랑 main.js는 왜 있는 건지 갑자기 또 의아해지면서 점점 미궁에 빠졌다 router가 있으면 개별 js파일은 또 왜 있는거지라는 의문과 머리속은 점점 복잡해졌다
그래서 또 튜터님께 물어보고 해결을 했다 router는 말그래도 이쪽으로 가세요라고 말해주는 거였고 메인은 말그대로 index.html이 읽힐 때 실행되는 거였다 아니 router는 미니프로젝트 DB연결했을 때도 접했던 개념인데 또 헷갈리다니...ㅎㅎ 허허...
그렇게 하나씩 물어보고 해결을 한 뒤에 파일을 나누어보니 별 거 아니었다는 생각이 든다
어떻게 파일들끼리 연결되는지 구조를 이해하지 못해서 헷갈리고 어려웠는데 정말 0부터 하나하나 설명해준 제천튜터님 덕분에 이해를 했다
튜터님 짱!!

2. 깃허브 issue

깃허브 issue 창에 맡은 역할 관련 작업할 내용을 쓰고
커밋할 때마다 본인이 쓴 issue창에 있는 이슈번호(#으로 시작하는 번호) 같이 적기로 했다(예시: 글 작성하는 기능을 구현 #1)
사실은 깃허브 프로젝트창이나 튜터님이 알려주신 트롤리같은 걸 쓰고 싶었는데 그거까지 하면 팀원들이나 내가 너무 힘들어 질 거 같아서 그냥 이슈창으로 진행!

3. 파이어스토어 데이터베이스 이름과 class, id규칙 정하기

그렇게 다 셋업하고 ui부터 만들면 되나 싶었는데 끝이 아니었다
다은님이 알려주셨는데 DB이름도 정해야하는 거라고 하셨다
그래서 데이터베이스에서 가져올 큰 틀의 데이터들을 정하고 각 기능별로 가져와야할 데이터들의 이름도 정했다

<post>
제목 title
내용 content
이미지 image
userId
글 쓴 날짜 createdAt
<profile>
nickName 닉네임
babyName 반려동물 이름
description 설명
profileImage 프로필 사진
userId
<comment>
userId(코멘트 쓴 사람)
글에 대한 ID postId
코멘트에 대한 날짜 createdAt

생각보다 생각할 게 은근히 있어서 개발자 아무나 하는 게 아니구나라는 생각이 들었다

그리고 css파일에서 혹시나 클래스나 아이디 이름이 겹칠까봐 각자 앞에 특정 이름을 다음과 같이 붙이기로 하였다

<css id, class 이름 짓는 규칙>
다은: post- 로 시작
진호: login- 로 시작
재영: main- 로 시작
하나: wrtite- 로 시작
재현: profile- 로 시작

4. vscode extension - live share

6조 상현님한테 배워온 익스텐션이다
링크을 통해 vscode파일로 들어가서 코드를 같이 작성할 수 있는 확장프로그램이다 모르는 코드를 같이 해결할 때 쓰기 좋은 확장프로그램이라서 팀원들에게도 소개했다

느낀 점

미니프로젝트 이후 본격적인 프로젝트이다
근데 정말 이렇게 몰라도 모를 수가 없다 자바스크립트 조금 배웠다고 좋아하고 있었지만 좋아할 일이 아니다
어떻게 js로 기능을 구현할지 하나하나 생각해가면서 짜야겠다
이번에 많이 배워가야겠다

복습할 것들

css
js event

내일 할 일

글 작성 css
글 속 이미지 파일 첨부하는 기능 구현