>wecode Pre-course 정리

류창선·2023년 8월 27일

front-end

목록 보기

1/38

⭐️ 고민거리

암묵적 타입 변환(타입 강제 변환)과 관련해서 동등 비교 연산자는 모든 경우의 수를 다 알고 있지 않는 한, 결과를 예측하기가 어렵기 때문에 일치 비교 연산자를 사용해야 한다고 생각했습니다.

일치 비교 연산자 중 특수한 경우를 알게 되었습니다. NaN은 자신과 일치하지 않은 유일한 값이더군요.

이스케이프 시퀀스를 외우는 것보다는 백틱을 활용하여 ES6 템플릿 리터럴을 사용하는 방법이 좋을까요?

웹 페이지

웹 페이지의 상호작용은 크게 이벤트(Event)와 함수(Function)로 구분할 수 있습니다.
이벤트는 사용자에 의해 발생하는 마우스 클릭, 마우스 드래그, 키보드 등을 의미합니다.
함수는 사용자가 발생시킨 이벤트의 결과입니다.

console.log

console.log(괄호 안의 메세지를 콘솔창에 출력합니다.);

alert()

alert(괄호 안의 메세지를 알림창으로 띄웁니다.);

주석

// 주석은 코드를 설명하는 코멘트입니다. 

/*
	주석은 실제 동작하지 않습니다.
	여러 줄은 이렇게 처리합니다.
*/

데이터 타입

// primitive type
0, 1, 100                          // number

'안녕', "Hello World!", `${name}`   // string

true, false                        // boolean

undefiend                          // undefined

null                               // null

var key = Symbole('key');          // symbol


// reference type(object type)
function greeting (name) {         // function
	return `${name} 님, 안녕하세요!`;
}

[1, "서울", true]                   // array

let profile = {                    // object
	name: 'unnamed',
	age" 30,
}

// typeof 연산자로 각 데이터 타입을 확인할 수 있습니다.
console.log(typeof 100);           // number
console.log(typeof null);          // object: 빈 객체 참조

variables

const 변수명; // const는 상수를 의미하므로 재할당이 불가능합니다.
let 변수명;   
var 변수명;   // ES6 이전의 변수 선언 방식입니다.

// 대입연산자(=)를 사용하여 특정한 값을 할당합니다.
const myNumber = 0;

// 변수는 선언 시 초기 값으로 undefined를 갖습니다.
let a;
console.log(a); // undefined

// 이미 선언된 변수에는 값만 대입하면 정상 출력됩니다.
let a;
a = "test";
console.log(a); // test

// 변수 및 함수 네이밍의 방법은 아래 방식이 가장 많이 쓰입니다.
let camelCase;

// 다른 네이밍 컨벤션도 있습니다.
let PascalCase;
let snake_case;
...

number

// string > number 타입으로의 변환은 아래와 같이 합니다.
// parseInt(), parseFloat() 등의 방법도 존재합니다.
let year = "2023";         // string
console.log(Number(year)); // number

string

// 문자열은 + 연산자로 합칠 수 있습니다.
console.log("Hello " + "World!");

// 백틱을 사용할 수도 있습니다.
console.log(`Hello World!`);

// 문자열은 length 프로퍼티로 길이를 구할 수 있습니다.
console.log("test".length); // 4

// 문자열도 배열처럼 인덱스를 활용할 수 있습니다.
let word = "apple";
console.log(word[4]); // e

// 메서드를 사용해서 대문자, 소문자로 바꿀 수 있습니다.
const sentence = "Hello World!";
const upper = sentence.toUpperCase();
const lower = sentence.toLowerCase();
console.log(upper); // HELLO WORLD!
console.log(lower); // hello world!

// indexOf로 문자열을 찾을 수 있습니다.
const sentence = "오늘 저녁 메뉴는 갈비찜입니다."
const filteredStr = sentence.indexOf("갈비찜");
console.log(filteredStr); // 10: 문자열이 10번 쨰부터 시작

// indexOf 사용 시 해당 문자열이 없다면 -1을 반환합니다.
if (filteredStr !== -1) {
	console.log("문자열에 갈비찜이라는 단어가 포함되면 실행합니다.");
}

// number > string 타입으로의 변환은 아래와 같이 합니다.
let year = 2023;               // number
console.log(year.toString());  // string

boolean

// truthy vs. falsy: false의 값이 반환되는 경우만 알면 됩니다.
false
""
0
NaN
undefined
null

undefined & null

undefined // 값이 할당되지 않은 경우를 의마합니다.
null      // 빈 값을 의미합니다. 개발자가 의도적으로 할당한 값입니다.

array

// array는 index를 이용해 각 데이터에 접근이 가능합니다.
let colors = ["red", "blue"];
colors[0]; // red
colors[1]; // blue

// array는 요소 추가가 가능합니다.
colors[3] = "white";
console.log(colors); // ["red", "blue", empty, "white"];
console.log(colors[2]) // undefined

// array의 요소는 수정이 가능합니다.
color[0] = "black";
console.log(colors); // ["black", "blue"];

// array 안에는 또 다른 array가 요소로 포함될 수 있습니다. 이것을 다차원 배열이라고 합니다. 
let cities = [["Seoul", 0], ["Busan", 1], ["Daejeon", 2]];

// 다차원 배열의 요소 접근 방식도 기존과 동일합니다. 
cities[2][1] // Daejeon

// array의 프로퍼티와 메소드는 아래와 같습니다.
array.length     // array의 길이를 측정합니다.
array.push()     // array의 뒤부터 요소를 추가합니다.
array.unshift()  // array의 앞부터 요소를 추가합니다.
array.pop()      // array의 끝 요소를 제거하고 그 값을 반환합니다.
array.shift()    // array의 첫 요소를 제거하고 그 값을 반환합니다.

/* 
  1) slice() 메서드는 배열 내 특정 요소의 index를 기준으로 새로운 배열을 반환합니다.
  2) slice(start, end)로 활용하며, start 인자에는 배열의 index의 시작점, end 인자에는 배열의 index의 끝점이 들어갑니다.
  3) slice(-2)처럼 음수가 들어가면 끝에서부터 숫자만큼의 요소를 배열에 담아 반환합니다.
*/
const nums = [1, 2, 3, 4, 5];
const result = nums.slice(1, 4);
console.log(result); // [2, 3, 4]
console.log(nums.slice(-2)); // [4, 5] 

/*
  1) splice() 메서드는 배열 내 특정 요소를 삭제하거나 다른 요소로 대치하거나 새로운 요소를 추가할 때 사용합니다.
  2) splice(start, delete, item)로 활용합니다. start는 배열의 index의 시작점, delete는 삭제할 요소의 개수, item은 추가할 요소를 의미합니다.
*/
const nums = [1, 2, 3];
nums.splice(1, 1, 10);
console.log(nums); // [1, 10, 3]

// concat() 메서드는 배열을 합치고 반환합니다.
const cities = ["Seoul", "Busan"];
const numbers = [0, 1, 2];
cities.concat(numbers); // ["Seoul", "Busan", 0, 1, 2];

object

/* 
  객체는 키(key)와 값(value)의 형태를 가진 데이터 타입입니다. 
  키는 name, age 등을 의마하며, 각 키에는 값이 저장됩니다.
  키와 값을 합쳐서 프로퍼티(property)라고 합니다.
*/
let profile = {
	name: 'Ryu Changsun',
	age: 36,
	skills: ["HTML", "CSS", "JavaScript"],
	isDeveloper: true,
	'how to learn': 'bootcamp'
};

// 객체의 데이터 접근 방법 중 dot notation입니다.
profile.name; // 'Ryu Changsun'

// 객체의 데이터 접근 방법 중 bracket notation입니다.
profile['age'] // 36

// 단, 키가 띄어쓰기나 숫자로 이뤄진다면 방법은 하나 뿐입니다.
profile['how to learn']  // 'bootcamp'
profile.how to learn     // Uncaught SyntaxError: ~

// bracket notation에서 변수를 활용할 수도 있습니다.
const profile = {
	age: 36
};
let keyName = "age";
console.log(profile[keyName]); // 36

// 객체 프로퍼티 수정은 아래와 같이 합니다.
const profile = {
	age: 36
}
profile.age = 50;

// 객체 프로퍼티 추가는 아래와 같이 합니다.
profile.address = "서울";

// 객체 프로퍼티 삭제는 아래와 같이 합니다.
delete profile.age;

math expressions

let num = 1;
num++;
console.log(num) // 2

let num = 1;
num+=2;
console.log(num) // 3

비교 연산자

// number와 string을 비교했음에도 true가 나오는 것은 암묵적 타입 변환 떄문입니다. 따라서 동등 연산자가 아닌 일치 연산자를 사용하여 값과 타입을 비교해야 합니다.
console.log(1 == '1')  // true
console.log(1 === '1') // false

// 비교 연산자에는 불일치 연산자도 있습니다. 서로 같이 않음을 비교합니다.
// bootcampe의 값이 "wecode"가 아니면 console.log를 실행합니다.
if (bootcamp !== "wecode") {
	console.log("입장이 불가합니다.");
}

논리 연산자

// or 연산자(||)는 조건 하나만 충족되면 실행합니다.
if (home === "서울" || home === "인천") {
	console.log("서울이나 인천에 살면 실행합니다.");
}

// and 연산자(&&)는 조건 모두가 충족되어야 실행합니다.
if (home === "서울" && isMyHome === true) {
	console.log("서울에 살면서 자가라면 실행합니다.");
}

조건문

if (조건 A) {
	...
} else if (조건 B) {
	...
} else if (조건 C) {
	...
} else {
	...
}

반복문

for (시작값, 조건문, 증감식) {
	반복할 코드;
}

let sum = 0
for (let i = 0; i < 4; i++) {
	sum += i;
}
console.log(sum); // 6(0 + 1 + 2 + 3)

const arr = [];
for (let i = 0; i < 3; i++) {
	arr.push(i);
}
console.log(arr); // [0, 1, 2]

// 반복문은 배열과 함께 자주 사용됩니다.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

function

// 함수의 정의
function 함수명 (parameter) {
	...
}

// 함수의 호출
함수명(argument);

/*
  함수의 결과값을 반환하기 위해 return을 사용합니다.
  return을 생략하면 undefined를 반환합니다.
*/
function sayHello () {
	return "Hello";
}

console.log(sayHello()); // "Hello"

// 함수는 매개 변수(parameter)와 인자(argument)를 활용합니다.
function totalSum (num1, num2) {
	return num1 + num2;
}

console.log(totalSum(100, 50)); // 150

류창선

Front-End Developer

다음 포스트

>wecode Pre-course 정리

front-end

⭐️ 고민거리

웹 페이지

console.log

alert()

주석

데이터 타입

variables

number

string

boolean

undefined & null

array

object

math expressions

비교 연산자

논리 연산자

조건문

반복문

function

kick-off (Front-end)

0개의 댓글