강의일지 - 리액트 기초 - (1) js 기본문법

강의 정보

1. 강의명

인프런 - winterlood - 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
https://www.inflearn.com/course/한입-리액트/dashboard

2. 수강목적

1) Tripin 프로젝트에서의 사용을 위해

• Tripin : 여행일정 추천 웹서비스
• 프로젝트에서 지도api 및 일정 조율 기능 및 다양한 UI 기능을 구현하게위한 도구로 react를 사용하기로 함

2) 프론트엔드에서 프레임워크를 어떤 방식으로 사용하여 개발하는지 경험

• 이전 까지는 html, css, js로만 웹페이지 구성
• 프레임워크를 처음으로 배워봄으로써 웹 UI 구성 경험치 축적

3. 수강기간

• 2022.04.30. ~

강의 일지

1-15강

• js 기본 문법

  1. 상수 선언 const

     중간에 값 변경 불가능

     const a = 20;
     // a = 25; // 불가능!
     console.log(a)

  2. !==, !===, ==, ===

     • == / !== : 값이 같은지/다른지 판단하는 연산자
     • === / !=== : type 까지 같은지/다른지 판단 하는 연산자

  3. typeof

     해당 데이터의 타입을 반환

     let a = '1'
     console.log(typeof a) // string

  4. 함수 표현식

     함수를 변수에 담아서 사용

     let hello = function() {
     	return "hello, world!"
     }
     
     let hello = () => {
     	return "hello, world!"
     }
     
     let hello = () => "hello, world!"

  5. 콜백함수

     함수의 매개변수로 함수를 이용

     function checkMood(mood, goodCallback, badCallback){
     	if (mood == "good"){
     		goodCallback
     	} else {
     		badCallback
     	}
     } 
     
     function smile() {
     	console.log('smile')
     }
     
     function cry() {
     	console.log('cry')
     }
     
     checkMood('good', smile, cry)
     checkMood('sad', smile, cry)

  6. 객체

     // 객체 생성 방법 2가지
     let person1 = new Object();
     let person2 = {};
     let person1 = new Object();
     let person2 = {};

     // 프로퍼티 구성
     let person = {
     	key: 'value',
     	key2: 'value2',
     	key3: true,
     	key4: undefined,
     	key5: [1, 2],
     	key6: function (){
     		console.log(`나는 ${this.key}`)
     	}
     };
     
     console.log(person);
     
     // 프로퍼티 접근 방법
     console.log(person.key)
     console.log(person['key'])
     person.key6()
     person.['key6']()
     
     // 프로퍼티 삭제
     delete person.key; // 메모리에선 삭제안됨
     person.key = null; // 메모리에서도 삭제
     
     // 프로퍼티 존재하는지 확인
     console.log('name : ${"name" in person}') // name : false
     console.log('key : ${"key" in person}') // key : true
     
     // 객체 순회
     const personKeys = Object.keys(person)
     for (let i = 0; i < personKeys.length; i++{
     	console.log(personKeys[i])
     }
     
     const personValues = Object.vlaues(person)
     for (let i = 0; i < personValues .length; i++{
     	console.log(personValues[i])
     }

  7. 배열 내장함수

     // 배열 내장함수
     const arr = [1, 2, 3, 4]
     
     // 배열 순회
     arr.forEach((elm) => console.log(elm));
     arr.forEach(function (elm) {
     	console.log(elm);
     });
     
     // 배열 연산
     const arr2 = arr.map((elm) => {
     	return elm * 2;
     });

     const arr = [1, 2, 3, 4, {num: 5}, {num: 6}, {num: 5}]
     
     // 배열 내 값 존재하는지 확인
     console.log(arr.includes(3)); // true
     console.log(arr.includes("3")); // false
     
     console.log(arr.indexOf(3)); // 2
     console.log(arr.indexOf("3")); // -1
     
     console.log(arr.findIndex((elm) => elm.num === 5)); // 4
     console.log(arr.find((elm) => elm.num === 5)); // {num : 5}
     
     // 배열 필터링
     console.log(arr.filter((elm) => elm.num === 5)); // [{num: 5}, {num: 5}]
     
     // 배열 자르기
     console.log(arr.slice(0, 3)) // [1, 2, 3]
     
     // 배열 합치기
     const arr1 = [1, 2, 3]
     const arr2 = [4, 5]
     
     console.log(arr1.concat(arr2)) // [1, 2, 3, 4, 5]

     // 배열 정렬
     let chars = ['나', '다', '가']
     
     chars.sort();
     console.log(chars); // ['가', '나', '다']
     
     let numbers = [0, 1, 3, 2, 10, 30, 20]
     
     const compare = (a, b) => {
     	if (a > b) {
     		return 1; 
     	}
     	if (a < b) {
     		return -1;
     	} 
     	return 0; // a == b
     }
     numbers.sort(compare); // 비교합수를 직접 전달 가능
     console.log(numbers); // [0, 1, 2, 3, 10, 20, 30]

     const arr = ['안녕', '하세요', '저는', '김동우']
     
     console.log(arr.join()) // 안녕,하세요,저는,김동우
     console.log(arr.join(" ")) // 안녕 하세요 저는 김동우
     console.log(arr.join("하나")) // 안녕하나하세요하나저는하나김동우