🛠️ Refactoring..?
코드는 계속 추가와 수정을 거치는 유지보수과정을 거친다. 미래의 나를 위해, 팀원들을 위해 가독성이 좋게 만들고 추후 서비스가 추가 될 상황을 대비해 확장성이 좋게 만들어야 한다.
새로운 코드를 만드는 것 보다 코드를 수정할 때가 더 힘든 것같다. 이번 과정에서는 수정을 하다가 몇번을 다시 만들고 싶은 마음을 꾹 참고 수정을 했다. 해낸 나 자신 칭찬해👏(그치만 수정도 끝이 아니라는 거..🥲)
🔥 리펙토링 부분
-
console.log 지우기
➡️ 당연히 console.log 지운 줄 알았지만 리펙토링 세션이 끝나고 다시 확인해보니 언젠가 남겨놓았던 console.log가 있었다. 원하는 부분이 작동하면 바로바로 지워주는 습관을 들이기! -
class, id, 변수, 함수의 이름
➡️ css에서 뭐가 가장 힘들었는지 물어본다면 바로 '이름 짓기'다. 도대체 div를 쪼개고 쪼개도 더 쪼개야 하는 상황이 생기다보니 거의 최종.dox, 최종_최종.dox, 최최최최최종.dox 느낌... 추가적으로 class와 id명을 정할 때 유용한 접두사와 접미사들을 정리해서 참고해서 변경하려고 노력했다.
class, id 작명가가 되어보자 -
레이아웃 속성 순서 변경
➡️ 연관된 속성끼리 묶어주는 것은 하고 있었지만 큰 틀에서 작은 세세한 부분으로 순서도 정해주는 것이 좋다고 해서 변경을 했다.
👍권장하는 속성 순서👍
Layout Properties (position, float, clear, display)
Box Model Properties (width, height, margin, padding)
Visual Properties (color, background, border, box-shadow)
Typography Properties (font-size, font-family, text-align, text-transform)
Misc Properties (cursor, overflow, z-index)
-
댓글창 레이아웃 변경
➡️ 댓글을 추가하는 부분을 구현하다보니 height을 주면 댓글이 사라져서 보기 안좋은 것 같았다. 댓글이 추가되더라도 댓글창이 탈출하거나 화면상에서 보기싫게 변경되지 않도록 height을 삭제해주었다. -
스토리 창 overflow 되었을 때 변경
➡️ 하나의 이미지를 구현하기보다는 실제로 동작하는 것 처럼 보이게 만들고 싶어서 overflow: hidden;으로 되어있던 부분을 overflow: scroll;로 변경, 옆에 스크롤바가 보이는게 싫어서 ::-webkit-scrollbar에 display: none;을 추가했다. -
common.css활용
➡️ 과제가 주어졌을 때 login화면과 main화면에서 css가 공통되는 부분을 쓸 수 있도록 common.css 파일을 따로 만들라고 했는데 전체 적용하는 *이나 body 부분을 제외하고는 딱히 쓸 것이 없다고 생각했다.
그때 찾은것이 :root 의사클래스다.
페이지마다 중복되는 border, border-radius, color 등등을 한번에 설정해두고 각각의 css페이지에서 변수값을 넣어주면 나중에 수정하기 무척 용이하다.
✨ 나의 넋두리..?
코드를 새로 짜고 기능을 구현 할 때에는 눈으로 결과물이 보였었는데 수정하는 작업은 시간대비 눈에 보이는 결과물이 없어서 마음이 힘든 작업이었다.
블로그를 쓰다보니 내가 한 부분이 눈에 보여서 마음이 한결 편해졌다. 3개월이라는 기간동안 무에서 유를 창조해야하다보니 마음이 벌써 조급해지는 것 같다.
오늘도 다시 너무 욕심부리지 말고 차분하게 할일을 해보자고 마음을 다잡아본다.
