함수 (function)

함수의 선언
변수를 선언하고 해당 변수에 값을 할당했던 것처럼, 함수도 선언을하고 해당 함수가 실행할 코드의 집합을 만들어서 저장해준다.

// function 함수명(매개변수들 ..) {
//     이 함수에서 실행할 코드들
//     return 반환값
// }
  1. 함수명은 함수가 하는 일들을 대표할 수 있는 이름으로 작성.
  2. *매개변수(parameter)는 해당 함수의 Body에 있는 코드에서 사용할 수 있는 일종의 변수이고, 함수 호출시 전달하게 된다.
  3. 함수를 실행하기 위해서 필요한 일종의 input이라고 생각하자.
  4. 중괄호 안에는 이 함수가 해야할 일들을 코드로 쭉 작성하고, 반환해야 할 값(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}입니다.`);
  • 함수 Quiz
//  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, while)

for

for (begin; condition; step) {조건을 만족할 때 실행할 코드}

  • begin에 해당하는 부분은 변수를 선언하고, 해당 변수에 데이터를 할당하는 부분. 이후에 세미콜론(;)으로 begin 구문이 끝났다는 것을 알려줘야 함.
  • condition에 해당하는 부분은 조건을 명시해준다. 앞서 선언했던 변수에 조건절을 사용하여 이 조건을 만족하는지를 체크하게 된다. 해당 조건이 만족한다면, for의 body 안에 있는 코드들이 작동할 것. (언젠가는 해당 조건에 만족하게 되면, 코드가 끝나야 함.)
  • 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)

  • 비교 연산자를 사용하여 조건이 True이면 실행, False이면 실행하는 코드를 구성할 수 있음.
// 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) 출력값 => "기차표 지금 예매해라."

반복문과 조건문의 활용(for, if)

  • 반복문과 조건문은 코딩하는데 있어 핵심중의 핵심이다.
  • 우리가 짜는 프로그램은 반복문과 조건문의 무수한 집합이라 할 수 있을 정도다.
  • 입력된 데이터에 대해 조건문을 활용해 수많은 조건문으로 분기하고, 반복문을 활용해 반복해서 처리하는 게 프로그램이 주로 하는 일이다.
// 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

객체타입의 정의 (Object)
관련된 데이터들을 묶어서 한번에 잘 나타낼 수 있는 데이터 타입.

클래스(class) 정의

  • 객체를 만들 때 마치 설계도처럼 사용하는 것이 바로 클래스다.
  • 흔히 클래스는 템플릿이고, 객체는 이를 구체화한 것이라고 한다.
  • 함수와 똑같이, 클래스를 미리 정의해놓으면 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체(인스턴스)를 만들 수 있다.
  • constructor라는 키워드는 '생성자'를 뜻한다. 생성자는 함수와 비슷한데, 생성자 말 그대로 나중에 객체가 생성이 될 때 자바스크립트 내부에서 자동으로 호출이 되는 함수다.
// 클래스 선언
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 데이터 조회

메소드 (method)

메소드란?
클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라, 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의할 수 있다.

  • 객체를 생성한 후, 만들어진 객체의 메소드를 호출하면 된다. (참고 문제 참조)

  • 클래스 선언, 메소드 호출 코드

// 클래스 선언
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()

객체 리터럴 (Object Literal)

  • 자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수 있음.
  • 객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이다.
  • 2개 이상의 속성과 메소드가 있을 때는, 쉼표(,)로 구별한다.
  • 가독성을 위해서 줄바꿈도 해주는 것이 좋다.
// 아래는 객체리터럴 형식
// 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())

Array(배열)

핵심 내용

  • 자바스크립트에서 데이터를 표현하기 위한 방법으로, 기본타입과 객체 그리고 배열이 있다.
  • 기본타입과 객체만으로는 같은 형식의 많은 데이터를 순서대로 저장하고자 할 때는, 데이터의 수만큼 변수들을 선언해줄 수 밖에 없다.
  • 배열은 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용되는 데이터 타입이다.

배열의 선언

// 배열의 선언
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 해주면 된다.

배열의 길이 Check

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

//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}`);

Code splitting(코드분할)

정의 참조 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, CSS 기본 내용

HTML 기초

  • HTML은 크게 head와 body로 구성. head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.
  • head안에 들어가는 대표적인 요소들 : meta, script, link, title 등

    페이지의 속성을 정의하거나, 필요한 스크립트를 부른다.
    즉, 눈에 안 보이는 필요한 것들을 head에 담는 것.


Route

라우터 == 중개자 (연결과 이동을 담당)
특정 경로에 특정 페이지를 제공.

너무 눈 감겨서 다음에 Route는 비동기, 동기 할 때 같이 작성하기..

profile
개자이너 하고싶어요

1개의 댓글

comment-user-thumbnail
2022년 11월 17일

늘 정리에 진심이신듯 ㅎㅎ
고생많으셨습니다

답글 달기