방학이 끝난지 일주일이 지났다. 약 한 달간 기록보다 프론트엔드에 대한 기초적인 지식을 적용해보자 해서 HTML, CSS에 대한 기초적인 지식을 강의를 들으며 쌓아갔다. 회고를 통해 어떻게 나아갈지 조금씩 방향성을 잡아보려한다. Keep 방학이 끝난지 일주일이 지났지만, 나름의 목표를 가지고 새로운 지식을 쌓기 위해 노력했다. HTML과 CSS에 대한 기초적인 지식을 강의를 통해 학습했으며, 깃허브의 기능들도 익히면서 프론트엔드 개발에 대한 기초를 다졌다. 또한, 이전에는 간단한 깃허브 작업만 할 수 있었지만 이번에는 PR을 날리고 issue를 등록하는 경험까지 할 수 있었다. 비록 레포지토리를 정리하다가 실수로 삭제하는 일도 있었지만, 이러한 실수를 통해 중요한 경험을 얻을 수 있었다. 앞으로는 이러한..

자바스크립트에서 배열은 굉장히 많이 사용되는 자료구조이다. 자바스크립트 배열은 다양한 메서드를 제공하고 이는 굉장히 유용하게 쓰인다. (특히 코딩테스트 풀때...) 배열 메서드가 결과물을 반환하는 패턴 원본 배열을 직접 변경하는 메서드 원본 배열 : 배열 메서드를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체 원본 배열을 직접 변경하지 않고 새로운 배열을 생성해 반환하는 메서드 const arr = [1]; // push 메서드는 원본 배열(arr)을 직접 변경한다. arr.push(2); console.log(arr); // [1, 2] // concat 메서드는 원본 배열(arr)을 직접 변경하지 않고 새로운 배열을 생성하여 반환한다. const result = arr.co..

배열(Array) 여러 개의 값을 순차적으로 나열한 자료구조 특징 사용 빈도가 높은 기본적인 자료구조 유용한 메서드 다수 제공 용어 정리 with 예시 const arr = ['apple', 'banana', 'orange']; 요소 : 배열이 가지고 있는 값 모든 값은 배열의 요소가 될 수 있다. ex. 'apple', 'banana', 'orange' 인덱스 : 배열에서 자신의 위치를 나타내는 0이상의 정수 배열 요소에 접근할 때 사용 ex. arr[0] = 'apple' 생성 방법 배열 리터럴 Array 생성자 함수 Array.of, Array.from 메서드로 생성 배열 vs 객체 구분 객체 배열 구조 프로퍼티 키, 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 *값의 순서 X O *l..

일급 객체 우리는 다음과 같은 조건을 만족하는 객체를 일급객체라고 한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타입에 생성이 가능하다. 변수나 자료구조(객체, 배열) 등에 저장할 수 있다. 함수의 매개변수에 전달 할 수 있다. 함수의 반환값으로 사용할 수 있다. // 1. 함수는 무명의 리터럴로 샐성할 수 있다. // 2. 함수는 변수에 저장 할 수 있다. // 런타입(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const inc = function (num) { return ++num; }; const dec = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { inc, dec }; //..

Object 생성자 함수 new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성해 반환함. 빈 객체는 생성 이후 프로퍼티 또는 메서드를 추가해 완성할 수 있다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = "Sim Mi Jin"; person.sayHello = function () { console.log(`Hi my name is ${this.name}`); }; console.log(person); // {name: "Sim Mi Jin", sayHello: ƒ ()} person.sayHello(); // Hi my name is Sim Mi Jin 그런데 .. 생성자 함수가 뭐죠 .. ? new 연산자와 ..

내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드 : 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript사양에서 사용하는 의사 프로퍼티와 의사 메서드. 형태 : [[...]] (이중 대괄호로 감싸져있음) 개발자가 직접 접근할 수 없음. 간접적으로 접근이 가능함 // 16-1 const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근 불가능 o.[[Prototype]] // SyntaxError: Unexpected token '[' // 단, 일부 내부 슬롯과 내부 메서드에 한해 간접적으로 접근할 수 있는 수단을 제공하긴 함. o.__proto__; // Object.prototype 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼..

var 키워드로 선언한 변수의 문제점 var 키워드로 선언된 변수의 특징 - 변수 중복 선언 허용 // 15-1 var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 변수 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var티눠드가 없는 것 처럼 동작함 var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x); console.log(y); 에러 발생하지 않음 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생 var 키워드로 선언된 변수의 특징 - 함수 레벨 스코프 함수 블록만을 지역 스코프로 인정 // 15-2 var x = 1; if (true) { // x는 전역 변수...

전역 변수의 무분별한 사용은 여러 문제점이 있기때문에 위험하다. 변수의 생명주기 지역 변수의 생명주기 변수의 생명주기 : 변수가 생성되고 소멸되는 주기 // 14-1 // 지역 변수의 생명주기 // 없다면 ..? // 한 번 선언된 변수는 프로그램이 종료되지 않는 한 영원히 메모리 공간을 점유하게 된다. // 전역 변수의 생명주기 === 애플리케이션의 생명주기 function foo() { var x = "local"; console.log(x); return x; } foo(); // local console.log(x); // Uncaught ReferenceError: x is not defined 일반적 : 함수가 종료되면 함수가 생성한 스코프도 소멸 // 14-2 // 지역 변수의 생명주기 //..

스코프란 ? 스코프 : 유효 범위 // 13-1 function add(x, y) { // 매개 변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코는 함수 몸체 내부. console.log(x, y); return x + y; } add(2, 5); // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.log(x, y); // Uncaught ReferenceError: x is not defined // 13-2 // 스코프 : 모든 식별자(변수, 함수, 클래스 이름 등) 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참소할 수 있는 유효 범위 // -> 식별자가 유효한 범위 var v1 = 1; if (true) { var v2 = 2; if (true) ..

함수란 수학에서의 함수 : 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것. 프로그래밍에서의 함수 : 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행단위로 정의한 것. // 12-1 // 함수 : 일련의 과정을 문으로 구현하고 코드블록으로 감싸서 하나의 실행단뒤로 정의한 것. // f(x, y) = x+y function add(x, y) { return x + y; } console.log(add(2, 5)); // 7 관련 용어 매개 변수 : 함수 내부로 전달 받는 변수 인수 : 넘겨주는 값 반환값 : 출력하는 값 특징 함수 = 값 따라서 여러개 존재 가능 → 구별하기 위해 식별자인 함수 이름을 사용 함수 생성 방법 함수 정의를 통해 생성함 어떻게 정의해요 .. ? 다양한 방법으..