📕 [ TIL ] : 13일차_2022.05.04.(수)

20220504 (WED)_TODAY TIL

✏️ 진행상황

코드를 작성할때마다 받는 피드백이 있었다. 그것은 바로 '리팩토링'이다.
그렇다. 나는 그동안 코드를 작성하기만 해오고 리팩토링을 해보지 않았던 것이다..! 하지만 앞으로는 작성한 코드를 리팩토링 하는것에 익숙해야져야 한다.

리팩토링에 관련하여 서치하는 도중
코드를 끊임없이 리팩토링 하지 않으면 레거시 코드가 된다는 것을 알게 된 이후
리팩토링의 중요성을 깨닫게 된 날이다.

어제 작성한 리드미를 튜터님께 피드백 받은 결과 우리의 역할을 좀 더 세부적으로 나누면 진행이 수월해질 것이라고 하셨다. 그래서 오늘은 팀 내에서 역할분담을 세분화하여 누가 어떤 기능을 맡아서 어떤식으로 작업을 이어나가볼지 정해보는 시간을 가졌다.

각자가 맡은 역할을 트렐로에 남겨본 모습이다.

이는 추후 진행되는 상황을 봐서 변경될수도 있는 사항이다.

그리고 여기서 중요한 점은 한 사람이 한가지 기능을 다 맡아서 다른사람은 그 기능을 구현할 줄 모르는 것이 아니라 모두가 그 기능에 관해 구현할 줄 알아야 하지만 최종 관리자 그 기능에 관해 가장 많이 알아야 할 사람, 도움 요청시 도움을 줄 사람) 를 정한 것이다.

나는 개인프로젝트에서 작업한 프론트앤드 코드(HTML, CSS, JS) 리팩토링과 백엔드면에서는 인스타그램에서 내 페이지의 게시물을 누르면 나오는 화면의 기능을 구현하는 것으로 하였다. 리팩토링해 볼 프론트앤드 코드로는 나와 태인님, 명주님의 코드를 가져오기로 했다.

✏️ 오늘 해 본것

1) 기존에 작성했던 코드를 리팩토링 해보면서 CSS의 Flex부분을 자유자재로 다뤄보는 시간을 가졌다.

2) root를 사용하여 전역변수를 만들었다. (bolder-text부터는 전역변수로 만들지 않아도 되는 사항이지만 flex가 어디에 적용되었는지 보기 쉽게 정렬해보기 위해 사용했다)

3) 이전부터 피드백 받았던대로 클래스의 이름을 통일했다.
(_를 -로 고치고 다른 사람이 알아보기 쉽게 클래스명을 작성해보았다.)

4) Flex 기능을 제대로 사용해보고 싶어서 인스타그램 화면 영역을 다시 나누어보았다.
이는 코드 리팩토링에도 많은 도움이 될것이라 생각이 들어서 진행하게되었다.
다음은 진행 순으로 코드를 분리해 캡쳐해본 것이다.

아직 이와 관련된 코드는 리팩토링 및 아이템 추가면에서 수정이 많이 필요하다.
그리고 Flex 기능은 좀 더 사용해보아야 손에 익을 것 같다.

이외에 인스타그램 카드 부분을 리팩토링해보았다. 이또한 겉으로는 문제없어보이지만 개발자를 위한 가독성 좋은 코드로 재탄생하기 위해 리팩토링이 또 필요해보였다.

앞으로의 목표이기도 한데, 리팩토링과 코드정리에 익숙해질때쯤앤 작업하는 코드를 자세히 리뷰해보는 것이다. 그럴만한 실력을 갖추고 싶다.

아래는 인스타그램 카드를 리팩토링한 사진이다. (겉으로는 다를게 없어보이지만 내부에서는 수정이 많이 일어났다.)

✏️ 느낀 점

리팩토링을 하면서 인상깊었던 것은 CSS 작성시 권장되는 순서가 있다는 것, 리팩토링을하지 않은 코드는 모두 레거시코드가 되어버린다는 것이다.

오늘 쓰인 Flex 기능이나 리팩토링한 내용은 추후 리뷰해볼 예정이다.

카드 부분 리팩토링 전 후 코드를 첨부합니다!
리팩토링 전 코드
리팩토링 후 코드