I. 컴포넌트 애플리케이션의 사용자 인터페이스를 설계를 할 때 사용자가 볼 수 있는 요소들은 여러 컴포넌트로 구성되어 있다. 컴포넌트는 단순한 템플릿 이상의 기능을 갖추고 있다. 데이터가 주어지면 UI를 구성 라이프사이클 API 이용 컴포넌트가 화면에서 나타났을 때, 사라질 때, 변화가 일어날 때에 작업 수행 지시 가능 임의 메서드 작성하여 기능들을 구현 1. 함수 컴포넌트 VS 클래스형 컴포넌트 컴포넌트를 선언하는 방식에는 두가지가 있다. 함수 컴포넌트, 클래스형 컴포넌트이다. 함수 컴포넌트(2장에서 봤던 App 컴포넌트가 함수 컴포넌트임) 클래스형 컴포넌트에 비해 선언하기 편리 메모리 자원 적게 사용, 빌드 후 결과물의 파일 용량이 적음 (클래스형 컴포넌트와 큰 차이 없음) state 및 라이프사이클..

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

I. 코드 이해하기 1. import 구문 import React from 'react'; //react 모듈에서 React 컴포넌트를 불러오는 것 : 특정 파일을 불러오는 것으로, 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이며, 브라우저가 아닌 환경에서 JS를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능이다. 브라우저에서 사용하려면 번들러(bundler) 사용해야 한다.[ -> 파일을 묶듯이 연결] - 번들러의 예시 : 웹팩, Parcel, browerify 등 -> 리액트 프로젝트에서는 주로 웹팩을 사용한다( ∵ 편의성과 확장성이 비교적 뛰어나다) - 웹팩의 로더 - SVG/CSS 파일을 불러와서 사용한다 ( 별도의 설정이 필요없어 편리하다) ◎ 최신 JS로 작성된 ..

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

I. 왜 리액트(React)인가? 최근 몇 년간 자바스크립트(JS, JavaScript)는 개발자들의 뜨거운 관심을 받고 있다. JS는 단순한 스크립트 언어를 넘어 웹 애플리케이션에서 가장 핵심적인 역할로 발돋움했다. 그러나 JS만으로는 프런트 엔드 사이드쪽의 애플리케이션 구조를 관리하기에는 무리가 있다. 이를 해결하기 위해 React, Angular, Ember.js 등 수많은 프레임워크들이 개발되었다. 1. 왜 리액트인가? 프론트 엔드 개발을 하다보면 MVC, MVVM, MVW 등과 같이 MV~로 시작되는 아키텍처들을 들어볼 수 있다. 코드 개발시 규칙을 만들어 반복되는 것을 패턴으로 만든다. 이 패턴을 모두가 따르도록 하는 구조를 아키텍처라고 한다. UI(User Interface)가 만들어진 후 ..

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

8. Objects 8-1. Objects 객체를 배우다보면 생각보다 배우지 않았는데도 익숙할 것입니다. 객체는 자바스크립트에 많은 곳에 사용되고 있어서 배우지 않아도 사용을 하고 있었기 때문에 익숙했을 것입니다. 자바스크립트에서 다루는 데이터의 유형은 총 7개인데, string, number, boolean, null, undefined, symbol이고 마지막으로 Object가 있습니다. 이번에는 마지막 유형인 Objects, 객체에 대해서 다룰 것입니다. 8-1-1. Creating Object Literals 객체는 다른 자바스크립트 유형과 같이 변수에 할당할 수 있습니다. 객체 리터럴을 지정하기 위해서는 중괄호 {}를 사용합니다. let spaceship = {}; // spaceship is ..

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

7. Itereators 7-1. Higher-Order-Functions 고차함수는 다른 함수를 인수로 받거나 반환값을 함수로 내보내는 함수입니다. 7-1-1. Functions as Data Javascript 함수는 언어의 다른 데이터 유형처럼 작동합니다. 변수에 함수를 할당할 수 있고 새로운 변수에 재할당할 수 있습니다. const announceThatIAmDoingImportantWork = () => { console.log("I’m doing very important work!"); }; 코드의 예시를 보면 함수의 이름이 길어 코드의 가독성을 해칩니다. 이럴 때 위에 설명에서 말했던 것처럼 함수를 변수에 할당하는 방법을 사용하면 됩니다. const busy = announceThatIAm..

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

# 06 Loops 1) The For Loop - 반복 변수와 3가지 표현을 포함하며, 이들은 세미콜론(;)으로 구분된다. (1-1) 초기식 - 반복문의 시작을 알리고, 반복 변수 선언에 사용된다. (1-2) 조건식 - 참/거짓을 판별하며, 거짓인 경우 반복을 중지한다. (1-3) 변환식 - 변수 증감 2) Looping in Reverse > 조건식의 부등호 방향과 변환식의 기호 ( + - )의 수정을 통해 배열을 역으로 출력할 수 있다. 3) Looping through Arrays > 배열에서 for 문 사용 시, 조건식에서 .length 메소드를 사용한다. 4) Nested Loops ( 중첩 반복문 ) > 두 배열의 요소를 비교할 때 중첩 반복문이 사용된다. 5) The While Loop (..

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

#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

#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

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

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