함수의 선언
변수를 선언하고 해당 변수에 값을 할당했던 것처럼, 함수도 선언을하고 해당 함수가 실행할 코드의 집합을 만들어서 저장해준다.
// function 함수명(매개변수들 ..) {
// 이 함수에서 실행할 코드들
// return 반환값
// }
- 함수명은 함수가 하는 일들을 대표할 수 있는 이름으로 작성.
- *매개변수(parameter)는 해당 함수의 Body에 있는 코드에서 사용할 수 있는 일종의 변수이고, 함수 호출시 전달하게 된다.
- 함수를 실행하기 위해서 필요한 일종의 input이라고 생각하자.
- 중괄호 안에는 이 함수가 해야할 일들을 코드로 쭉 작성하고, 반환해야 할 값(Output)을 명시해준다.
//함수의 정의
function calculateAvg(price1, price2) {
const sum = price1 + price2;
console.log(`두 상품의 가격 총합은 ${sum}입니다.`)
const avg = sum / 2
return avg
}
//함수의 호출
const priceA = 20000
const priceB = 40000
const avg1 = calculateAvg(priceA, priceB)
console.log(`A과 B의 평균은 ${avg1}입니다.`);
const priceC = 500000
const priceD = 320000
const avg2 = calculateAvg(priceC, priceD)
console.log(`C과 D의 평균은 ${avg2}입니다.`);
// Quiz3. 세 개의 물건가격을 매개변수로 전달받아 평균값을 리턴하는 함수를 정의하고, 그 함수를 호출해서 평균값을 출력해라.
// 1. 함수 선언 2. 함수 호출
// 함수선언
function calculateAvg_1(product1,product2,product3) {
// const sum1 = product1 + product2 + product3
// console.log(`해당 세가지 물건의 총 합은 ${sum1}원 입니다.`);
// const aver = sum1 / 3
// return aver
//정답
const avg = (product1 + product2 + product3) / 3
return avg
}
// 함수호출
let productA = 500000
let productB = 1500000
let productC = 45000
const AVG_ = calculateAvg_1(productA,productB,productC)
let a = Math.floor(AVG_) // 소숫점 이하 버림
console.log(a);
console.log(`해당 세가지 물건의 평균은 ${a}원 입니다.`);
for
for (begin; condition; step) {조건을 만족할 때 실행할 코드}
예시
for (let temperature = 20; temperature <= 25; temperature++) {
console.log(`${temperature}도 정도면 적당한 것 같습니다.`);
}
while
while(조건) {조건을 만족할 때 실행할 코드 즉, 조건절}
let temperature = 20
while (temperature <= 25) {
console.log(`${temperature}도 정도면 적당한 온도입니다.`);
temperature++ // 증감연산자를 통해, log를 출력한 뒤, 온도를 1씩 올려줌.
}
// if문 (조건문)
const pantsPrice = 100000
if (pantsPrice < 50000) {
console.log('이 바지는 비싸요.');
} else {
console.log('이 바지를 살게요.');
}
// Quiz. 거리를 의미하는 변수를 선언하고, 원하는 숫자값을 할당한다.
// 2km 미만이면 '걸어가자', 5km 미만이면 "택시타자, 그 외는 기차를 타자.
const distance = 8
if (distance < 2) {
console.log("걸어가자.");
} else if (distance >= 2 && distance < 5 ) { // 논리연산자 && 활용.
console.log("택시타자.");
} else {
console.log("기차표 지금 예매해라.");
}
>> console.log(distance) 출력값 => "기차표 지금 예매해라."
// Quiz. 반복문과 조건문을 같이 활용하여 1 ~ 10까지의 숫자중 3으로 나누었을 때, 나머지가 0인 숫자를 구해서 출력해보자.
// step 1. 1부터 10까지의 숫자를 계속 체크해야 함. (반복문)
// step 2.
for (let num = 1; num <= 10; num++) {
if (num % 3 === 0) { // 나머지 연산
console.log(`${num}은 3으로 나눠서 떨어지는 숫자입니다.`);
}
}
// Quiz. 1부터 20까지의 숫자중, 홀수인 경우는 '숫자 ...는 홀수입니다.' 짝수인 경우는 '숫자 ...은 짝수입니다'를 출력하는 코드 작성.
// 1. 1부터 20까지 도는 반복문이 필요함.
// 2. 홀수와 짝수를 분간할 수 있는 연산 기능 필요.
for (let number = 1; number <= 20; number++) {
if (number % 2 !== 0) {
console.log(`Int ${number}는 홀수입니다.`);
} else if (number % 2 === 0) {
console.log(`Int ${number}는 짝수입니다.`);
}
}
객체타입의 정의 (Object)
관련된 데이터들을 묶어서 한번에 잘 나타낼 수 있는 데이터 타입.
클래스(class) 정의
// 클래스 선언
class NoteBook{
constructor(name, price, company) {
this.name = name
this.price = price
this.company = company
} // 각각 해당 객체(인스턴스)의 name과 price, company라는 속성에 할당하게 된다.
}
// 1. class 키워드와 클래스명
// class는 클래스를 선언하는 문구이고, 그 뒤에 바로 클래스 명이 나온다. 클래스 이름도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름을 지어줘야한다.
// 2. 생성자 (constructor)
// 중괄호 안에서는 생성자라는 것을 적어준다. (== 생성자가 함수와 많이 비슷하게 생김) 이 생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수다.
// 해당 생성자는 총 3개의 매개변수를 가지고 있음.
// 3. this
// this는 클래스를 사용해서 우리가 객체를 만들 때 바로 객체 자신을 가리키는 키워드다.
// 클래스를 활용해 객체를 만들 때는 new 라는 키워드를 먼저 써주고, 클래스명을 마치 함수처럼 호출하면서 매개변수값을 전달해주면 된다.
// 그러면 해당 클래스의 생성자(Constructor)가 호출되면서 객체가 생성되고, 객체의 속성들에 매개변수값들이 할당된다.
// 만들어진 객체는 변수에 할당해준다. 기본 타입의 데이터들을 변수에 할당하면 변수를 사용해 해당 데이터에 접근할 수 있었음.
// 객체도 변수에 할당하고 나면 해당 변수를 활용해 객체에 접근할 수 있음.
// ㄴ 객체의 속성 하나하나에 접근해 데이터를 갖고와야 할 때, 'this.속성명'을 사용한다.
// class를 활용하여 객체 만들기 (==인스턴스 만들기)
const noteBook_1 = new NoteBook('Mac',1600000,'Apple')
console.log(noteBook_1); // 해당 객체의 모든 데이터 조회
console.log(noteBook_1.price); // 해당 객체의 price 데이터 조회
console.log(noteBook_1.name); // 해당 객체의 name 데이터 조회
console.log(noteBook_1.company); // 해당 객체의 company 데이터 조회
메소드란?
클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라, 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의할 수 있다.
객체를 생성한 후, 만들어진 객체의 메소드를 호출하면 된다. (참고 문제 참조)
클래스 선언, 메소드 호출 코드
// 클래스 선언
class Product {
constructor(name, price) {
this.name = name
this.price = price
}
printInfo() {
console.log(`상품명: ${this.name}, 가격: ${this.price}원.`);
}
}
// 클래스를 이용한 객체 생성 (== 인스턴스 생성)
const noteBook = new Product("Apple", 16500000)
// 메소드 호출하기
// 객체가 할당된 변수명을 적고, 점(.)을 찍은 이후에 정의했던 메소드명을 적고, 괄호를 닫아주면 메소드가 호출된다.
noteBook.printInfo()
// 아래는 객체리터럴 형식
// const Obj_name = {
// Key : Value,
// Method() : function name(params) {
// function body 메소드 호출시, 실행할 코드들
// }
// }
// 실전 예시
const computer = {
name:'MacBook Air M1',
price : 16000000,
printInfo : function() {
console.log(`상품명: ${this.name}, 가격: ${this.price}원`);
}
}
computer.printInfo() // 객체를 생성한 후, 만들어진 객체의 메소드를 호출.
Q. 객체리터럴로 만든 객체와, 클래스를 활용하여 만든 객체는 결과적으로 동일하다. 그럼 왜 굳이 복잡하게 클래스를 정의하는 것일까?
A. "재사용성"
- 한 번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있음.
class Cloth{
constructor(color, size, price) {
this.color = color
this.size = size
this.price = price
}
productInfo() {
console.log(`색상: ${this.color}, 사이즈: ${this.size}, 가격: ${this.price}원.`);
}
}
const pants = new Cloth("Black", 32, 129000)
const coat = new Cloth("Cream", "XL", 2490000)
pants.productInfo() // 객체를 생성한 후, 만들어진 객체의 메소드를 호출하면 된다. (객체 pants의 productInfo())
coat.productInfo() // (객체 coat의 productInfo())
핵심 내용
// 배열의 선언
const arr1 = new Array(1,2,3,4,5) // 방법 1, Array라는 클래스를 이용하여 객체를 생성.
const arr2 = [1,2,3,4,5] // 방법 2, 배열을 바로 만드는 방법. 대괄호 안에 배열로 저장할 데이터를 쭉 나열해주면 된다.
// 배열에 여러 데이터들을 순서대로 넣어서 정의할 수 있음. 이때 배열에 있는 데이터 각각을 요소(Element)라고 함.
// 배열의 index == 객체의 속성명과 동일한 역할을 한다.
// index는 배열 안에 요소들이 자리잡은 순서라고 생각하면 된다.
// index는 1이 아닌 0부터 시작한다. 맨 끝자리를 조회하려면 length -1 해주면 된다.
const rainbowColors = ["빨","주","노","초","파","남","보"]
console.log(rainbowColors[0]);
console.log(rainbowColors[1]);
console.log(rainbowColors[2]);
console.log(rainbowColors[3]);
console.log(rainbowColors[4]);
console.log(rainbowColors[5]);
console.log(rainbowColors[6]);
// 이처럼 배열은 같은 형식의 데이터를 순서대로 저장할 수 있는 이점이 있는 데이터 타입.
// 순서대로 데이터를 가지고 있다면, 그 배열의 길이를 아는 것도 중요하다.
// 배열의 길이를 알기위해서는 length라는 속성을 이용하면 된다.
console.log(rainbowColors.length); // 7 반환
// length를 이용하여 배열의 마지막 순서를 찾을 수 있음. 인덱스는 항상 0부터 시작하므로, 마지막 요소를 구하고자 할 때는 무조건 length - 1을 하면 된다.
console.log(rainbowColors[rainbowColors.length - 1]);// [rainbowColors.length - 1] >> [index] >> [7 - 1] >> [6] >> rainbowColors[6]
// 요소 추가와 삭제
// push() - 추가 / pop() - 삭제
rainbowColors.push('핑크') // 선언한 변수에 점을 찍고 .push("넣어줄 값")메소드 입력. 해당 코드는 '핑크'를 마지막 인덱스에 추가해줌.
console.log(rainbowColors);
rainbowColors.pop() // 배열의 마지막 요소인 '핑크'를 제거
console.log(rainbowColors);
// rainbowColors의 배열을 도는 반복문
for (let i = 0; i < rainbowColors.length; i++) {
console.log(rainbowColors[i]);
}
// 배열의 인덱스는 0부터 시작이니 변수 i의 시작값도 0으로 초기화.
// i가 배열의 길이보다 작을 때에만 반복문 안의 코드를 실행.
// 모든 요소를 빠짐없이 다 출력해야하므로 i는 1씩 증가.
//배열과 함께 좀 더 자주 쓰이는 간단한 형식의 for문도 있음.
const Alphabets = ['a','b','c','d','e']
for (const Alphabet of Alphabets) { // for를 적고, 괄호를 한 다음에 변수를 선언(Alphabet). 그 다음에 of 라는 키워드를 쓰고, 내가 돌아야 하는 배열이 있는 변수를 적어주게되면 끝.)
console.log(Alphabet);
}
//Quiz. 열 개의 상품가격 데이터를 갖고 있는 배열을 만든다.
// 반복문을 활용해 상품들의 가격 합계와 평균을 구하시오.
// 1. 상품가격 데이터를 가지고 있는 배열을 만든다. (배열 안에 10개의 데이터 요소)
// 2. 배열 안에 있는 상품가격의 데이터를 for문으로 하나씩 조회한다.
// 3. i번째 상품들의 가격 합계와 평균을 구한다.
const priceList = [200,500,3000,5000,1200,2000,800,4200]
let sum = 0
for (let i = 0; i < priceList.length; i++) {
console.log(priceList[i]);
sum += priceList[i] // 대입연산, 누적해서 더해주는 코드임. sum이라는 변수에 sum과 priceList의 i번째 값을 더하고, sum에 대입.
// avg = sum / 10
}
console.log(`합계: ${sum}원, 평균: ${sum / 10}원`);
정의 참조 MDN
코드분할은 번들한 여러 코드 혹은 컴포넌트를 분리하는 것이다. 이렇게하면 필요에 따라 특정한 컴포넌트만 로딩하거나, 병렬로 로딩할 수 있음.
애플리케이션 복잡화나 유지 관리에 의해 CSS와 JavaScript 파일 용량 및 번들이 커지며, 특히 포함하고 있는 서드파티 라이브러리 개수, 용량이 클수록 페이지 로딩시간도 늘어난다.
큰 파일을 다운로드하지 않도록 스크립트를 작게 여러 파일로 분할할 수 있다.
이를 통해 유저가 첫 화면을 로딩할 때 필요한 기능을 바로 서버로부터 다운로드 할 수 있으며, 추가적인 스크립트는 화면이나 애플리케이션 상호 작용시에 지연 로딩(lazy Loading)해서 기능을 향상시킬 수 있다.
지연 로딩이란(==lazy Loading) ?
- 컴포넌트를 선별할 수 있는 방법. MPA의 장점을 SPA에서 구현할 수 있도록. Lazy Loading이 SPA를 MPA형식처럼 만들 수 있는 선택권을 부여함.
코드 총량은 같지만(Maybe 파일 숫자나 용량은 늘어남.), 초기 로딩에 필요한 코드는 적어진다.
예시
A페이지와 B페이지가 있는데, A페이지를 불러와야하는 상황.
A페이지는 400개의 파일만 불러오면 페이지가 정상적으로 작동하는데, B페이지는 2000개의 파일을 가져와야 한다.
MPA 방식으로 클라이언트와 서버가 통신하게 되면, A페이지를 불러올때나 B페이지를 불러올때 상관없이 도합 2400개의 파일을 서버로 부터 받아와야 함. ==> 이는 곧, 페이지 로딩의 시간이 길어짐을 의미 ==> 유저 이탈률로 이어질 확률 Up.
SPA 방식은 A페이지를 정상적으로 구현하는데 필요한 파일 400개만 먼저 들고 온다. 그리고 B페이지를 열 때, 그 시점에서 2000개의 파일을 불러온다. ==> 불러오는 페이지 파일의 개수가 적으므로 페이지 로딩시간 감소. ==> 유저들의 웹페이지 환경이 쾌적해질 수 있음.
HTML 기초
페이지의 속성을 정의하거나, 필요한 스크립트를 부른다.
즉, 눈에 안 보이는 필요한 것들을 head에 담는 것.
라우터 == 중개자 (연결과 이동을 담당)
특정 경로에 특정 페이지를 제공.
너무 눈 감겨서 다음에 Route는 비동기, 동기 할 때 같이 작성하기..
늘 정리에 진심이신듯 ㅎㅎ
고생많으셨습니다