섹션1 Achievement Goals 정리

⭕️ 🔜❓

[JS/Node] Achievement Goals

변수 Intro

• 프로그래밍은 데이터 처리를 하는 것임을 이해한다. ⭕️
  • 프로그래밍은 데이터를 처리하는 것과 동일하다고 할 수 있습니다. 우리는 프로그래밍을 통해서 컴퓨터에게 우리가 원하는 데이터 처리방식을 명령하는 것입니다.
• 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다. ⭕️
  • 컴퓨터에는 데이터를 위한 보관함이 존재하는데, 이를 메모리라고 합니다. 그리고 이 보관함의 크기는 모두 동일합니다. 이 때 변수는 각 보관함의 이름을 의미합니다. 데이터의 이름표라고도 할 수 있습니다. 그리고 이 변수를 통해서 보관된 데이터를 사용할 수 있습니다. 보관함의 자리를 확보하는 것을 선언이라고 합니다. 보관함에 데이터를 할당하여 저장하고, 선언과 할당은 동시에 할 수 있습니다. 다시 이 변수를 사용하고 싶다면, 변수명을 쓰면 됩니다.
• 변수의 선언과 값의 할당에 대해서 설명하고 코드로 작성할 수 있다. ⭕️
  • 변수는 마치 물건을 담기 위한 하나의 상자 역할을 합니다. 데이터라는 물건을 담기 위해서는 변수라는 상자를 준비해야합니다. 이것을 개발자답게 표현한다면 변수라는 메모리 보관함을 선언하여 그 안에 원하는 데이터를 할당한다라고 할수있습니다.
    • let a = 2 라고 쓴다면, a라는 변수를 선언하고 2를 할당한다 입니다.
• 값으로 변환된 표현문이 변수에 할당되어 담기는 과정을 설명할 수 있어야 한다. ⭕️
  • 표현문은 하나의 값으로 표현되는 코드를 의미합니다. JavaScript 는 글자, 숫자, 기호 및 여러 데이터를 조합하여 하나의 값으로 컴파일 할수 있습니다. 즉, 변수에 담은 각 데이터를 모아 하나의 표현으로 만드는것입니다. 더 정확히 설명하자면, 여러 변수들을 컴파일해 연산할 수 있는 형태로 만드는것입니다. 또한, 하나의 완성된 표현문을 값으로 지정해 새로운 변수에 재할당을 할수도 있습니다.

변수 기초, 변수 실습

• 자바스크립트에서 변수의 선언과 값의 할당에 대해서 설명할 수 있다. ⭕️
  • 변수의 선언은 이름표가 있는 상자를 만드는 것입니다. 그리고 그곳에 값을 할당하는 것은 상자안에 값을 넣어주는 것이라고 할 수 있습니다. 보관함에 변수를 선언해서 이름표를 붙이고 안에 값을 할당해주는 것이죠.
• 변수 선언과 값 할당에 사용되는 용어에 대해서 정확하게 알 수 있다. ⭕️
  • 변수를 선언하는 방법은 세가지가 있습니다. let, var, const 입니다.
  • let은 재할당이 가능하지만 const는 불가능합니다. 예전에 사용하던 var는 변수 재선언이 가능합니다.
• =가 "같다"라는 의미가 아니라 할당연산자임을 이해할 수 있다. ⭕️
  • 수학적으로 바라보면 =은 같다입니다. 하지만 프로그래밍 언어에서는 =는 같다가 아니라 할당하는 것입니다.
  • let a = 2 라고 한다면, a와 2는 같은게 아니라 a라는 상자에 2라는 값을 할당해주어서 넣어준 것입니다. 그리고 a를 불러오면 2라는 값을 꺼내쓸 수 있습니다.
• num = num + 1이 "같다"라는 의미가 아니라 값을 할당하는 것임을 설명할 수 있다. ⭕️

타입

• 자바스크립트에서 원시 자료형과 참조 자료형이 무엇인지 알 수 있다. ⭕️
  • 원시 자료형에는 string, number, boolean, undefined, null, bigint, symbol
  • 참조 자료형에는 object, array, function
• 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다. ⭕️
  • string: 문자열, number: 숫자, boolean: true / false, undefined: 변수는 존재하지만 값을 할당하지않아 존재하지 않을 때라고 할 수 있습니다.
• 타입마다 다른 속성과 메소드가 있다는 것을 이해할 수 있다. ⭕️
  • 타입마다 속성이 다르고 다양한 메소드 존재합니다.
• typeof 를 활용하여 특정 값의 타입을 확인할 수 있다. ⭕️
  • typeof ___ 라고 쓰면 "string" "number" 이런 식으로 스트링으로 타입이 나옵니다. (배열은 object로 나오니 주의)
• 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다. ⭕️
  • 타입까지 비교하는것이 중요하기때문에 엄밀한 비교를 해야합니다. 

함수 Intro

• 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다. ⭕️
  • 작은 기능의 단위, 작은 기계처럼 사용할 수 있는 기능이라고 생각한다. 함수란 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록입니다. 함수는 입력값을 설정할 수 있고 항상 출력값을 반환합니다. 함수는 지시사항들의 묶음이라고도 할 수 있습니다.
• 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다. ⭕️
  • keyword: function, name: 함수명, parameter: 매개변수, body: 함수 안에 쓰는 식
• 함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다. ⭕️
  • function hi(a) {return a} 이런식으로 함수를 선언하여 만들고 호출은 hi(2) 이렇게 할 수 있습니다.
• 함수가 선언되어 함수 표현식이 변수에 담기는 과정을 설명할 수 있다. ⭕️
  • const hi = function ( ) { }
  • 함수 표현식은 변수 선언을 해주고 이 변수에 익명 함수를 할당하는 방식으로 작성합니다.
• 함수의 결과값이 변수에 할당되어 담기는 과정을 설명할 수 있다. ⭕️
  •  이렇게 결과값을 변수에 할당하고 리턴해줄 수 있습니다.
  • function hi(a){ let result = a + 1; return result }​

함수 기초, 함수 실습

• 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.  ⭕️
  • 함수를 호출하는 법은 함수명과 ()를 해주면 바로 실행이 되고, 함수 안의 리턴문을 써줘서 함수의 결과값을 호출할 수 있습니다. 리턴문을 써주지 않는다면 undefined가 반환됩니다.
• 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.  ⭕️
  • 함수 그 자체는 함수이고 함수의 호출을 하면 함수의 리턴값이 나옵니다.
• 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.  ⭕️

  • # parameter (매개변수)
    # 함수의 정의 부분에 나열되어 있는 변수, 여기서는 plus 함수 정의시에 사용되는 a, b를 parameter(매개변수) 라고 합니다.
    function plus(a, b){
      return a + b
    }
    
    # argument (전달인자)
    # 함수를 호출할때 전달 되는 실제 값, 여기서는 plus 라는 함수에 넣어주는 값 1, 2를 argument(전달인자)라고 합니다.
    result = plus(1, 2)

• 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.  ⭕️

  •  // 선언식 함수
     function hi(a){
      return a;
     }
     
     // 표현식 함수
     let hi = function (a) {
       return a;
     }
     
     // 화살표 함수
     let hi = (a) => a

모르는 것을 검색하는 방법

• 자바스크립트와 소프트웨어 개발에 대한 궁금한 것을 구글링으로 해결할 수 있다.  ⭕️
• 에러를 해결하기 위해 구글링할 수 있다.  ⭕️

크롬 개발자 도구 사용법

• Chrome developer console의 기본적인 사용법을 이해할 수 있다. ⭕️
• Chrome developer console에서 JavaScript의 입력/출력을 확인할 수 있다. ⭕️
• 문법 에러를 최소화할 수 있다. ⭕️
• 에러가 발생했을 때 발견할 수 있다. ⭕️
• debugger 키워드를 활용해 코드를 단계적으로 실행시킬 수 있다. (Advanced) 🔜

조건문 기초, 퀴즈, 실습

• truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다. ⭕️
  • truthy한 값이 조건문에 사용되면 밑의 식이 실행되고 falsy한 값이라면 무시된다.
• 비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다. ⭕️
  • 엄격한 비교는 타입까지 비교한다
• if 와 else if , else를 이해하고 무리없이 활용할 수 있다. ⭕️
• 논리연산자를 (&&, ||, ! ...)을 통해 복잡한 조건을 간결하게 작성할 수 있다. ⭕️

조건문 문제로 에러 메세지 알아보기

• 코플릿 에러 메세지 읽는 법을 배우고, 이를 기반으로 작성한 코드를 수정하는 방법을 배웁니다. ⭕️

조건문 문제로 배우는 알고리즘

• 코플릿 조건문 13번 문제 해결 방법을 익히면서, 문제를 체계적으로 해결하는 방법을 배운다. ⭕️
• 복잡한 조건문을 활용하여, 실생활에서 쉽게 마주하는 문제를 해결하기 위한 알고리즘을 구현할 수 있다.❓⭕️

문자열

• 문자열의 속성과 메소드를 이용해 원하는 형태로 만들 수 있다.
  • 문자열의 length라는 속성을 활용해 길이를 확인할 수 있다. str.length ⭕️
  • 문자열의 글자 하나하나에 접근할 수 있다. str[1] ⭕️
  • 문자열을 합칠 수 있다. word1 + " " + word2 ⭕️
  • 문자열을 원하는 만큼만 선택할 수 있다. str.slice(0, 3) 또는 str.substring(0, 3) ⭕️
  • 영문을 모두 대문자로 바꿀 수 있다. str.toUpperCase() ⭕️
  • 영문을 모두 소문자로 바꿀 수 있다. str.toLowerCase() ⭕️
  • 문자열 중 원하는 문자의 index를 찾을 수 있다 str.indexOf('a') 또는 str.lastIndexOf('a') ⭕️
  • 문자열 중 원하는 문자가 포함되어 있는지 알 수 있다. str.includes('a') ⭕️

Advanced Challenges

• 띄어쓰기 (" ") 로 문자열을 구분하여 배열로 바꿀 수 있다. str.split(" ") ⭕️
• 위의 배열의 요소 사이에 띄어쓰기 (" ") 넣어 다시 문자열로 바꿀 수 있다. str.split(" ").join(" ") ⭕️

반복문 기초, 퀴즈, 실습

• 반복문을 활용하여 단순한 기능을 반복하여 수행할 수 있다. ⭕️
• 반복문(for문)과 문자열, 숫자를 이용해 반복적으로 코드를 실행시킬 수 있다. ⭕️
• 기본적인 for문 (for (let i = 0; i < 5; i++))을 응용하여 다양한 for문을 만들 수 있다. ⭕️
• for와 while의 차이에 대해서 설명할 수 있다. ⭕️
  • for이랑 while은 같은 반복문이지만 사용용도에 차이점이 있습니다. 반복횟수가 정해진 경우 for문을 자주 사용하고, 무한 루프나 특정 조건에 만족할 때까지 반복해야 하는 경우 while문을 자주 사용합니다.
• 반복문에 조건문을 적용하여 특정 조건에서만 코드가 실행되도록 할 수 있다. ⭕️
• 이중 for문이 무엇인지 이해하고 활용할 수 있다. ⭕️

배열 기초

• 배열에서 사용되는 다음 용어에 대해 정확히 이해할 수 있다.
  • index, element, length ⭕️
    • index는 배열의 몇번째 칸인지 (위치를 가리키는 숫자), element는 배열을 구성하는 각각의 값, length는 배열의 길이 입니다. 그러니까 arr = [1,2,3]이면 배열의 element가 세개 있으니까 length는 3입니다.
  • arr[0], push, pop ⭕️
    • arr[0]은 첫번째 인덱스이고 arr.push를 사용하면 배열의 가장 뒷부분에 새로운 배열 요소를 넣어주고, arr.pop()을 사용하면 맨 마지막 요소를 없앨 수 있습니다.
• 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다. ⭕️
  • arr[2] 이런식으로 인덱스의 요소를 조회할 수 있으며, 변경하고 싶다면 arr[2]="hi" 이런식으로 그 인덱스의 값을 변경할 수 있습니다.
• 배열의 요소가 배열인 이중 배열을 이해할 수 있다. ⭕️
  • 배열안에 배열이 있는 것이 이중 배열... [[]]
• 이중 배열의 요소를 조회하거나 변경할 수 있다. ⭕️
  • 이중 배열도 일반 배열과 마찬가지로 arr[0][0] 이런식으로 하면 조회하고 변경할 수 있습니다.

배열의 반복

• 배열의 요소를 반복적으로 불러오는 방법을 이해하고 사용할 수 있다. ⭕️
• 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
  • 기본적인 for 문 for (let i = 0; i < 5; i++) 을 응용하여 다양한 for문을 만들 수 있다. ⭕️
  • 반복문에 조건문을 응용하여 특정 조건에서만 코드를 실행시킬 수 있다. ⭕️
  • 이중 반복문이 무엇인지 이해하고 활용할 수 있다. ⭕️
• 배열과 반복문을 활용하여 실생활에서 접할 수 있는 간단한 문제를 해결할 수 있다.❓⭕️
• 문자열과 배열의 타입 변환을 돕는 메소드를 알고 있다.
  • 띄어쓰기 (" ")로 문자열을 구분하여, 배열로 변경할 수 있다. str.split(" ").join(" ") ⭕️
  • 문자열을 요소로 가지는 배열을 띄어쓰기 (" ")로 구분한 문자열로 변경할 수 있다. ⭕️

배열 기초 메소드

• 배열 요소(element)를 조회할 수 있다. bracket notation ⭕️
• 배열을 복사, 분리하는 법을 이해할 수 있다. slice, splice ⭕️
  • arr.slice(0) 혹은 arr.slice() 하면 복사할 수 있습니다.
  • arr.splice는 배열을 자르고 추가할 수 있는 메서드로 splice(시작하는인덱스, 그로부터 지우고싶은 갯수, 추가하고싶은 요소) 로 사용할 수 있습니다. 지우고싶은 갯수를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다. 지우는 갯수가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다. 추가하고 싶은 요소도 없다면 쓰지 않으면 됩니다.
• 변수, 데이터, 또는 특정 값이 배열인지 아닌지 판별할 수 있다. Array.isArray ⭕️
  • Array.isArray(arr) 이런 식으로 사용하면 되고, boolean 값 true/false로 반환됩니다.
• 배열의 요소(element)를 추가 및 삭제할 수 있다. push, unshift, pop, shift ⭕️
  • push는 맨 뒤에 추가 unshift는 맨 앞에 추가
  • pop은 맨 뒤의 요소 삭제, shift는 맨 앞에 요소 추가
• 배열의 길이를 구할 수 있다. length ⭕️
  • arr = [1,2,3,4]; arr.length === 4
• 변수, 데이터, 또는 특정 값이 배열에 포함되어 있는지 확인할 수 있다. indexOf, includes ⭕️
  • let arr = [1,2,3,4] 
  • arr.indexOf(1) // 0
  • arr.includes(1) // true
  • arr.includes('hi') //false

객체

객체 기초, 퀴즈, 실습

• 배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다. ⭕️
  • 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다) ⭕️
  • 배열과 객체의 특징에 따라 실생활에서 언제 쓰는지 이해할 수 있다. ⭕️
• 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다. ⭕️
  • 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다. ⭕️
    • dot notation은 일반적으로 간편하게 사용할 수 있고
    • bracket notation도 dot notation과 같이 obj['hi'] 문자열로 따옴표를 붙여 사용할 수 있고,
    • obj[hi]이런 식으로 따옴표를 붙이지않고 변수명을 넣을 수 있다.
  • 객체 실습 - 2의 tweet.content와 tweet['content']의 차이가 무엇인지 설명할 수 있다. ⭕️
    • 둘이 같은것.... 둘의 차이는 없다,,,
  • dot notation을 이용한 객체 할당 방식을 능숙하게 다룰 수 있다. obj.a = "hello" ⭕️
    • obj.a = "hello"는 객체의 a 키를 가진 "hello"라는 값을 넣으세요 라는 말인데
    • obj가 빈 객체였다면 결과물은 obj = { a : "hello" } 가 될것입니다.
  • 객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다. ⭕️
    • 위의 obj.a 를 지우고 싶다면, delete obj.a 라고 쓰면 됩니다. 
    • 그렇다면 obj는 빈객체 {} 가 됩니다.
  • 객체를 위한 for문 for ... in 문을 이해하고 다룰 수 있다. ⭕️
    • 객체의 반복문은 for(let key in obj) .. 으로 사용하면 객체의 키가 하나씩 나옵니다.
• 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다. ⭕️

원시 자료형과 참조 자료형

• 원시 자료형(primitive type)과 참조 자료형(reference type)의 구분이 왜 필요한지에 대해서 영상을 보고 이해할 수 있다. ⭕️
• 원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다. ⭕️
• 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다는 개념을 코드로 설명할 수 있다. ⭕️
  • 코드로 복사해보면 알 수 있습니다.

  • let a = 1; 
    a = b; 
    b = 2 ; 
    console.log(a) // 1;
    
    let e = [10, 20]; 
    let f = e;
    f[0] = 50;
    console.log(e) // [50, 20]

  • 원시타입 데이터는 각 변수간의 원시타입 데이터를 복사할 경우엔 데이터 값이 복사하기 때문에 기존의 데이터에 영향이 가지 않습니다. 하지만 참조타입 데이터는 주소를 복사하기 때문에 복사한 데이터에서 원소를 변경하면 주소안의 데이터가 변경이 되는것이기 때문에 기존의 데이터에도 영향이 가게 됩니다.
• 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용한다는 것을 이해할 수 있다. ⭕️

스코프

• 스코프의 의미와 적용 범위를 이해할 수 있다 ⭕️
• 스코프의 주요 규칙을 이해할 수 있다 ⭕️
  • 중첩 규칙 
    • 스코프는 중첩이 가능합니다.
    • 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능합니다.

    • 

      출처 : 코드 스테이츠

  • block scope와 function scope 
    • block scope는 중괄호를 기준으로 둘러싼 범위를 말하고 function scope는 함수로 둘러싼 범위를 말합니다.

    • 

      

    • 블록 스코프 안에서 정의된 변수는 블록 범위를 벗어나는 즉시 접근할 수 없습니다. 따라서 결과로는 reference error가 나오게 됩니다. 
    • 화살표 함수는 함수이지만 블록 스코프로 취급됩니다.
  • 전역 스코프와 지역 스코프
    • 가장 바깥의 스코프는 전역 스코프라고 부르고 그 외는 지역 스코프입니다.
  • 전역 변수와 지역 변수간의 우선 순위
    • 지역 스코프에서 선언한 변수는 지역 변수, 전역 스코프에서 선언한 변수는 전역 변수 입니다. 
    • 지역 변수는 전역 변수보다 더 높은 우선순위를 가집니다.
  • let, const, var 의 차이

    • 	let	const	var
      유효 범위	블록 스코프 및 함수 스코프	블록 스코프 및 함수 스코프	함수 스코프
      값 재할당	가능	불가능	가능
      재선언	불가능	불가능	가능

    • var 키워드는 블록 스코프를 무시하고, 함수 스코프만 따릅니다. (모든 블록 스코프를 무시하는 건 아닙니다. 화살표 함수의 블록 스코프는 무시하지 않습니다)
  • 전역 객체(window)의 이해
    • var로 선언된 전역 변수 및 전역 함수는 window 객체에 속하게 됩니다. 
    • 브라우저에는 window 객체가 존재합니다.
      • 브라우저 창을 대표하는 객체
      • 그러나, 브라우저 창과 관계없이 전역 항목도 담고 있습니다.
    • var로 선언된 전역 변수와 전역 함수가 window 객체에 속합니다.
      • 함수 선언식으로 함수를 선언하거나, var로 전역 변수를 만들면 window 객체에서도 동일한 값을 찾을 수 있습니다.

클로저

• 클로저 함수의 정의와 특징에 대해서 이해할 수 있다 🔜
  • 클로저 함수란 함수를 리턴하는 함수이고 클로저라는 말처럼 클로저의 핵심은 스코프를 이용해서 변수의 접근 범위를 닫는 데에 있습니다. 
  • 내부 함수는 외부 함수에 선언된 변수에 접근이 가능합니다.
  • 일반적인 함수는 함수 실행이 끝나고나면 함수 내부의 변수를 사용할 수 없지만, 클로저 함수는 사용이 가능합니다.
• 클로저가 갖는 스코프 범위를 이해할 수 있다 🔜
• 클로저를 이용해 유용하게 쓰이는 몇 가지 코딩 패턴을 이해할 수 있다 🔜

Spread/Rest 문법

• Spread/Rest 문법, 구조 분해 할당을 사용할 수 있다. ⭕️

고차함수

• 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다. ⭕️
  • 변수에 할당할 수 있다.
  • 다른 함수의 인자로 전달될 수 있다.
  • 다른 함수의 결과로서 리턴될 수 있다.
• 고차 함수(higher-order function)에 대해 설명할 수 있다. ⭕️
  • 고차함수란 함수를 인자로 받을 수 있고 함수의 형태로 리턴할 수 있는 함수
• 고차 함수를 자바스크립트로 작성할 수 있다. ⭕️

내장 고차함수

• 배열 내장 고차함수 filter에 대해서 이해할 수 있다. ⭕️
• filter에 대한 이해를 기반으로, 나머지 고차함수를 스스로 학습할 수 있다. ⭕️
  • forEach, find, filter, map, reduce, sort, some, every
• 추상화(abstraction)에 대해 설명할 수 있다. ⭕️
• 추상화의 관점에서 고차 함수가 갖는 이점에 대해 설명할 수 있다. 🔜
  •  자바스크립트를 공부하면서 함수를 통해 많은 결과 값을 얻어낼 수 있습니다. 추상화의 관점에서 함수 또한 생산성의 향상을 이끌어낼 수 있다고 할 수 있습니다. 여기서 한 단계 높인 것이 고차 함수입니다.함수 = 값(배열)을 전달 받아, 이 값을 가지고 복잡한 작업을 수행 = 값 수준에서의 추상화
  • 즉, 추상화의 수준이 높아진 만큼 생산성도 비약적으로 상승하기에, 우리는 고차함수를 사용하는 것입니다.
  • 고차 함수 = 함수(사고의 묶음)을 전달 받아 작업을 수행 = 사고의 추상화
• 고차 함수를 활용하여 프로그램을 작성할 수 있다. 🔜

[JS/브라우저] Achievement Goals

DOM 이해하기

• DOM의 개념을 이해할 수 있다. ⭕️
• DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다. ⭕️
• HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다. ⭕️
  • <script> 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다. ⭕️

Advanced Challenge

• DOM과 JavaScript의 차이에 대해 이해할 수 있다. ⭕️

DOM으로 HTML 조작하기

• DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다. ⭕️
  • createElement - CREATE ⭕️
  • querySelector, querySelectorAll - READ ⭕️
  • textContent, id, classList, setAttribute - UPDATE ⭕️
  • remove, removeChild, innerHTML = "" , textContent = "" - DELETE ⭕️
  • appendChild - APPEND ⭕️
  • innerHTML과 textContent의 차이 ⭕️
    • innerHTML은 XSS Attack을 적용받을 수 있기때문에 순수하게 텍스트 삽입을 위해서라면 textContent 메소드를 사용하는게 좋습니다.

Advanced Challenge

• DOM의 더 깊은 내용에 대해서 이해할 수 있다. 🔜 
  • createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다. 
  • HTML5 template tag 사용법을 이해할 수 있다.
  • element와 node의 차이를 이해할 수 있다.
  • children과 childNodes의 차이를 이해할 수 있다.
  • remove와 removeChild의 차이를 이해할 수 있다.
  • 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까? ⭕️
  • 좌표 정보 조회를 할 수 있다. - offsetTop...
  • 크기 정보 조회를 할 수 있다. - offsetWidth...

유효성 검사

• DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다. ⭕️
  • querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다. ⭕️
  • oncilck, onkeyup 속성이나 addEventListener 메소드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용할 수 있다. ⭕️
  • 이벤트 핸들러 함수에서 이벤트가 발생한 곳의 정보를 확인할 수 있다. ⭕️
  • 이벤트 핸들러 함수로 유효성 검사를 실행할 수 있다. ⭕️
• 유효성 검사에 필요한 기술 요소를 익힐 수 있다. ⭕️
  • 유효성 검사에 필요한 HTML 엘리먼트, CSS 속성이 무엇인지 알 수 있다. ⭕️
    • 엘리먼트가 화면에 표시되거나 사라지게 만들 수 있다. (display: none) ⭕️
  • 유효성 검사에서 활용할 수 있는 정규표현식 사용법 기초에 대해서 익힐 수 있다. (advanced) 🔜
• 관심사 분리를 적용하거나, 유효성 검사 함수를 따로 분리해서 설계할 수 있다. (advanced) 🔜

이벤트 객체

• 기초적인 event를 알고, event handler를 element에 적용할 수 있다
  • onclick event ⭕️
  • onclick 에 직접 할당하는 것과 addEventListener의 차이 
    • onclick()은 옛날에 사용하던 방식이라 addEventListener를 추천합니다 ⭕️
  • eventHandler 함수를 만들고, eventHandler의 첫번째 인자를 사용할 줄 안다. ⭕️

Advanced Challenge

이벤트 객체에 대해서 더 자세히 알고 싶다면, 아래 키워드를 검색해서 학습하세요 ⭕️

• onsubmit
  • submit - form을 submit할 때 (버튼 또는 키)
• onchange
  • change - select box, checkbox, radio button의 상태가 변경되었을 때
• onmouseover
  • mouseover - 마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다)
• onkeyup
  • keyup - 누르고 있던 키를 뗄 때
• event.preventDefault
  • 기본 이벤트 동작 막기

이벤트 advanced challenge 출처 : https://velog.io/@pizzahand/TIL-20210602

[TIL-20210602] 이벤트(event)

[HTML/CSS] Achievement Goals

HTML 기초

• HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다. ⭕️
• HTML이 Markup language라는 것을 이해할 수 있다. ⭕️
  • "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다. ⭕️
    • 집의 뼈대와 같은 것.... 
• HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다. ⭕️
  • Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다. ⭕️
    • opening tag - <button> closing tag - </button> , self-closing tag <input />
• 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다. ⭕️
  • div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다. ⭕️
    • div는 division의 약자로 한줄을 차지하고 span은 그 부분만 차지합니다. 하지만 css를 이용하면 바꿀 수 있습니다.
  • ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다. ⭕️
    • ul은 unordered list, ol은 ordered list, li는 list의 약자로 ul과 li를 같이 사용하여 숫자가 없는 형식의 리스트를 만들거나, ol과 li를 함께 사용하여 숫자가 있는 형식의 리스트를 만들 수 있습니다.
  • input type을 설정하여 다양한 종류의 input을 활용할 수 있다. ⭕️
    • text, password, number, radio, checkbox 등..
    • https://www.w3schools.com/html/html_form_input_types.asp
• 동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다. ⭕️
  • 간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
  • id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
  • HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.

querySelector, textContent

• document.querySelector를 이용해 웹 페이지의 특정 요소를 선택할 수 있다. ⭕️
• textContent를 이용해 선택한 엘리먼트의 Content를 조회할 수 있다. ⭕️
  • document.querySelector("div")
• textContent를 이용해 선택한 엘리먼트의 Content를 변경할 수 있다. ⭕️
  • document.querySelector("h1").textContent="hi"

CSS 기초

• CSS의 사용목적을 이해할 수 있다. ⭕️
• 프론트엔드 개발자의 기초소양에 대해 이해할 수 있다. ⭕️
• CSS의 기본 문법과 구조를 이해할 수 있다. ⭕️
• CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다. ⭕️
  • 직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
    • CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가하는 방법도 있습니다. 그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않습니다. 관심사 분리를 여기에 적용하면 HTML 파일에서는 웹 페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현하는 걸 말합니다. 
• id 및 class와 관련된 selector 규칙을 이해할 수 있다. ⭕️
  • class는 여러 요소에서 사용할 수 있는 반면, id는 하나의 문서에서 한 요소에만 사용할 수 있습니다. 

    id	class
    # 으로 선택	. 으로 선택
    한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
    특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용

• CSS를 이용해 텍스트를 꾸밀 수 있다 ⭕️
• CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다. ⭕️
  • 각 단위가 적합한 경우를 구분할 수 있다.
    • 절대 단위 : px, pt
      • 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우에 픽셀을 사용합니다. px는 글꼴의 크기를 고정하는 단위이기 때문에 사용자 접근성이 불리합니다. 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라고 크기가 고정됩니다. 그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에는 적합하지 않고 인쇄와 같이 화면 사이즈가 정해진 경우에 유리합니다.
    • 상대 단위 : % , em, rem, ch, vw, vh 등
      • 일반적인 경우에 상대 단위인 rem을 추천합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em 은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.
• CSS 박스 모델을 이해할 수 있다 ⭕️
  • box model
    • width, height : 너비, 높이

    • 

    • margin, padding, border : 테두리바깥의 공간, 테두리와 컨텐츠 안의 사이의 공간, 테두리
  • 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.

    • 

    • content-box는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인과 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장합니다.
• MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다. ⭕️

CSS 중급

• 다양한 CSS 셀렉터 규칙을 이해할 수 있다. 🔜
  • 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다. ⭕️ 
• 레이아웃을 위한 HTML을 만들 수 있다. ⭕️ 
• Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다) ⭕️ 
  • 방향: flex-direction ⭕️ 
  • 얼마나 늘릴 것인가? : flex-grow 🔜
  • 얼마만큼의 크기를 갖는가?: flex-basis 🔜
  • 수평 정렬: justify-content ⭕️
  • 수직 정렬: align-items ⭕️

웹 앱 화면 설계하기

• 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다. ⭕️
• 와이어프레임만 보고 HTML로 코딩할 수 있다. ⭕️
• div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유를 이해할 수 있다. ⭕️
• HTML 문서에서 어느 때에 id, 어느 때에 class를 사용해야 하는지 이해할 수 있다. ⭕️

[Linux] Achievement Goals

CLI 기본 명령어

• 리눅스 터미널을 실행할 수 있다. ⭕️
• CLI를 이용한 작업과 GUI를 이용한 작업이 동일함을 이해할 수 있다. ⭕️
  • GUI의 변경사항을 CLI로 확인할 수 있다. ⭕️
  • CLI의 변경사항을 GUI로 확인할 수 있다. ⭕️
• 리눅스 터미널에서 기본적인 명령어를 사용할 수 있다. ⭕️
  • pwd: 현재 위치를 확인하는 명령어 ⭕️
  • mkdir: 새로운 폴더를 생성하는 명령어 ⭕️
  • ls: 폴더나 파일의 목록을 출력하는 명령어 ⭕️
  • nautilus (Ubuntu), open (macOS): 현재 폴더를 파일 탐색기로 여는 명령어 ⭕️
  • cd: 폴더에 진입하는 명령어 ⭕️
  • touch: 새로운 파일을 생성하는 명령어 ⭕️
  • cat: 파일의 내용을 터미널에 출력하는 명령어 ⭕️
  • rm: 폴더나 파일을 삭제하는 명령어 ⭕️
  • mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경하는 명령어 ⭕️
  • cp: 폴더나 파일을 복사하는 명령어 ⭕️
  • sudo: 관리자 권한을 이해할 수 있다. ⭕️
• 명령어를 사용할 때, 등장하는 키워드에 대해 이해할 수 있다. ⭕️
  • /: 루트 디렉토리 ⭕️
  • ~: 홈 디렉토리 ⭕️
  • 사용자 폴더의 경로(path)는 ~/로 표시.
  • 물결기호 ( ~ )는 루트폴더 ( / )로부터 사용자 폴더(username)까지의 경로를 축약한 형태
• 절대 경로와 상대 경로의 차이를 이해할 수 있다. ⭕️
  • 절대 경로의 시작이 루트 디렉토리(/)인 것을 이해할 수 있다.
  • 상대 경로의 시작이 현재 디렉토리(.)인 것을 이해할 수 있다.
  • 절대 경로의 시작이 루트 ( / ) : 루트폴더를 기준점으로 절대적인 위치를 나타냄!
    • 관리자(root) 권한, 관리자의 영역: 일반 사용자의 권한으로는 어떤 폴더나 파일도 생성, 변경, 삭제할 수 없는 곳
    • Linux 관리자의 가장 큰 특징은, 어떤 일이 있더라도 일반 사용에게 관리자 권한(루트 권한)을 완전하게 넘기지 않는다는 것
    • 프로그램을 설치하거나 변경 또는 삭제할 수 있도록 하는 부분만 권한 전달해줘서 사용자의 실수로 발생할 수 있는 시스템 에러로부터 운영체제를 보호함. 마치.. tv나 인덕션, 김치냉장고나 냉장고같은 곳에 아이를 위해 보호자 잠금 모드가 있듯이..경로는 명령어 pwd로 확인할 수 있는 절대 경로와, 현재 위치로부터 상대적인 위치를 나타내는 상대 경로로 나뉜다.
• 텍스트 에디터 nano를 이용해 파일을 수정하고, 저장할 수 있다. ⭕️

패키지와 패키지 매니저

• 패키지와 패키지 매니저 필요성을 이해할 수 있다. ⭕️
• 각 운영체제에 맞는 패키지 매니저를 사용할 수 있다. 🔜 
  • MacOS 운영체제에서 터미널을 통해 Homebrew 패키지 매니저를 설치하고 패키지를 관리하는 명령어를 사용할 수 있다. ⭕️
    • brew update: 패키지의 업데이트 여부 확인
    • brew outdated: 업데이트 필요한 파일 조회
    • brew upgrade: 프로그램 업그레이드
    • brew info: 프로그램의 정보 확인
    • brew install: 프로그램 설치
    • brew list: 설치된 프로그램 목록 보기
    • brew uninstall: 프로그램 삭제
  • Linux Ubuntu 운영체제에서 사용하는 apt 패키지 매니저에 대해 알고, 명령어를 통해 패키지를 관리할 수 있다. ❌
    • apt update: 패키지의 업데이트 여부 확인
    • apt list --upgradable: 업데이트 필요한 파일 조회
    • apt upgrade: 프로그램 업그레이드
    • apt show: 프로그램의 정보 확인
    • apt install: 프로그램 설치
    • apt list --installed: 설치된 프로그램 목록 보기
    • apt remove: 프로그램 삭제
    • apt search : 패키지 검색

Node.js

• nvm, Nodejs, npm을 설치하고, 버전을 확인할 수 있다. ⭕️
• 명령어 node를 이용해 JavaScript 파일을 실행할 수 있다. ⭕️
• 스프린트 시작 전 package.json 파일을 확인하고, npm install을 사용할 수 있다. ⭕️

[Git] Achievement Goals

버전 관리 시스템

• Git의 환경설정을 할 수 있다. ⭕️
• 버전 관리 시스템의 필요성을 이해할 수 있다. ⭕️
• Github과 Git의 관계에 대해 이해할 수 있다. ⭕️
• Repository에 대해 이해할 수 있다. ⭕️
  • Local Repository와 Remote Repository의 차이를 이해할 수 있다. ⭕️

개발자 도구 Git 설치

• 자신이 사용하는 OS에 git 설치하는 방법을 익히고 실습한다. ⭕️
• git --version 명령어로 터미널에서 git이 설치되었는지 확인할 수 있다. ⭕️
• CLI 환경에서 git 명령어를 입력할 수 있다. ⭕️

Advanced Challenge

• 터미널로 원격 서버에 접속하고 git을 설치하고 삭제 후 다시 설치할 수 있다. ⭕️

Git

• 상황에 따라 Github의 기능과 Git 명령어를 사용할 수 있다. ⭕️
  • fork ⭕️
  • clone ⭕️
  • status ⭕️
  • restore ⭕️
  • add ⭕️
  • commit ⭕️
  • reset ⭕️
  • log ⭕️
  • pull ⭕️
  • push ⭕️
  • init ⭕️
  • remote add ⭕️
  • remote -v ⭕️
• Git의 세 가지 영역 및 상태를 이해할 수 있다. (Committed, modified, staged) ⭕️
  • committed - 커밋 한 후
  • modified - 기존에 commit 했던 파일을 수정한 상태
  • staged - add 했을 때
• Remote Repository를 페어와 공유하며 협업을 할 수 있다. ⭕️
• 충돌이 발생했을 경우 해결할 수 있다. ⭕️

Advanced Challenge (optional)

• Git Repository의 commit되지 않은 변경 사항을 취소할 수 있다. ⭕️
  • reset HEAD <file> ⭕️
  • checkout -- <file> ⭕️
• 협업을 위한 git 개념을 이해할 수 있다. ⭕️
  • branch, merge의 개념 ⭕️
  • remote repository에서 origin과 upstream의 차이점 🔜

[React] Achievement Goals

React Intro

Achievement Goals

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다. ⭕️
  • 선언형, 컴포넌트 기반, 범용성
• JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다. ⭕️
  • 명시적 방식 === 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성하는 방식
• React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다. ⭕️
  • 재사용성 - 컴포넌트 틀을 가지고 props를 사용해서 안의 내용만 바꿔서 계속 사용할 수 있다
  • 독립적 - 컴포넌트 하나에 문제가 있으면 그 컴포넌트만 손보면 된다
• create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다. ⭕️

Create React App

• Create React App 소개를 보고, Create React App 이 무엇인지 대략적으로 이해할 수 있다. ⭕️
• npx create-react-app 으로 새로운 리액트 프로젝트를 시작할 수 있다. ⭕️
• create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다. ⭕️
• 리액트 랜덤 명언 앱 Hands-on을 따라 간단한 리액트 랜덤 명언 앱을 만들 수 있다. ⭕️
• Create React App으로 만들어진 리액트 프로젝트 구성을 대략적으로 이해할 수 있다. ⭕️

React Twittler Intro

• 리액트, JSX 기본 문법을 익힌다. ⭕️
• 리액트, JSX로 트위틀러를 하드 코딩할 수 있다. ⭕️
• 컴포넌트를 먼저 개발하는 Bottom-up 개발 방식에 익숙해진다. ⭕️
• npm script로 리액트 개발에 필요한 기본적인 툴을 사용할 수 있다. ⭕️

React SPA

Achievement Goals

• SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다. ⭕️
  • 버츄얼 돔을 사용하여 한 페이지에 내서 모든게 새로고침 되지 않고 바뀌어야 하는 부분만 바뀌면서 핸드폰 안의 앱처럼 사용자의 편의성을 고려한 방법이 SPA 입니다.
• SPA의 장, 단점에 대해 이해하고 설명할 수 있다. ⭕️ 
  • 장점 :
    • 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트하면 되기 때문에 사용자와의 interaction에 빠르게 반응합니다
    • 서버에서는 요청 받은 데이터만 넘겨주면 되니까 서버 과부하 문제가 현저하게 줄어듭니다
    • 전체 페이지를 렌더링 할 필요가 없어서 더 나은 유저경험을 제공합니다
  • 단점 : 
    • JavaScript 파일의 크기가 크기때문에 첫 화면 로딩 시간이 길어집니다
    • 검색 엔진 최적화(SEO)가 좋지 않습니다. 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동하는데, SPA 같은 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절하게 동작하지 못합니다. 때문에 검색 노출이 중요한 웹 어플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야하고, 앱 안에서 브라우저의 앞/뒤로가기 상태 관리도 해야해서 개발의 복잡도가 늘어납니다
    • 검색 엔진의 작동 방식은 검색 로봇이 웹 페이지에 있는 정보를 수집하고 분석해서 그 결과값에 인덱스를 만들어 보관하고 있다가, 사용자가 검색어를 입력하면 보관하고 있던 인덱스에서 검색어와 가장 연관성이 높은 웹 페이지들을 순서대로 보여주는 방식으로 작동합니다. 검색 로봇은 자료를 수집할 때에 웹 페이지의 URL, HTML 문서 내의 각종 태그나 링크 등을 분석하는데 SPA를 사용하게되면 검색 로봇이 충분한 자료를 수집하지 못합니다. 하지만 검색 엔진의 발전으로 이 단점은 사라지고 있는 추세입니다
• 와이어프레임을 보고 어느 부분을 컴포넌트로 구분해야 할 지 스스로 정할 수 있다. ⭕️
• React에서 npm으로 React Router DOM을 설치(npm install react-router-dom)하고 이용할 수 있다. ⭕️
• React Router DOM를 이용하여 SPA를 구현할 수 있다. ⭕️
• 라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다. ⭕️

React Router

• React에서 npm으로 React Router DOM을 설치(npm install react-router-dom)하고 이용할 수 있다. ⭕️
• React Router DOM를 이용하여 SPA를 구현할 수 있다. ⭕️
• 라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다. ⭕️
• npm 을 이용해 react-router-dom을 설치할 수 있다. ⭕️
• 컴포넌트 단위로 Client-side routing 을 할 수 있다.❓ 
  • 차이점
    • Server-side: Server에서 Routing하기 때문에 해당 페이지에 직접 접근 하는 방식.
    • Client-side: Client 내부에서 Routing 하기 때문에 해당 페이지를 호출 시 root 부터 해당 페이지까지 차례로 로딩.
    유사점
    • Server-side: Asp.net MVC의 View의 Layout을 활용하면 Client Routing처럼 View를 겹겹이 사용할 수 있으나 이는 module간 의 구분이 없고, Layout은 단순 View의 역할을 담당하며 해당 Controller가 없음.
    • Client-side: 각각의 Layout도 Component를 가지며 독립적 기능이 있음.
    주의사항
    • Server-side: 원하는 페이지로 강제로 이동 시키고자 하는경우 반드시 routing을 사용해야 함.
    • Client-side: 하위 페이지를 호출할 경우 해당 component의 부모 component를 무조건 거쳐야 하므로 설계 시 유의.

React State & Props

Achievement Goals

• State, Props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다. ⭕️
• React 함수 컴포넌트(React Function Component)에서 State hook을 이용하여 State를 정의할 수 있다. ⭕️
• React 컴포넌트(React Component)에 Props를 전달할 수 있다. ⭕️
• 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다. ⭕️
• 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 State이고 Props에 적합한지 판단할 수 있다. ⭕️
• 실제 웹 애플리케이션 개발 시 적합한 State와 Props의 위치를 스스로 정할 수 있다. ⭕️
• React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다. ⭕️

• JSX 문법의 기본과 컴포넌트 기반 개발에 대해서 숙지한다.  ⭕️
• React Router DOM으로 React에서 SPA(Single-Page Application)을 구현할 수 있다.  ⭕️
• state hook을 이용하여, 컴포넌트에서 데이터를 변화시킬 수 있다.  ⭕️
• props를 이용하여, 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 수 있다.  ⭕️
• 바람직한 컴포넌트 구조와 state와 props의 위치에 대해 고민한다.  ⭕️

 

혹시 잘못된 내용이 있다면 알려주시면 감사하겠습니다 🔅