[JavaScript/jQuery] 코드 리뷰 내용 정리 (2)

1. 

 view 단에서 조건 문에 따른 response의 작성 할 때는 if-else 따로 따로 response를 두 개로 나눠 작성하지말고 하나로 작성하자.  

 

2. 

iterable 객체 안에 최소값이나 최대값을 얻어내는 동작을 수행하는 코드의 경우 python의 min, max 함수를 활용하자.

docs.python.org/3/library/functions.html#min

 

3. 

코딩 중에 중간에 출력되는 값을 조사하고 싶을 때 print문 보다는 다음의 logging을 사용하자.

docs.python.org/ko/3/howto/logging.html

import logging;
logger = logging.getLogger(__name__)

...

logger.debug(f"foo")

그러나 유효화하기 위해서는 Django의 settings.py에서 설정을 해줘야한다. 

LOGGING = {
        ...
        '설정할 app의 이름': {
            'level': 'DEBUG',
            'handlers': ['console'],
        }
}

(※ 주의 : 로컬 환경에서 setting.py를 설정하는 것은 괜찮으나 git에 커밋하지 않도록 하자.)

 

4. 

유저의 입력을 받는 부분은 반드시 이스케이프하도록 하자. 

이번의 경우는 encodeURIComponent()로 입력에 대해 이스케이프 처리를 하여야 한다.

encodeURIComponenet()함수는 URI의 특정한 문자를 UTF-8로 인코딩하여 하나, 둘 혹은 그 이상의 연속된 이스케이프 문자로 변환하는 함수이다.

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

 

5. 

JavaScript 코드를 작성할 때 변수가 사용되는 범위를 의식해서 작성하는 것이 좋다.

함수의 인수인 경우 함수 안에서만 사용된다는 것을 명확히 하자.

 

6. 

글로벌 변수를 작성할 때는 변수 명 앞에 "g_"를 붙이자. 그러나 글로벌 변수는 버그 발생 확률을 높이기 때문에 사용을 자제하고 함수를 만들어 이벤트 발생시 인수를 받도록 수정하는 편이 좋다.

( 클릭 이벤트의 경우 addEventListener('onclick',)이나 jquery의 click ) 

 

7.

function clicked_page(e)

 이 함수의 인수명을 단순히 e로 작성하는 것은 어떤 인수를 받게 되는지에 대한 정보가 너무 적기 때문에 읽기 어려운 코드가 된다.  특히 JavaScript의 경우 클릭 등의 이벤트 처리를 할 때에 '이벤트 정보(MouseEvent등)'이 첫 번째 인수로 전달되기 때문에 다른 사람들이 코드를 봤을 때 이벤트 정보(event)의 'e'인가하고 착각하게 된다 (이 경우와 관계없지만, try-catch할 때도 예외처리 (Exception) e의 의미로 사용하는 경우도 꽤 있다). 따라서 이번에 작성한 코드의 e의 경우 HTML의 DOM의 요소라고 생각되므로 "el" 로 인수 명을 변경하길 바란다.

 또한 인수명이 아닌 주석으로 어떠한 정보를 받고 있는지 보완하는 방법도 있다. 이번의 경우는 인수에 어떤 정보가 들어있는지 읽기 어려운 점을 변경하려고 하기 때문에 다음과 같이 '변수 e는 HTMLElement형이 있다'라는 정보를 보완해주는 방법을 쓸 수 있다. 이 방법의 경우 IDE(VSCode)에서 보완 효과가 있다는 장점이 있다.

function clicked_page(/** @type {HTMLElement} */ e){}