Rename repository from Front-Practice to Web and add CSS and HTML directories

Author: seungwonme

CSS/README.md

@@ -0,0 +1,39 @@
+// Integer
+
+let integer = 2147483647;
+let infinity = Infinity;
+let negInfinity = -Infinity;
+let nan = NaN;
+
+console.log(`integer: [${integer}\ninfinity: ${infinity}\nnegInfinity: ${negInfinity}\nnan: ${nan}`);
+
+// String
+
+let name1 = "seunan";
+let name2 = `${name1} babo`; // 백틱을 이용해 문자열을 템플릿화할 수 있다.
+
+console.log(`name1: ${name1}\nname2: ${name2}`);
+
+// Boolean
+
+let isTrue = true;
+let isFalse = false;
+
+console.log(`isTrue: ${isTrue}\nisFalse: ${isFalse}`);
+
+// Null & Undefined
+
+let undefinedVariable;
+let nullVariable = null;
+
+console.log(`undefinedVariable: ${undefinedVariable}\nnullVariable: ${nullVariable}`);
+
+let a;
+a = a ?? 10; // null 병합 연산자, a가 null 또는 undefined일 경우 10을 반환한다.
+console.log(`a = a ?? 10: ${a}`);
+
+let numberA = 12;
+let numberB = "2";
+console.log(`numberA + numberB = ${numberA + numberB}`);
+console.log(`numberA + parseInt(numberB) = ${numberA + parseInt(numberB)}`);
+console.log(`numberA * numberB = ${numberA * numberB}`);

HTML/README.md

@@ -0,0 +1,45 @@
+funcDeclaration(); // 호이스팅으로 인해 함수 선언문은 호출 가능하다.
+// funcExpression();
+
+function funcDeclaration() {
+	console.log("Run funcDeclaration");
+	console.log(this.key);
+	return ("Declaration");
+}
+
+const funcExpression = function () {
+	console.log("Run funcExpression");
+	return ("Expression");
+}
+
+const arrowFunc = () => {
+	console.log("Run arrowFunc");
+	return ("Arrow");
+}
+
+const arrowFuncOmitReturn = () => "Arrow";
+// return문만 있을 경우 중괄호와 return을 생략할 수 있다.
+
+const arrowFuncOmitBrackets = arg => `Arrow ${arg}`;
+// 매개변수가 하나일 경우 괄호를 생략할 수 있다. 함수의 몸체가 표현식일 경우 중괄호와 return을 생략할 수 있다.
+
+const testThis = {
+	name: "seunan",
+	sayHiDeclaration: function() {
+		console.log(`Hi, ${this.name}`); // this가 바인딩된다.
+	},
+	sayHiExpression: () => {
+		console.log(`Hi, ${this.name}`); // this가 바인딩되지 않는다.
+	},
+}
+
+testThis.sayHiDeclaration();
+testThis.sayHiExpression();
+
+callbackFunc("seunan", () => console.log("Callback"));
+
+// 콜백함수란 함수를 인자로 받아 특정 작업이 끝났을 때 실행시키는 함수를 말한다.
+function callbackFunc(name, callback) {
+	console.log(`Hello, ${name}`);
+	callback();
+}

JavaScript/1-Data-Type.js

@@ -0,0 +1,57 @@
+let obj = new Object(); // 객체 생성자 함수를 이용한 객체 생성
+let obj1 = {}; // 객체 리터럴을 이용한 객체 생성
+
+let obj2 = {
+	key: "value", // key : value 형태로 객체의 속성을 정의, object property
+	key1: "value1",
+	key2: true,
+	key3: undefined,
+	key4: [1, 2, 3],
+	key5: function () {
+		console.log("hello");
+	},
+	key: "new value", // 객체의 속성은 중복될 수 없다. 중복될 경우 마지막에 정의된 속성이 덮어쓴다.
+};
+
+console.log(obj2.key); // 점 표기법을 이용한 속성 접근
+console.log(obj2["key"]); // 괄호 표기법을 이용한 속성 접근
+let propertyName = "key";
+console.log(obj2[propertyName]); // 변수 또는 표현식을 이용한 속성 접근을 할 때는 괄호 표기법을 사용해야 한다.
+
+const person = {
+	name: "seunan", // 함수가 아닌 property -> Member
+	age: 24,
+	say: function () {
+		console.log(`hello, my name is ${this.name}`); // this는 객체 자신을 가리킨다.
+	}, // 함수인 property -> Method
+};
+
+person["gender"] = "man"; // const로 선언된 객체 자체를 변경하는 것은 불가능하지만 객체의 속성을 변경하는 것은 가능하다.
+person.location = "seoul"; // 객체의 속성을 동적으로 추가할 수 있다.
+
+/* person = {
+	name : "babo",
+	age : 01,
+}; // const로 선언된 객체 자체를 변경하는 것은 불가능하다. */
+
+console.log(person);
+
+delete person.location; // 객체의 속성을 삭제할 수 있다.
+delete person["gender"]; // delete로 삭제한 property는 메모리 공간에서 완전히 삭제되지 않으므로 null로 초기화해주는 것이 좋다.
+person.name = null;
+
+console.log(person);
+
+function getPropertyValue(key) {
+	console.log(person[key]);
+}
+getPropertyValue("location");
+getPropertyValue("gender");
+
+person.say();
+
+console.log(`name : ${"name" in person}`); // in 연산자를 이용해 객체에 특정 속성이 있는지 확인할 수 있다.
+console.log(`age : ${"age" in person}`);
+console.log(`location : ${"location" in person}`);
+
+console.log(`name : ${person.hasOwnProperty("name")}`); // hasOwnProperty 메소드를 이용해 객체 자신의 속성인지 확인할 수 있다.

JavaScript/2-Function.js

@@ -0,0 +1,148 @@
+let firstArr = new Array(1, 2, 3, 4); // 배열 생성자 함수를 이용한 배열 생성
+let randArr = [1, "2", true, null, undefined, {}, [], function () {}]; // 배열 리터럴을 이용한 배열 생성
+
+firstArr.push(5); // 배열의 끝에 요소를 추가한다.
+
+console.log(firstArr.length); // 배열의 길이를 반환한다.
+
+console.log(randArr);
+
+const person = {
+	name: "seunan", // 함수가 아닌 property -> Member
+	age: 24,
+	say: function () {
+		console.log(`hello, my name is ${this.name}`); // this는 객체 자신을 가리킨다.
+	}, // 함수인 property -> Method
+};
+
+const personKeys = Object.keys(person); // 객체의 속성들을 배열로 반환한다.
+const personValues = Object.values(person); // 객체의 속성들의 값을 배열로 반환한다.
+
+for (let i = 0; i < personKeys.length; i++) {
+	console.log(`${personKeys[i]} : ${personValues[i]}`);
+}
+
+const numArr = [1, 2, 3, 4, 5];
+
+// const newArr = [];
+// arr.forEach((elm) => newArr.push(elm * 2)); // 배열의 요소들을 순회하며 콜백함수를 실행한다.
+const newArr = numArr.map((elm) => elm * 2); // 배열의 요소들을 순회하며 콜백함수를 실행한 결과를 새로운 배열에 담아 반환한다.
+
+console.log(numArr.includes(3)); // 배열에 특정 요소가 있는지 확인한다.
+console.log(numArr.indexOf("3")); // 배열에 특정 요소가 있는지 확인하고 있을 경우 해당 요소의 인덱스를, 없으면 -1을 반환한다.
+
+const arr = [
+	{ num: 1, color: "red" },
+	{ num: 2, color: "blue" },
+	{ num: 3, color: "green" },
+	{ num: 4, color: "yellow" },
+];
+
+console.log(
+	arr.findIndex((elm) => {
+		return elm.color === "red";
+	})
+);
+
+const idx = arr.findIndex((elm) => elm.color === "red"); // 배열의 첫 요소부터 순회하며 콜백함수를 실행한 결과가 true가 되는 요소의 인덱스를 반환한다.
+console.log(arr[idx].color);
+
+const element = arr.find((elm) => elm.color === "red"); // 배열의 첫 요소부터 순회하며 콜백함수를 실행한 결과가 true가 되는 요소를 반환한다.
+console.log(element.color);
+
+const filteredArr = arr.filter((elm) => elm.color === "red"); // 배열의 첫 요소부터 순회하며 콜백함수를 실행한 결과가 true가 되는 요소들을 모아 새로운 배열로 반환한다.
+console.log(filteredArr);
+
+const arr1 = arr.slice(0, 2); // 배열의 특정 구간을 잘라 새로운 배열로 반환한다.
+const arr2 = arr.slice(2, 4);
+
+console.log(arr1.concat(arr2)); // 배열을 합쳐 새로운 배열로 반환한다.
+
+let numbers = [0, 1, 3, 2, 10, 30, 20];
+console.log(numbers.sort()); // sort() 메서드는 기본적으로 유니코드 순서로 정렬한다.
+
+const compare = (a, b) => {
+	if (a > b) return 1; // 콜백함수의 반환값이 0보다 크면 a를 b보다 뒤로 정렬한다.
+	if (a === b) return 0; // 콜백함수의 반환값이 0이면 a와 b의 순서를 바꾸지 않는다.
+	if (a < b) return -1; // 콜백함수의 반환값이 0보다 작으면 a를 b보다 앞으로 정렬한다.
+};
+
+numbers.sort(compare); // 숫자를 오름차순으로 정렬하려면 콜백함수를 이용해야 한다.
+console.log(numbers);
+
+console.log(numbers.sort((a, b) => a - b));
+
+const cArr = ["안승원", "님", "안녕하세요", "반갑습니다"];
+
+console.log(cArr.join(" ")); // 배열의 요소들을 구분자(default는 ,)를 이용해 하나의 문자열로 합친다.
+
+/* 
+function transformToObjects(numberArray) {
+    // TODO: Add your logic
+    // should return an array of objects
+    return numberArray.map((item) => {
+        return {var : item};
+    })
+    // return numberArray.map((item) => ({var : item}))
+}
+
+const objArr = transformToObjects([1, 2, 3, 4]); // [{var: 1}, {var: 2}, {var: 3}, {var: 4}];
+console.log(objArr);
+
+// Destructuring
+const [firstName, lastName] = ["Seungwon", "An"];
+
+console.log(`firstName : ${firstName}, lastName : ${lastName}`);
+
+const {name: userName, age} = {name : "seunan", age : 24};
+
+console.log(`userName : ${userName}, age : ${age}`);
+
+// Spread Operator
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+const arr3 = [...arr1, ...arr2];
+console.log(arr3);
+
+const arr = [1, 2, 3, 4, 5];
+
+console.log("-----------------map-----------------");
+
+const newArr = arr.map((item) => item * 2);
+console.log(newArr);
+
+console.log("------------------find-----------------");
+
+const found = arr.find((item) => item > 3);
+console.log(found);
+
+console.log("-----------------findidx----------------");
+
+const foundIdx = arr.findIndex((item) => item > 3);
+console.log(foundIdx);
+
+console.log("-----------------filter-----------------");
+
+const filtered = arr.filter((item) => item > 3);
+console.log(filtered);
+
+console.log("-----------------slice-----------------");
+
+// 원래 배열은 변하지 않음
+const sliced = arr.slice(1, 3);
+console.log(sliced);
+console.log(arr);
+
+console.log("-----------------splice-----------------");
+
+// 원래 배열이 변함
+const spliced = arr.splice(1, 2);
+console.log(spliced);
+console.log(arr);
+
+const hobbies = ['reading', 'coding', 'listening to music', 'watching movies', 'playing games'];
+
+for (const hobby of hobbies) {
+	console.log(hobby);
+}
+*/

JavaScript/3-Object.js

@@ -0,0 +1,17 @@
+// 객체의 속성과 메서드를 정의한 클래스
+class Human {
+	constructor(name, age) {
+		this.name = name;
+		this.age = age;
+	}
+
+	say() {
+		console.log(
+			`hello, my name is ${this.name} and I'm ${this.age} years old.`
+		);
+	}
+}
+
+// 클래스를 사용하기 위해서 인스턴스를 생성해야 한다.
+const seunan = new Human("seunan", 24);
+seunan.say();

JavaScript/4-Array.js

@@ -0,0 +1,53 @@
+# JavaScript
+
+## What is JavaScript?
+
+- 가벼운 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어 
+- 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js 같은 비 브라우저 환경에서도 사용
+- JavaScript는 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원
+
+## Variable
+
+`var`, `let`, `const` 키워드를 사용하여 변수를 선언할 수 있다.
+
+```javascript
+var v = 1;
+var v = 2; // var 키워드는 중복 선언, 재할당 모두 가능
+
+let l = 1;
+l = 2;
+// let l = 2; // let 키워드는 중복 선언이 불가능, 재할당은 가능
+
+const c = 1;
+// c = 2;
+// const c = 2; // const 키워드는 중복 선언, 재할당 모두 불가능
+```
+
+## Function
+
+```javascript
+function add(a, b) {
+  return a + b;
+}
+
+const add = (a, b) => a + b;
+```
+
+## Keyword
+
+- ES6
+- Sync/Async
+  - Promise
+- Module
+- Class
+- Arrow Function
+- Destructuring
+- Spread/Rest
+- Template Literals
+
+## Learning Resources
+
+- [MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript)
+- [Modern JavaScript Tutorial](https://ko.javascript.info/)
+- [벨로퍼트와 함께하는 모던 자바스크립트](https://learnjs.vlpt.us/)
+- [Modern JavaScript Deep Dive](https://42seoul.dkyobobook.co.kr/content/contentView.ink?brcd=4801158392230&ctgrId=2113&sntnAuthCode=&cttsDvsnCode=001&selViewCnt=20&pageIndex=1&recordCount=20)

JavaScript/5-Class.js

@@ -0,0 +1,13 @@
+const sandwich = {
+  bread: 'white',
+  cheese: 'cheddar',
+  veggies: 'lettuce'
+}
+
+let {bread: b, cheese: c, veggies: v} = sandwich;
+
+console.log (b, c, v); // white cheddar lettuce
+
+const [,fal] = [true, false];
+
+console.log(fal); // true false