본문 바로가기

Web/JavaScript3

#3 JavaScript 코드 품질 # 크롬으로 디버깅 하는 방법 Chrome으로 디버깅하기 Watch – 표현식을 평가하고 결과를 보여줍니다. Add Expression 버튼 +를 클릭해 원하는 표현식을 입력한 후 Enter를 누르면 중단 시점의 값을 보여줍니다. 입력한 표현식은 실행 과정 중에 계속해서 재평가됩니다. Call Stack – 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시합니다. 실행은 index.html 안에서 hello()를 호출하는 과정 중에 멈췄습니다. 함수 hello 내에 중단점을 설정했기 때문에, 콜 스택(Call Stack) 최상단엔 hello가 위치합니다. index.html에서 함수 hello를 정의하지 않았기 때문에 콜 스택 하단엔 'anonymous’가 출력됩니다. 콜 스택 내의 항목을 클릭하.. 2020. 12. 31.
#2 JavaScript 코어 기본 정리. 자바스크립트 코어 기본 정리 1. 엄격 모드 (use strict) 자바스크립트의 기존 기능이 변경되면서 호환성 문제를 해결하기 위해 사용한다. 최상단에 작성하여야 하며 클래스와 모듈을 사용한다면 생략해도 된다. (자동 적용) 하지만, "use strict"은 일반적으로 사용하는 것이 좋다. "use strict"; 2. 변수와 상수 변수 변수(variable)는 데이터를 저장할 때 쓰이는 이름이 있는 '저장소'이다. 자바스크립트에서는 let을 사용한다. let message='Hello!'; // message라는 변수에 'Hello' 값 할당 var는 요즘에 사용하지 않는다. 오래된 코드임. let , const를 사용하도록 한다. 변수명을 만들 때 '카멜표기법'을 흔히 사용한다. 첫 단어는 소문자로.. 2020. 12. 27.
JS#1. Json 파일 fetch로 동적으로 받아오고 화면에 출력하기 Json 파일 동적으로 받아와서 출력 해보겠다. 먼저 Json 파일의 형식은 다음과 같다. data폴더 안에 있는 data.json { "items": [ { "type": "tshirt", "gender": "female", "size": "large", "color": "pink", "image": "../img/pink_t.png" }, { "type": "pants", "gender": "male", "size": "small", "color": "blue", "image": "../img/blue_p.png" }, { "type": "pants", "gender": "male", "size": "large", "color": "yellow", "image": "../img/yellow_p.png.. 2020. 8. 24.

티스토리툴바