2.1 코드 이해하기 import React from 'react'; 위 코드는 리액트를 불러와서 (import) 사용할 수 있게 해 주는 코드입니다. 리액트 프로젝트 제작 시 node_moudles 디렉터리 생성됨 → 이 디렉터리 안에 있는 react 모듈을 설치합니다. 모듈을 불러와서 사용하기는 브라우저에는 없던 기능입니다. → 브라우저에서도 사용하기 위해 **번들러(bunlder)**를 사용합니다. (Node.js에서 지원합니다.) 번들러 (bundler) 종류: 웹팩, Parcel, browserify 등 이 중, 리액트에서는 웹팩을 사용합니다. import(or require)로 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 줍니다. 최적화 과정에서 여러 개의 파일로 분리..

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

1.1 왜 리액트인가? 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효고를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 일렉트론(자바스크립트로 데스크톱 애플리케이션을 만들 수 있는 프레임워크)으로 슬랙, VS Code 등을 개발하고, 자바스크립트로 크로스 플랫폼 애플리케이션을 개발할 수 있는 여러 프레임워크를 사용해 페이스북, 디스코드 등의 애플리케이션도 개발했습니다. 이러한 프레임워크들은 주로 MVC(Model-View-Controller) 아키텍처, MVVM(Model-View-View Model) 아키텍처를 사용합니다. 이들이 지닌 공통점은 모델과 뷰가 있다는 것인데, 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역,..

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

5. 노드 내장 모듈 사용하기 (1) os os모듈에 운영체제의 정보가 담겨 있어 해당 정보를 가져올 수 있음 process 객체와 겹치는 부분이 있음 일반적인 웹 서비스에는 사용빈도가 높지 않으나 운영체제별로 다른 서비스를 제공하고자 할 때 유용 os.arch(): 운영체제 아키텍처, process.arch와 동일 os.platform(): 운영체제 플랫폼, process.arch와 동일 os.type(): 운영체제 종류 os.uptime(): 운영체제 부팅 이후 흐른 시간(초) cf)process.uptime(): 노드의 실행시간 os.hostname(): 컴퓨터의 이름 os.release(): 운영체제의 버전 os.homedir(): 홈 디렉터리의 경로 os.tmpdir(): 임시 파일 저장 경로 ..

21-22/21-22 Node.js 2021. 10. 30. 21:34

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

8. Objects 8-1. Objects 객체를 빼놓고 자바스크립트를 논하는 것은 불가능할 정도로, 객체는 자바스크립트의 많은 곳에 스며들어 있습니다. 객체를 배우지 않더라도 이미 자바스크립트를 사용하고 있었으니까요! 자바스크립트에서 다루는 데이터 유형은 총 7개인데, 이 중 6개는 기본 데이터 유형인 String, number, boolean, null, undefined, symbol입니다. 그리고 마지막 유형은 이번에 다룰 Object, 객체입니다. 8-1-1. Creating Object Literals (객체 리터럴 만들기) 객체는 다른 자바스크립트 유형과 마찬가지로 변수에 할당할 수 있습니다. 객체 리터럴을 지정하기 위해서는 아래와 같이 {}, 중괄호를 사용합니다. let spaceship ..

21-22/21-22 리액트 스타터 -1 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

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