7. Iterators ● High-order Functions 1. Introduction 고차 함수는 다른 함수를 인수로 받아들이거나 반환값을 함수로 내보내는 함수이다. 함수에 함수를 포함함으로써 프로그래밍의 추상화 수준을 높여주는 고차 함수에 대해서 알아보자. 2. Function as Data 데이터로서의 함수 자바스크립트의 함수는 다른 여느 자료형과 같은 용례를 갖는다. 함수를 변수에 할당할 수도 있고, 새로운 변수에 재할당할 수도 있다. const announceThatIAmDoingImportantWork = () => { console.log("I’m doing very important work!"); }; 가독성을 해칠 정도로 긴 이름을 가진 함수가 있다고 하자. 이 함수의 동작을 반복..

21-22/21-22 리액트 스타터 -2 2021. 10. 11. 14:01

7. lterators 7-1. Higher-Order Functions 고차함수는 다른 함수를 인수로 받아들이고 함수를 출력으로 반환하는 함수입니다. 7-1-1. Functions as Data (데이터로서의 기능) JavaScript 함수는 언어의 다른 데이터 유형처럼 작동합니다. 따라서 변수에 함수를 할당할 수 있고, 그것을 새로운 변수에 재할당할 수 있습니다. const announceThatIAmDoingImportantWork = () => { console.log("I’m doing very important work!"); }; 위 코드는 함수의 이름이 길어 코드의 가독성을 해칩니다. 그렇다면 우리는 위에서 말했던 것처럼 함수를 변수에 할당하는 방법을 이용할 수 있습니다. const bus..

21-22/21-22 리액트 스타터 -1 2021. 10. 11. 14:01

6. Loops 루프는 일련의 명령을 반복하는 데 사용되는 프로그래밍 도구입니다. 반복은 루프 컨텍스트에서 "반복"을 의미하는 일반적인 용어입니다. 루프는 일반적으로 중지 조건으로 알려진 지정된 조건이 충족될 때까지 계속 반복됩니다. 6-1. Loop(루프) 루프는 정지 조건이라는 지정된 조건에 도달할 때까지 일련의 명령을 반복하는 프로그래밍 도구입니다. 코드에서 작업을 재사용해야할 경우 해당 작업을 함수에 번들링하는 경우가 많습니다. 마찬가지로, 프로세스가 연속해서 여러 번 반복되어야 할 때, 우리는 루프를 작성합니다. 루프를 사용하면 프로세스를 자동화하는 효율적인 코드를 만들어 확장 가능하고 관리가 용이한 프로그램을 만들 수 있습니다. 특정 조건이 충족될 때까지 작업을 반복하고, 조건이 충족되면 루프..

21-22/21-22 리액트 스타터 -1 2021. 10. 11. 14:00

1. 함수형 컴포넌트 vs 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component{ render() { const name = "react"; return {name} } } export default App; 클래스형 컴포넌트의 특징은 ① state 기능 ② 라이프사이클 기능 ③ 임의 메서드 정의 클래스형 컴포넌트에는 render함수가 반드시 있어야 하고, JSX를 반환해주어야 합니다. 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const n..

21-22/21-22 리액트 마스터 2021. 10. 11. 14:00

6. Loops ● Loops 1. Loops : 반복문 반복문은 특정 조건에 도달할 때까지 일련의 명령을 반복하는 구문이다. 프로그램이 특정 작업을 반복할 필요가 있을 때 반복문을 사용하면 효율적으로 유지보수하기 쉬운 코드를 작성할 수 있다. 반복문의 동작을 두고 iterate라는 표현을 사용한다. 2. Repeating Tasks Manually : 수동으로 작업 반복하기 반복문을 사용하지 않고 반복 작업을 수행하려는 경우의 번거로움을 살펴보자. Instruction 1. 변수 vacationSpots를 문자열 세 개를 가진 배열로 만든다. let vacationSpots=['A','B','C']; 2. 배열의 각 요소를 console.log()로 출력한다. console.log(vacationSpo..

21-22/21-22 리액트 스타터 -2 2021. 10. 11. 14:00

1. REPL 사용하기 REPL이란? REPL : Read(읽고), Eval(해석하고), Print(결과물을 반환하고), Loop(종료할 때까지 반복한다) -> 컴파일을 하지 않고 즉석에서 자바스크립트 코드를 입력할 수 있는 노드의 콘솔 REPL 사용해보기 윈도 - 명령 프롬프트(cmd)를 열고 node 입력 맥, 리눅스 - 터미널을 열고 node 입력 VS Code - Ctrl + ` 을 누르고 node 입력 => 명령 프롬프트, 터미널을 콘솔로 통칭 예시 코드 REPL 종료하기 : Ctrl + c를 두 번 누르기 or REPL 창에 .exit 입력 예시 코드 2. JS 파일 실행하기 콘솔에서 node [자바스크립트 파일 경로]로 실행 확장자(.js)는 생략 가능 예시 코드 // helloWorld()..

21-22/21-22 Node.js 2021. 10. 11. 14:00

1. 리액트의 이벤트 시스템 이벤트 : 사용자가 웹브라우저에서 DOM 요소들과 상호작용하는 것 리액트의 이벤트 작성법은 일반 HTML에서의 이벤트 작성법과 비슷합니다. ※주의 사항 ① 이벤트 이름은 카멜 표기법으로 작성 ② 이벤트 설정 시 함수 형태의 객체 전달 - 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니다. ③ DOM 요소에만 이벤트 설정 가능 - 직접 만든 컴포넌트에는 이벤트 자체 설정 불가 그냥 이름이 onClick인 props를 컴포넌트에게 전달할 뿐 ⇨ 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정은 가능하다. ▶이벤트 종류 더보기 더보기 Clipboard, Composition, Keyboard, Focus, Form, Mouse, Selection, Touch, UI..

21-22/21-22 리액트 마스터 2021. 10. 11. 14:00

5. Arrays ● Arrays 1. 배열 목록을 만들어서 데이터를 저장하는 것을 말한다. let newYearsResolutions = ['Keep a journal', 'Take a falconry class', 'Learn to juggle']; 2. Create an Array 배열 만들기 배열을 변수에 저장이 가능하다. let newYearsResolutions = ['Keep a journal', 'Take a falconry class', 'Learn to juggle']; Instruction 1. 변수에 3개의 문자열을 넣는다. 2.console.log()를 사용해서 출력한다. const hobbies=["dance", "sing", "study"]; console.log(hobbies..

21-22/21-22 리액트 스타터 -2 2021. 10. 8. 21:02

4. Scope ● Scope 1. Scope 식별자의 유효범위 스코프는 식별자 접근 규칙에 따른 유효 범위를 의미하며 변수가 어디서 접근하고 참조할 수 있는 지를 정의한다. 전체 코드 어디에서나 접근이 가능한 변수(전역 스코프 변수)가 있다면, 특정한 곳에서 접근이 가능한 변수(지역 스코프 변수)도 있다. 2. Blocks and Scope 블럭과 스코프 블럭은 중괄호({ })를 사용하여 코드들을 묶어주는 역할을 하며, 하나 또는 여러 줄의 코드들을 그룹화한다. 블럭은 주로 함수와 for문, if 문에서 사용된다. const logSkyColor = () => { let color = 'blue'; console.log(color); // blue } console(logSkyColor); // Out..

21-22/21-22 리액트 스타터 -2 2021. 10. 8. 21:01

3. Functions ● Functions 1. What are Functions? 함수란 무엇인가? 함수는 특정한 작업을 수행하기 위해, 일련의 명령을 그룹화한 재사용 가능한 코드 블록이다. 프로그래밍에서는 특정 작업을 여러 번 수행하기 위해 코드를 반복 사용하는 경우가 많다. 이때 동일한 코드를 반복해서 적는 대신, 함수를 이용하면 보다 간편한 방법으로 코드를 재사용할 수 있다. 이번 학습에서는 함수를 사용하는 방법과, 명확하고 간결한 코드를 작성하는 법을 배운다. 2. Function Declarations 함수 선언 함수를 선언하면, 특정 코드 블록을 함수 이름 또는 식별자에 할당한다. 변수를 선언할 때, 변수 이름에 값을 할당하는 것과 비슷하다. https://content.codecademy..

21-22/21-22 리액트 스타터 -2 2021. 10. 8. 21:00

5. Array 데이터를 구성하고 저장하는 것은 프로그래밍에서 가장 기본적인 개념입니다. 우리가 실생활에서 데이터를 구성하는 방법 중 한 가지는 목록을 만들어서 저장하는 것입니다. 이것을 자바스크립트에서는 배열로 작성할 수 있습니다. 배열은 목록을 작성하는 자바스크립트의 방식으로, 문자열, 숫자 등 모든 데이터 유형을 저장할 수 있습니다. 배열에도 순서가 매겨지며, 각 순서에는 할당된 위치가 생기게 됩니다. 5-1. Create an Array (배열 만들기) 배열을 만드는 방법에는 여러 가지가 있는데, 그중 한 가지는 배열 리터럴을 사용하는 것입니다. 배열 리터럴은 항목을 대괄호, []로 묶으면서 배열을 만듭니다. 앞서 배열은 모두 데이터 유형을 저장할 수 있다고 하였는데, 한 가지 배열에서 다른 데이..

21-22/21-22 리액트 스타터 -1 2021. 10. 4. 14:04

4. Scope 프로그래밍에서 가장 중요한 개념 중 하나인 범위, Scope는 "식별자 접근 규칙에 따른 유효 범위"라는 뜻입니다. 일부 변수, 전역 변수는 프로그램 어디에서나 접근이 가능하지만, 다른 변수, 지역 변수는 특정 구역에서만 사용할 수 있습니다. 이 범위를 우리는 스코프라고 부릅니다. 4-1. Blocks and Scope (블록과 스코프) 스코프에 대해 이야기하기 전, 블록에 대해 먼저 이야기해 봅시다. 블록은 함수와 if 명령문 등에서 사용하는 것이고, 사용 방법은 '{ }' 으로 코드를 묶어 주기만 하면 됩니다. const logCitySkyline = () => { let skyscraper = 'Empire State Building'; return 'The stars over th..

21-22/21-22 리액트 스타터 -1 2021. 10. 4. 14:03