dolog

*polyfill : 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드 쉽게 말해서 구식 브라우저에서 업데이트된 코드를 사용할 수 있게 해주는 것 자바스크립트는 정기적으로 등록, 분석하여 가치가 있다고 판단되는 제안 - 새로운 문법 또는 기존에 없던 내장 함수의 정의 - 은 https://tc39.github.io/ecma262/ 에 추가되므로 정기적으로 들어가 파악해보자(혹은 소개해주는 유튜브 참고…) 명세서(specification)에 등록된다 바벨(Babel) #필수 왜 사용하는 가? 명세서에 등록된 지 얼마 안된 기능을 사용해 작성한 코드를 특정 엔진에서 지원하지 않을 수도 있다 ➡️ 명세서 내 모든 기능을 모든 엔진이 구현하고 있지 않기 때문 이럴 때 바벨을 사용하는 것은..

테스트는 왜 해야 하는가? 코드를 수동으로 재실행 하면서 테스트를 하면 무언가를 놓치기 쉽다 함수 하나를 만들어 매개변수 1 값을 넣었을 땐 잘 돌아가지만 2를 넣었을 땐 실행이 되지 않는다 그래서 2 값이 들어 갔을 때 실행이 되게끔 수정을 했을 때 이때 1 값을 넣어도 실행이 똑같이 제대로 되는지 까지 생각해봐야 한다 테스트 자동화 테스트 코드가 실제 동작에 관여하는 코드와 별개로 작성되었을 때 가능 테스트 코드를 이용하면 함수를 다양한 조건에서 실행 실행 결과와 기대 결과를 비교할 수 있다 Behavior Driven Development(BDD 방법론) 테스트(test), 문서(documentation), 예시(example)를 모아놓은 개념 거듭제곱 함수와 명세서 function pow(x, n..

코드 짧게 쓰기 코드를 짧게 작성하는 것은 곧 일을 잘하는 비결이다 글자 하나만 사용하기 for 반복문에서 i 대신 x 또는 y 변수를 사용한다 반복문을 길게 작성하는 것 약어 사용하기 ex) list - let string - str userAgent - ua browser - brsr … 포괄적인 명사 사용하기 무언가를 명명할 때 obj, at a, value, item, elem 같이 다양한 개념을 포괄할 수 있는 명사를 사용하라 변수의 의미는 파악이 쉽지 않다 ex) data - 가장 이상적인 변수명 value or data1, item2, elem5 str, num - 자료형과 연관된 변수명 사용 … 철자가 유사한 단어 사용하기 date - data 처럼 주의깊게 봐야하며 모든 곳에 이런 조합을..

한 줄 주석 : // 여러 줄 주석 : /* … */ 주석을 사용하는 이유? 어떻게 코드가 동작하는지, 왜 코드가 동작하는지 설명하기 위해 코드 유지보수를 위해 좋지 않은 주석 설명이 담긴 주석이 많은 코드 ➡️ 주석 없이 코드만으로도 이해가 되어야 함 주석을 꼭 작성해야 하는 코드 ➡️ 코드를 다시 작성해야 할지도 모른다 리팩토링 팁 : 함수 분리하기 함수 내 코드 일부를 새로운 함수로 function showPrimes(n) { nextPrime: for (let i = 2 ; i < n ; i++) { for (let j = 2 ; j < i ; j++) { if (i % j == 0) continue nextPrime; } console.log(i); } } ⬇️ function showPrime..

개발자는 간결하고 읽기 쉽게, 파악하기 쉽게 코드를 작성하는 것이 관건이다 (=복잡한 문제를 간결하고 읽기 쉬운 코드로 해결) 문법 function pow(x, n) { let result = 1; for (let i = 0 ; i < n ; i++) { result *= x; } return result; } let x = prompt(“x?”, “”); let n = prompt(“n?”, ””); if (n < 0) { alert(`power ${n} is not supported, please enter a non-negative integer number`); } else { alert( pow(x, n) ) } *function pow(x, n) : x의 n제곱을 반환해주는 함수(n은 1 이상..

디버깅(debugging) : 스크립트 내 에러를 검출해 제거하는 일련의 과정 (쉽게 말해서 에러를 잡는 것) 디버깅 툴(debugging tool) 디버깅을 도와주는 도구 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적 Chrome의 개발자 도구 (1)소스(sources) 패널 ㄴ 탐색기 : 누르면 현재 사이트와 관련된 파일들이 나열된다(open sources) ㄴ 3가지 영역 ❶ 파일 탐색 영역 : 페이지를 구성하는 데 쓰인 모든 리소스를 트리 형태로 보여준다 ❷ 코드 에디터 영역 : 리소스 영역에서 선택한 파일의 소스 코드를 보여준다 소스 코드를 편집할 수도 있다 ❸ 자바스크립트 디버깅 영역 : 디버깅 관련 기능 제공 (2)콘솔(console) 개발자 도구에서 ESC를 누르면 개발자 도구 하..