클래스이름 container를 top_container로 바꾼 후
%로 바꾸고 반응형인데도 왜 자꾸 컴포넌트가 움직이지???
처음엔 Rem으로 CSS를 작성했었는데 이상하게 자꾸 깃 리파짓토리로 머지하고 보면 내가 만든 컴포넌트가 다른 곳에 이동해있었다.
도대체 왜 머지할 때마다 자꾸 위치가 바뀌지..?
자꾸 다른 컴포넌트를 침범하고 디자인도 안 이뻐서 머지할 때마다 다시 맞춰서 바꿔주었고 계속 바꿔줘야하니 스트레스였다.
같이 머지 할 때마다 화면에 내 컴포넌트들이 어떻게 변할지 무서웠다.
레이아웃을 늦게 설정해서 그런가??
이렇게 팀을 이뤄서 같이 pull request하고 Merge하는 경험이 처음이라 미숙해서 각자 맡은 페이지를 만들면서도 실수가 잦았다.
보통은 순서 실수였는데 레이아웃을 먼저 만들고 컴포넌트들을 만드는 순서여야하는데 각자 페이지를 만들다보니 순서가 거꾸로 되어버린 것이다.
각 페이지의 컴포넌트를 다 만들고 -> 레이아웃을 뒤늦게 설정하다보니 CSS가 뒤엉켜 다시 조절해서 맞게 만들어야했다.
이 과정에서 잠도 잘 못 자고 똑같은 CSS에서 계속 %로 숫자만 바꾸기를 여러번..
도대체 프론트엔드개발자들은 자꾸 변하는 이 %를 어떻게 고정하나 싶고 레이아웃을 포기하고 그냥 페이지별로 다 넣어야하나 싶었다.
알고보니.. 변수명 중복이었다..!
레이아웃을 포기해야하나 라는 생각이 드는 순간에.. 생각해보니 각자 페이지에 똑같은 이름의 변수명이 너무 많았다.
같이 팀원들끼리 개발자도구로 확인해보니 저페이지 이페이지 다 변수명이 같으니 자꾸 그 CSS가 다른 페이지를 침범하고 그 컴포넌트들이 아무리 고정시켜도 제멋대로 움직이는 것이었다..!!!
많이 쓰이는 것 같은 변수명은 다 변경해보자!
container, mainbar , sidebar 이렇게 누구나 쓸 수 있는 변수명은 Tags_container 이런 식으로 모두 바꾸기로 했다.
팀원들이 동시에 변수명 변경 작업을 하고 다시 합치고 npm run dev를 하니... 마법처럼.. CSS는 고정되어 이쁘게 화면에 나타났다!!
며칠을 고생했던 변수명 중복..
다시 잊지 못할 것같다.. 이제 트라우마 생겨서 뭔가 중복될 것 같으면 다 바꿔야한다는 큰 깨달음을 얻었다!!
그래도 지금이라도 알아서 다행이다는 생각이 들었다.
몰랐으면 몇 주 아까운 시간 버릴 뻔했다..
