Frontend 코드리뷰 정리
지난 금요일에 NHN FE개발랩 박정환 전임님의 루키사자TF 프론트엔드 코드리뷰가 있었다. 이번 베이스캠프에서는 모두 바닐라 JS로 프론트엔드를 구현했고, 그렇기 때문에 대부분 비슷한 실수를 했을 것이라 예상되어 해당 코드리뷰를 모든 TF가 참관하는 식으로 진행을 했다.
이 글은 코드리뷰에서 말씀해주신 내용을 요약 및 정리한 글이다.
- 실제로 서비스할때는 외부 CDN(폰트나 이미지, 라이브러리 등으로 많이 활용) 안 쓰는게 좋다
- 외부 CDN 장애 시 우리 서비스에도 영향이 있기 때문에
- -> 스태틱 리소스로 다운받아서 사용 권장
-
html은 동작(기능) 없이. 구조(모양, 형태)만 설계
-
기능이나 동작, 로직은 js로
-
css도 중복되는 부분은 새로운 css로 모듈화하자
-
https://www.caniuse.com : 해당 기능이 어떤 브라우저에서 지원하는지 확인 가능
-
정적 분석에 걸리는 실수들은 정말 불필요하다. 기계적으로 해결가능하다
-
ES Lint나 prettier 등을 활용하여 자동으로 조정 가능
-
Pre-commit hook으로 등록하는 식으로 활용 가능
-
-
var는 쓰지마라. const, let을 쓰자
- 처음에 싹 다 const로 쓰고 바꿔야하는 값이라면 그때 let으로 바꾸는 방법도 추천
-
String을 합칠 때 + 보다 template literal(백틱 ``)을 써라
-
for i 대신 무조건 foreach써라.
- for i는 동적으로 컬렉션이 바뀌는 경우에 버그 발생 가능
- Foreach에서도 인덱스 접근 가능하다.
-
DOM에 변경이 생기는 애들은 함수로 만드는게 관리 측면에서 용이(ex. changeText())
-
선언부와 호출하는 부분을 분리하는 것이 좋다.
- var, function으로 선언된 애들은 호이스팅 발생
- Const, let은 호이스팅 안함 => 이걸로 쓰는게 가독성 측면에서 좋다
-
함수 선언식보다는 함수 표현식을 써라
-
Eventlistener는 add해주고 나면 remove해주는게 memory leak을 방지.
- vanilla js의 경우 페이지 떠날때 모두 remove해주면 된다.
- 요새는 프레임워크를 써서 상관없긴하다.
-
Js 실행시 DOM 탐색이 가장 비싼 연산이다.
=> DOM element 객체는 변수로 저장해놓는게 좋다.(다시 찾지 않도록)
-
작성한 코드의 ECMA 버전 맞추기
- 전역에서 바로 실행하지 말고 IIFE(즉시실행함수) 사용하자.
Leave a comment