Please enable JavaScript.

Coggle requires JavaScript to display documents.

x9791162244494 GIT파일저장소(한글판) - Coggle Diagram

- - - - 변수선언
        
        const
        
        값을 변경할 수 없는 변수
        
        let
        
        반복문 코드 블록 안에서 영역 제한 가능
        
        글로벌 영역, 블록 영역 구분
      - 템플릿문자열
        
        grave key 사이에 변수 ${} 사용
        
        `` => grave key
        
        HTML & 탭 & 개행문자 & 공백 & 변수 한번에 처리 가능
      - 함수
        
        '함수선언'과 '함수표현식'
        
        함수 선언
        
        호이스팅 가능
        
        호이스팅 :인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당
        
        함수 선언 전에 함수 호출이 가능하다.
        
        function a(){console.log("good!");} a();
        
        function 키워드로 시작, 뒤에 함수 이름이 온다
        
        함수 표현식
        
        이름 없는 함수를 만들며 변수에 값을 대입할 수 있다.
        
        const a = function(){console.log("good!");}; a();
        
        호이스팅이 불가능
        
        디폴트 파라미터
        
        함수 생성할 때 인자 값으로 디폴트 파라미터를 넣어주면, 함수 호출 시 인자 값을 넣지 않아도, 디폴트 파라미터 값으로 호출 된다.
        
        ★화살표함수
        
        사용법
        
        객체반환하기
        
        객체를 반환하고 싶으면, 반환하려는 객체를 괄호()로 둘러싸고 반환한다.
        
        화살표 함수와 영역
        
        자바스크립트의 설계 오류 ==> this바인딩 사용
        
        화살표 함수 사용 시, this 영역이 제대로 유지 된다
        
        JS컴파일
        
        자바스크립트 컴파일링 : 더 많은 브라우저가 이해 할 수 있도록, 다른 전의 자바스크립트 구문으로 변환시킴
        
        바벨 : 자바스크립트 컴파일링 도구
      - 객체와 배열
        
        구조분해를 사용한 대입
        
        객체구조분해
        
        객체를 인자로 받는 함수
        
        객체인자구조분해
        
        배열 구조 분해하기
        
        리스트매칭
        
        불필요한 값을 콤마를 사용해서 생략
        
        const [,,three] = ["a","b","c"]; console.log(three); //c
        
        객체 리터럴 개선
        
        구조 분해의 반대
        
        구조를 다시 만들어내는 과정 또는 내용을 한데 묶는 과정
        
        스프레드연산자 ...
        
        배열의 내용 조합 할 수 있다
        
        배열의 원소들을 복사해서 사용 가능(배열원본유지)
        
        나머지 배열 원소들을 얻을 수 있음
      - 비동기 자바스크립트
        
        단순한 프라미스와 fetch
        
        async/swait
        
        프라미스만들기
      - 자바스크립트 모듈 : 다른 자바스크립트 파일에서 이름 충돌이 없이 쉽게 불러서 활용할 수 있는 재사용 가능한 코드 조각
        
        커먼JS :module.exports / require
        
        최신호환성정보 - ESNext 호환성표
        
        ES6모듈 :export / export default / import
      - 클래스
        
        오늘날의 리액트는 클래스를 멀리하고 함수를 사용해서 컴포넌트 구성
        
        하지만 레거시 리액트 코드에서 클래스 컴포넌트 확인 가능
        
        다른 객체 지향 언어의 클래스 사용 흉내를 내기 위해서 생겨남
    - - 자바스크립트에서 함수는?
        
        1급시민
        
        함수를 정수,문자열처럼 일반 데이터와 마찬가지로 취급
        
        함수를 다른 함수의 인자로 전달 할 수 있다.
        
        함수에서 함수를 만들어서 반환 할 수 있다
        
        변수에 함수를 담을 수 있다.
        
        고차함수
        
        함수가 함수를 인자로 받는 경우
        
        함수가 함수를 반환하는 경우
        
        ★2개 이상의 화살표가 있다면 고차 함수 사용 중
      - 선언적프로그래밍
        
        읽기 쉽고, 추론하기 쉽다
        
        선언적프로그래밍 위키
        
        함수를 사용 > 코드 자체에서 추론이 쉽게 가능해진다
        
        ★리액트는 선언적이다 render()
        
        명령형프로그래밍과 비교...
        
        선언적 프로그래밍과 달리,
        결과 달성 과정에만 관심을 둔다
        
        코드변경, 기능추가, 규모확장 너무 어려움...
      - 함수형 프로그래밍의 핵심 개념
        
        불변성
        
        불변성 데이터(원본 데이터 변경X)
        
        Object.assign
        
        Array.concat
        
        스프레드 연산자
        
        순수함수
        
        인자가 같으면 항상 같은 값이나 인자를 반환해야 한다
        
        부수효과가 없다.
        
        파라미터(인자)를 최소 하나 이상 받아야 한다.
        
        리액트에서 UI는 순수함수
        
        데이터변환
        
        Array.reduce
        
        Array.Map
        
        Array.filter
        
        고차함수
        
        Array.Map / Array.reduce / Array.filter
        
        커링(Currying)
        
        다른 함수를 인자로 받을 수 있거나, 함수를 반환할 수 있고 때로는 2가지 모두 수행
        
        재귀
        
        가능하면 루프보다는 재귀를 사용하자
        
        변수 여러개 만들 필요 없고, 코드가 간결해진다.
        
        자기자신을 호출하는 함수
        
        합성
        
        합성 구현 패턴과 기법 : 체이닝 (Chaining)
        
        함수 합성 : Function Composition
        
        전체 애플리케이션 구축 과정 : 여러 작은 순수 함수들을 한데 합쳐야 함
        
        실습 : 위의 모든 핵심 개념을 사용해서 시계 만들기
        
        시,분,초 오전/오후 사용시를 사용해 표시
        
        각 필드는 숫자 두개가 있어야함 EX)02:01
        
        매 초 표시한 시간을 갱신해야 한다.
        
        ※리액트의 플럭스 패턴