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

3. Functions 함수는 자바스크립트의 기본 구성 요소 중 하나로, 작업을 수행하거나 값을 계산하기 위해 사용됩니다. 함수는 하나 이상의 값을 전달할 수 있으며 실행이 끝날 때 값을 반환할 수 있습니다. 3-1. 함수 선언 함수를 사용하려면 함수를 호출할 곳에 함수를 정의해야 합니다. 함수를 생성하는 한 가지 방법은 함수 선언을 사용하는 것입니다. 함수 이름 또는 해당 식별자 뒤에 괄호가 오고, 함수의 중괄호 { } 안에 특정 작업을 수행하는 데 필요한 명령문 또는 본문을 담고 있습니다. Function HiWorld() { console.log('Hello, World!'); } 3-2. 함수 호출 함수 이름 뒤에 괄호를 사용하여 코드의 다른 곳에서 함수를 호출하거나 실행할 수 있습니다. 함수를 ..

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

1. ES2015+ 2015년을 기점으로 매년 자바스크립트 문법 변경 사항이 발표 -> ES2015(=ES6)의 등장 노드 6 버전부터 ES2015 문법 사용 가능 ES2015 이상의 자바스크립트를 통틀어 ES2015+라고 표현 (1) const, let 보통 var로 변수를 선언하지만 이제 const와 let이 대체 const와 let은 블록 스코프(범위)를 가짐 const는 상수처럼 선언 후 값을 바꿀 수 없음. let은 바꿀 수 있음. 아래 코드들은 크롬 개발자 도구(F12)의 Console 탭에 적었습니다. Enter를 누르면 코드가 실행되고, 코드를 실행하지 않고 줄 바꿈을 하려면 Shift+Enter를 입력합니다. if (true) { var x = 3; } console.log(x); // ..

21-22/21-22 Node.js 2021. 10. 4. 14:01

1. 코드 이해하기 import React from 'react'; 리액트를 불러와서 사용할 수 있게 해주는 코드 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react모듈이 설치된다. 이로 인해 import 구문을 통해 리액트를 불러와 사용할 수 있게 된다. ▶ 번들러의 사용 위처럼 모듈을 불러와 사용하는 것은 브라우저엔 없는 기능이며, Node.js에서 지원하는 기능이다. 이런 기능을 브라우저에서 사용하기 위해 번들러(bundler)를 사용한다. 번들(bundel)은 묶는다는 뜻이며 파일을 묶듯이 연결한다. 리액트는 웹팩 번들러를 사용한다. 번들러 도구를 사용하면 import(또는 require)로 모듈을 ..

21-22/21-22 리액트 마스터 2021. 10. 4. 14:01

2. Conditionals ● Conditional Statements 1. 조건문이란 무엇인가? - 조건문이란 프로그램이 조건을 평가하여 결정을 내리고 코드에 논리를 넣는 것을 말한다. 2. IF문 프로그래밍에서 if명령문을 사용하여 조건에 따라 작업을 수행할 수도 있다. if (true) { console.log('This message will print!'); } // Prints: This message will print!코드 Instruction 1. let을 사용해서 변수를 선언한다. 2.if문을 작성하고 if문 안에 console.log()를 이용해 문자열을 넣는다. 3.sale을 false로 변경시킨 후 관찰한다. let sale = true; sale = false; if (sale..

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

2. Conditionals 일상생활에서 우리는 상황에 따라 결정을 내립니다. 예를 들어, 피곤하면 잠을 자고 그렇지 않으면 일어나서 하루를 시작합니다. 이러한 if-else 결정은 조건문을 작성하여 코드로 모델링할 수 있습니다. 조건문은 특정 조건을 검사하고 조건에 따라 작업을 수행합니다. 2-1. if 문 if 옆 괄호 () 안에 참 또는 거짓으로 평가하는 조건이 제공됩니다. 해당 조건의 결과가 true이면 중괄호 {} 안의 코드가 실행되고 조건의 결과가 false이면 중괄호 안의 블록이 실행되지 않습니다. if (true) { console.log('Time to buy!'); } 2-2. if…else 문 if 문의 조건의 결과가 false일 때 else문의 코드가 실행됩니다. if (false)..

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

INDEX 1. Introduction ● Introduction to JavaScript ● Variables 1. Introduction ● Introduction to JavaScript 1. What is JavaScript? 자바스크립트는 대부분의 웹 사이트에서 동적 동작을 수행하도록 하는 언어이다. 자바스크립트는 가장 최신의 웹브라우저 언어로 가장 잘 알려져있다. 초기에는 다소 조잡한 면이 있어 미흡한 평가를 받았으나 점차 업그레이드를 거듭하며 강력하고, 유연하고, 빠른 프로그래밍 언어로 등극했다. 다음의 학습을 통해 필수적으로 알아둬야 할 자료형과 내장 객체에 대해 알아보자. 2. Console 콘솔 콘솔은 메시지를 출력하는 패널이다. 프로그래머는 화면에 내용을 출력하기 위해 콘솔에 직접적으..

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

1. Introduction 1-1. Introduction to JavaScript JavaScript는 웹 페이지에서 사용자로부터 특정 이벤트 혹은 입력값을 받아 동적 처리를 목적으로 개발된 객체 기반의 프로그래밍 언어입니다. JavaScript는 웹 개발의 핵심이기 때문에 이를 기반으로 웹 개발뿐만 아니라 더 많은 것을 개발할 수 있습니다. 지금부터 JavaScript 시작합니다! 1-1-1. Console (콘솔) console.log(5); Console은 개발자에게 오류 같은 중요한 메시지를 표시하는 패널입니다. console.log()를 쓰면 괄호 안에 넣은 내용이 콘솔에 출력됩니다. 1-1-2. Comments (주석) console.log(5); // Prints 5 /* This is ..

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