[React] React 사용을 위한 Node.js 설정 및 사용법
·
Web Frontend/React
Node.js 설치Node.js 공식 사이트에서 LTS 버전으로 설치https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org 설치 후 node -v, npm -v 명령어로 설치 여부 확인. 패키지 설정패키지 -> Node.js에서 사용하는 프로그램의 단위npm init 명령어를 이용해 패키지를 생성할 수 있다. 패키지 생성이 완료되면 package.json 이라는 설정 ..
[JavaScript] JS의 비동기 처리 (콜백 함수, Promise, Async & Await)
·
Web Frontend/JavaScript
동기와 비동기동기-> 여러개의 작업을 순서대로, 하나씩 표현하는 방식여러 개의 작업이 있을 때 각 작업을 순서대로 처리하는 것을 동기적으로 처리한다라고 표현한다.즉, Task A, Task B, Task C가 있다고 가정한다면, Task A가 종료되면 Task B가 실행되고, Task B가 종료되면 Task C가 실행되고 최종적으로는 순서대로 완료하는 흐름으로 표현할 수 있다. 프로그래밍에서 이렇게 작업을 실행하고 처리해주는 단위를 쓰레드라고 부른다.동기적인 방식의 단점but, 동기적인 방식에는 치명적인 단점이 존재한다.-> Task가 오래 걸리는 작업이라면 작업을 처리하기 전 까지는 다음 Task를 실행할 수 없게되어 전체 프로그램의 성능이 악화되어 버리는 치명적인 단점이 존재한다. 이러한 단점을 해..
[JavaScript] 함수 표현식과 화살표 함수 & 콜백 함수(Callback)
·
Web Frontend/JavaScript
함수 표현식과 화살표 함수1. 함수 표현식-> 익명함수는 function () 형태로 만들 수 있다.// 1. 함수 표현식function funcA() { console.log("funcA");}let varA = funcA; // 함수가 아니라 함수 자체를 넣어줌.console.log(varA);// f funcA() {// console.log("funcA");//}// 출력varA(); // 함수를 실행let varB = function funcB() { console.log("funcB");};varB();// funcB(); -> 이건 오류, funcB는 사용할 수 없음.let varC = function () { // 익명함수 console.log("funcB");};console..
[JavaScript] 연산자
·
Web Frontend/JavaScript
연산자1. 대입 연산자-> = 연산자// 1. 대입 연산자 (=)let var1 = 1;2. 산술 연산자-> +, -, *, /, % 연산자// 2. 산술 연산자let num1 = 3 + 2;let num2 = 3 - 2;let num3 = 3 * 2;let num4 = 3 / 2;let num5 = 3 % 2;let num6 = 1 + 2 * 10;console.log(num6); // *가 우선순위가 높으므로 21 출력.3. 복합 대입 연산자-> 산술 + 대입 연산자// 3. 복합 대입 연산자 (산술 + 대입)let num7 = 10;num7 += 20; // num7 = num7 + 20;num7 -= 20;num7 *= 20;num7 /= 20;num7 %= 10;4. 증감 연산자-> 후위 연산,..
[JavaScript] 형 변환
·
Web Frontend/JavaScript
형 변환1. 묵시적 형 변환-> 자바스크립트 엔진이 오류를 발생시키지 않기 위해서 알아서 형 변환 하는 것.// 1. 묵시적 형 변환// -> 자바스크립트 엔진이 오류를 발생시키지 않기 위해서 알아서 형 변환 하는 것.let num = 10;let str = "20";const result = num + str; // 묵시적으로 String으로 형 변환. "10" + "20" = "1020"console.log(result); // "1020"2. 명시적 형 변환-> 프로그래머 내장함수 등을 이용해서 직접 형 변환을 명시// 2. 명시적 형 변환// -> 프로그래머 내장함수 등을 이용해서 직접 형 변환을 명시// -> 문자열 -> 숫자let str1 = "10";let strToNum1 = Number(..