최종적으로 README.md 파일 작성 직전에 만난 깃 충돌..!
이번 팀프로젝트에서의 마지막 충돌 덕분에 이전 커밋으로 돌아가는 법을 배웠다.
❗문제에서 해결까지
마지막에 기능구현하신 팀원분께서 따로 브랜치가 없으셨고, 비교적 최근에 pull 받은 파일로 작업하신게 아니었어서 merge하는 과정에서 오류가 많이 발생하셨다고 했다.
팀원분의 파일은 제대로 구현되셨는데, 기존에 작업하고있던 사람들의 파일들이 다 안되더라!
강제 push 하신것 같다고 하셨는데 나는 이미 pull 을 받은 상태였고, 어떻게든 해결해보려했지만 돌이킬 수 없는 강을 건넌 내 브랜치.. ㅠ 사소한 부분이긴 했지만, 메인페이지 영역에 추가되는거라 한군데가 레이아웃이 깨지니까 전체 배열이 다 흐트러지고 무엇보다 이걸 하나하나 다시 병합할 체력과 시간이..😶🌫️
다행히 깃에대해 피드백을 많이 주시는 팀원께서 해결방안을 제안해주셔서!!
이전에 내가 커밋한 단계로 돌릴 수 있었다.
* 이전 커밋으로 돌아가기.
- git log 했을때 나오는 기록보다 전으로 돌리고싶은데, 그 이전 커밋내역과 해시값 찾는법을 모르겠더라.
그래서 내가 돌리고싶은 커밋내역에 포함된 단어를 검색하는 방법을 이용했다.
git branch: 내 브랜치 위치 확인
git log --grep "검색할단어": 커밋기록중에 검색단어가 포함된 log 를 찾아서 해시값을 복사한다.
git reset --hard 해시값: 입력한 해시값 커밋 위치로 돌아가기
💭 작성자, 이메일로도 검색이 가능할까?
-> YES!
-> 체리픽으로 해당 커밋을 다른 브랜치에 적용할 때도 log --grep 명령어가 유용하게 쓰인다.
체리픽이란? (Cherry-Pick)
git cherry-pick <커밋 해시>: 특정 커밋을 다른 브랜치에 적용할 수 있다.
ex) "master" 브랜치에서 "feature" 브랜치로 커밋을 가져오고 싶다면 다음과 같이 실행한다.
git checkout feature
git cherry-pick <master 브랜치의 커밋 해시>
Cherry-pick은 해당 커밋의 변경 사항만 가져오므로, 브랜치 간 충돌이 발생할 수 있다.
* git log 명령어
--oneline : 커밋 메시지를 한 줄로 간단히 보여줌
--author="name" : 특정 저자의 커밋만 보여줌
--since="2 weeks ago" : 최근 2주 내의 커밋만 보여줌
--until="2023-04-01" : 특정 날짜 이전의 커밋만 보여줌
--graph : 커밋 히스토리를 그래프 형태로 보여줌
💭 기능 구현이 덜 됐을때 어떻게 새로운 느낌을 줄 수 있을까?
-> TMDB에서 api 로 받아오는 영화 데이터가 Toprated 만 있어서 영화 리스트 섹션에 같은 내용들이 보였다. 특히 가로스크롤 자동재생되는부분이 옆으로 이동한다고해도 포스터가 크다보니까,
하단의 영화 카드배열리스트와 똑같은 포스터가 있는게 너무 단조롭더라. 다른 api 받아오면 되긴 하는데..
시간이 별로 없어서 간단하게 바꿀 수 있는 방법이 뭐가있을지 고민하다가 역순으로 배열을 시도해봤다.
* appendChild( ) -> prepend( )
appendChild()는 기존 노드의맨 뒤에 새로운 노드를 추가하지만,
prepend()는 기존 노드의맨 앞에 새로운 노드를 추가한다.
따라서 prepend()를 사용하면 새로운 노드가 기존 노드들의 맨 앞에 위치하게 된다.
간단한 눈속임? 이긴 하지만 영화 리스트가 길다보니, 마치 다른 데이터 받아온거같은 느낌!!
1분만에 바꾼 속성치고 만족도가 너무 높아서 꼭 기록해놓고 싶었다!
💭 firebase 말고 로컬스토리지 쓰는 이유가 뭘까?
-> 중요한 정보가 아니지만, 있으면 사용자에게 편한 정보(최근본상품, 오늘하루 안보기)를 저장한다.
- 브라우저 세션 유지
-> 로컬스토리지는 브라우저를 종료해도 데이터가 유지되므로, 사용자의 로그인 상태나 선호 설정 등을 저장하여 세션을 유지할 수 있다. - 데이터 캐싱
-> 자주 사용되는 데이터를 네트워크 요청 없이 빠르게 데이터를 불러올 수 있다. - 오프라인 사용 지원
-> 로컬스토리지에 데이터를 저장하면 오프라인 상태에서도 웹 애플리케이션을 사용할 수 있다.
* layout shift
- 뒤늦게 로드가 되는 소스로 인하여 화면에서 봤을 때 밀리는 현상을 의미한다.
ex) 버튼과 이미지가 있을 때 이미지 로드가 늦어 처음에는 버튼만 보이게 된다.- layout shift의 원인은 무엇일까?
- 사이즈가 정해져 있지 않은 이미지
- 동적 컨텐츠
- 레이아웃 쉬프트 방지 방법
- 리소스 로드 순서 최적화
- 동적 콘텐츠 추가 시 사전에 공간 확보
- 이미지 크기 사전 지정
- 웹 폰트 사용 시 fallback 폰트 (대체 폰트) 제공
font-family: 'Noto Sans KR', sans-serif; //sans-serif : fallback font - 로딩 UI(스켈레톤) 사용해보기.
- layout shift의 원인은 무엇일까?
💭 레이아웃 변화가 불가피한 경우,
오히려 레이아웃 쉬프트가 발생했을때 광고, 사이트 로고와 같이 사용자에게 각인 시키고 싶은 내용을 보여줘도 되지않을까?
- 부드럽게 전환시키는 느낌으로 로딩이미지가 뜨는동안 각인시킬만한 무언가를 첨부해도 좋을 것 같다.
- 기다리는동안 사용자의 시선중심에 배치해야할 것 같다.
🎈Thinking ..
-> 어플 사용중에 로딩발생시 제일 인상깊었던건 '토스'다.
-> 부드러운 화면 전환이 심플하고, 단계를 알려주는 바가 채워지는데 simple is best 같은 느낌..
-> 그치만 또 너무 심플해서 살짝 비어보이는 느낌도 있었다.
-> 토스의 파란색 / 국민은행의 노란색 / 농협의 초록색같이 로딩 아이콘이 그 사이트의 상징색이나 도형? 을 참고해도 좋을것같다.
-> 예를들어, 직방어플의 사무실 버전인 '네모인'의 경우 아래와 같은 마크인데, 저 마크 대각선이 꺾이기 전에 완전한 사각형이었다가 로딩될때 체크된 부분이 저 모습으로 바뀌는 과정을 천천히 보여줘도 좋을거같다.
-> 피터팬의 좋은방 구하기의 경우 피터팬이 날라다녀도 좋을거같고, 어느 장면은 웬디가 나타나도 좋을거같다!
💡 Get inspired by feedback
- 회원가입시 이메일 인증해보기
- 아이디, 비밀번호 찾기 기능
- 달 모양 누르면 라이트모드 / 다크모드
- 한/영 버튼
- 사진이나 배경에 그림자, 그라데이션으로 부분css 주는것
- capslock 켜진상태 알려주는 기능
- 스켈레톤
* 회고
일주일간의 팀프로젝트가 끝났다.
이번 팀플에서는 협업에 대해 많이 생각해보는 기회가 되었다. 역시 나는 팀플에서 제일 중요한 부분이 피드백, 소통인것 같다. 아직은 내가 조장으로서 부족한 모습이 많다는 생각이 들면서.. 끝까지 함께 소통해주신 팀원분께 감사함을 정말 많이 느꼈다.
본의아니게 강제적으로 발등에 불떨어진 느낌으로 컨디션 생각 안하고 무리했는데 이것 역시 내가 조절해야 되는 부분인데, 어렵다. 피곤함이 쌓이니까 낮시간에 제대로 집중도 안되고 시간활용을 제대로 못한 느낌이라.. 이제 개인과제 주차로 들어서면서 체력관리와 시간분배에 대한 계획도 다시 세웠다!
주말동안 추가적인 개인공부 적당히하면서 컨디션 다시 올리자~~
