[Refactoring] Self Refactoring

Refactoring 이란,
겉보기 동작은 그대로 유지하고, 코드를 이해하고 수저하기 쉽게 내부 구조를 변경하는 것으로써,

리펙토링을 하는 이유는

• 유지보수를 하기 좋게 바꾸도록 refactoring
• 코드의 가독성 및 확장성이 좋아야 소프트웨어를 계속해서 변화 시킬 수 있다
• legacy code 들은 잘못 건드리면 사고가 발생 할 수 있기 때문에 refactoring을 통해서 코드를 재정리 하는 것이다

Self Refactoring

1. console.log 를 이용해서 테스트를 했다면 해당 테스트는 꼭 지워야 합니다

2. 변수 이름을 보기 쉽게, 이 변수가 어떤 것에 대한 변수다 라는걸 한번에 알수 있도록 지어주면 좋다

3. 들여쓰기를 해라, 코드 작성을 하다보면 들여쓰기를 해서 개발자의 가독성을 높여주는 것이 중요하다

4. 시멘틱 태그를 사용하자, 현대에는 웹의 많은 발전으로 인해서 여러가지 기능을 하는 것이 많다 그러므로 시멘틱 태그를 사용해서 컴퓨터가 더 임무를 잘 수행 할 수 있도록 하는 것이 좋다,
   예를 들면 시각장애인이 웹에 접근했을 때 스마트 스캐너 같은 경우, 시멘틱 태그에 따라 현재 문서의 제목도 알 수 있고, 내용도 짐작 할 수 있도록 하는 것이다

5. img tag의 alt 속성을 지정하라, img tag 추가시, src에 대한 정보를 위주로 넣고, alt 속성을 잊어버리고 넘어가는 경우가 많은데 프로그램에는 이상이 없지만 이것도 위의 시멘틱 태그와 마찬가지로 스마트 스캐너 같은 경우 이미지를 표현 할때 alt에 저장된 속성을 사용하니 되도록 지정을 해주는 것이 옳다

6. self closing tag를 사용할 때, </>기호를 사용해서 닫아주는 경우 가 있는데, 작동상 이상은 없지만 굳이 내용이 들어갈 자리가 없는데, 닫아주는것은 비효율 적이다

7. css 속성 순서를 신경 써야 한다, 속성을 나열하는 순서는, 페이지의 영향력이 큰것 부터 위에 놓는 것을 추천한다 가독성을 위해서 정렬하는 순서는 꼭 맞춰주면 좋다

8. 다른 css 선택자들 끼리 공백 주기는 코드가 길어짐에 따라서 다 붙어있는 것 같은 느낌이 들어서, 한줄씩 공백을 추가한 후 가독성을 높이는 걸 추천한다

9. 불필요한 style 속성 작성을 지양 해야 한다, 보통 속성의 default 값이 있지만, 그 default 값을 지정하는 것은 불필요한 코드를 늘려 가독성을 해칠 뿐이다

10. 레이아웃은 bottom-up 방식으로 구성한다, 자식요소의 크기를 먼저 정하고, 부모요소의 크기를 유동적으로 하는것이 좋다 왜냐면,
    • 자식 요소가 늘어날 경우 유동적으로 구성했다면, 페이지의 구역을 넘어간다던가 하는것이 없어짐
    • 바텀업 방식으로 구성한 경우 확장성이나 유동성이 좋기 때문에 추가 확장하는 작업에 도움이 많이 된다

self refactoring

내가 코드를 짜던 프로젝트에 위의 10가지 사항을 생각해 보면서 self refactoring 을 진행하였는데, 아직 어지럽지만, 그 전의 난잡했던 코드들이 한층 정리된 느낌이 있었다
self refactoring도 꾸준히 내 코드를 겉보기 효과들을 유지하면서 하는 연습을 하게 되면
실제 코드를 짤 때 많은 도움이 될거 같다