2024.12.27 TIL

이틀만에 플젝 준비+이삿짐싸기+집청소+강아지산책 너무 바빴다...

오늘은 개발하면서 어려웠던 점, 잘 안됐던 점들을 상기시켜 보겠다.

---

 

개발한 화면

첫번째 이슈

• 프로필을 적는 오른쪽 카드를 왼쪽으로 조금 붙이고 싶었다. margin을 이쪽 저쪽으로 다 줘보면서 열심히 이동시켜보려했는데 프로필 카드 크기만 커지거나 작아질 뿐이고 꿈쩍도 안함
  • position을 사용해서 상대적으로 위치를 옮겨줌. position을 쓰면 right, left를 사용가능하다. 그래서 left를 써서 위치 이동 성공!
• 두번째 이슈는 사진은 없지만 개발해놓은 프레임에 이미지를 넣으면 카드들의 이미지가 다 제각각으로 보였다. 그게 너무 불규칙해보이고 삐뚤빼뚤해서 수정
  • object-fit:cover를 사용. 이미지의 가로세로 비율을 유지한채로 사이즈를 조절해서 컨테이너안의 이미지를 완전히 채울 수 있게 된다.
  • position:absolute를 써서 이미지를 띄우고 overflow:hidden을 줘서 칸을 넘어가는 이미지를 숨기는 방식. 이걸로도 해봤는데 자꾸 이미지 빈부분이 조금씩 남아있어서 object-fit:cover로 해결함!

세번째 이슈

• 세번째로는 github desktop을 쓰다가 발생했다. 인텔리제이로 스프링 개발을 할 때는 github desktop을 안썼는데 확실히 협업에 좋은 것 같다. 그래서 잘 쓰고 있다가 코드 커밋을 하고 푸쉬하려니 갑자기 이런 알림이 발생
  • 우리 팀의 다른 사람이 푸쉬한 코드를 내가 pull을 안해서 생긴 문제였음. 커밋 취소하고 pull한 뒤에 다시 커밋푸쉬하니깐 해결 완료!