INDEX 3장 컴포넌트 1. 클래스형 컴포넌트 ● 컴포넌트를 선언하는 두 가지 방식 2. 첫 컴포넌트 생성 2.1 src 디렉터리에 MyComponent.js 파일 생성 2.2 코드 작성하기 2.3 모듈 내보내기 및 불러오기 3. props 3.1 JSX 내부에서 props 렌더링 3.2 컴포넌트 사용 시 props 값 지정하기 3.3 props 기본값 설정: defaultProps 3.4 태그 사이의 내용을 보여주는 children 3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기 3.6 propTypes를 통한 props 검증 * isRequired를 사용하여 필수 propTypes 설정 4. state 4.1 클래스형 컴포넌트의 state 4.2 함수 컴포넌트에서 useState 사용..

21-22/21-22 리액트 스타터 -2 2021. 11. 8. 18:49

INDEX 2장 JSX ● 2.1 코드 이해하기 ● 2.2 JSX란? ● 2.3 JSX의 장점 ● 2.4 JSX 문법 ● 2.5 ESLint와 Prettier적용하기 ● 정리 ● 2.1 코드 이해하기 import React from 'react'; 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. import구분을 통해 리액트를 불러와서 사용 가능하다. *Node.js에서는 import대신 require을 사용한다. 번들러: 파일을 묶는다. 번들러를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. -리액트에서는 주로 웹팩을 사용한다. (편의성, 확장성) 로더:파일을 불러온다. *css-loader, file-loader..

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

INDEX 1장 리액트 시작 1. 왜 리액트인가? ● 리액트의 이해 2. 리액트의 특징 ● DOM이란? ● Virtual DOM ● 기타 특징 3. 작업 환경 설정 ● Node.js와 npm, yarn ● 에디터 설치 ● Git 설치 ● create-react-app으로 프로젝트 만들기 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 1. 왜 리액트인가? ● 리액트의 이해 자바스크립트는 단순한 스크립트 언어에 불과하지만 웹 애플리케이션에서 가장 핵심적인 역할 슬랙, VS CODE 등의 데스크톱 애플리케이션 ➨ 일렉트론으로 개발 자바스크립트의 여러 프레임워크를 사용하여 페이스북, 디스코드 등 수많은 애플리케이션 개발 # 일렉트론: 자바스크립트로 데스크톱 앱을 개발하는 도구 ..

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

8. Objects ● Objects 1. Introduction to Objects 객체를 들어가며 자바에는 7개의 데이터 타입이 있다. - string, number, boolean, null, undefined, symbol, objects -자바스크립트(Javascript)의 기본 타입은 객체(Object) 객체를 사용하면 실제 사물을 모델링하거나 데이터 구조를 구축할 수 있다. 사과(apple), 테이블(table), 아기(baby), 지렁이(worm)을 객체로 만들 수 있다. *객체: 속성값과 행동을 가진 데이터 타입 *객체 모델링: 객체의 속성과 동작을 추려내어 객체로 구현하는 과정 2. Creating Object Literals 객체 리터럴 만들기 객체를 선언할 때 기본구조 - 객체를 변..

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

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

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

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

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

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