TIL_221106 웹개발 복습, Git - pull/push, CSS Flexbox
내일배움캠프 4기 스파르타코딩 React B반
📒 오늘의 공부
1. 웹개발 종합반 4-5주차 복습
- 내가 프로젝트에서 맡았던 몽고 DB연결하는 부분 코드를 좀 더 자세히 이해하면서 다시 수업 내용을 복습했다.
- 한 번 더 이렇게 보고 나니까 프로젝트에서 내가 id 선택자 위치 잘못 된 거 더 빨리 알아챌 수 있었겠다 싶었다.
2. git pull, push 연습
- gemstone 팀원 한 분이랑 git pull, push 연습했다.
- 각자 repository 만들어서 번갈아 가며 서로를 collaborator로 추가하고 각자 clone도 해보고 둘이서 계속 pull, push 하면서 놀았다.
중간에 충돌된 것도 merge editor 사용해서 해결하고 약간 카톡하는 것처럼 재밌었다ㅋㅋㅋ
- 내가 팀원 분이 수정해서 올린 내용을 pull 하기 전에 내용을 수정하고 push 한 다음 pull 하니까 충돌이 일어났는데 해결은 금방 됐지만 협업할 때 충돌 안 되게 미리 조율해도 좋을 것 같다!
⭐clone 할 때 명령어 잘 입력해야 함!
git clone 링크 test(clone 파일 넣을 폴더명)
cd test
code .
3. Gemstone 프로젝트 코드 뜯어보기
- 메인페이지부터 하나하나 뜯어보고 내가 모르는 css 속성 나오면 찾아서 공부했다.
- 메인 페이지 하나 index, css 파일 꼼꼼히 보는데 시간 진짜 훅훅 가네!
- 확실히 구역 나누고 분할 하는게 젤 중요.. 경로도 잘 봐야 css 적용도 잘 되는 것 같다!
4. CSS Flexbox 완전 정리 영상
- 드림코딩 youtube 보고 공부했다.
flex-wrap
은 nowrap이 기본값!
justify-content
는 중심축에서 아이템 배치
align-items
는 반대축에서 아이템 배치
baseline
은 아이템들의 text를 기준으로 같은 위치에 배치
- 축은 아이템 정렬이 수평, 수직이냐에 따라 달라 질 수 있다
flex-basis, flex-grow, flex-shrink
로 각 아이템이 공간을 얼마나 차지할 지 정할 수 있음
- align-self는 container에서 지정된 것을 벗어나 아이템 하나만 위치를 바꾸고 싶을 때