Peep

클린코드 - 02. 의미있는 이름

의도를 분명히 밝혀라

변수(혹은 함수나 클래스)

• 존재이유?
• 수행기능?
• 사용방법?

이 모든 것을 답하기 위해 주석이 필요하다면 의도를 분명히 드러내지 못했다는 뜻.

그릇된 정보를 피하라

그릇된 단서는 코드의 의미를 흐린다

• 나름대로 널리 쓰이는 의미가 있는 단어를 다른 의미로 사용해도 안된다
  • 실제 컨테이너가 List가 아닐 경우 List로 명명하면 그릇된 정보를 제공하므로 이렇게 명명하지 않는다
  • 실제 List여도 컨테이너 유형의 이름에 넣지 않는 것이 바람직하다
• 유사한 개념은 유사한 표기법을 사용한다
  • 이름만 보고 정보를 추측하기 때문에 일관성이 떨어지는 표기법은 그릇된 정보다
  • 연관성이 없는 것에 대해 비슷한 단어를 사용했을 경우 연관이 있다고 생각하는 오류를 범하기 때문에 흡사한 이름을 사용하지 않는다.
• I과 O는 숫자와 유사하기 때문에 그릇된 정보가 될 수 있다

의미있게 구분하라

단순 컴파일러나 인터프리터를 통과하는 네이밍은 문제를 일으킨다.

• 연속적인 숫자를 덧붙이지 않는다
  • a1, a2, ....aN
  • 의도적인 이름과 정반대이며 아무런 정보를 제공하지 못하는 이름이다
  • 저자의 의도가 드러나지 않는다
• 불용어를 추가한 이름은 아무런 정보도 제공하지 못한다
  • Info, Data는 a, an, the와 마찬가지로 의미가 불분명한 불용어이다
    • 접두어를 사용하지 말라는 소리가 아니다
    • Name, NameString에서 Name은 String일 확률이 대부분 이므로 불용어다
    • customerInfo - customer, accountData - account, TheMessage - message와 구분이 안되기 때문에 차이를 알 수 있도록 한다 

발음하기 쉬운 이름을 사용하라

발음하기 어려운 이름은 토론하기도 어렵다

• 긴 단어를 합쳐서 줄임말로 쓸 경우 의사소통에 문제가 생길 수도 있다

검색하기 쉬운 이름을 사용하라

문자 하나를 사용하는 이름(짧은)보다 길더라도 검색해서 찾아내기 쉬운 이름이 좋다

• e로만 검색할 경우 무수히 많은 검색 결과가 나온다
• 버그가 있을 경우 찾기 쉬운 이름이 짧은 이름보다 때론 좋다

인코딩을 피하라

• 헝가리식 표기법
  • 에디터 등의 발전으로 변수 이름에 타입을 인코딩할 필요가 없다
  • 타입을 바꾸기가 어려워지고 읽기도 힘들다
  • 독자를 오도할 가능성도 커진다
• 멤버 변수 접두어
  • 클래스와 함수는 접두어가 필요없을 정도로 작아야한다
• 인터페이스 클래스와 구현 클래스

자신의 기억력을 자랑하지 마라

• 코드를 읽으면서 변수 이름을 자신이 아는 이름으로 변환해야한다면 바람직하지않다
  • 일반적인 변수 이름이 아니었기에 생기는 문제
• 문자 하나만 사용하는 변수 이름은 문제가 있다
  • 루프에서 범위가 작고 다른 이름과 충돌하지 않을 때는 괜찮다
    • 루프에서 반복 횟수 변수는 전통적으로 한 글자를 사용하기 때문에...
  • a와 b를 사용한다고 가정했을때 c를 선택해 사용한다면 최악이다

클래스 이름

• 명사나 명사구가 적합하며 동사는 사용하지 않는다.
• Manager, Processor, Data, Info 등과 같은 단어는 피한다

메서드 이름

• 동사나 동사구가 적합
• Javabean 표준에 따라 값 앞에 get, set, is를 붙인다

기발한 이름은 피하라

• 의도를 분명하고 솔직하게 표현해야한다

한 개념에 한 단어를 사용하라

• 추상적인 개념 하나에 단어 하나를 선택해 이를 고수한다
  • fetch, retrieve, get | controller, manager, driver으로 제각각 쓰면 혼란스럽다
• 이름이 다를 경우 당연히 클래스, 타입도 다르다 생각한다

말장난을 하지마라

• 한 단어를 두 가지 목적으로 사용하지 마라
  • add가 하나의 값에 더한다는 의미라면 집합에 값을 추가하는 경우에는 add보다 insert나 append라는 이름을 사용한다

해법 영역에서 가져온 이름을 사용하라

기술 개념에는 기술 이름이 가장 적합한 선택이다

• 전산 용어, 알고리즘 이름, 패턴 이름, 수학 용어 등을 사용해도 괜찮다

문제 영역에서 가져온 이름을 사용하라

'프로그래머 용어'에 없다면 문제 영역에서 이름을 가져와도 괜찮다

의미있는 맥락을 추가하라

스스로 의미가 분명한 이름이 없지 않다

• 접두어를 붙인다
  • firstName -> addrFirstName이라는 접두어를 통해 주소의 일부라는 사실을 분명히한다

불필요한 맥락을 없애라

애플리케이션 네임을 모든 클래스의 이름의 시작에 넣는 것은 바람직하지 않다

문헌

클린코드 - 로버트 C. 마틴

클린코드 - 01. 깨끗한 코드

원초적 난제

기한에 맞추려면 나쁜코드를 양산할 수 밖에 없다고 느낄 것이다.

하지만 코드를 최대한 깨끗하게 유지하는 습관이 기한 맞추는 유일한 방법일지 모른다.

깨끗한 코드라는 예술?

"깨끗한 코드가 무엇일까?"

"어떻게 작성할까?"

'깨끗한 코드'가 무엇인지 조차 모른다면 노력해봤자 소용없다.
하지만 이 말이 '깨끗한 코드'와 '나쁜 코드'를 구분할 줄 알아야만 '깨끗한 코드'를 작성할 수 있다는 의미는 아니다.
‘코드 감각’이 있다면 개선할 방안이 떠오를 것이다.

다만 '코드 감각'은 누군가는 타고날수도 있고 누군가는 경험을 통해 얻을 수도 있다. 

깨끗한 코드란?

비야네 스트롭스트룹

"우아하고 효율적인 코드를 좋아한다."

우아하고 효율적인 코드를 좋아한다. 효율적인 코드는 단순 속도만을 의미하지 않고 CPU의 자원또한 포함할 것인다.

함수가 너무 많은 일을 할 경우 의도가 뒤섞이고 목적이 흐려진다. 한가지를 제대로해야하며 논리가 간단해야 버그가 숨어들지 못한다. 또한 서로에 대한 의존성을 줄여야 유지보수가 쉬워진다.

많이 놓치는 오류처리, 메모리누수, 경쟁상태, 일관성 없는 명명법 등도 신경써야하며 오류는 전략에 의거해 처리한다. 

성능을 최적으로 유지해야만 원칙없는 최적화를 하지않게된다. 원칙없는 최적화는 코드를 망칠 확률이 있다.

그래디 부치

"깨끗한 코드는 단순하고 직접적이다. 
가독성을 강조하고 잘 쓰여진 문장처럼 읽혀야한다."

깨끗한 코드는 단순하고 직접적이다. 

가독성을 강조하여 잘 쓰여진 문장처럼 읽혀야하며 설계자의 의도를 숨기지 않고 명쾌한(사실에 기반하여) 추상화와 단순한 제어문을 사용한다.

*명쾌한: 힘차고 단호하고 사실적인

데이브 토마스

"테스트 없는 코드는 깨끗한 코드가 아니다."

작성자가 아닌 사람이 읽기는 물론 고치기도 쉬울만큼 가독성 있는 코드가 깨끗한 코드이다.

읽기 쉬운 것과 고치기 쉬운 것은 엄연히 다르다.

테스트 주도 개발(TDD)이 오늘날 가장 근본적인 원칙 중 하나가 된 것을 보아라, 테스트 없는 코드는 깨끗한 코드가 아니다.

- 의미 있는 이름을 붙이고 목적을 달성하는 방법을 하나만 제공하라.

- 의존성은 최소로하고 각 의존성을 명확히 정의한다.

- API는 명확하며 최소로 줄인다. 최소는 큰 코드보다 작은 코드에 가치를 둔다는 의미로 코드는 작을 수록 좋다.

- 언어마다 모든 정보를 코드만으로 표현할 수 없기에 코드는 문학적(인간이 읽기 좋게)으로 표현해야한다

마이클 페더스

"깨끗한 코드란 언제나 누군가 주의 깊게 짰다는 느낌을 주며
고치려봐도 손 댈 곳이 없다."

론 제프리스

"중복이 없으며 간단한 코드, 단순한 코드 규칙으로 시작하고 끝낸다."

초반부터 간단한 추상화를 고려하며 시스템 내 모든 설계 아이디어를 표현한다.

의미 있는 이름으로 명명하며 객체나 메서드가 여러 기능을 수행한다면 여러개로 나누고 클래스, 메서드, 함수 등을 최대한의 크기로 줄인다.

모든 테스트를 통과해야한다.

워드 커닝햄

"코드가 그 문제를 풀기위한 언어처럼 보인다면 아름다운 코드라 불러도된다."

코드를 읽으면서 짐작했던 기능을 각 루틴이 그대로 수행한다면 깨끗한 코드다.

우리들 생각

"깨끗한 변수 이름, 함수, 클래스"

결론

책을 읽는다고 뛰어난 프로그래머가 된다는 보장은 없다.

그저 뛰어난 프로그래머가 생각하는 방식과 그들이 사용하는 기술, 기교, 도구(경험적 교훈, 체계, 절차, 기법 등)를 소개하는 것을 보고 난 이후는 본인들이 하기 나름이다.

“연습해, 연습!”

문헌

클린코드 - 로버트 C. 마틴

서론

프로젝트에서 openAPI를 호출해서 사용하는 부분이 있었는데,

아니나 다를까 교차 출처 리소스 공유(CORS, Cross-origin resource sharing) 에러가 발생하였습니다.

(당연한거슬..)

자 그래서 이 문제를 천천히 해결해보았는데요..

일단 CORS 에러가 발생하는 이유는 브라우저는 서로 다른 도메인에 대한 요청을 보안상 제한하기 때문입니다.

즉, 내 사이트 (http://okayoon.com)에서 openAPI (https://api.ipify.org)로 요청을 하게 되는 경우 다른 도메인이기 때문에 CORS 에러가 발생합니다. 

그 다음 왜???? 제한하는지 간단히 이해하고 넘어가겠습니다.

JSON은 단순 데이터만이 아닌 Javascript 자체도 전달할 수 있는데, 이럴 경우에 해커나 나쁜사람들이 악성 스크립트를 보낼 수 있기 때문입니다. 그렇다면 정말 위험해 질 수 있겠죠.

그렇기 때문에 저의 상황에서는 당연히 CORS 에러가 발생했고,

이 문제를 해결하기 위해 JSONP 사용하도록 하겠습니다. 

그전에 JSON과 JSONP에 대해 간단히 알아보고 가겠습니다!

JSON (Javscript Object Notation) 

JSON은 '속성-값' 쌍 또는 '키-값' 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷입니다.

- 위키백과

예시

{
  "user": [
    {
      "name": "suzy",
      "age": "17"
    },
    {
      "name": "sunyoung",
      "age": "20"
    }
  ]
}

JSONP(JSON-P, JSON with Padding)

JSONP는 클라이언트가 아닌 각기 다른 도메인에 상주하는 서버로부터 데이터를 요청하기 위해 사용됩니다.동일-출처 정책을 우회하는 데이터의 공유를 가능하게 합니다.HTML <script> 요소는 외부 출처로부터 조회된 내용을 실행하는 것이 허용되어 있습니다.이러한 웹 브라우저의 특성을 이용해 JSON 데이터를 클라이언트가 지정한 콜백 함수를 호출하는 유효한 Javascript 문법으로 감싸 클라이언트에 전송합니다. 
외부 서비스는 JSON 데이터를 패딩하여 클라이언트에 보냅니다.

parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});

웹 브라우저는 이 데이터를 유효한 JavaScript 프로그램으로 받아들여 실행하고, 콜백 함수인 parseResponse가 실행되며 받아온 데이터를 처리할 수 있게 됩니다.

- 위키백과

즉, 브라우저에서 <script> 요소는 다른 도메인(스크립트 파일)에 임베드할 수 있기 때문에 보안상 제한되는 부분에 해당하지 않습니다. 그래서 JSONP는 이것을 이용해서 JSON 데이터를 한번 감싸서(padding) 클라이언트에 전송합니다.

JSONP는 jQuery에서 $.ajax() 스펙을 이용해서 간단히 구현할 수 있지만, axios에서는 지원하지 않기때문에 따로 JSONP 모듈을 설치하고 작업해야 합니다.

npm

npm i jsonp

// @see https://www.npmjs.com/package/jsonp

예시

// 사용법: jsonp(url, opts, fn)

// 사용 전
const res = await Axios.get('http://ipify.com/?format=json');

// 사용 후
await jsonp('//api.ipify.org?format=jsonp', null, (err, res) => {
  // .....
});

그 외의 방식으로 proxy로도 작업할 수 있습니다.

참고 https://velog.io/@hoit_98/SOP%EC%99%80-CORS

많은 사람들이 URI, URL은 혼용해서 사용하는 경우가 종종 있습니다.
뭐, 문제 없이 소통이 되기 때문이죠..

하지만 이 둘의 정확한 차이를 알고 넘어가지 않는다면, 우리에게 발전이 없으므로^^
오늘 URI와 URL의 차이를 짚고 넘어가보도록 하겠습니다.
플러스로 URN에 대해서도 알아봅시다.

URI (Uniform Resource Identifier) - 식별자

웹 기술에서 사용하는 논리적 또는 물리적 자원을 식별하는 고유한 문자열 시퀀스입니다.
자원을 나타내는 유일한 주소이며 인터넷 프로토콜이 항상 붙어다닙니다.

이미지를 보면 URI가 가장 상위개념인 것을 알 수 있습니다.

URL (Uniform Resource Locator) - 위치

웹 주소라고하며 네트워크 상에서 자원이 어디 있는지 알려주기 위한 규약입니다. 흔히 웹 사이트 주소로 알고 있지만 URL은 웹사이트 주소뿐만 아니라 네트워크상의 자원의 위치를 모두 나타낼 수 있습니다.

URN (Uniform Resource Name) - 이름

영속적이고 위치에 독립적인 자원을 위한 지시자로 사용하기 위해 정의되었습니다.
URL의 한계로 인해 만들어졌으며, 자원의 이름을 가르키며 유일한 값이어야합니다.
실제 자원을 찾을때는 URL로 변환하여 이용합니다.

예시

예시 1

// URI, URL의 예시 (해당 위치로 접근하는 프로토콜이 포함되어있음)
telnet://192.168.0.10:8080/ // telnet://
http://nsinc.tistory.com/ // http://
mailto:myname@me.com // mailto:

// URN의 예시
urn:isbn:0451450523 // 1926년에 출간된 the Last Unicorn의 도서식별번호
urn:oid:2.16.840  // 미국을 의미하는 OID

예시 2

- index.html 파일은 위치와 주소를 포함하기에 URI와 URL에 해당됩니다.
- index는 파일의 위치는 맞으나 웹주소가 어디있는지 모르기때문에 URI만 해당됩니다. (https://charlezz.com/main 으로 URL을 지정한 후 index.html 문서를 보여줄 수 있기에..)

예시 3

조건: 사이트명: test.com  / 파일: index.html

https://test.com/index?id=tester&page=8

https://test.com/index 까지가 URL이고
id와 page의 식별자가 필요하므로
https://test.com/index?id=tester&page=8 는 URI이다.

예시 4

간단히 빗대어 설명해보겠습니다.
나는 오늘 경아(URI/URN)와 약속이 있어 경아의 직장으로 찾아갑니다.
경아는 성남시청(URI/URL)에서 일을하고 있습니다.
<strong>(= https://성남시청/)</strong>
성남시청을 찾아온 나는 안내데스크에 경아를 만나러왔다고 말합니다.
경아라는 이름의 직원 수가 많아서 내 친구 경아의 담당 부서(URI/URN)를 말합니다.
담당 직원은 나를 경아와 만날 수 있는 특별한 공간(URI)으로 안내합니다.
<strong>(= https://성남시청/방문?부서=인사과&직원명=경아)</strong>

참고 및 출처
https://www.charlezz.com/?p=44767
https://velog.io/@jch9537/URI-URL
https://nsinc.tistory.com/192