odada

React Package 설치Create React App 을 사용하여 React 프로젝트를 생성하고, React 프로젝트에 필요한 패키지를 설치하는 방법을 알아봅니다.1. Create React App 이란?Create React App은 React 프로젝트를 생성할 때 필요한 환경을 구축해주는 도구입니다.Create React App 공식문서장점별도의 설정 없이 바로 React 프로젝트를 생성할 수 있습니다.초기 개발 시간 단축, 개발 생산성 향상Babel, Webpack 같은 도구들을 별도로 설치할 필요가 없습니다.프로젝트에 필요한 설정이 미리 적용되어 있고 패키지가 설치되어 있습니다.단점빌드 설정을 커스터마이징하기 어려움리액트 앱 구조에 대해 이해하기 어려울 수 있음원..

1. React란 무엇인가? React (ReactJS)는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리 원저자 : Jordan Walke 개발자 : 페이스북 및 공동체 저장소 : https://github.com/facebook/react 프로그래밍 언어 : javascript 종류 : 자바스크립트 라이브러리 웹사이트 : https://react.dev/ 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 자주 사용되는 기능을 정리해 모아 놓은 것 UI 라이브러리 웹사이트를 만들기 위해서는 HTML, CSS, JS를 모두 잘 다뤄야 하는데, 이러한 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어진 것이 리액트이다. 2. React의 장점 빠른 업데이트와 렌더링 속도 컴..

클래스 (class) Class는 객체를 만들기 위한 템플릿이며, 프로토타입 기반 상속을 보다 명시적이고 간편하게 사용할 수 있도록 해줍니다. class를 통해 원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 여러개 만들 수 있습니다. 클래스=붕어빵 틀, 객체=붕어빵 0. 클래스의 개념 "커피숍"을 운영한다고 가정하고, 커피숍에서 판매하는 다양한 종류의 커피를 클래스를 사용하여 모델링해 보겠습니다. - 클래스를 사용하지 않은 경우 // 생성자 함수를 사용하여 커피 객체를 생성 function OrderCoffee(name, price, size) { // 커피의 속성 this.name = name this.price = price this.size = size } // 커피의 가격을 사이즈에 따라..

node.js 란? Chrome V8 Javascript 엔진으로 빌드된 JavaScript 런타임으로 자바스크립트를 브라우저 밖에서도 사용할 수 있게 해주는 런타임 환경이다. Chrome V8 Javascript 엔진 : 자바스크립트의 문법을 해석하고 동작시켜줄 수 있는 엔진 JavaScript 런타임 : 자바스크립트 언어가 동작하는 환경 쉽게 말해 node.js를 사용해 브라우저 및 컴퓨터를 제어할 수 있다. 프론트앤드가 node.js를 알아야 하는 이유 컴퓨터에서 제어하기 위한 용도는 아니지만 웹페이지를 개발하기 위한 도움을 받는 용도로 사용한다. html, css, js 만으로 웹사이트 개발을 할 순 있지만 그 과정이 약간 비효율적이다. 개발을 도와주는 여러가지 모듈들을 도움을 받으면 효율적으로 ..

1. 함수 선언하기 함수 선언문과 표현식의 차이점 함수 선언문은 호이스팅이 일어나지만, 함수 표현식은 호이스팅이 일어나지 않는다. // 함수 선언문 (Declaration) function helloA() {} // 함수 표현식 (Expression) const helloB = function () {} helloA() // 함수 호출 helloB() // 함수 호출 2. 호이스팅이란? 함수 선언문이 코드의 최상단으로 끌어올려지는 것을 말한다. 함수 선언문은 선언하기 전에 호출해도 정상적으로 실행된다. hello1() function hello1() { console.log('hello1') // hello1 } 하지만, 함수 표현식은 호이스팅이 일어나지 않기 때문에, 함수 표현식을 선언하..

1. 구조 분해 할당 (Destructuring assignment) 객체나 배열을 변수로 '분해'할 수 있게 하는 문법 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 표현식 배열의 구조 분해 const arr = [1, 2, 3] // const a = arr[0] // const b = arr[1] // const c = arr[2] const [a, b, c] = arr // 구조 분해 할당 // 배열 데이터를 만든 후 arr 변수에 할당 console.log(a, b, c) // 1 2 3 - 각각의 변수가 미리 할당되어 있을 경우 let a = 0 let b = 0 let c = 0 const arr = [1, 2, 3] // 초기화 후 재할당 가능 ;[a, b, c]..

1. 산술(Arithmetic) 연산자 +, -, *, /, % // 덧셈 연산자 console.log(1 + 2) // 3 // 뺄셈 연산자 console.log(5 - 7) // -2 // 곱셈 연산자 console.log(3 * 4) // 12 // 나눗셈 연산자 console.log(10 / 2) // 5 // 나머지 연산자 console.log(7 % 5) // 2 function isEven(num) { return num % 2 === 0 } console.log(isEvent(3)) // false console.log(isEvent(4)) // true 2. 할당(Assignment) 연산자 a = b const a = 1 console.log(a) // 1 let aa = 1 aa +=..

html, css : 모양 기반 javascript : 데이터 기반 0. ECMAScript ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 위키백과 : https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 1. String (문자) '가나다라마바사' string은 문자열을 나타내는 데이터 타입 const string1 = "Hello" // 큰따옴표 const string2 = 'odada!' // 작은따옴표 const string3 = `Hello World! ${st..

DOM Dom (Document Object Modal) 이란 HTML 문서를 객체로 표현한 것으로 JS에서 HTML을 제어할 수 있게 해줍니다. Node vs Element 노트(Node) : HTML 요소, 텍스트, 주석 등 모든 것을 의미 요소(Element) : HTML 요소를 의미 DOM node 란? // 지정된 id값을 가진 요소를 반환 document.getElementById("someid"); // 지정된 클래스 이름을 가진 모든 하위 요소의 개체를 반환 document.getElementsByClassName("someclass"); // 지정된 태그 이름을 가진 요소의 HTML 모음을 반환 document.getElementsByTagName("LI"); // 지정된 class와 일..

mdn 자바스크립트 기본 https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics JavaScript 는 뭔가요? JavaScript 는 웹 브라우저에서 사용하기 위하여 만들어진 HTML과 웹의 프로그래밍 언어입니다. 왜 JavaScript를 공부해야합니까? JavaScript는 모든 웹 개발자 가 배워야 하는 3 가지 언어 중 하나입니다 . 웹 페이지의 내용을 정의하는 HTML 웹 페이지의 레이아웃을 지정하는 CSS 웹 페이지의 동작을 프로그래밍하는 JavaScript 웹 개발 JavaScript는 웹 애플리케이션의 동적인 기능을 구현하기 위해 필수적입니다. 웹 페이지에서 사용자와의 상호작용, 데이..