오늘은 국비지원교육 과정으로 이뤄지는 "웹퍼블리싱 완전 정복 : 모션 디자인으로 완성하는 반응형 웹 디자인" 강의 중 자바스크립트 기초문법을 다룰 예정이다.
자바스크립트는 요즘 많이 쓰이는 react나 node.js 등의 뿌리가 되는 기초이기 때문에, 정말 기초 하나하나 이해해가면서 중요하다고 생각한다. 그래서 강의를 들으면서 이미 아는 내용이라도 한 번 더 이해하기 위해 열심히 들은 기억이 난다.
새로 알게 된 개념
JS 인터프리터 언어
1) 소스코드를 위에서부터 읽어 가면서 바로 명령어를 처리하는 프로그램 언어 방식
2) Heap 메모리: 사용자가 직접 관리할 수 있는 메모리 영역
3) stack 메모리: 함수의 호출과 관계되는 지역 변수와 매개변수가 저장되는 영역
Web APIs
1) DOM(Document Object Model): XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스로, 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공
2) AJAX(Asynchronous JavaScript and XML)
- 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식
- 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
- 동기, 비동기: 동기는 '직렬적'으로 작동하는 방식이고 비동기는 '병렬적'으로 작동하는 방식이다. 즉, 비동기란 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 비동기 처리를 예로 Web API, Ajax, setTimeout 등이 있음.
defer
- 페이지가 모두 로드된 후에 해다 외부 스크립트가 실행됨을 명시함.
- defer 속성은 불리언(boolean) 속성으로 명시하지 않으면 false 값을 가지게 되고, 명시하면 true 값을 가지게 됨.
식별자, 예약어, 실행문
- 식별자: 사용자가 임의로 만드는 명칭으로서 변수명, 함수명 등이 있다.
- 예약어: 자바스크립트 자체적으로 특정 기능을 실행하기 위해 예약된 명령어으로서 let, const 등이 있다.
- 실행문: 특정 명령어를 실행하기 위한 구문
변수
- 어떠한 데이터 값을 저장하는 공간
1) 변수를 사용하는 이유
- 자주 사용하는 값이 있을 때, 성능, 편의 상의 이점을 위해 사용
2) 변수 선언 방식
ES5 -> var, ES6 -> let, const
- let: 변경될 값을 저장할 때 사용
- const: 변경되지 않을 값을 저장할 때 사용
- 변수 선언: let a, 값이 저장될 메모리 공간을 생성함
- 값 할당: a = 5, 메모리 공간에 값을 저장
- 변수 초기화: let a = 5, 변수를 선언하자마자 값을 할당
3) 변수 작명할 때 주의할 점
- 숫자로 시작 불가능
- 특수문자 삽입 불가능 (예외. _(언더바), $)
- -(하이픈) 사용 불가능
- 예약어 사용 불가능
- 한글은 사용 가능하지만 오류가 날 수 있기 때문에 최대한 사용하지 않기
- 대소문자 구분됨.
연산자
- 여러 연산을 처리하는 식별자
- 산술연산자: 수학적인 연산 (+, -, /, *, %, ++, --)
- num++: 후위연산자: 초기 변수값을 먼저 연산하고 그 다음에 값을 증가
- ++num: 전위연산자: 초기 변수값을 증가시킨 다음 연산
- 대입연산자: 특정값을 대입하기 위한 연산 (=, +=, -=, *=, /=)
- 비교연산자: 두 개 이상의 값을 서로 비교하기 위한 연산 (결과값을 변환, true, false)
- ==: 값만 비교
= ===: 값과 형식 비교
자료형 (Data Type)
원시형 자료 (primitive Type) : 특정 값이 메모리에 바로 저장, 값만 저장
- 문자(string)
- 숫자(number)
- 논리형(boolean: true, false)
- undefined: 변수를 선언하고 값을 할당하지 않으면 undefined가 대신 저장 (에러 상황)
참조형 자료 (reference type): 값이 위치하고 있는 참조 주소값만 메모리에 저장 (관련 내장함수까지 같이 참조)
- null (object): 명시적으로 (일부로) 특정 변수의 값을 비워둘 때
- array (object): 연관된 값들을 그룹으로 묶어서 관리하는 자료형태
- object (object): 데이터를 key라는 인덱싱을 통해 자료를 구조적으로 묶어놓은 형태
자료형 검사
typeof 변수명
형변환
- 특정 조건이 부합되면 자료형이 강제로 변환되는 현상
let num1 = "2" // 문자
let num2 = 3 // 숫자
let num3 = 5 // 숫자
num1 + num2 + num3 = 235 // 문자
num3 + num2 + num1 = 82 // 문자
배열
- 연관된 값들을 하나의 그룹으로 묶어서 나열한 자료구조
const 변수명 = ["0번째", "1번째, "2번째",...]
변수명[n]
변수명[n] = "수정할 값"
객체
- 데이터를 property라는 인덱싱을 통해 구조적으로 묶어놓은 형태
let employee = {
name : "홍길동",
age : 28,
gender : male,
address : "suwon"
}
employee.name // 홍길동
employee['name'] // 홍길동
employee.address = "Busan"반복문
1) for
const colors = ["red", "green", "blue"]
for(let i = 0; i < colors.length; i++){
console.log(colors[i])
}
2) for of
const colors = ["red", "green", "blue"]
for(let color of colors){
console.log(color);
} const txt = "HELLO"
for(let letter of txt){
console.log(letter); H,E,L,L,O
}
3) for in
const student1 = {
name: "david",
age: 20,
hobby: "sport"
}
for(let key in student1){
console.log(student1); // name age hobby
console.log(student1[key]); // david 20 sport
}
4) while
const cars = ["BMW", "VOLVO", "HYUNDAI"]
let i = 0;
while(cars[i]){
console.log(cars[i]);
i++
}- for문을 사용하는 것이 더 효율적이기 때문에, while문의 사용 빈도는 낮다
함수(function)
- 실행코드를 블록단위로 묶어서 패키징한 형태
- 재사용성과 가독성을 높일 수 있음
- 함수 정의: 미리 function 키워드를 이용해서 자주 쓸 코드들을 묶어서 정의하는 행위
- 함수호출: 정의되어 있는 함수를 호출해야 지만 비로서 기능이 실행됨
1) 함수의 종류
선언적함수
- 함수에 이름을 주어 정의해놓은 형태
- 선언적함수가 우선순위가 높음
- 호출 위치가 자유로움
function plus(){
const num1 = 2;
const num2 = 3;
console.log(num1+num2);
}
plus();
익명함수
- 이름 없이 정의된 함수
- 익명함수를 변수에 대입하거나 이벤트 객체에 대입하여 호출 가능
- 호이스팅이 되지 않음
const minus = function(){
const num1 = 2;
const num2 = 3;
console.log(num1-num2);
}
minus();
즉시실행함수
- 함수가 스스로 정의되자마자 자신을 호출하는 형태
- 즉시실행함수 내부의 값들이 캡슐화
(function(){
const num1 = 2;
const num2 = 3;
console.log(num1+num2);
})()
함수 매개변수(parameter)
- 함수 외부에서 내부로 값을 전달하기 위한 변수
함수 인수(argument)
- 함수를 호출할 때 파라미터를 통해 전달되는 값
반환값(return)
- 함수 호출 시 반환되는 값
- 특정시점에서 코드를 강제로 중단할 때도 사용
function plus(num1. num2){
const = num1 + num2;
return const;
}
plus(2, 3);
const total = plus(2, 3); // return 전: undefinded, return 후: 5
화살표 함수
- 익명함수를 간단하게 축약한 형태
- 파라미터가 하나면 괄호 생략 가능
- 코드블록 안에 코드가 한 줄이면 괄호 생략 가능
const plus = (num1, num2) => {
const = num1 + num2;
return const;
}
const plus = num1 => console.log(num1);
if
- 특정 조건 부합 여부를 참과 거짓으로 반환하여 코드의 분기 생성
if(조건식1){
조건식1이 참이면 해당코드 블록을 실행,
거짓이면 해당 코드 블록을 무시하고 다음 조건식으로 넘어감
}
else if(조건식2){
조건식2이 참이면 해당코드 블록을 실행,
거짓이면 해당 코드 블록을 무시하고 다음 조건식으로 넘어감
}
else{
위에 모든 조건식이 거짓이면 이곳의 코드를 실행하고 종료
}
switch
- 여러 개의 코드블록 중에서 하나를 선택해야 할 때 사용
switch(표현식){
case A:
//실행할 코드 블록
break;
case B:
//실행할 코드 블록
break;
default:
//실행할 코드 블록
}
탬플릿 리터럴
const name = "홍길동"
const age = 20;
console.log("안녕하세요. 제 이름은" + name + "이고 나이는" + age + "살입니다.")
console.log(`안녕하세요. 제 이름은 ${name}이고 나이는 ${age}입니다.`)
forEach, map
//ES5
//반복처리 기능, 유사배열(DOM반복 가능)
color.forEach((반복대상, 인덱스, 배열자신)=>{
});
//ES6
//반복기능외에 추가로 반복도는 배열을 새로운 배열로 복사
//DOM반복 불가능
color.map((반복대상, 인덱스, 배열자신)=>{
})
문자열 내장함수
- 문자열.length : 문자열의 길이를 반환
- 문자열.indexOf() : 찾고자 하는 문자열의 위치 반환
- 문자열.slice() : 문자열에서 특정 부분을 추출해서 새로운 문자열로 반환
- 문자열.substr() : 문자열에서 특정 부분을 잘라냄
- 문자열.replace(): 문자열에서 특정 문자값을 바꿔치기
- 문자열.split(): 문자열을 배열로 변환
형변환
- parseInt(변환할 값) : 해당값을 정수로 변환
- parseFloat(변환할 값) : 해당값을 실수로 변환
배열 내장함수
- toString(): 배열을 문자로 변환
- join() : 구분자를 활용해 문자열로 이어붙이기
- pop() : 배열의 마지막요소 제거(리턴값으로 잘라낸 요소 반환)
- push() : 배열의 끝부분에 새로운 요소 추가(리턴값으로 배열의 길이 반환)
- shift() : 배열의 첫 부분 요소 제거 (리턴값으로 잘라낸 요소 반환)
- unshift() : 배열의 첫 부분에 새로운 요소 추가(리턴값으로 길이 반환)
- splice(삽입위치, 잘라낼 갯수, 추가할 내용) : 배열에 새로운 요소를 잘라서 붙임
- concat() : 두개의 배열 합치기 (새로운 배열을 리턴값)
- slice(n) : 배열 잘라내기 // 인덱스 n번째부터 잘라내기
- sort() : 알파벳순으로 요소 정렬
- reverse() : 역순으로 요소 정렬
- sort((a, b) => {return a-b}) : 올림차순으로 정렬 // 리턴값이 음수이면 b가 더 크다는 의미, 뒤으로 배치
- sort((a, b) => {return b-a}) : 내림차순으로 정렬 // 리턴값이 음수이면 b가 더 작다는 의미, 뒤으로 배치
- sort((a, b) => {return a-b})[0] : 최소값 반환
- sort((a, b) => {return b-a})[0] : 최대값 반환
날짜 관련 객체
- new Date() : 날짜 정보값 반환
- new Date().getTime() : 1970년 1월 1일 이후부터의 밀리세컨드 단위 숫자 반환
- new Date().getFullYear() : 해당 년도를 반환
- new Date().getMonth() : 해당 월을 반환 // 1월부터 0으로 반환
- new Date().getDate() : 해당 일을 반환
- new Date().getHours() : 현재 시간을 반환 // 24시간 단위
- new Date().getMinutes() : 현재 분을 반환
- new Date().getSeconds() : 현재 초를 반환
Math 관련 객체
Math.around(x) : x값에서 제일 근접한 정수를 반환
Math.around(2.3) // 2
Math.pow(x, y) : x의 값을 y의 횟수만큼 제곱한 값을 반환
Math.pow(3, 2) // 9
Math.sqrt(x) : x의 제곱근 값을 반환
Math.sqrt(4) // 2
Math.abs(x) : x의 양수값을 반환
Math.abs(-2.3) // 2.3
Math.ceil(x) : x값에서 소수점 아래 값을 무조건 올림해서 정수 반환
Math.ceil(2.4) // 3
Math.floor(x) : x값에서 소수점 아래 값을 무조건 버린 정수 반환
Math.floor(2.488) // 2
Math.min() : 인수로 넣은 값들 중에서 제일 작은 값을 반환
Math.min(1, 2, 3, 4, 5) // 1
Math.max() : 인수로 넣은 값들 중에서 제일 큰 값을 반환
Math.max(1, 2, 3, 4, 5, 6) // 6
Math.random(): 0에서 1사이의 실수를 랜덤으로 반환
Math.floor(Math.random() * num) : 특정 수까지의 랜덤한 정수를 반환
Math.floor(Math.random() * num) // 0 ~ n까지 숫자를 출력하고 싶으면 num = n + 1
비구조화 할당(구조분해 할당)
const fruit = ['apple', 'orange', 'melon'];
const [fruit1, fruit2, fruit3] = fruit;
// fruit1 = 'apple'
// fruit2 = 'orange'
// fruit3 = 'melon'
전개 연산자
let arr = ["red", "green", "blue"]
let arr2 = [...arr, "pink"] // ...arr : 배열을 복사해서 가져옴
let arr3 = [...arr, ...arr2] // 배열 합치기- JavaScript에서 객체의 속성은 일반적으로 고유한 이름을 가져야 함.
- 즉, 동일한 이름의 속성을 가진 객체는 생성할 수 없음.
- 객체의 속성은 유일해야 하며, 중복된 속성 이름이 있다면 최근에 정의된 속성이 이전에 정의된 속성을 덮어씀.
DOM 제어
자식요소 탐색: 부모요소.querySelector(), 부모요소.children
형제요소 탐색: 이전 형제요소 탐색: 형제요소.previousElementSibling
형제요소 탐색: 다음 형제요소 탐색: 형제요소.nextElementSibling
부모요소 탐색
: 현재요소.parentElement; // 직계 부모
: 현재요소.closest(); // 조상
부족한 점
출처
http://www.tcpschool.com/c/c_memory_structure
http://www.tcpschool.com/javascript/js_dom_concept
https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
'Etc. > [Fastcampus] 웹퍼블리싱 완전 정복 학습 일지' 카테고리의 다른 글
| [패스트캠퍼스] 웹퍼블리싱 강의 6주차 - 자바스크립트 응용예제(1) (0) | 2023.07.14 |
|---|---|
| [패스트캠퍼스] 웹퍼블리싱 강의 5주차 - JavaScript 기초 문법2 (0) | 2023.07.10 |
| [패스트캠퍼스] 웹퍼블리싱 강의 3주차 학습일지 - Sass, Git, Github 활용 예제 (0) | 2023.07.09 |
| [패스트캠퍼스] 웹퍼블리싱 강의 2주차 학습일지 - SCSS, GIT (0) | 2023.06.26 |
| [패스트캠퍼스] 웹퍼블리싱 강의 1주차 학습일지 - 기본 HTML5, CSS3 문법 활용 예제 (0) | 2023.06.25 |
