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

1. 왜 리액트인가? 자바스크립트만으로도 규모가 큰 애플리케이션을 만들 수 있는 시대가 왔다. 하지만 순수 자바스크립트만으로 프런트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하기는 힘들다. 이를 해결하기 위해 Angular, Vue.js등 수많은 프레임워크가 조금씩 다른 관점에서 관리를 위한 노력을 해왔다. Angular와 Vue.js같은 프레임워크는 주로 MVC, MVW 아키텍처로 애플리케이션을 구조화한다. 이 구조들이 가진 공통점은 모델(Model)과 뷰(View)가 있다는 것이다. 모델, 뷰, 컨트롤러 ▪ 모델 : 애플리케이션에서 사용하는 데이터를 관리하는 영역 ▪ 뷰 : 사용자에게 보이는 부분 ▪ 컨트롤러 : 프로그램이 사용자에게서 어떤 작업(ex: 버튼 클릭, 텍스트 입력)을 받으면 모델 ..

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

1. 노드의 핵심 개념 (1) 서버, 노드 서버: 네트워크를 통해 클라이언트 요청에 응답하는 컴퓨터 또는 프로그램 노드: 자바스크립트 런타임, 서버 애플리케이션을 실행하는 데 주로 사용됨 더보기 런타임: 특정 언어로 만든 프로그램들을 실행할 수 있는 환경 (2) 이벤트 기반(event-driven) 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식 (ex. 이벤트 리스너에 콜백 함수 등록) 이벤트 루프(event loop) 예시 코드 function run() { console.log(‘5초 후 실행’); } console.log(‘시작’); setTimeout(run, 5000); // 5초 후에 run 실행 console.log(‘끝’); 결과 더보기 시작 끝 5초 후 실행 이벤트 루프 : 이벤..

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