WoohyunKing의 개발 성장일지

javascript를 사용하여, HTML을 렌더링해주는 템플릿 엔진 Pug 사용이유 HTML을 간단하게 표현해서 가독성이 좋다. 마크업 문법보다 코드량이 적어 생산성이 좋아진다. JS 연산 결과를 쉽게 보여줄 수 있다. 정적인 부분과 동적인 부분을 따로 할 수 있다. Pug 작성법 html에서 기호가 제외된다. 요소와 같은 줄에 있는 것을 태그로 감싼다. 태그에 속성을 넣을때 괄호()를 사용한다. - 태그(속성=값) 태그뒤에 .을 붙혀 클래스를 추가할 수 있다 - 태그 .class 태그뒤에 #을 붙혀 id를 추가할 수 있다 - 태그 #id 들여쓰기로 부모요소와 자식요소를 나눈다. Pug의 3가지 장점 상속(block & extends) 파일 분할(include) 블럭 재사용(Mixins)

0) 데이터 타입(Data Type) 데이터 타입은 '값의 종류'를 말한다. 자바스크립트의 모든 값은 데이터 타입을 가진다.(ES6는 총 7개의 데이터 타입을 제공) 데이터 타입은 크게 원시 타입(Primitive Type)과 객체 타입(Object/Reference Type)으로 분류할 수 있다. 1) 숫자 타입 // 모두 숫자 타입이다. var integer = 10; // 정수 var double = 10.12; // 실수 var negative = -20; // 음의 정수 C나 java의 경우 숫자도 int, long, float, double 등 과 같은 다양한 숫자 타입을 제공한다. 하지만 자바스크립트는 독특하게 하나의 숫자 타입만 존재한다. var binary = 0b01000001; // ..

5.1 값(Value) 값이란 식(표현식)이 평가되어 생성된 결과를 말한다. // 10 + 20은 평가되어 숫자 값 30을 생성한다. 10 + 20; // 30 여기서 평가란 식을 해석해서 값을 '생성'하거나 '참조'하는 것을 의미한다. 모든 값은 데이터 타입(Data Type)을 가지며 메모리에 2진수, 즉 비트의 나열로 저장된다. // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다. var sum = 10 + 20; 값을 생성하는 방법은 다양하게 있는데, 값을 생성하는 가장 기본적인 방법은 리터럴을 사용하는 것이다. 5.2 리터럴(Literal) 리터럴이란 값을 생성하기 위해 미리 약속한 표기법이다. 따라서, 컴퓨터가 아닌 사람이 이해할 수 있는 값을 의미한다. 자바스크립트 엔진은..

Array.prototype.every() const isBelowThreshold = (currentValue) => currentValue element % 2 === 0; console.log..

함수의 정의 함수란 ? 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합 어떠한 입력(Input)을 받아 특정한 기능이나 계산을 수행한 다음 그 결과(Output)를 돌려주는 역할을 한다. (1️⃣ input 받기 → 2️⃣ 기능 수행 → 3️⃣ output 반환) 물론, 프로그래밍에서 쓰는 함수는 입력이나 결과 없이도 함수 안에서 특정 기능만을 수행할 수도 있다. (1️⃣ input 받기 → 2️⃣ 기능 수행 OR 2️⃣ 기능 수행 only) 함수의 선언과 실행 // 1. 함수의 선언 (또는 정의) function sayHello(name) { // name이라는 매개변수가 입력되도록 만들어진 함수! console.log("Hello, " + name + "! 😆"); ..

Array.prototype.reduce() const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue); console.log(sumWithInitial); // Expected output: 10 reduce() 함수는 배열의 각 요소에 대해 callback을 실행할 때 마다 이전 요소에 대한 실행 결과를 전달하여 단 1개의 출력 결과를 만듭니다. ​ 즉, 배열 원소를 입력으로하여 1개의 수치 또는 문자열 또는 배열 또는 딕셔너리를 만듭..

1) for() let str = ''; for (let i = 0; i console.log(element)); // Expected output: "a" // Expected output: "b" // Expected output: "c" 배열의 각 요소에 대해 인자로 전달된..

4.1 변수란 무엇인가 ? 왜 필요한가 ? 변수는 '값을 저장하기 위해 확보한 메모리 공간 자체' 또는 '그 메모리 공간을 식별하기 위해 불린 이름'을 말한다. 사람은 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 '연산'과 '기억'을 수행하는 부품이 나누어져 있다. 컴퓨터는 CPU를 사용해서 연산을 하고, 메모리를 사용해 데이터를 기억한다. 메모리란 ? 데이터를 저장할 수 있는 메모리 셀의 집합체 메모리 셀 하나의 크기는 1byte(8bit)이며, 컴퓨터는 메모리 셀의 크기인 1byte 단위로 데이터를 저장하거나 읽어들이고 각 셀은 메모리 주소를 갖는다. 메모리에 저장되는 데이터는 데이터의 종류와 상관없이 모두 2진수로 저장된다. 메모리 주소를 통해 값에 직접 접근하는 것은 치명적인 오류를 발생시킬 가..

1) 얕은 비교 const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(obj1 === obj2); // false 원시 타입 데이터의 경우 '값'이 동일한지만 비교하고, 배열과 객체과 같은 참조 타입 데이터의 경우 '참조값'만 비교한다. 2) 깊은 비교 const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true 얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교한다. 깊은 비교 방법은 아래와 같다. 1️⃣ Object depth가 깊지 않은 경우 : JSON.st..

구조 분해 할당 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // 20 console.log(rest); // ..