클린코드란 무엇인가?

1.클린코드란?

클린 코드란 말 그대로 코드를 깨끗하게 짜는 것을 말합니다.

너무나 직설적이고 명확하죠.

인터넷에 클린 코드를 검색하신다면,

많은 결과를 찾으실 수 있습니다.

클린코드를 짜기 위해서, 변수의 이름 짓기, 읽기 쉬운 코드,

후에 다시 보아도 빠르게 이해가 되는 코드,

값을 하드 코딩하지 않고 변수로 만들기.

등의 팁은 자주 들으셨을 겁니다.

정확합니다!!!

그렇다면 저도 그 뻔한 얘기를 하려고 지금 이 글을 작성 중일까요?

제가 스스로 생각하는 클린 코드를 위해 해야 할 일들이

무엇인지 알아보도록 하죠.

무엇보다!!

코드를 클린 하게 짜려면,

코딩을 시작하기 전, 어떠한 요소와 어떠한 기능이

지금의 프로젝트에 필요하고 구현되어야 하는지,

이러한 기능들은 추후 어떻게 다시 활용될 수 있는지 등등

생각하고 구상한 뒤 설계해야 합니다.

그렇다면!!

그 생각과 구상을 어떻게 설계할까요??

대부분 초보 개발자분들이 하시는 실수로,

무작정 프로젝트나 아이디어를 코딩으로

바로 설계 및 구현하시려고 하는 것입니다.

이는 프로젝트와 아이디어가 구현하기 쉽고 이해하기 쉽더라도,

코딩을 바로 시작하기 전 필요한 것이 있습니다.

이를 위해선 먼저 개발자라는 직업을 알아볼 필요가 있습니다.

2.개발자란

개발자란 혼자서 작업하기도 하지만,

협업이 너무너무너무!!! 중요한 직업입니다.

협업에 필요한 능력들은 무엇일까요??

1. 개방적이면서 외향적이고, 다른 사람과 소통할 줄 알아야 합니다.

2. 하루 종일 코딩이 아니라 하루종일 프로젝트와 아이디어에 관해

   대화만 해도 시간이 부족해야 합니다.

3. 코딩을 시작하기 전 UML을 이용해야 합니다.

4. Feedback 주고받아야 합니다.

5. 때로는 집요해야 합니다.

이 대부분의 능력은 사실 협업이 아닌 혼자서 일하더라도 중요한 것들입니다.

그리고 이 모든 능력을 제대로 사용하기 위해 UML이라는 것이 필수입니다.

UML이란 Unified Modeling Language의 약자로.

프로그래밍을 위해 꼭 필요한 다이어그램들을 모아놓은 것입니다.

(끝에 Language라고 되어있어 프로그래밍 언어 같은 걸로 착각할 수 있으나 아닙니다.)

즉 코딩을 하기 전 프로젝트 혹은 아이디어를 다이어그램으로 표현하여,

필요한 요소, 기능들을 한눈에 알아보기 쉽게 그리고 명확하게 해주는 것이

UML입니다.

UML을 만들면 나 자신뿐 아니라 협업하는 모든 동료들에게 이해하기 쉽고,

정확하게 각각의 요소와 기능들을 설명할 수 있습니다.

또한 후에 언제든지 돌아와 코드만 읽고 이해하는 것보다

UML을 통해 기능을 파악하고, 코드를 보는 것이 훨씬 더 좋습니다.

즉 개발자는 주야장천 코딩만 하는 직업이 아닙니다.

팀원과 협업을 위해 많은 대화와 회의를 나누어야 하며,

소통해야 하고 그 소통을 원활하고 명확하게 하기 위해,

UML이 필요합니다.

또한 Documentation 즉! 프로젝트나 아이디어를

문서화하는 것도 개발자로서 아주 중요한 능력입니다.

UML 너무너무너무너무!!! 중요해요!!

UML과 Documentation은 클린 코드를 위해, 코딩을 위해

첫 필수 요소입니다.

3. 클린 코드 왜 필요한가?

클린 코드가 왜 필요할까요??

간단합니다.

이미 언급했듯이,

누가 언제 봐도 이해하기 쉽게 만들기 위해서입니다.

그리하여 이해하기 쉽게 코드를 짜려면,

UML을 작성하여, 명확히 어떤 요소와 기능이 아는 것이 필요하고,

그로 인해 코드에 불필요한 부분을 최소화시킬 수 있습니다.

하지만 우리는 기계가 아니죠.

우리는 십중팔구 코드를 다시 손보게 될 것입니다.

하지만 UML 없이 코딩하여, 개발자 조차 이리저리 찾으러 다니고,

변수와 함수 이름을 바꾸고 코드를 최적화하는 것보다,

UML을 작성하여, 처음부터 훨씬 더 명확하게 변수와 함수 이름을 짜 후작업을 줄이고,

필요에 따라 언제든지 좀 더 빠르게 코드의 동작 원리를 이해하실 수 있습니다.

그리고 이 모든 능력을 제대로 사용하기 위해 UML이라는 것이 필수입니다.

UML이란 Unified Modeling Language의 약자로.

프로그래밍을 위해 꼭 필요한 다이어그램들을 모아놓은 것입니다.

(끝에 Language라고 되어있어 프로그래밍 언어 같은 걸로 착각할 수 있으나 아닙니다.)

즉 코딩을 하기 전 프로젝트 혹은 아이디어를 다이어그램으로 표현하여,

필요한 요소, 기능들을 한눈에 알아보기 쉽게 그리고 명확하게 해주는 것이

UML입니다.

UML을 만들면 나 자신뿐 아니라 협업하는 모든 동료들에게 이해하기 쉽고,

정확하게 각각의 요소와 기능들을 설명할 수 있습니다.

또한 후에 언제든지 돌아와 코드만 읽고 이해하는 것보다

UML을 통해 기능을 파악하고, 코드를 보는 것이 훨씬 더 좋습니다.

즉 개발자는 주야장천 코딩만 하는 직업이 아닙니다.

팀원과 협업을 위해 많은 대화와 회의를 나누어야 하며,

소통해야 하고 그 소통을 원활하고 명확하게 하기 위해,

UML이 필요합니다.

또한 Documentation 즉! 프로젝트나 아이디어를

문서화하는 것도 개발자로서 아주 중요한 능력입니다.

UML 너무너무너무너무!!! 중요해요!!

UML과 Documentation은 클린 코드를 위해, 코딩을 위해

첫 필수 요소입니다.

4. 어떻게 깨끗한 코딩을 하는가?

우리는 목차 2에서 개발자에 관해 알아보았습니다.

그리고 UML과 문서화가 얼마나 중요한지 알아보았습니다.

자!! UML을 작성한다면, 우리는 어떤 요소가 필요하고,

어떤 기능이 필요한지 알게 됩니다.

그 말은 즉 코딩을 하면서 어떤 요소와 기능이 구현되어야 하는지

알고 가는 것입니다.

거의 뭐... 오픈북으로 코딩하는 것입니다.

각각의 변수와 기능들이 어떻게 코딩되어야 하는지 안다는 것은

변수와 기능의 이름을 좀 더 명확하고 쉽게 지을 수 있다는 뜻입니다.

그리고 파라미터, 기능의 종류들도 세세히 알 수 있다는 뜻입니다.

팁!! 변수와 함수의 이름을 짓는 방법은 없습니다.

하지만 몇 가지 팁은 있습니다.

• 동사를 이용할 것.

• CamelCase를 사용할 것 (하지만 언어에 따라 다를 수 있습니다.)

• 너무 길게 짓지 않기.

  등등

예제1. 동사를 이용할것

1. 동사를 이용할 것

// 이렇게 짓는것보다.
const checker = false;
const studentName = () => {};

// 이렇게 짓는것이 좋습니다.
const isChecked = false;
const getStudentName = () => {};
// 혹은
const loadStudentName = () => {};

이렇게 is, get 혹은 load라는 동사를 먼저 사용하여 변수 혹은 함수가

어떻게 작동하는지 조금 더 쉽고 명확하게 표현 가능합니다.

2. CamelCase를 사용할 것.

// 이것보다.
const studentname = "Mike";
const Studentname = "Mike";
const StudentName = "Mike";

// 이렇게 사용해주세요.
const studentName = "Mike";

많은 개발자들이 CamelCase를 사용하지만,

언어에 따라 달라질 수 있습니다.

사용법은 동사 혹은 명사가 따라올 때 대문자로 시작하는 것입니다.

3. 너무 길게 짓지 않기.

길게 짓지 않는다는 건 딱히 예시를 필요로 하지는 않겠죠??

조건문 반복문 최적화!!

또한 코드를 최적화시키는 것이 필요합니다.

하지만 이는 UML보다는 짬에서 나오는 바이브가 필요합니다.

조건문 혹은 반복문 등등을 최적화시키고,

짧게 만드는 것입니다.

예시를 보시죠.

// 조건문
const name = "Josh";

if(name === "Josh") {
    console.log("Hello" + name);
}else {
    console.log("Bye" + name);
};

//-----------------------------------------

//반복문
const name = ["Josh","Mike","Michael"];

for(let i = 0; i < name.length; i++){
    console.log(name[i]);
};

위의 코드는 초보자들이 쉽게 쓰는 방법이며, 아래는 조금 더 중 상급자가 자주 쓰는 형태입니다.

// 조건문 최적화
const name = "Josh";

name === "Josh" ? console.log("Hello" + name): console.log("Bye" + name);

//----------------------------------------------------

// 반복문 최적화
const name = ["Josh", "Mike", "Michael"];

name.forEach(element => console.log(element));

정확히 같은 동작을 수행해도 이렇게 짧게 만들 수 있습니다.

조건문 혹은 반복문을 사용하시기 전

미리 제공되는 함수들을 찾고 사용해보세요.

코드가 훨씬 쉬워지고 짧아집니다.

또한 한 파일에 코드를 너무 많이 쓰지 않는 것도 좋습니다.

저는 리액트로 개발할 때 한 JS파일 당 100줄이 안되게 작성하려 노력합니다.

함수는 한 가지만 실행!!

함수는 가능하면 한가지 동작만 수행하는 것이 제일 이상적입니다.

그렇지 않으면 순식간에 스파게티 코드처럼 꼬일 수 있습니다.

정 필요하시다면,

여러 함수들을 만드시는 것이 좋습니다.

예를 들면 API를 가져오는 함수 안에 또 다른 기능을 넣기보다는,

API 그 자체만을 가져오는 함수를 구현하고

추가로 다른 함수를 하나 더 만드는 것을 의미합니다.

파라미터 이름을 너무 짧게 짓지 않기.

예전에는 짧게 지어야 했습니다.

메모리와 컴파일 시간을 최소한으로 사용하고 줄이기 위해서 말이죠.

하지만 이제는 그럴 필요도 없고, 보기에도 불편합니다.

const getStudent = (c,r,u,n) => {
    console.log(c);
    console.log(r);
    console.log(u);
    console.log(n);
}
getStudent("Korea","Seoul","Seoul University", "Hong Gil Dong");

저 c, r, u, n이 무엇 인기 알기 쉬우셨나요??

c는 city, r는 region, u는 university, n은 name이었습니다.

예상하기 너무 어렵고 추가 설명이 없다면 알아차리기도 힘들었을 겁니다.

이제는 이렇게 작성하실 필요가 없습니다.

아래와 같이 당당하게 써 줍시다.

메모리, 컴파일 걱정할 필요 없잖아요??

저렇게 명확히 적어 이해하기 쉬운 게 더 중요합니다.

(하지만 당연히 너무 길다면 약자나 짧게 바꿔주시는 게 좋습니다.)

const getStudent = (city, region, university, name) => {
    console.log(city);
    console.log(region);
    console.log(university);
    console.log(name);
}
getStudent("Korea","Seoul","Seoul University", "Hong Gil Dong");

5. 어떻게 습관화시키는가?

무엇보다 많이, 자주, 꾸준히 코딩을 하다 보면 감이 오실 것입니다.

하지만 먼저 언어의 Document를 한번 읽어 보시는 것도 좋은 방법입니다.

기본으로 내장된 함수들이 워낙 많아서,

잘 찾아서 쓰신다면 코드의 길이도 줄이시고,

Syntax 혹은 Operator를 이용하여 코드를 세련되게 만드실 수도 있습니다.

그리고 다른 사람들의 코드도 자주 들여다보면 좋습니다.

누가 어떻게 작성하였는지,

어떤 부분을 왜 이렇게 작성했는지를 파악하고 사용할 수 있기 때문입니다.

6. 마치며

클린 코드에 법칙은 없는 듯합니다.

하지만 팁은 있죠.

회사마다 개인마다 코딩하는 방식은 다 다릅니다.

하지만 이러한 팁이 있음으로 누군가는 다른 누구의 코드를 혹은 오래된 코드를

좀 더 빨리, 쉽게 이해하고 사용 혹은 변경 가능하게 되는 것입니다.

제가 말씀드린 예시 외 많은 방법들이 있습니다.

그리고 꼭 UML을 작성하시는 것을 추천드립니다.

나 스스로 이해하기 쉽고, 다른 누군가에게도 이해시키기 쉬우며,

붕뜨지 않고 단도직입적으로 문제를 해결, 접근할 수 있습니다.

클린한 코드, 정확한 코딩과 스텝을 위해 꼭 필요한 친구입니다.

오늘은 클린 코드에 관해서 알아보았습니다.

항상 짧고 쉽게 초보자분들께 전해드리고 싶어,

이것저것 적다 보면 이미 긴 글이 돼있긴 하지만요....

항상 꾸준히 하는 게 중요합니다.

저 또한 공부하는 입장에서 여러분들과 이렇게

꾸준히 알아가고 정보 제공을 하고 싶습니다.

항상 시작이 반입니다.

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.