JavaScript (43) 썸네일형 리스트형 JavaScript 자주하는 실수들 1. 대입 연산자와 비교 연산자 혼동 실수 설명 대입 연산자(=)와 비교 연산자(==)의 차이를 혼동할 경우 예기치 않은 결과가 발생합니다. 예시 잘못된 경우: let x = 0; if (x = 10) { // 이 코드 블록이 실행됩니다. } 올바른 경우: javascript Copy code let x = 0; if (x == 10) { // 이 코드 블록은 실행되지 않습니다. } 2. 느슨한 비교와 엄격한 비교 혼동 실수 설명 == (느슨한 비교)는 값만 비교하고, === (엄격한 비교)는 값과 데이터 유형을 함께 비교합니다. 예시 잘못된 경우: let x = 10; let y = "10"; if (x == y) { // 이 코드 블록이 실행됩니다. } 올바른 경우: let x = 10; let y .. JavaScript 코딩 규칙 + 알아둬야 할 센스 전역 변수 사용 최소화하기 전역 변수는 충돌을 일으킬 수 있으므로 지역 변수를 사용해야 합니다. // 나쁜 예 var x = "global"; // 좋은 예 function example() { var x = "local"; } 변수와 선언 위치 변수 선언은 상단에 위치해야 깔끔합니다. // 좋은 예 let firstName = "John"; let lastName = "Doe"; // 사용 코드 'const' 키워드 활용 객체와 배열의 타입 변경 방지. // 나쁜 예 let car = {type:"Fiat"}; car = "Fiat"; // 좋은 예 const car = {type:"Fiat"}; // car = "Fiat"; 오류 발생 새로운 객체 생성 지양 기본 타입을 사용하자. // 나쁜 예 le.. JavaScript Debugging 오류 찾고 수정하기 자바스크립트를 사용하다 보면, 때때로 예상치 못한 오류나 문제가 발생할 수 있습니다. 이럴 때 필요한 것이 디버깅이라는 과정입니다. 디버깅은 코드의 오류를 찾아내고 수정하는 작업을 말합니다. 자바스크립트에서의 디버깅은 개발자들에게 매우 중요한 기술로 여겨지며, 이를 통해 프로그램이 제대로 작동하지 않는 원인을 찾아낼 수 있습니다. 콘솔 사용: 자바스크립트에서는 웹 브라우저의 콘솔을 사용해 코드에서 발생하는 오류 메시지를 확인할 수 있습니다. 이를 통해 어떤 부분에서 문제가 발생했는지 식별할 수 있습니다. 브레이크포인트 설정: 디버거 도구를 사용해 특정 코드 라인에서 실행을 일시 중지시키는 브레이크포인트를 설정할 수 있습니다. 이를 통해 문제가 되는 부분을 세밀하게 분석할 수 있습니다. 단계별 실행: 코드.. JavaScript JSON을 이용하여 날씨 정보 사용 실습 1단계: JSON 파일 생성 프로젝트 디렉토리 내에 weather.json 파일을 생성하고, 아래와 같이 내용을 작성합니다. { "도시": "서울", "온도": 25 } 2단계: HTML 파일 작성 index.html 파일을 아래와 같이 작성합니다. 날씨 정보 확인 날씨 확인하기 3단계: JavaScript 파일 작성 script.js 파일을 아래와 같이 작성합니다. ※JSON.parse()로도 문자열을 JSON 형식으로 변환할 수 있다. function getWeatherInfo() { fetch('weather.json') .then(response => response.json()) .then(data => { const city = data['도시']; const temperature = data.. JavaScript JSON JSON은 무엇인가? JSON은 "JavaScript Object Notation"의 약자로, 데이터 저장 및 교환을 위한 간단한 텍스트 형식입니다. 이 구조는 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 사용할 수 있습니다. JSON은 데이터를 표현하는 형식입니다. 일상생활에서 데이터를 교환할 때 사용되는 것과 비슷한 개념이에요. 예를 들어, 친구에게 사진, 이름, 전화번호 등의 연락처 정보를 주고받을 때와 같은 것이죠. JSON은 어디에 쓰일까? 웹사이트에서 정보 주고받기: 웹사이트에서 날씨 정보를 보여주고 싶다면, 날씨 정보를 가진 서버와 통신해서 데이터를 가져와야 해요. 이 때 JSON 형식으로 데이터를 주고받습니다. 설정 파일로 사용하기: 어떤 프로그램의 설정을 저장할 때 JSON 형식.. JavaScript Modules ES6 모듈 JavaScript에서 모듈은 코드의 재사용성을 향상시키고, 유지 관리를 용이하게 하며, 이름 충돌을 최소화하는 데 사용됩니다. 모듈은 파일 또는 코드 블록을 나타내며, 특정 기능 또는 관련 기능의 집합을 포함할 수 있습니다. ES6 모듈 ECMAScript 6부터 자바스크립트에서는 모듈을 기본적으로 지원하게 되었습니다. ES6 모듈 구문을 사용하면 변수, 함수, 클래스 등을 다른 파일로부터 가져오거나 내보낼 수 있습니다. export 변수, 함수, 클래스를 다른 파일에서 사용하려면 export 키워드를 사용합니다. // example.js export const name = 'John'; export function greet() { console.log('Hello!'); } export defaul.. JavaScript 클래스(Class) + Getter와 Setter 함수 만들기 JavaScript의 클래스(Class)는 객체 지향 프로그래밍의 특징을 사용할 수 있는 방법을 제공합니다. 클래스는 객체의 특성과 기능을 캡슐화하고, 객체를 생성하는 "틀" 역할을 합니다. ES6부터 JavaScript에 공식적으로 클래스 문법이 도입되었습니다. 클래스 선언 클래스를 선언하기 위해서는 class 키워드를 사용합니다. 다음은 간단한 클래스 선언 예시입니다: 생성자 함수 constructor 메서드는 클래스의 인스턴스를 생성하고 초기화할 때 호출됩니다. 위 예제에서 name과 age는 생성자의 매개변수로 전달되어 인스턴스의 속성으로 저장됩니다. 인스턴스 생성 new 키워드를 사용하여 클래스의 인스턴스를 생성할 수 있습니다: const john = new Person('John', 25); .. JavaScript 화살표 함수(Arrow Function) JavaScript의 화살표 함수(Arrow Function)는 함수 표현을 간결하게 만들어주는 문법입니다. 화살표 함수는 function 키워드 없이 함수를 정의할 수 있으며, this 키워드의 바인딩 방식이 다르게 작동합니다. 기본 문법 화살표 함수의 기본 문법은 다음과 같습니다: const myFunction = (parameter1, parameter2) => { // 함수 본문 return something; } 만약 함수가 한 줄이고 결과를 바로 반환한다면, 중괄호와 return 키워드를 생략할 수 있습니다: const add = (a, b) => a + b; 하나의 매개변수만 받는 경우, 괄호를 생략할 수 있습니다: const square = x => x * x; this의 특성 화살표 함수.. JavaScript use strict(strict mode) JavaScript에서 "use strict"는 엄격 모드(strict mode)를 활성화하는 데 사용되는 리터럴 표현입니다. 엄격 모드는 코드의 실행을 더 엄격한 규칙 세트로 제한하여 일반적인 코딩 실수와 안티패턴을 방지합니다. 사용 방법 엄격 모드를 사용하려면 다음과 같은 문자열을 스크립트의 맨 처음 또는 함수의 맨 처음에 위치시킵니다: 전역 범위에서 사용: "use strict"; // 나머지 코드 함수 범위에서 사용: javascript Copy code function myFunction() { "use strict"; // 나머지 코드 } "use strict"의 주요 효과 선언되지 않은 변수에 할당하려고 하면 오류가 발생합니다. this의 값이 undefined가 되며, 전역 객체를 가리키지.. JavaScript 호이스팅(hoisting) JavaScript에서 호이스팅(hoisting)은 변수와 함수 선언이 해당 스코프의 최상단으로 "끌어올려지는" 행동을 의미합니다. 이러한 행동은 실행 컨텍스트의 생성 단계에서 발생하며, 코드의 실행 전에 이루어집니다. 변수 호이스팅 변수 선언은 스코프의 상단으로 끌어올려집니다. 초기화는 그렇지 않습니다. 이는 var 키워드로 선언된 변수에만 해당하며, let과 const는 호이스팅 되지 않습니다. console.log(a); // undefined var a = 5; console.log(a); // 5 위의 코드는 다음과 같이 해석됩니다: var a; console.log(a); // undefined a = 5; console.log(a); // 5 함수 호이스팅 함수 선언은 이름과 함께 전체 함수.. 이전 1 2 3 4 5 다음
