[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고(2) | AWS EC2, JS 업그레이드

1. 이번 목표:
    아마존 EC2 생성, 자바스크립트 업그레이드 내용을 배워보자!

 

2. 배운 내용 요약

  1. AWS EC2

  2. 웹 서버

  1. AWS EC2

Elastic Compute Cloud
독립된 컴퓨터를 임대해주는 클라우드 서비스.

 

  2. 웹 서버

정적파일을 전달하는 서버
정적 파일이란 이미지, CSS, JS파일과 같이 변경되지 않는 파일.

 

  2-1. 아파치 (APACHE)

http 표준을 준수하게 구축된 오픈 소스 웹 서버
오래 사용되어 온 만큼 범용으로 거의 모든 OS에서 실행 가능하고 다양한 모듈 보유.

 

  2-2. 엔진 엑스 (NGINX)

아파치보다 더 다양한 기능 보유 및 성능 뛰어남.
대용퍙 트래픽 처리 가능.

  3. 자바스크립트 upgrade

구조분해할당(Destructuring assignment)
말 그대로 구조 분해 할당 배열이나 객체의 속성을 해체하며 그 값을 개별 변수에 담는 것.
배열이나 객체에 저장된 데이터의 일부를 가져오고 싶을 때 주로 사용.

 

const arr = ['a', 'b', 'c'];
const [A, B, C] = arr;

console.log(A); // 'a'

// let A = arr[0]; 을 반복하는 것보다 훨씬 간단

 

    3-1. 배열의 구조 분해 할당

      const [변수] = 배열;
      - 각 변수에 인덱스 순으로 값 대응
      - 구조분해 시 변수 값이 undefined일 때 기본값 할당 가능
      - 구조분해 없이 두 변수의 값 교환도 가능

value1 = "second";
value2 = "first";

[value2, value1] = [value1, value2];

console.log(value1); // first
console.log(value2); // second

 

    3-2. 객체의 구조 분해 할당

      const [변수] = 객체;

      - 개체의 속성 값을 변수로 접근하기 위해 사용
      - 배열처럼 순서에 따라 값이 할당된든 것이 아니라, key의 이름에 따라 변수의 값이 할당됨.

      - 콜론(:)을 이용해 새 변수명 선언하고 원래의 값을 새 변수에 할당 가능.

const obj = {
	title: '제목',
    content: '내용',
    id: 0,
};

const {id, title, content} = obj;
console.log(title); // 제목

console.log(obj.title);
console.log(obj["title"]);

//////////////////////////////////////////////
const { id, title, content } = obj;
console.log(title);

const { n1, t1, c1 } = obj;
console.log("n1: ", n1); // undefined

const { content: c2, title: t2 } = obj;
console.log(t2, c2); // 제목 내용

 

    3-3. spread 파라미터

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];

const arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 'a', 'b', 'c']

 

    3-4. rest 파라미터

const nums = [1, 2, 3];

function get(a, ...rest) {
	console.log(rest); // [2, 3]
}

spread 파라미터
  호출하는 함수의 파라미터에 사용

rest 파라미터
  호출받는 함수의 파라미터에 사용
  호출하는 함수의 파라미터 순서에 맞춰 값 설정 후 남은 파라미터 값을 배열로 설정

 

 

    3-4. 클래스(Class)

객체(object)를 만들 수 있는 틀(탬플릿)
- 정해진 틀로 같은 규격의 오브젝트를 여러 개 만들 수 있음 => 재사용 가능
- new 키워드를 이용해 미리 만들어둔 클래스 형태 오브젝트 만들기 가능(인스턴스화)

class House {
	// 생성자 함수, 객체의 속성(내부에서 사용할 변수) 부여
 	constructor(name, year) {
		this.name = name;
		this.year = year;
	}
	//  객체 메소드
 	age() {
	console.log(`건축한지 ${2023 - this.year}년 되었어요`);
 	}
}

 

class Apartment extends House {
...
}

상속
extends라는 키워드를 사용해서 상속을 받을 수 있다.
상속을 이용하면 기존의 클래스 속성과 메소드를 받아와 사용하되, 추가적인 속성과 메소드를 더 정의할 수 있다.

 

    3-5. 모듈(Module)

코드의 재사용과 관리, 의존성 해결을 위해 사용되는 독립적인 코드 조각
코드의 구조를 깔끔하게 유지할 수 있다.

 

// 함수 내보내기
export function greet(name) {
  return `Hello, ${name}!`;
}

// 변수 내보내기
export const age = 25;

////////////////////////////////////////////////////

// 모듈 가져오기
import { greet, age } from './example.js';

console.log(greet('Alice'));  // Hello, Alice!
console.log(age);  // 25

// 전체 모듈 가져오기
import * as example from './example.js';

console.log(example.greet('Bob'));  // Hello, Bob!
console.log(example.age);  // 25


//////////////////////////////////////////////////

// 기본 내보내기
export default function greet(name) {
  return `Hello, ${name}!`;
}

// 기본 내보내기 가져오기
import greet from './greet.js';

console.log(greet('Charlie'));  // Hello, Charlie!

 

 

• export: 모듈에서 기능(함수, 객체, 변수 등)을 외부로 내보낼 때 사용.
• import: 다른 파일에서 내보낸 모듈을 가져올 때 사용.
• export default: 기본값으로 내보낼 때 사용. import할 때 이름이 자유로움.

 

 

 

3. 회고

체력 관리를 잘 해서 수업을 열심히 듣겠다는 의지와는 다르게 이번 한 주는 체력이 버텨주지를 못했다. 불면증이 너무 심하게 도진 탓에 잠이 부족해서인지 머리는 어지럽고, 속도 울렁거리고 하루종일 멍하니 집중도 하지 못하는 상태까지 가서 조퇴까지 하게 되었다. 냉정하게 돌이켜보면 내가 기본적으로 알고 있는 자바스크립트나 프론트 파트 진도를 나간게 아니라 node.js라던지 새로운 개념과 지식을 배우는 거였어도 이렇게 쉽게 조퇴를 하거나 병가(?)를 냈을까? 아마 어떻게든 더 버텼을 것 같은데 내 의지가 그것밖에 되지 않았나 싶어 살짝 자괴감이 든다.

예전 국비 강의를 들었을 때 AWS EC2 인스턴스 생성을 하고 이것 저것 하다가 과금이 된 적이 있는데 이번에 새롭게 AWS 가입을 하면서 옛 기억이 새록새록 났다. 이 때는 입원도 하고 수업을 많이 빠질 수 밖에 없던 때라 AWS에 대해 제대로 이해하지 못했는데 그래도 EC2 인스턴스 생성 할 때는 강의를 그나마 집중해서 들을 수 있어서 다행이다. 이미 몸 안좋아서 수업을 몇 번 놓친 것은 어쩔 수 없는 일이니.. 강의 진도 다 따라잡고 실습도, 과제도 하나도 놓치지 않고 다 내 것으로 만들자.