AWS EC2 서버에 접속하기▶ EC2 서버에 접속하기 위한 2가지 방법이 존재1. PuTTY (SSH 프로토콜)2. WinSCP (FTP 프로토콜)1. PuTTY▶ 서버 컴퓨터에 원격으로 접속하는 프로그램▷ 클라이언트 컴퓨터(내 컴퓨터)로 서버 컴퓨터에 접속하여 원격 명령을 실행하여 서버 컨트롤 ▶ AWS는 SSH 프로토콜(SSH command line)을 사용▷ SSH: 암호화된 접근 방식의 Secure Shell 프로토콜2. WinSCP▶ FTP 프로토콜을 통해 서버에 파일을 전송하는 프로그램▷ FTP : File Transfer Protocol▷ 서버에 있는 파일으 다운로드하지 않고 바로 편집 가능3. PuTTY 사용하여 EC2 인스턴스에 접속하기1. PuTTY 프로그램 설치 후 실행하여 인스턴스..

모던 자바스크립트 Deep Dive 정리 1. 자바스크립트 객체의 분류 1-1. 표준 빌트인 객체 1-2. 호스트 객체 1-3. 사용자 정의 객체 2. 표준 빌트인 객체 ▶ ECMAScript 사양에 정의된 객체로, 브라우저 혹은 Node.js 에서도 사용 가능 ▶ 전역 객체의 프로퍼티로 제공되므로, 별도의 선언 없이 전역 변수처럼 사용 가능 ▷ Object, String, Math, Map/Set, Promise 등 ▶ Math, Reflect, JSON 을 제외한 빌트인 객체들은 생성자 함수 객체이기 때문에 인스턴스 생성 가능 ▷ 인스턴스의 프로토타입은 빌트인 객체.prototype 에 바인딩 된다 ▶ 표준 빌트인 객체들은 인스턴스 없이 호출 가능한 빌트인 정적 메서드를 제공한다 ▷ 예) Number..

모던 자바스크립트 Deep Dive 정리 1. strict mode란? ▶ 오류를 발생시킬 가능성이 높거나 JS 엔진의 최적화에 문제를 일으킬 수 있는 코드에 대해 명시적 에러 발생 ▷ ES5에서 추가 ▷ ESLint의 하위 호환 ▷ ES6에서 추가된 클래스와 모듈은 기본적으로 strict mode가 적용됨 2. strict mode 적용 ▶ 전역의 선두 혹은 함수 몸체의 선두에 `use strict`; 를 추가 ▷ 전역의 선두에 추가하면 스크립트 전체에 strict mode 적용 ▷ 함수 몸체의 선두에 추가하면 해당 함수와 중첩 함수에 strict mode 적용 3. 전역의 선두에 strict mode 적용은 바람직하지 않음 ▶ 서드파티 라이브러리의 경우 non-strict mode로 설정된 경우가 있..

모던 자바스크립트 Deep Dive 정리 1. 객체지향 프로그래밍 2. 상속과 프로토타입 3. 프로토타입 객체 ▶ 프로토타입을 상속받은 하위 객체 -> 상위 객체의 프로퍼티 사용 가능 ▶ 생성자 함수에 의해 생성된 객체의 프로토타입 -> 생성자함수.prototype 형태로 바인딩된 객체 ▶ 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가짐 ▷ __proto__ 접근자 프로퍼티를 통해 프로토타입에 접근 가능 3-1. __proto__ 접근자 프로퍼티 ▶ 모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입([[Prototype]]) 에 접근 가능 ▶ 접근자 프로퍼티 : getter, setter 함수로 구성 const obj = {}; const parent = { x: 1 ..

모던 자바스크립트 Deep Dive 정리 1. 일급 객체 1-1. 일급 객체의 조건 4가지 ▶ 무명의 리터럴로 생성 가능 ▶ 변수나 자료구조(객체, 배열 등)에 저장 가능 ▶ 함수의 매개변수에 전달 가능 ▶ 함수의 반환값으로 사용 가능 자바스크립트의 함수는 위의 조건을 모두 만족하므로 일급 객체이다 ▶ 즉, 함수를 객체와 동일하게 사용할 수 있다 ▷ 함수 객체는 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다 2. 함수 객체의 프로퍼티 2-1. arguments 프로퍼티 ▶ 함수 호출시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사배열 객체 ★ 유사배열 : length 프로퍼티를 가진 객체로, for 문으로 순회 가능 (대표적으로 문자열) ▷ 배열 메서드를 사용할 수는 없다 ▷ 함수 내부에서만 ..

타겟 이미지 flex 를 적용하고 flex-wrap: wrap 속성을 이용해서 width를 초과하는 element는 다음 행으로 내리자! 그리고 자식 태그는 3개만 만들기 내 코드 아웃풋 결과 Score: 600.69 {668 bytes}, 100% match 정리 flexbox가 정말 유용하다!

모던 자바스크립트 Deep Dive 정리 ▶ 객체 생성방법 2가지 1. 객체 리터럴 2. 생성자 함수 Object 생성자 함수 ▶ new 연산자와 함께 Object 생성자 함수를 호출하면 빈객체를 생성하여 반환한다 ▷ 예시 // 빈 객체의 생성 const person = new Object(); ▶ 인스턴스 ▷ 생성자 함수에 의해 생성된 객체 생성자 함수 ▶ 생성자 함수 ▷ new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 ▶ 인스턴스 ▷ 생성자 함수에 의해 생성된 객체 ▶ Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array 등의 빌트인 생성자 함수가 있음 객체 리터럴 방식 vs 생성자 함수 방식 객체 리터럴 방식 ▶ 간편하긴 하나, 동..

모던 자바스크립트 Deep Dive 정리 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의 데이터 프로퍼티 ▶ 프로퍼티를 생성할 때 자동 정의되는 요소들 프로퍼티 어트리뷰트 프로퍼티 디스크립터 객체의 프로퍼티 설명 데이터 프로퍼티 [[Value]] value - 프로퍼티 밸류값 [[Writable]] writable - 프로퍼티 밸류값 변경 가능여부 - false 이면 읽기 전용 [[Enumerable]] enumerable - 열거 가능 여부 - false 이면 for .. in 또는 Object.keys() 메서드로 열거 불가 [[Configurable]] configurable - 재정의 가능 여부 - false 이면 프로퍼티 삭제, 프로..