005. TIL - Today I Learned 20220920 (2)

# transpiler

 

트랜스 파일러는 같은 언어이지만, 문법적으로 변환해 주는 도구를 말한다.

컴파일러는 머신 언어로 변경해서 언어와 파일 자체가 변경 되지만, 트랜스 파일러는 같은 언어이지만, 문법만 바꿔주는 역할을 한다.

 

Typescript, Sass 그리고 Babel이 트랜스파일러다.

• TypeScript = Type이 있는 JavaScript -> JavaScript
• SASS = scss -> css
• Babel = es6 JavaScript -> es5 JavaScript

 

# eslint와 prettier

 

대부분 개발자들은 eslint만 사용하지 않고 prettier를 함께 사용한다. 둘다 코드 컨벤션을 잡아주는 녀석이다. 

허나 둘간에 차이점이 있어서 함께 사용하는 경우가 많다.

 

"eslint는 코드 퀄리티를 보장하도록 도와주고, prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다."

 

• eslint

 

예를 들어 함수 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있다. 또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array  내장 함수를 사용할 수도 있다.

 

이처럼 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이 eslint가 하는 역할이다.

 

• prettier

 

prettier는 eslint처럼 '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다. 

 

 

 

(수정)좀더 참고 하기 좋은 곳 : //// https://im-designloper.tistory.com/25

//// https://helloinyong.tistory.com/325

 

 

# 코드 컨벤션 - 너무 좋은 글이 있어서 그대로 가져옴 

링크 : https://velog.io/@hyundong_kk/%EC%BD%94%EB%93%9C-%EC%BB%A8%EB%B2%A4%EC%85%98

 

• 코드 컨벤션 규칙

1. public 과 private가 한 파일안에 작성될 경우 첫 번째 클래스 혹은 인터페이스는 public이 먼저 위치해야한다.
2. 하나의 파일에 여러개의 다른 구조(기능, 등등)가 들어갈 경우 각각의 구조는 공백이나 주석을 통해서 구역이 구분되야 한다. 또한 2000줄이 넘어가면 파일을 분리하는것이 좋다.
3. 한 줄에 80자 이상 쓰는것은 가독성이 저하됨으로 2줄로 나눠야 한다. 나누는 기준은 다음과 같다.
   1. 콤마 후에 두 줄로 나눈다.
   2. 연산자 앞에서 두 줄로 나눈다.
   3. 낮은 원칙 보다는 레벨이 높은 원칙에 따라 두 줄로 나눈다.
   4. 앞줄과 같은 레벨의 식이 시작되는 새로운 줄에서 나누고 앞줄과 들여쓰기를 일치시킨다.
4. 선언은 한 줄당 하나의 선언문을 사용한다.
5. K&R 스타일로 중괄호 선언한다. 줄 마지막에 '{'를 사용하고 블럭을 종료할 때는 새줄을 삽입하고 '}'를 사용하여 종료한다.

ex)

if (xxxx){
    return xxx;
}

• else,catch,finally, while등은 닫는 '}' 뒤에 사용한다.
  ex)

if (xxxx){
    return xxx;
}else{
    return xxx;
}

 

 

• 변수명 작성 방법

 

1. 클래스나 메소드명은 파스칼 표기법을 따른다.(모든 단어에서 첫 문자는 대문자 나머지는 소문자)
   ex) HelloWordl, NameViva
2. 변수, 파라미터 등은 카멜 표기법을 따른다.
   ex) helloWordl, nameViva
3. 메서드 이름은 동사/전치사로 시작한다.
   ex) countNumber, withUserId
4. 상수는 대문자로 작성하고 복합어인 경우 '_'를 사용하여 단어를 구분한다.
   ex) public final int SPECIAL_NUMBER = 1;

 

• 좋은 변수명은 코드를 글처럼 읽게 만들어 준다. 

ex) item.insertPurchaseList(userChoice, amount)

 

위 코드는 실제로 코드를 분석하지 않아도 어떤 동작을 하는지 알 수 있게 설계되어있다. 모든 코드가 다음과 같이 작성되어 있다면 코드의 가독성은 비약적으로 올라갈것이다.

 

하지만 실제로 계발을 하다보면 항상 위와 같이 이상적으로 변수명이 들어맞지 않는다. 따라서 다음과 같은 방법을 사용하여 최대한 글 처럼 작성 할 수 있다.

1. 명사는 주어(클래스), 목적어(매개변수,변수)로 사용됨을 인식하고 변수명을 정해야합니다.
2. 동사(매서드)는 행위를 나타냅니다. 동사에는 3가지 형태가 존재합니다. 동사원형, 과거형, 과거분사형

• 동사 원형을 사용하는 경우는 함수의 메서드를 첫 단어로 사용한다.(동사와 명사가 하나에 복합어로 사용될 때는 동사가 앞에 나옵니다.)
• 과겨형은 없다.
• 과거분사는 형용사라고 생각하고 사용하자, 수동의 의미 , boolean 변수에 사용됩니다.

1. 3. 단수와 복수를 구별해서 사용하자

일반적으로 리스트는 복수, 리스트의 아이템은 단수로 사용한다. 리스트는 가급적 복수형으로 작성합니다.

1. 4. 중복을 제거하자

문장을 읽을 때 한 문장안에 단어가 반복되면 이질감을 느끼게된다. 클래스 내부함수는 클래스에 사용된 단어는 가급적 빼고 작성합니다.
ex)

good

class User{
    id
    public ischeck
}

bad

class User{
    id
    public isUserIdCheck
}

 

• 읽기 좋은 코드를 작성하기 위한 마음가짐
  • 남이 나의 코드를 읽는 상황을 항상 고려하자

 

# foo

 

이것도 너무 잘 정리 되서 그냥 가져 왔다. 참고 : https://namu.wiki/w/foo

 

프로그래밍 상에서 임시로 변수이름을 지정해줘야 할 때 주로 쓰이는 변수 이름. 사람 이름으로 따지면 김철수/홍길동/김영희나 갑/을/병 같은 식이다. foo 외에 bar, baz, Fie,Foe, Fee 등도 함께 쓰이곤 한다.

완전히 같은 용도는 아니지만 비슷한 역할의 Lorem Ipsum등이 디자인 쪽에서 주로 쓰이는 것에 비해, Foo Bar은 주로 프로그래밍 쪽에서 주로 사용된다.

둘의 차이로, 전자는 프로토타이핑 시 세세한 내용에 집중되지 않도록 읽을 수 없을 글을 쓰는 것이고 후자는 '프로그래밍 언어'의 문법상 맞지만, 상세한 이름을 가리고 싶을 때나 (질문자가 원하는 것이) 다른 클래스나 변수가 아닌 'foo'에 대한 내용임을 강조할 때, 또는 코드 스니펫이나 코드 예제 등에서 '당신이 원하는 실제 이름으로 바꿔야 하는 칸' 임을 표시하기 위해 쓰이기도 한다.

 

•  
• 세계 2차대전 당시 미 육군에서 쓰이던 여러 줄임말 중, 알아보지 못할 정도로 개판이 됐다는 뜻인 FUBAR(Fucked Up Beyond All Recognition)에서 Foo와 Bar가 유래했다는 설이 있다.
• 위 설의 변형으로 FUBAR가 사실은 Fucked Up Beyond All Repair (고치지도 못할 정도로 奀됐다.) 의 줄임말이라는 말이 있다.
• For Once Only의 줄임말 이라는 설이 있다. 다른 설들에 비해서 너무 단순하고 근거가 부족해서 인기있는 설 축엔 끼진 못하지만 이것 만큼 딱 떨어지는 뜻을 가진 설도 없는 듯하다.

 

/* C code */

#include <stdio.h>

int main()
{
   const char *foo = "Hello";
   const char *bar = "World!";
   fprintf(stdout, "%s %s\n", foo, bar);

   return 0;
}

/* Javascript */

function foo(bar,baz) {
    return bar + baz;
}

alert(foo(bar,baz));

 

# lodash

 

lodash는 자바스크립트 라이브러리인데 이는 함수형 프로그래밍 전형을 사용함으로서 코딩개발에 있어서 체계적인 기능을 제공한다. 

 

lodash는 프로그래머 들이 자바스크립트를 더 간결하고 계속할 수 있도록 도와주는 역할을 하는 라이브러리다. 이는 몇몇의 주된 영역으로 나뉘어 질 수 있다:

 

• Utilities 
  • 기본 코딩 작업을 타입을 정할 뿐만아니라 수학적 작동도 단순화 
• Function
  • JS에 있는 binding, decorating, constraining, throttling, debouncing, currying, 그리고 changing the pointer 를 단순화
• String
  • trimming, 대분자 변환, 캐멀 케이스 등등 같은 기본적인 스트링 작동을 실행하기 위한 변환
• Array
  • 생성, 분할, 결합, 수정 및 압축
• Collection
  • iterating, sorting, filtering, splitting, 및 building 영역.
• Object
  • 액세스, 확장, 병합, 기본값 및 변환
• Seq
  • 체인, 래핑, 필터링 및 테스팅.

 

이는 복합적으로 나타냈는데, 그렇기에 모든 기능이 실행 가운데 전부 작동이 되는건 아니다. 예를 들어 _.chunk 같은 경우는 3.0.0 버전부터 실행이 가능하다. (즉, 첫 버전부터 전부 되는게 아니라는 뜻이다.)