#05 Arrays >> 데이터를 조직화하고 저장하는 것은 프로그래밍의 근본적 개념이다. 그 방법 중 하나가 리스트를 만드는 것이며, 자바스크립트에서는 그것을 Array ( 배열 ) 이라고 한다. 1) Create Array : 배열 선언 ex) ['element example', 10, true] >> square brackets 안에 array elements를 나열하는 것을 통해 배열을 선언할 수 있다. 2) Accessing Elements : 배열 요소에 접근하기 ex) let cities = [ 'New York', 'Seoul', 'Beijing' ]; cities[0]; > 배열이름과 인덱스를 활용해 배열 요소에 접근할 수 있다. **index #가 배열의 크기보다 큰 경우에는 undefi..

22-23/22-23 리액트 스타터 2 2022. 9. 22. 10:04

데이터를 구성하고 저장하는 것은 프로그래밍의 기본 개념입니다. 실생활에서 데이터를 구성하는 한 가지 방법은 목록을 만드는 것인데, 배열은 JavaScript의 목록을 만드는 방법입니다. 배열은 문자열, 숫자, 부울을 포함한 모든 데이터 유형을 저장할 수 있으며, 목록과 마찬가지로 배열은 순서가 지정됩니다. 즉, 각 항목에는 번호가 매겨진 위치가 있습니다. 1. 배열 생성 배열을 생성할 수 있는 한 가지 방법은 배열 리터럴을 사용하는 것입니다. 배열 리터럴은 항목을 [대괄호]로 묶어 배열을 만듭니다. 앞서 말한 것처럼 배열은 모든 데이터 유형을 저장할 수 있으며, 같은 데이터 유형을 모두 보유한 배열 또는 다른 데이터 유형을 보유한 배열을 생성할 수 있습니다. 배열 예제의 구문을 자세히 살펴보겠습니다. 배..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:04

스코프(범위)는 프로그래밍에서 중요한 개념으로, 변수가 선언되는 구역입니다. 전역 변수는 프로그램 내 어디에서나 접근 가능하지만 지역 변수는 특정 구역에서만 사용할 수 있습니다. 1. 블록 및 스코프 (Blocks and Scope) 스코프에 대해 이야기하기 전에 먼저 블록에 대해 이야기를 하자면, 블록은 {중괄호} 안에 있는 코드를 말합니다. 다음 예시는 if 명령문에서 사용된 블록입니다. 이처럼 블록은 하나 이상의 명령문을 함께 그룹화하는 데 도움이 되며 코드의 구조를 표시하는 데 중요한 역할을 합니다. 2. 전역 스코프 (Global Scope) 변수는 블록 외부 또는 내부에 존재할 수 있기 때문에 블록과 관련하여 스코프를 생각합니다. 전역 스코프에서 변수는 블록 외부에서 선언되며, 이러한 변수를 ..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:03

#04 Scope **범위 > 변수가 얼마만큼 (어디까지) 적용되는지를 정의한다. > 즉, 변수가 어디까지 접근 가능한지를 알려준다. 1) Blocks and Scope :{ ... } > 중괄호 안을 의미하며, 코딩할 때 구조를 파악하기 쉽다. 2) Global Scope ( 전역 변수 ) : block 밖에서 선언하며, 프로그램의 어느 코드에서나 적용 가능하다. 3) Block Scope ( 지역 변수 ) : block 안에서 선언하며, 그 안에서만 사용 가능하다. 4) Scope Pollution : 모든 변수를 전역 변수로 설정하면 좋을 것 같지만, 너무 많으면 실제로는 좋지 않다. 전역 변수 선언 시, global namespace로 가고, 프로그램 종료 후에도 계속 남아 있는 것 또는 다른 범..

22-23/22-23 리액트 스타터 2 2022. 9. 22. 10:03

I. FUNCTIONS 1. What are Functions? 프로그래밍에서 특정 작업을 여러 번 수행하기 위해 만든 것이 Function(함수)입니다. 코드 블록을 함수로 블록화하여 필요할 때마다 해당하는 코드 블록을 재사용합니다. 2. Function Declarations / 함수 선언 JavaScript에서는 함수 선언을 통해 함수를 생성할 수 있습니다. 함수 선언은 함수의 이름 또는 식별자를 할당합니다. 함수 선언 방법은 다음과 같습니다. 함수의 선언문은 fucntion이라는 키워드로 시작됩니다. 함수 이름 혹은 식별자로 함수를 구분하며, 뒤에 ( )가 붙습니다. 함수 중괄호 { }로 묶인 부분은 특정 작업을 수행하는 함수 본문입니다. greetWorld(); // Output: Water t..

22-23/22-23 리액트 스타터 2 2022. 9. 22. 10:02

4. Functions 함수는 자바스크립트의 기본 구성 요소 중 하나로, 특정한 작업을 수행하기 위해 일련의 명령문을 그룹화한 재사용이 가능한 코드 블록입니다. 4-1. 함수 선언 함수를 사용하기 위해선 함수를 선언해야 합니다. 함수 선언식은 function 키워드, 함수의 이름 또는 식별자, 중괄호로 둘러싸인 함수의 내용으로 구성되어 있습니다. 4-2. 함수 호출 함수는 함수를 선언하는 것만으로는 동작하지 않습니다. 함수 이름 뒤에 괄호를 사용하여 다른 곳에서 함수를 호출하거나 실행할 수 있습니다. 함수를 호출하면 함수 내부의 모든 코드가 실행됩니다. 함수 호출은 필요한 만큼 얼마든지 반복할 수 있습니다. function sayThanks() { console.log('Thank you!'); } //..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:02

I. CONDITIONAL STATEMENTS 01 What are Conditional Statements? 우리는 인생을 살아가면서 상황에 맞는 선택을 자주 합니다. 피곤하면 잠자리에 들고, 그렇지 않으면 일어나서 하루를 시작합니다. JavaScript에서는 if-else 조건문을 통해 조건에 따른 다른 상황들을 표현할 수 있습니다. 2. if Statement / if 문 if문은 ( ) 안의 내용이 true일 때 실행됩니다. ( ) 안에는 true 또는 false로 평가되는 조건이 제공됩니다. 중괄호 { } 안의 코드는 조건이 true면 실행되고, false면 실행되지 않습니다. if (true) { console.log('This message will print!'); } // Output: ..

22-23/22-23 리액트 스타터 2 2022. 9. 22. 10:01

[CONDITIONALS] 우리는 일상생활에서 다양한 상황에 따라 어떻게 행동할지 결정을 내립니다. 예를 들어 아침에 일어나서 피곤하다면 우리는 다시 잠에 드는 선택을 할 것이고, 피곤하지 않다면 하루를 시작할 것입니다. 이번 장에서는 조건문을 통해 이러한 상황들을 코드로 만들어 봅시다. 3-1. If Statement 우리는 종종 조건에 따라 작업을 수행합니다. 프로그래밍에서는 If문을 사용하여 조건에 따라 작업을 수행할 수 있습니다. if (true) { console.log('This message will print!'); } // Prints: This message will print! 위의 예시를 통해서 If문의 구성 요소를 알아봅시다. If 키워드는 () 뒤에 코드블럭인 { }로 구성됩니다..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:01

I. INTRODUCTION TO JAVASCRIPT 1. What is JavaScript? JavaScript는 웹 개발의 핵심으로 웹 사이트에 움직임을 주는 동적 처리를 가능하게 합니다. JavaScript는 발전을 거듭하며 현대 웹 브라우저의 주 언어로 자리 잡았습니다. JavaScript를 통해 다양한 라이브러리를 사용하고 서버 개발 등 여러 개발에 활용할 수 있습니다. 2. Console / 콘솔 Console(콘솔)은 개발자에게 오류 등의 중요한 메시지를 표시하는 패널입니다. 이 콘솔을 통해 화면에 원하는 항목을 표시할 수 있습니다. console.log( )를 통하여 ( )안의 내용을 출력할 수 있습니다. console.log(5); // Output: 5 일반적으로 JavaScript 코..

22-23/22-23 리액트 스타터 2 2022. 9. 22. 10:00

Variables (변수)는 값의 컨테이너입니다. 또한 설명적인 이름으로 데이터에 레이블을 지정하면서 이해도 높입니다. 변수 수행 작업은 다음과 같습니다. 1. 설명이 포함된 이름으로 변수를 만들기 2. 변수에 저장된 정보를 저장 또는 업데이트 3. 변수에 저장된 참조 또는 ‘가져오기’ 정보 변수 생성은 3가지로 var, let, const가 있습니다. ES6 도입 전에는 var만 사용이 가능했지만 도입 후 const, let 사용을 가능하게 했습니다. 1. var은 새 변수를 생성하거나 선언하는 javascript 키워드입니다. 2. let (1) 변수에 다른 값을 다시 할당할 수 있습니다. (2) 변수에 값을 할당하지 않고 변수를 선언할 수 있으며 undefined로 자동 초기화 됩니다. 3. con..

22-23/22-23 리액트 스타터 3 2022. 9. 22. 10:00

🔍 REPL 노드도 자바스크립트와 비슷한 콘솔을 제공하는데, 입력한 코드를 읽고(Read), 해석하고(Eval), 결과물을 반환하고(Print), 종료할 때까지 반복한다(Loop)고 해서 REPL(Read Eval Print Loop)이라고 부른다 ⇒ PEPL은 한두 줄짜리 코드를 테스트하는 용도로는 좋지만 여러 줄의 코드를 실행하기는 불편함 🔍 JS 파일 실행하기 콘솔에서 node [자바스크립트 파일 경로] 로 실행. REPL이 아닌 콘솔에서 입력해야 함 콘솔에서 REPL로 들어가는 명령어가 node, 노드를 통해 파일을 실행하는 명령어가 node [자바스크립트 파일 경로] 🔍 모듈로 만들기 노드는 코드를 모듈로 만들 수 있다는 점에서 자바스크립트와 다름 💡 모듈이란? 특정한 기능을 하는 함수나 변수들..

22-23/22-23 Node.js 2022. 9. 22. 10:00

🔍 ES2015+ 2015년 일어난 자바스크립트 문법의 대격변, ES2015 (a.k.a ES6)의 등장이 있었다. 📌 왜 ES2015+인가? 노드 6 버전부터 ES2015 문법을 사용할 수 있으며, 현재는 ES2022까지 등장한 상황이므로 ES2015+라 통칭하여 부른다. 🔍 꼭 알아두어야 하는 자바스크립트 문법 모음.zip 📌 const, let var과 유사한 변수 선언 방법이다. 그러나 var은 함수 스코프로 블록의 범위에 상관없이 사용할 수 있으나, const나 let는 블록 스코프로 블록 밖에서는 사용할 수 없다. 📌 템플릿 문자열 기존 문자열과 다르게 키보드 좌측 상단에 있는 백틱 문자로 감싼다. (다만 맥북은 백틱 대신 ₩가 나온다. 속상해라...) 백틱 안에 변수를 넣을 수 있는데, ${..

22-23/22-23 Node.js 2022. 9. 19. 19:00