[Pre-Project] Day 5 - 왜 우리의 CSS가 적용되지 않을까..(+ css, pull 오류 파티 해결)

📍 Pre-Project, Day 5

사실 5일차는 팀원분들과 각자 맡은 css 작업을 merge 하고 정리만 해서 백엔드 분들에게 공유하는 것을 예상했는데, 생각치도 못한 오류들을 끝도 없이 만나고 다같이 왜 그럴까 무엇일까 고민하고 찾는 시간이었다... 정말 시간이 오래 걸렸지만 원인을 찾았고, 생각해보니깐 별 것 아니였지만 찾은 우리는 너무 기뻤고 한 단계 성장하는 느낌이 들었다.

✍🏻 적용되지 않는 CSS

→ 각자 작업한 CSS를 merge 한 후 다시 pull를 해오니 component로 작업한 footer가 위와 같이 적용이 되어야하는데, 일부 팀원들이 작업한 페이지에서는 위와 같이 제대로 적용이 되었는데...

→ 하나씩 확인해보니 일부 팀원들이 작업한 페이지의 footer는 새롭게 작업한 컴포넌트가 적용되지 않고, 여전히 이전에 작업했던 footer로 되어있는 문제점을 발견할 수 있었다.

왜 그럴까, pull과 push, 그리고 merge 하는 과정에서 문제가 생긴 것인지 다시 해보았고, 에러나 충돌 메세지가 뜨지는 않았는데 무엇이 문제인지, 팀원들과 몇 시간을 고민했는데.. 결국 원인을 찾았고 해결했다..!

→ 혹시 팀원들간 서로 작성한 className이 겹치는 것인가 모든 className을 확인하고 수정했어도 문제가 해결되지 않았는데.. 문제는 바로 문제가 생긴 페이지들의 공통점이었던 Editor였다.

팀원분이 사용했던 Editor에 있는 className이 겹쳐서 문제가 생긴 것을 알게 되었다. Editor를 제거해보니 새롭게 작성한 footer css가 제대로 적용되고 있는 것을 볼 수 있었다..

✍🏻 또 다른 오류.. 이번에는 작동하지 않는다

→ 이제 모든 문제는 해결되었다고 생각하고, 다시 dev branch에 merge 후 다시 pull을 해와서 모든 것이 제대로 작동하지는 확인해보는데, 그 동안 문제가 없었던 Header 컴포넌트가 작동하지 않는 것을 확인할 수 있었다

그 동안 문제가 없던 부분이라 모두 당황했는데 그 사이 에러에 익숙해진 우리는 생각보다 빠르게 원인을 찾았다


→ 문제는 바로 다른 팀원분이 작업한 Top Qusetions의 margin이 header의 input 창과 login, sign up button을 덮어버려서 기능이 작동하지 않았던 것이다.

• margin을 줄여서 해결했고,
• 여기서 우리가 각자 페이지와 컴포넌트로 나눠서 작업하기 전에
  Layout을 잡고 가지 않아서 이런 문제들이 계속 생겼던 것이였다.
• 우리는 각자 작업을 하고, 나중에서야 Layout을 만들면서 작업을 했다.
• 다음부터는 Layout을 먼저 충분히 고민하고 설정하고 작업에 들어가자!

✍🏻 결국.. grid로 바꾸기

→ 또 다른 새로운 문제, 전일 해결했다고 생각했던 로컬 환경에 따라 다르게 보이는 문제는 아직 남아있었다.

결국 위와 같이 grid로 작업하기로 하고, min-width를 줘서 화면이 줄었을 때 모습까지도 고려해서 수정했다.

→ 이렇게 해주니 어떤 환경에서 봐도 3분할로 자리를 차지하고, 아래 그림처럼 화면의 폭을 줄이면 나중에는 input 창만 보이는 것이 정상적으로 되었다.

이전까지 flex만 사용했는데, 이번 기회에 grid도 사용해보면서 grid를 왜 사용하는지 등 이해도가 생긴 것 같아 오히려 좋다

✍🏻 병합하기 전에 변경 사항을 커밋하거나 스태시하십시오

→ 중간에 꽤나 자주 마주했던 오류 메세지이다.

이것은 로컬 환경에서 수정사항이 있는데 push를 하지 않고 pull을 해와서 생긴 문제였기 때문에, 이 경우에는 먼저 branch에 push를 하고 나서 다시 pull를 해오면 문제를 해결할 수 있었다.

👉🏻 차일부터는 소셜 로그인을 구현할 예정이다.