[한경xToss] 4주차 요약 : JS 중급

 

* 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다.

템플릿 리터럴(Template literals) - es6부터

제 이름은 ${name}입니다.

 

배열(Array)

• 연속된 공간에 동일한 타입의 데이터를 순차적으로 나열한 자료구조

Array 객체

new : 객체 생성 시 사용하는 예약어

객체(Object) : 코드로 정의(클래스, 함수)된 메모리에 적재 후 활성화된 상태. 인스턴스

instanceof : 객체가 특정 클래스에 속하는지 아닌지를 확인

js 배열은 리스트 기능을 포함

 

값 타입 변수 vs 참조타입 변수

• 값 타입은 메모리 공간에 실제값을 가짐
• 참조 타입은 메모리 공간에 값의 주소를 가짐

함수(Function)

용도

1. 코드 중복 제거 - 재사용성

2. 코드 이름 - 가독성

3. 기능적 분리/결합 - 모듈화

 

Class(클래스) - ES6부터 지원

• 그 전에 prototype을 통해 상속을 지원했는데, 문법이 복잡하여 잘 사용X
• JS는 스크립트언어인데, React나 Node.js를 통해 대용량 프로그램을 만들기 시작하면서 클래스의 필요성 대두
• 객체지향(클래스-객체) : 상속, 생성자 함스, 가상함수(인터페이스)

---

구조분해할당과 전개연산자

전개연산자 매개변수 ( … : 해당 요소의 내용을 나열한다는 뜻 )

 

js 함수

Map - 반복, 추출 등

reduce 함수 - 하나의 값으로 변환

Flat - 평탄화 함수

Find - 특정 값을 찾아낸다

Filter - 필터, 특정 요소를 걸러냄.

 

innerHTML과 innerText

문서 객체 선택(jQuery)

---

window.onload

JS로 html 요소(문서객체)의 속성 변경

• getAttribute : 속성 가져오기
• setAttribute : 속성 설정하기
• classList : 클래스 이름/목록 가져오기

---

onchange

Fetch

Overlay

 

웹페이지 만드는 방법

1. MPA(Multi Page App)
2. SPA(Single Page App)

---

toLocaleString()

JSX

• babel 사용 - html 요소 생성
• js는 class, jsx는 className 사용함

React 시작하기

1. node.js 설치 - 22ver LTS
2. 원하는 폴더 위치에서 터미널에 cra모듈 호출 - 현재 리액트 19가 업데이트 됐는데, cra는 18버전만 지원

NodeJS

- 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼

 

버전관리, Git

• 파일변화를 시간에 따라 기록
• 소스코드 변경 이력과 백업, 비교 등이 가능