[React] Udemy기술 블로그 챌린지 - 한입 크기로 잘라 먹는 리액트(React.js) - 자바스크립트 기본 & 응용(1)

 

(백엔드개발자가 도전하는) 한입 크기로 잘라 먹는 리액트(React.js) - 자바스크립트 기본

 

인프런에서 접하게 된 강의 한입 크기로 잘라 먹는 리액트.
리액트를 시작해보고 싶었고 자바스크립트 기본기도 빠르게 다지고 가면 좋겠다는 생각을 늘 갖고있다가 만나게 된 강의이다.

수업 스타일이 굉장히 마음에 들었다.
군더더기 없는 깔끔한 설명과 스피드한 진행으로 수업을 착착 진행해가시는 Winterlood 님 이시다.

- 유데미 강의
https://www.udemy.com/course/winterlood-react-basic/

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의

 

React 는 무엇일까?

자바스크립트 라이브러리이며 오픈소스 프로젝트이다.  또한 리액트는 언어가 아닌 자바스크립트 라이브러리 이기 때문에, 다른라이브러리들도 함께 이용해야 그 효율이 극대화 되는 기술이다.
리액트를 배우기 위해서는 자바스크립트부터 시작해서 리액트의 동작환경인 Node.js를 다루고 리액트를 배우는 것이 좋다.

 

Section 2, Section 3 강의를 들으면서 알게 된 자바스크립트의 개념과 문법들에 대해 기록해본다.
간단하지만 필수적인 문법들이니 강의에서 배운 코드들로 확인해보도록!

 

JavaScript 는 무엇일까?

➖ HTML5 : 요소들의 배치와 내용을 기술하는 언어. 색이나 크기 등의 디자인 수행X

➖ CSS3 : 색, 크기, 애니메이션 등을 정의하는 스타일링을 위한 언어

➖ Javascript : 웹사이트에 활력을 부여하는 언어, 서버와 데이터 주고받음

 

자바스크립트 코드를 해석해서 실행시키는건 누구?

⇒ 자바스크립트 엔진

• 자바스크립트 엔진은 우리가 일상적으로 사용하는 웹 브라우저인 Safari, Firefox, Chrome, Edge, Opera 등에 포함되어 있다.
• 이 엔진 중 가장 대표적으로 소개되는 것은 구글 크롬의 V8 엔진이다.
• 웹 브라우저에 포함된 자바스크립트 엔진이 없다면 우리는 자바스크립트를 실행할 수 없다.
• 자바스크립트 엔진을 내장한 웹브라우저는 자바스크립트가 실행될 수 있는 환경인 “실행환경(Runtime)” 이라고 부를 수 있다.

 

자료형과 형 변환

➖ Primitive Type(원시 타입)

한번에 하나의 값 만 가질 수 있음 하나의 고정된 저장 공간 이용

let number = 12;

➖ Non-Primitive Type(비 원시 타입)

한번에 여러 개의 값을 가질 수 있음 여러 개의 고정되지 않은 동적 공간 사용

let array = [1, 2, 3, 4];

 

다른 자바스크립트 개념 책들을 보면 기본타입과(primitive type) 참조타입(reference type) 으로 구분지어서 얘기하기도 하는 것 같은데, 원시타입이 기본타입, 비 원시타입이라 부르는 자료형이 참조타입 으로 생각된다.

 

자료형 테스트 코드

let age = 25; //정수

let tall = 175.9; // 실수

let inf = Infinity; // 무한대

let minusInf = -Infinity; // 음의 무한대

let nan = NaN; // 수학적 연산 실패

console.log(age + tall);
console.log(age * tall);

 

let name = "reneekang";
let name2 = "자몽";
let name3 = `reneekang ${name2}`; //백틱 & 템플릿리터럴
console.log(name3);

let isSwitchOff = false;

let a;
console.log(a); // undefined
let b = null;
console.log(b); // null

// 변수에 아무것도 할당하지 않았을 때 자동으로 undefined라는 값을 할당 받음
let variable;
console.log(variable); // undefined

 

undefined ?

이 undefined 가 처음에 무척 어색했다. Java로 웹 개발을 하며 jsp를 만지다보면  jquery, javascript 에러로 크롬 개발자도구를 활용하여 디버깅을 할 수 밖에 없는 상황을 마주하게 되는데, 이 때 처음 undefined 와의 만남은 ...  얜.. 뭐지..?

한마디로 정리하자면
undefined는 오직 ‘값을 대입하지 않은 변수에 접근하고자 할 때 자바스크립트 엔진이 반환해주는 값’으로서만 존재할 수 있겠다.

 

형변환 테스트 코드

// 값은 유지하며 자료형 변경하는 형변환
let numberA = 12;
let numberB = 2;

console.log(numberA * numberB); // 24

// 값은 유지하며 자료형 변경하는 형변환
let numberC = 12;
let numberD = "2";

console.log(numberC * numberD); // 24
// => 문자열2를 자동으로 숫자 2로 인지해서 계산한 결과임.

• 자바스크립트 코드를 읽고 해석하여 실행하는 자바스크립트 엔진은 다른 자료형간의 연산을 수행할 때 적절하게 자료형을 변환(casting)해서 연산을 수행 해준다.
• 명시하지 않은 자동 형변환은 묵시적 형변환 이라고 부른다.

💡 문자열과 숫자의 곱셈은 문자열을 숫자로 바꿔서 수행했는데 문자열과 숫자의 덧셈은 숫자를 문자열로 바꿔서 문자열을 붙인다.

let numberA = 12;
let numberB = "2";

console.log(numberA + numberB); // 122

console.log(numberA + parseInt(numberB)); // 14

 

연산자 에는 대입/ 연결/ 복합/ 증감/ 논리/ 비교/ 대소비교/ typeof/ null 연산자가 있다.
이 중에서 조금 새로운 연산자들에 대해 적어본다.

값의 타입을 알 수 있는 연산자 - typeof

: 자바스크립트는 타입에 자유로운 언어(동적타입언어)기 때문에 굉장히 유연하다는 장점이 있는 반면 에러를 발생할 수 있는 가능성이 많다.

let compareA = 1;
compareA = "1";

console.log(typeof compareA); // string

* 전에 다른 자바스크립트 책에서 본 적이 있는데, typeof 체크만으로 값의 타입을 정확히 알 수 없는 경우가 있다고 했다. undefined 와 null 에 관해서였는데 이럴 경우 더 확실한 값의 타입 일치확인을 위해서는 비교연산자인 "===" 를 활용하는 것이 좋다.

 

null 변환 연산자

: 양쪽의 피연산자 중에 null 이나 undefined 가 아닌 값을 선택한다.

let a; //undefined
a = a ?? 10;
console.log(a); // 10

 

조건문 : 어떤 연산의 결과의 참/거짓에 따라서 다른 명령을 각각 실행할 수 있도록 도와주는 문법.
- if / else if / else
- switch

함수 선언식 과 함수 표현식 의 차이

//함수 표현식과 선언식의 차이
console.log(helloB()); //호이스팅
console.log(helloA()); - ERROR!!

let helloA = function () {
  return "안녕하세요 여러분";
}; // 함수 표현식 - 호이스팅 X

console.log(helloA()); //정상수행

function helloB() {
  return "안녕하세요 여러분";
} // 함수 선언식 - 호이스팅 가능

💡 호이스팅 ? ”함수 선언식” 으로 만들어진 함수들은 프로그램 실행 전에 프로그램 최 상단으로 끌어 올려진다.
     그래서 밑에서 선언을 해도 정상적으로 위해서 호출해서 사용할 수 있다.

💡 “함수 표현식” 으로 생성된 함수들은 해당 함수가 직접적으로 선언되기 전에는 접근 불가

 

화살표함수로 변환

let helloA = () => {
  return "안녕하세요 여러분";
}; // 함수 표현식

console.log(helloA());

[실행 결과]
안녕하세요 여러분

let helloA = () => "안녕하세요 여러분";

console.log(helloA());

[실행 결과]
안녕하세요 여러분

너무나 익숙해지고싶고 배우고 싶던 화살표 함수이다.
Java에도 람다식이 있는데, javascript 화살표 함수를 배우면서 함께 친해지려고 노력중이다..  

 

콜백함수

: 어떤 다른 함수에 매개변수로 함수를 넘겨준 것이다.

콜백함수에 대한 개념이 늘 헷갈렸는데, 강의속 설명과 예시코드를 통해 개념을 확실히 알게 되었다.

기분을 체크하는 함수가 있다고 하자

function checkMood(mood) {
  if (mood === "good") {
    //기분 좋을 때 하는 동작
    sing();
  } else {
    //기분 안 좋을 때 하는 동작
    cry();
  }
}

function cry() {
  console.log("ACTION :: CRY");
}

function sing() {
  console.log("ACTION :: SING");
}

function dance() {
  console.log("ACTION :: DANCE");
}

checkMood("sad");

⇒

기분이 좋을 땐 기분이 좋을 때 하라고 받은 동작을 하면 좋겠고, 기분이 안좋을 땐 기분이 안좋을 때 하라고 한 동작을 수행하면 좋겠다 ?

function checkMood(mood, goodCallback, badCallback) {
  if (mood === "good") {
    //기분 좋을 때 하는 동작
    goodCallback();
  } else {
    //기분 안 좋을 때 하는 동작
    badCallback();
  }
}

function cry() {
  console.log("ACTION :: CRY");
}

function sing() {
  console.log("ACTION :: SING");
}

function dance() {
  console.log("ACTION :: DANCE");
}

checkMood("sad", sing, cry);

이렇게 “콜백함수”란 함수의 파라미터로 함수를 넘기는 것 이다.

checkMood라는 함수에 매개변수로 함수를 넘겨줌으로 함수를 수행할 수 있게 된다.

 

또 신기한 것이 객체이다.

객체

주로 객체 리터럴 방식으로 객체를 생성함.

객체 : 여러가지 데이터를 동시에 가질 수 있는 비 원시 자료형
key 와 value 값의 쌍으로 저장

• property value에는 어떤 자료형이 들어와도 상관없다. 문자, 숫자, 함수, 배열, undefined, boolean 등 모든 자료형을 property value로 사용할 수 있다.
• key는 반드시 문자열로 이루어져야 한다. 따옴표는 사용하지 않는다.

 

자바에서보다 훨씬 자유롭게 자바기준으로 아무거나(?)담는게 가능한 자바스크립트 객체...
객체안에 뭐가 담겨있을지 몰라서 두렵다... ?

 

그리고 마지막으로 배열내장함수

: 배열 굉장히 많은 내장함수들을 가지고 있다. 내장함수를 잘 이용하면 for ,if 문간의 의존성을 줄여줄 수 있다.

내장함수를 쓸 때에는!

내장함수는 객체의 메서드와 같은 것이다.

💡 자바스크립트의 자료형은 모두 객체로 이루어져 있다. ? so, 객체의 메서드를 이용하는것처럼 사용할 수 있다.

//배열 내장함수
const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

arr.forEach((elm) => console.log(elm));

arr.forEach(function (elm) {
  console.log(elm);
}); //함수선언방식으로 바꿈

//=> 콜백함수임

 

forEach

배열의 모든 요소를 한번씩 순회할 수 있도록 만들어진 내장함수. 하나하나의 요소를 forEach 메서드 안에 전달되는 콜백함수에 한번씩 파라미터로 전달해준다.

const arr = [1, 2, 3, 4, 5];

arr.forEach((elm) => console.log(elm));

arr.forEach(function (elm) {
  console.log(elm);
});

arr.forEach(function (elm) {
  console.log(elm * 2);
});

💡 arr이라는 배열에 forEach라는 메서드 내장함수를 사용하게 되면 이 내장함수에 전달하는 콜백함수를 이 배열의 각각의 요소에 대해서 실행한다고 생각하면 된다.

 

map

: 원본 배열의 모든 배열을 순환하면서 어떤 연산을 해서 rerturn된 값들만을 따로 배열로 추려내서 반환할 수 있도록 해준다.

새로운 배열을 return 해준다

기존 방식

//배열 모든 요소*2 해서 새로운 배열 생성
const arr = [1, 2, 3, 4, 5];
const newArr = [];

arr.forEach(function (elm) {
  newArr.push(elm * 2);
});

console.log(newArr);

map 사용

const arr = [1, 2, 3, 4];
const newArr = arr.map((elm) => {
  return elm * 2;
});

console.log(newArr);

[실행 결과]
[2, 4, 6, 8]

 

includes

: 주어진 배열에서 전달받은 인자와 일치하는 값이 존재하는지 확인(=== 값과 타입까지)

주어진 배열에서 인자로 받은 값이 존재하는지 아닌지 boolean 으로 return 한다.

//값이 배열에 존재하는지 안하는지!
const arr = [1, 2, 3, 4, 5];

let number = 3;

arr.forEach((elm) => {
  if (elm === number) {
    console.log(true);
  }
});

console.log(arr.includes(number));

 

이 외에도 다양한 내장함수가 있다. 

위의 예제코드는 모두 강의속에서 진행된 예제 코드이다. 강사님께서 자유로이 공유해도 된다고 하셔서 이렇게 널리널리 전파한다.
내용은 일부만을 기록한 것인데, 수업이 너무 컴팩트하면서 알차고 좋다.
일과 학습을 병행해야하는 나에게 너무 좋은 수업이다.

 

강사님 윈터루드님의 블로그 참조하실분들은 아래 링크타고 가보세요~

https://www.winterlood.com/

Winterlood