자바스크립트 기초 배우기: 개요

Jan 18 2023

Unsplash에 있는 Kimberly Farmer의 사진

JavaScript 변수 : 변수는 JavaScript에서 데이터를 저장하는 데 사용됩니다. 숫자, 문자열 및 개체와 같은 값을 저장하는 데 사용됩니다. 변수는 var, let 또는 const 키워드를 사용하여 정의됩니다.
데이터 유형 : JavaScript에는 문자열, 숫자, 부울 및 개체를 비롯한 여러 데이터 유형이 있습니다. 다양한 데이터 유형과 이를 사용하는 방법을 이해하는 것은 효율적이고 유지 관리 가능한 코드를 작성하는 데 중요합니다.
JavaScript 연산자 : 연산자는 변수 및 값에 대한 작업을 수행하는 데 사용됩니다. JavaScript에는 수학 연산자, 비교 연산자 및 논리 연산자와 같은 다양한 연산자가 있습니다.
제어 구조 : 제어 구조는 프로그램의 흐름을 제어하는 데 사용됩니다. JavaScript에는 결정을 내리고 작업을 반복하는 데 사용되는 if-else, switch-case 및 for-loop와 같은 여러 제어 구조가 있습니다.
JavaScript 함수 : 함수는 프로그램 전체에서 재사용할 수 있는 코드 블록입니다. 그들은 입력을 받고 출력을 반환합니다. JavaScript에는 여러 내장 기능과 사용자 지정 기능을 만드는 기능이 있습니다.
JavaScript 배열 : 배열은 데이터 모음을 저장하는 데 사용됩니다. JavaScript 배열은 요소 추가, 제거 및 반복과 같은 데이터 작업을 위한 여러 메서드를 제공하는 내장 객체입니다.
JavaScript 개체 : 개체는 JavaScript에서 데이터 모음을 저장하는 데 사용됩니다. 배열과 유사하지만 데이터 구조 측면에서 더 많은 유연성을 제공합니다.
DOM(Document Object Model) : DOM은 JavaScript에서 HTML 또는 XML 문서를 표현한 것입니다. 웹 페이지의 요소에 액세스하고 조작하는 방법을 제공합니다.
JavaScript 이벤트 처리 : 이벤트 처리는 JavaScript에서 클릭, 키 누르기 및 양식 제출과 같은 사용자 이벤트에 응답하는 프로세스입니다.
Javascript 루프 : 루프는 지정된 횟수 또는 특정 조건이 참인 동안 코드 블록을 반복하는 데 사용됩니다. JavaScript에는 for, while 및 for-of 루프와 같은 여러 유형의 루프가 있습니다.
비동기 프로그래밍 : 비동기 프로그래밍은 나머지 코드의 실행을 차단하지 않고 네트워크 요청과 같이 완료하는 데 시간이 걸릴 수 있는 작업을 수행하는 방법입니다. JavaScript는 콜백, 약속 및 async-await와 같은 비동기 코드로 작업할 수 있는 여러 가지 방법을 제공합니다.
함수형 프로그래밍 : 함수형 프로그래밍은 불변성, 순수 함수 및 고차 함수의 사용을 강조하는 프로그래밍의 패러다임입니다. JavaScript에는 화살표 기능, 맵, 축소 및 필터와 같은 여러 기능적 프로그래밍 기능이 있습니다.
객체 지향 프로그래밍 : 객체 지향 프로그래밍은 객체를 사용하여 데이터와 동작을 표현하는 것을 강조하는 프로그래밍 패러다임입니다. JavaScript에는 클래스 및 상속과 같은 여러 객체 지향 프로그래밍 기능이 있습니다.
정규식 : 정규식은 문자열의 패턴을 일치시키는 데 사용됩니다. 입력 유효성 검사, 특정 텍스트 검색 등에 유용합니다.
JavaScript 내장 개체 : JavaScript에는 Math, Date 및 Array와 같은 여러 가지 유용한 메서드와 속성을 제공하는 몇 가지 기본 제공 개체가 있습니다.
JavaScript 내장 함수 : JavaScript에는 일반적인 작업을 수행하는 데 사용할 수 있는 parseInt(), parseFloat() 및 isNaN()과 같은 여러 내장 함수가 있습니다.
JavaScript 내장 메서드 : JavaScript에는 일반적인 작업을 수행하는 데 사용할 수 있는 string.length, array.push() 및 object.hasOwnProperty()와 같은 여러 내장 메서드가 있습니다.
JavaScript 내장 속성 : JavaScript에는 브라우저 및 웹 페이지에 대한 정보를 가져오는 데 사용할 수 있는 document.title, window.innerWidth 및 navigator.userAgent와 같은 여러 내장 속성이 있습니다.
JavaScript Destructuring : JavaScript Destructuring은 배열이나 객체에서 값을 추출하여 변수에 할당할 수 있는 언어의 기능입니다. 복잡한 데이터 구조로 작업하는 프로세스를 단순화합니다.
JavaScript 확산 연산자 : JavaScript 확산 연산자는 배열의 요소 또는 개체의 속성을 새로운 배열 또는 개체로 확산할 수 있는 기능입니다. 어레이를 병합하고 어레이를 복사하는 등의 작업에 사용할 수 있습니다.
JavaScript Map, Filter 및 Reduce : 요소 반복, 요소 필터링 및 배열을 단일 값으로 줄이는 것과 같은 일반적인 작업을 배열에서 수행할 수 있는 배열 메서드입니다.
JavaScript 컨텍스트 : JavaScript 컨텍스트는 코드가 실행되는 환경이며 this 키워드의 값을 결정합니다. 컨텍스트를 이해하는 것은 함수와 개체가 JavaScript에서 상호 작용하는 방식을 이해하는 데 중요합니다.
JavaScript 클로저 : JavaScript 클로저는 부모 함수가 반환된 후에도 함수가 부모 범위에서 변수에 액세스할 수 있도록 하는 언어의 기능입니다. 클로저는 개인 변수 및 함수를 생성하는 데 자주 사용됩니다.
JavaScript 프로토타입 : JavaScript 프로토타입은 객체가 다른 객체의 속성과 메서드를 상속할 수 있도록 하는 언어의 기능입니다. 프로토타입을 이해하는 것은 언어의 객체 지향 기능이 작동하는 방식을 이해하는 데 중요합니다.
JavaScript 디버깅 : 디버깅은 모든 개발자에게 중요한 기술입니다. JavaScript는 코드에서 오류를 찾고 수정하는 데 사용할 수 있는 콘솔 및 디버거 문과 같은 여러 도구를 제공합니다.
JavaScript 보안 : JavaScript는 종종 사용자의 브라우저에서 실행되는 클라이언트측 스크립트를 생성하는 데 사용됩니다. 이와 관련된 보안 위험을 인식하고 안전한 JavaScript 코드를 작성하는 방법을 아는 것이 중요합니다.
JavaScript 모듈 : JavaScript 모듈은 작고 독립적인 기능 단위를 생성하여 코드를 구성하고 재사용하는 방법입니다. import 및 export 키워드를 사용하여 JavaScript 모듈을 가져오고 내보낼 수 있습니다.
JavaScript 약속 : JavaScript 약속은 비동기 작업을 보다 조직적이고 효율적인 방식으로 처리하는 방법입니다. 콜백 함수를 사용하지 않고 성공 및 오류 결과를 처리하는 방법을 제공합니다.
JavaScript async-await : JavaScript async-await는 비동기 작업을 처리하는 보다 현대적이고 읽기 쉬운 방법입니다. 이를 통해 동기 코드처럼 보이는 비동기 코드를 작성할 수 있습니다.
JavaScript 클래스 : JavaScript 클래스는 특정 구조와 동작을 가진 개체를 만드는 방법입니다. 기존의 프로토타입 기반 접근 방식보다 객체를 생성하는 더 현대적이고 조직적인 방법입니다.
JavaScript 웹 API : JavaScript 웹 API는 브라우저 및 웹 페이지와 상호 작용할 수 있도록 웹 브라우저에서 제공하는 일련의 API입니다. 웹 API의 예로는 DOM, Fetch API 및 WebSocket API가 있습니다.
JavaScript 성능 최적화 : JavaScript 성능 최적화는 JavaScript 코드의 성능을 개선하는 프로세스입니다. 여기에는 DOM 작업 수 감소, 함수 호출 수 감소, 코드 최소화 및 압축과 같은 기술이 포함됩니다.
JavaScript 테스트 : JavaScript 테스트는 코드가 예상대로 작동하는지 확인하는 프로세스입니다.
JavaScript 디자인 패턴 : JavaScript 디자인 패턴은 일반적인 프로그래밍 문제에 대한 재사용 가능한 솔루션입니다. 디자인 패턴의 예로는 싱글톤 패턴, 옵저버 패턴 및 팩토리 패턴이 있습니다.
JavaScript 모범 사례 : JavaScript 모범 사례는 고품질의 유지 관리 가능하고 효율적인 코드를 작성하기 위한 일련의 지침 및 권장 사항입니다. 모범 사례의 예로는 엄격 모드 사용, var 대신 const 사용, 전역 변수 방지 등이 있습니다.
JavaScript 타이핑 : JavaScript 타이핑은 JavaScript 코드에 유형 정보를 추가하는 방법으로 TypeScript 또는 Flow를 사용하여 수행할 수 있습니다. 둘 다 유형 오류를 방지하고 코드를 더 읽기 쉽게 만드는 데 도움이 되는 정적 유형 검사기입니다.
JavaScript Webpack : JavaScript Webpack은 JavaScript 모듈을 묶는 도구입니다. 여러 파일을 하나의 파일로 결합하여 브라우저에서 보다 효율적으로 로드할 수 있도록 하는 데 사용할 수 있습니다.
JavaScript Linting : JavaScript Linting은 잠재적인 오류 및 버그에 대해 JavaScript 코드를 확인하는 프로세스입니다. 이는 특정 코딩 규칙 및 모범 사례를 확인하도록 구성할 수 있는 ESLint와 같은 도구를 사용하여 수행할 수 있습니다.
JavaScript 메모리 관리 : JavaScript 메모리 관리는 JavaScript에서 메모리 할당 및 할당 해제를 관리하는 프로세스입니다. 여기에는 가비지 수집 및 메모리 누수 감지와 같은 기술이 포함됩니다.
JavaScript Transpilation : JavaScript Transpilation은 한 언어로 작성된 코드를 다른 언어로 변환하는 프로세스입니다. 이는 최신 JavaScript 코드를 이전 브라우저와 호환되는 버전으로 변환할 수 있는 Babel과 같은 도구를 사용하여 수행할 수 있습니다.
JavaScript 프록시 : JavaScript 프록시는 개체의 동작을 가로채고 조작하는 방법입니다. 원래 코드를 수정하지 않고 기존 개체에 사용자 지정 동작을 추가하는 방법을 제공합니다.
JavaScript Generators : JavaScript Generators는 데이터 컬렉션을 반복하는 데 사용할 수 있는 개체인 반복자를 만드는 방법입니다. 원본 코드를 수정하지 않고 사용자 정의 반복 동작을 생성하는 방법을 제공합니다.
JavaScript Reflect : JavaScript Reflect는 개체의 동작을 가로채고 조작하기 위한 메서드를 제공하는 기본 제공 개체입니다. 개체를 조작하는 보다 강력하고 유연한 방법을 제공하기 위해 프록시와 함께 사용할 수 있습니다.
JavaScript 웹 작업자 : JavaScript 웹 작업자는 기본 스레드와 별도로 백그라운드에서 JavaScript 코드를 실행하는 방법입니다. 이를 통해 UI를 동결하지 않고 무거운 계산을 수행하거나 장기 실행 작업을 수행할 수 있습니다.
JavaScript 서비스 작업자 : JavaScript 서비스 작업자는 기본 스레드와 별도로 백그라운드에서 JavaScript 코드를 실행하는 방법입니다. 캐싱 및 푸시 알림과 같은 작업을 수행할 수 있습니다.
JavaScript 이벤트 루프 : JavaScript 이벤트 루프는 JavaScript 엔진이 코드를 비동기적으로 실행할 수 있도록 하는 메커니즘입니다. 이를 통해 엔진은 사용자 입력 및 네트워크 요청과 같은 여러 작업을 동시에 처리할 수 있습니다.
JavaScript 호이스팅 : JavaScript 호이스팅은 코드 실행 전에 변수 및 함수 선언을 해당 범위의 맨 위로 이동시키는 언어의 기능입니다. 호이스팅을 이해하는 것은 JavaScript에서 변수 및 함수 범위가 작동하는 방식을 이해하는 데 중요합니다.
JavaScript Currying : JavaScript 커링은 함수를 부분적으로 적용하는 기술로, 허용하도록 정의된 것보다 더 적은 수의 인수로 함수를 호출할 수 있으며 나머지 인수를 사용하는 새 함수를 반환합니다.
JavaScript 메모이제이션 : JavaScript 메모이제이션은 함수의 결과를 캐싱하는 기술로, 결과를 다시 계산하는 대신 함수의 출력을 저장하고 반환하는 것을 의미합니다. 이는 함수가 동일한 입력으로 여러 번 호출되는 경우 성능을 향상시킬 수 있습니다.
JavaScript 데코레이터 : JavaScript 데코레이터는 기존 함수 또는 클래스를 새 함수로 래핑하여 동작을 추가하는 방법입니다. 기존 코드를 수정하지 않고 기능을 추가할 수 있습니다.
JavaScript 선택적 연결 : JavaScript 선택적 연결은 객체가 null인지 정의되지 않았는지 확인하지 않고도 객체의 속성에 액세스할 수 있는 기능입니다.
JavaScript Nullish Coalescing : JavaScript Nullish Coalescing은 변수가 null이거나 정의되지 않은 경우 변수에 대한 기본값을 제공할 수 있는 기능입니다.
JavaScript BigInt : JavaScript BigInt는 최대 안전 정수보다 큰 정수로 작업할 수 있는 새로운 기능입니다. 이는 큰 숫자 또는 암호화 작업을 수행하는 데 유용할 수 있습니다.

MDN(Mozilla 개발자 네트워크) JavaScript 가이드:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
W3Schools JavaScript 자습서:https://www.w3schools.com/js
FreeCodeCamp JavaScript 커리큘럼:https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures
Scrimba Javascript 학습 과정:https://scrimba.com/learn/learnjavascript
Alchemy University JavaScript 기본 과정:https://university.alchemy.com/js
Codecademy JavaScript 과정:https://www.codecademy.com/learn/introduction-to-javascript
Marijn Haverbeke의 Eloquent JavaScript(책):https://eloquentjavascript.net
자바스크립트.정보:https://javascript.info
Max Ogden의 Cats용 JavaScript(책):http://jsforcats.com
Pluralsight의 ES6 과정을 위한 JavaScript 기초:https://www.pluralsight.com/courses/javascript-fundamentals-es6
LinkedIn Learning에서 제공하는 JavaScript 기초 과정:https://www.linkedin.com/learning/javascript-essential-training