[React] 리액트의 정의, 장단점

리액트(React) - 사용자 인터페이스(User Interface, UI)를 만들기 위한 javascript 라이브러리 - 즉, 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위해 javascript의 기능 모음집 리액트의 장점 빠른 업데이트 & 렌더링 속도 : 웹사이트 탐색 시 화면 내용이 빠르게 바뀜 : 이를 위해 내부적으로 virtual DOM(Document Object Model) 사용 -> 업데이트 해야 할 최소한의 부분만 찾아서 업데이트 컴포넌트(Component) 기반 : 레고 블록 조립하듯 컴포넌트들을 모아서 개발 재사용성(Reusability) : 소프트웨어 및 모듈을 다른 곳에서도 사용 가능 : 개발 기간 단축 : 유지 보수가 용이 메타(Meta)의 지원 : 꾸준한 버전 관..

• format_list_bulleted Front-end/React
• · 2023. 5. 17.
• textsms

[React] 개발 환경 설정(Node.js, npm)

Node.js - javascript로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경 npm(node package manager) - node.js를 위한 패키지 매니저 - 프로젝트에서 필요로 하는 다양한 외부 패키지들의 버전과 의존성을 관리하고 편하게 설치 및 삭제가 가능하게 함 - node.js를 설치하면 자동으로 탑재 Node.js 설치 1. https://nodejs.org/en/에 접속한다 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 왼쪽(안정화된 버전)과 오른쪽(최신 버전) 중 더 맞는 버전 다운로드 3. cmd 창을 열어서 설치 확인 : --version 명령어..

• format_list_bulleted Front-end/React
• · 2023. 5. 17.
• textsms

[JavaScript] 함수(function)

함수(function) - 입력을 받아서 정해진 출력을 하는 것 javascript에서 함수를 만드는 방법 1. function statement 사용 function 함수이름(파라미터) { // 실행문 } function sum(a, b) { return a + b; } document.write(sum(10, 20)) // 30 2. arrow function expression 사용 const 함수이름 = (파라미터) => { // 실행문 } const multiply = (a, b) => { return a * b; } document.write(multiply(10, 20)) // 200

• format_list_bulleted Front-end/JavaScript
• · 2023. 5. 17.
• textsms

[JavaScript] 연산자

대입 연산자(Assignment operator) - 값을 대입하기 위해 사용하는 연산자 - 오른쪽 값을 왼쪽에 대입 왼쪽 = 오른쪽 let a = 10; 산술 연산자(Arithmetic operator) - 사칙연산(+, -, *, /), 나머지 연산자(%), 지수 연산자(**) 등이 존재 let a = 10; let b = 3; document.write(a + b); // 13 document.write(a - b); // 7 document.write(a * b); // 30 document.write(a / b); // 3.3333333 document.write(a % b); // 1 document.write(a ** b); // 1000 증감 연산자 - postfix 방식 : 선 연산 후 ..

• format_list_bulleted Front-end/JavaScript
• · 2023. 5. 17.
• textsms

[JavaScript] 자료형

자료형 - 데이터를 다루기 위해 미리 정해놓은 데이터 유형 - 동적 타이핑(Dynamic Typing) : 데이터를 넣은 시점에 자료형 결정 - var, let 등으로 선언 숫자형 - 숫자를 다루기 위한 자료형 - 정수나 실수 // Number type let n1 = 1234; let n2 = 5.678; 문자형 - 문자와 문자열을 다루기 위한 자료형 - 문자(열)를 큰따옴표나 작은따옴표로 감싸줌 // String type let s1 = "hello"; let s2 = 'world'; 불리언(Boolean)형 - 값이 true, false로만 이루어진 자료형 // Boolean type let b1 = true; let b2 = false; Null형 - 값이 Null인 자료형 // Null type..

• format_list_bulleted Front-end/JavaScript
• · 2023. 5. 17.
• textsms

[JavaScript] 문자열 메소드 - toUpperCase(), indexOf(), trim()

toUpperCase() - 문자열의 내용을 모두 대문자로 출력 문자열.toUpperCase() document.write("Hello World".toUpperCase()); // HELLO WORLD indexOf() - 문자열에서 특정 문자가 몇 번째 위치에 있는지 찾음 - 문자가 없으면 -1 반환 문자열.indexOf(문자) document.write("Hello World".indexOf('o')); // 4 trim() - 문자열의 공백을 없앰 문자열.trim() document.write(" Hello ".trim()); // Hello

• format_list_bulleted Front-end/JavaScript
• · 2023. 4. 8.
• textsms

[JavaScript] 이벤트 - onclick, onchange, onkeydown

onclick - 사용자가 요소를 클릭하면 = 연산자 뒤에 있는 자바스크립트 코드 실행 onchange - 값이 변경되면 = 연산자 뒤에 있는 자바스크립트 코드 실행 onkeydown - 사용자가 키를 입력할 때 = 연산자 뒤에 있는 자바스크립트 코드 실행

• format_list_bulleted Front-end/JavaScript
• · 2023. 4. 8.
• textsms