본문 바로가기

JavaScript/JavaScript8

[JAVASCRIPT.INFO] 자료구조와 자료형 이 글은 [모던 JavaScript 튜토리얼]을 공부하며 정리한 글입니다. 👉 기본 환경 - Language: JavaScript - IDE: VS code 1. 원시값의 메서드 * 원시값 - 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined형 값 - String / Number / Boolean: 인수를 원하는 형의 원시값(문자열, 숫자, 불린 값)으로 바꿔줌 * 객체 - 프로퍼티에 다양한 종류의 값을 저장할 수 있음 - 함수도 객체의 일종으로 프로퍼티로 저장할 수도 있음 1 2 3 4 5 let str = "Hello"; str.test = 5; alert(str.test); * use strict(엄격 모드) - str.. 2023. 10. 23.
[JAVASCRIPT.INFO] 객체: 기본 이 글은 [모던 JavaScript 튜토리얼]을 공부하며 정리한 글입니다. 👉 기본 환경 - Language: JavaScript - IDE: VS code 객체(Object) - 중괄호 {…} 선언 - 중괄호 안에 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property)로 구성 - 키(이름): 문자형, 값: 모든 자료형 - 키 값에 예약어 사용 가능 - 숫자 입력 시, - 자동으로 문자로 형변환 - 자동으로 key가 오름차순 정렬(오름차순 정렬을 원하지 않을 경우에는 문자로 취급되도록 " " 등 추가) * 객체 생성 1 2 3 let user = new Object(); // '객체 생성자' let user = {}; // '객체 리터럴' ⭐ 객체 리터럴이 주로 사용됨 1 2 3 4 .. 2023. 10. 20.
[JAVASCRIPT.INFO] 코드 품질 이 글은 [모던 JavaScript 튜토리얼]을 공부하며 정리한 글입니다. 👉 기본 환경 - Language: JavaScript - IDE: VS code 1. Chrome으로 디버깅하기 - 왼쪽 - 파일 탐색 영역 - 중앙 - 코드 에디터 영역: 소스 코드 보기 및 편집 - 오른쪽 - 디버깅 영역 * 중단점 설정 - Breakpoints를 활용해 중단점 위치로 이동, 비활성화, 삭제 등 가능 - + 버튼(또는 소스 코드 줄 번호에서 오른쪽 마우스 클릭 후, Add conditional breakpoint)을 통해 조건부 디버깅 가능 - 표현식이 참인 경우에만 실행 중지 cf. 소스 코드 줄 번호에서 오른쪽 마우스 클릭 후, Continue to here - 중단점을 설정하기는 귀찮은데 해당 줄에서 실.. 2023. 10. 15.
[JAVASCRIPT.INFO] 자바스크립트 기본 이 글은 [모던 JavaScript 튜토리얼]을 공부하며 정리한 글입니다. 👉 기본 환경 - Language: JavaScript - IDE: VS code 4. 변수와 상수 변수 규칙 - 숫자와 문자를 사용하되 첫 글자는 숫자가 될 수 없음 - 특수기호는 $와 _만 사용할 수 있음 ⭐ 변수명 짓기 1 2 3 4 5 6 // 우리가 살고 있는 행성 let ourPlanetName = "Earth"; // 현재 접속중인 방문자 이름 let currentUserName = "John"; * planet이라는 단순한 이름보다는 어떤 행성의 이름인지를 설명하는 것이 중요 * userName이라는 단순한 이름보다는 현재 접속중인이라는 상태를 설명하는 것이 중요 1 2 3 4 5 6 // 대문자 상수: 기억하기 어.. 2023. 10. 11.
[ReactJS_Complete] Useful JavaScript Function 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 1. Array.prototype.map(callbackFn, thisArg) : 호출 배열의 모든 요소에 제공된 함수를 호출한 결과로 채워진 새 배열을 생성하는 함수 2. Array.prototype.find(callbackFn, thisArg) : 배열에서 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환, 만족하는 값이 없으면 undefined 반환 3. Array.prototype.findIndex(callbackFn, thisArg) : 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소의 .. 2023. 5. 25.
[ReactJS_Complete] Destructuring 이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React Destructuring: 구조분해할당 1. 배열(Arrray) 2. 객체(Object) 참고 자료 06. 비구조화 할당 (구조 분해) 문법 · GitBook 06. 비구조화 할당 (구조분해) 문법 이번에는 1장 섹션 6 에서도 배웠던 비구조화 할당 문법을 잘 활용하는 방법에 대해서 알아보겠습니다. 이전에 배웠던것을 복습해보자면, 비구조화 할당 문법 learnjs.vlpt.us 2023. 5. 24.